instead of displaying a link on match cells, have a dedicated match column, which...
[Evergreen.git] / Open-ILS / web / vandelay / vandelay.html
1 <!-- # Copyright (C) 2008  Georgia Public Library Service
2 # Bill Erickson <erickson@esilibrary.com>
3 # This program is free software; you can redistribute it and/or
4 # modify it under the terms of the GNU General Public License
5 # as published by the Free Software Foundation; either version 2
6 # of the License, or (at your option) any later version.
7
8 # This program is distributed in the hope that it will be useful,
9 # but WITHOUT ANY WARRANTY; without even the implied warranty of
10 # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
11 # GNU General Public License for more details.
12 -->
13 <html>
14     <head>
15         <title>Vandelay</title>
16         <style type="text/css">
17             @import "/js/dojo/dojo/resources/dojo.css";
18             @import "/js/dojo/dijit/themes/tundra/tundra.css";
19             @import "/js/dojo/dijit/tests/css/dijitTests.css"; 
20             @import "/js/dojo/dojox/grid/_grid/Grid.css";
21             .container:after {content: ""; display: block; height: 0; clear: both; }
22             .form_table td { padding: 6px; }
23             table { border-collapse: collapse; }
24             .match_div {
25                 height: 95%;
26                 width: 95%;
27             }
28             .match_div a {
29                 color: red;
30                 font-weight:bold;
31             }
32             .match_div a:visited {
33                 color: red;
34                 font-weight:bold;
35             }
36             .tall { height:100%; }
37             .wide { width:100%; }
38             .hidden { display: none; }
39             #toolbar { margin-top: 0px; }
40             body { width:100%; height:100%; border:0; margin:0; padding:0; }
41             .progress {margin: 20px;}
42             .overlay_selected { 
43                 padding: 2px; 
44                 background: #d9e8f9;
45                 border: 1px solid red; 
46             }
47         </style>
48         <script type="text/javascript" djConfig="parseOnLoad: true,isDebug:false" src="/js/dojo/dojo/dojo.js"></script>
49         <script type="text/javascript" src='/js/dojo/openils/MarcXPathParser.js'></script>
50         <script type="text/javascript" src='vandelay.js'></script>
51     </head>
52     <body class="tundra tall">
53       <div dojoType="dijit.layout.LayoutContainer" orientation="vertical" class="tall">
54
55
56         <!-- navigation toolbar -->
57         <div dojoType="dijit.layout.ContentPane" layoutAlign='top'>
58             <div dojoType="dijit.Toolbar" id='toolbar'>
59                 <div dojoType="dijit.form.Button" iconClass="dijitEditorIcon dijitEditorIconCopy" 
60                     onclick='displayGlobalDiv("vl-marc-upload-div");' showLabel="true">Import Records</div>
61                 <div dojoType="dijit.form.Button" iconClass="dijitEditorIcon dijitEditorIconCopy" 
62                     onclick='vlShowQueueSelect();' showLabel="true">Inspect Queue</div>
63             </div>
64         </div>
65
66         <div dojoType="dijit.layout.ContentPane" layoutAlign='client' id="vl-generic-progress" class='progress'>
67             <div dojoType="dijit.ProgressBar" style="width:300px" indeterminate="true"></div>
68         </div>
69         <div dojoType="dijit.layout.ContentPane" layoutAlign='client' id="vl-generic-progress-with-total" class='hidden progress'>
70             <div dojoType="dijit.ProgressBar" jsId='vlControlledProgressBar' style="width:300px"></div>
71         </div>
72
73         <div dojoType="dijit.layout.ContentPane" layoutAlign='client' id='vl-marc-upload-status-div' class='hidden'>
74             <h1>Upload Status</h1><br/>
75             <div id='vl-upload-status-uploading'><h3>Uploading...</h3></div>
76             <div id='vl-upload-status-processing' class='hidden'>
77                 <h3>Processing... <span id='vl-upload-status-count'/></h3>
78             </div>
79         </div>
80
81         <!-- MARC upload form -->
82         <div dojoType="dijit.layout.ContentPane" layoutAlign='client' id='vl-marc-upload-div' class='hidden'>
83             <h1>Evergreen MARC File Upload</h1><br/>
84             <form id="vl-marc-upload-form" enctype="multipart/form-data">
85                 <input type='hidden' name='ses' id='vl-ses-input'/>
86                 <br/>
87                 <table class='form_table'>
88                     <tr>
89                         <td>Record Type</td>
90                         <td colspan='4'>
91                             <select id='vl-record-type' dojoType='dijit.form.FilteringSelect' 
92                                     jsId='vlUploadRecordType' onchange='vlShowUploadForm();'>
93                                 <option value='bib' selected='selected'>Bibliographic Records</option>
94                                 <option value='auth'>Authority Records</option>
95                             </select>
96                         </td>
97                     </tr>
98                     <tr>
99                         <td>Create a New Upload Queue</td>
100                         <td>
101                             <input type='text' dojoType='dijit.form.TextBox' id='vl-queue-name' size='32'></input>
102                         </td>
103                         <td>or Add to an Existing Queue</td>
104                         <td>
105                             <select jsId='vlUploadQueueSelector' dojoType='dijit.form.FilteringSelect'>
106                             </select>
107                         </td>
108                     </tr>
109                     <tr>
110                         <td>Auto-Import Non-Colliding Records</td>
111                         <td colspan='4'>
112                             <input jsId='vlUploadQueueAutoImport' dojoType='dijit.form.CheckBox'/>
113                         </td>
114                     </tr>
115                     <tr>
116                         <td>
117                             <span id="vl-file-label">File to Upload:</span>
118                         </td>
119                         <td id='vl-input-td' colspan='4'>
120                             <input size='48' type="file" name="marc_upload"/>
121                         </td>
122                     </tr>
123                     <tr>
124                         <td align='center' colspan='4'>
125                             <button dojoType="dijit.form.Button" onclick="batchUpload()">Upload</button>
126                         </td>
127                     </tr>
128                 </table>
129             </form>
130         </div>
131
132         <!-- record queue grid -->
133         <div dojoType="dijit.layout.ContentPane" layoutAlign='client' id='vl-queue-div' class='tall hidden'>
134             <h1>Record Queue</h1><br/>
135             <script>
136                 var vlQueueGridLayout;
137                 function resetVlQueueGridLayout() {
138                     vlQueueGridLayout = [{
139                         defaultCell: {styles: 'text-align: center;'},
140                         cells : [[
141                             {name: '<input id="vl-queue-grid-row-selector" type="checkbox" onclick="vlToggleQueueGridSelect();"/>', 
142                                 get: vlQueueGridDrawSelectBox },
143                             {   name: 'View MARC', 
144                                 get: vlGetViewMARC, 
145                                 value:'<a href="javascript:void(0);" onclick="vlLoadMARCHtml(RECID, false, '+
146                                     'function(){displayGlobalDiv(\'vl-queue-div\');});">View MARC</a>'
147                             },
148                             {   name: 'Matches', 
149                                 get: vlGetViewMatches,
150                                 value:'<a href="javascript:void(0);" onclick="vlLoadMatchUI(RECID);">Matches</a>'
151                             },
152                             {name: 'Import Time', field:'import_time', get:vlGetDateTimeField, selectableColumn:true}
153                         ]]
154                     }];
155                 }
156             </script>
157             <div id='vl-queue-div-grid' class='tall' dojoType="dijit.layout.ContentPane" layoutAlign='client'>
158
159                 <!-- column picker dialog -->
160                 <div dojoType="dijit.Dialog" jsId='vlQueueGridColumePickerDialog' title="Column Picker" execute="alert(2);">
161                     <table class='form_table'>
162                         <thead>
163                             <tr><th width='33%'>Column</th><th width='33%'>Display</th><th width='33%'>Auto Width</th></tr>
164                         </thead>
165                         <tbody>
166                             <tr>
167                                 <td colspan='3' align='center'>
168                                     <button jsId='vlQueueGridColumnPickerButton' 
169                                         onclick='vlQueueGridColumePickerDialog.hide();vlQueueGridColumePicker.update();' 
170                                         dojoType='dijit.form.Button'>Done</button>
171                                 </td>
172                             </tr>
173                         </tbody>
174                     </table>
175                 </div>
176
177                 <!-- queue grid navigation row -->
178                 <div dojoType="dijit.layout.ContentPane" layoutAlign='client'>
179                     <table width='100%' style='margin-bottom:0px;'>
180                         <tr>
181                             <td align='left'>
182                                 <button dojoType='dijit.form.Button' onclick='vlImportSelectedRecords();'>Import Selected</button>
183                                 <button dojoType='dijit.form.Button' onclick='
184                                     if(confirm("Are you sure want to delete this queue?")) {
185                                         vlDeleteQueue(currentType, currentQueueId, 
186                                             function() { displayGlobalDiv("vl-marc-upload-div"); });
187                                     }'>Delete Queue</button>
188                             </td>
189                             <td align='middle'>
190                                 <style>.filter_td { padding-right: 5px; border-right: 2px solid #e8e1cf; } </style>
191                                 <table><tr>
192                                     <td class='filter_td'>
193                                         Limit to Collision Matches
194                                         <input dojoType='dijit.form.CheckBox' jsId='vlQueueGridShowMatches' checked='checked'/>
195                                     </td>
196                                     <td class='filter_td' style='padding-left:5px;'>
197                                         Results Per Page 
198                                         <select style='width:68px;' jsId='vlQueueDisplayLimit' dojoType='dijit.form.FilteringSelect' value='10'>
199                                             <option value='10'>10</option>
200                                             <option value='20'>20</option>
201                                             <option value='50'>50</option>
202                                             <option value='100'>100</option>
203                                         </select>
204                                     </td>
205                                     <td class='filter_td' style='padding-left:5px;'>
206                                         Page <input style='width:36px;' dojoType='dijit.form.TextBox' jsId='vlQueueDisplayPage' value='1'/>
207                                     </td style='padding-left:5px;'>
208                                     <td style='padding-left:5px;'>
209                                         <button dojoType='dijit.form.Button' 
210                                             onclick='retrieveQueuedRecords(currentType, currentQueueId, handleRetrieveRecords)'>Refresh</button>
211                                     </td>
212                                 </tr></table>
213                             </td>
214                             <td align='right' valign='bottom'>
215                                 <span style='padding-right:4px;'>
216                                     <a href='javascript:void(0);' onclick='
217                                         var page = parseInt(vlQueueDisplayPage.getValue());
218                                         if(page < 2) return;
219                                         vlQueueDisplayPage.setValue(page - 1);
220                                         retrieveQueuedRecords(currentType, currentQueueId, handleRetrieveRecords);'>&#171; Previous Page</a>
221                                 </span>
222                                 <span style='padding-right:10px;'>
223                                     <a href='javascript:void(0);' onclick='
224                                         vlQueueDisplayPage.setValue(parseInt(vlQueueDisplayPage.getValue())+1);
225                                         retrieveQueuedRecords(currentType, currentQueueId, handleRetrieveRecords);'>Next Page &#187;</a>
226                                 </span>
227                                 <span style='background:#e8e1cf;padding:3px 0px 0px 6px;-moz-border-radius:6px 0px 0px 0px;'>
228                                     <a href='javascript:void(0);' onclick='vlQueueGridColumePickerDialog.show();'>Select Columns</a>
229                                 </span>
230                             </td>
231                         </tr>
232                     </table>
233                 </div>
234
235                 <!-- Queue Grid -->
236                 <div class='' style='height:90%;' dojoType="dijit.layout.ContentPane" layoutAlign='client'>
237                     <div dojoType='dojox.Grid' jsId='vlQueueGrid'> </div>
238                 </div>
239             </div>
240         </div>
241
242         <!-- Grid of record matches -->
243         <div dojoType="dijit.layout.ContentPane" layoutAlign='client' id='vl-match-div' class='tall hidden'>
244             <script>
245                 var vlMatchGridLayout;
246                 function resetVlMatchGridLayout() {
247                     vlMatchGridLayout = [{
248                         defaultCell: {styles: 'text-align: center;'},
249                         cells : [[
250                             {
251                                 name: 'Overlay Target', 
252                                 get: vlGetOverlayTargetSelector,
253                                 value: '<input type="radio" name="overlay_target" '+
254                                     'onclick="vlHandleOverlayTargetSelected();" id="vl-overlay-target-ID"/>'
255                             },
256                             {name:'Source Match Point', field:'src_matchpoint'},
257                             {name:'Destination Match Point', field:'dest_matchpoint'},
258                             {name: 'ID', field:'id'},
259                             {   name: 'View MARC', 
260                                 get: vlGetViewMARC, 
261                                 value:'<a href="javascript:void(0);" onclick="vlLoadMARCHtml(RECID, '+
262                                     'true, function(){displayGlobalDiv(\'vl-match-div\');});">View MARC</a>'
263                             },
264                             {name: 'Creator', get: vlGetCreator},
265                             {name: 'Create Date', field:'create_date', get: vlGetDateTimeField},
266                             {name: 'Last Edit Date', field:'edit_date', get: vlGetDateTimeField},
267                             {name: 'Source', field:'source'},
268                             {name: 'TCN Source', field:'tcn_source'},
269                             {name: 'TCN Value', field:'tcn_value'}
270                         ]]
271                     }];
272                 }
273             </script>
274             <h1>Import Matches</h1><br/>
275             <div>
276                 <button dojoType='dijit.form.Button' 
277                     onclick='displayGlobalDiv("vl-queue-div");'>Back To Import Queue...</button>
278                 <span style='padding-left:20px;'>
279                     <input dojoType='dijit.form.CheckBox' jsId='vlOverlayTargetEnable' onclick='vlHandleOverlayTargetSelected'/> 
280                     Overlay selected record with imported record
281                 </span>
282             </div>
283             <div class='tall'>
284                 <div dojoType='dojox.Grid' jsId='vlMatchGrid'> </div>
285             </div>
286         </div>
287
288         <!-- MARC as HTML -->
289         <div dojoType="dijit.layout.ContentPane" layoutAlign='client' id='vl-marc-html-div' class='tall hidden'>
290             <h1>MARC Record</h1><br/>
291             <div>
292                 <button id='vl-marc-html-done-button' dojoType='dijit.form.Button'>Return...</button>
293             </div>
294             <div>
295                 <style>#vl-marc-record-html td {padding:0px;}</style>
296                 <div id='vl-marc-record-html'> </div>
297             </div>
298         </div>
299
300         <!-- Form for choosing which queue to view -->
301         <div dojoType="dijit.layout.ContentPane" layoutAlign='client' id='vl-queue-select-div' class='tall hidden'>
302             <h1>Select a Queue to Inspect</h1><br/>
303             <table class='form_table'>
304                 <tr>
305                     <td>Queue Type</td>
306                     <td>
307                         <select jsId='vlQueueSelectType' dojoType='dijit.form.FilteringSelect' onchange='vlShowQueueSelect();'>
308                             <option value='bib' selected='selected'>Bibliographic Records</option>
309                             <option value='auth'>Authority Records</option>
310                         </select>
311                     </td>
312                 </tr>
313                 <tr>
314                     <td>Queue</td>
315                     <td>
316                         <select jsId='vlQueueSelectQueueList' dojoType='dijit.form.FilteringSelect'>
317                         </select>
318                     </td>
319                 </tr>
320                 <tr>
321                     <td colspan='2'>
322                         <button dojoType='dijit.form.Button' onclick='vlFetchQueueFromForm();'>Retrieve Queue</button>
323                     </td>
324                 </tr>
325             </table>
326         </div>
327         <!--
328         <div style='text-align:center;width:100%;' dojoType="dijit.layout.ContentPane" layoutAlign='bottom'>
329             Powered by Evergreen!
330         </div>
331         -->
332       </div>
333     </body>
334 </html>