8d4e634009c934f096b7101c3c72fcd3a0bb8c89
[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 { 
42                 width:100%;
43                 text-align:center;
44                 margin: 20px;
45             }
46             .overlay_selected { 
47                 padding: 2px; 
48                 background: #d9e8f9;
49                 border: 1px solid red; 
50             }
51         </style>
52         <script type="text/javascript" djConfig="parseOnLoad: true,isDebug:false" src="/js/dojo/dojo/dojo.js"></script>
53         <script type="text/javascript" src='/js/dojo/openils/MarcXPathParser.js'></script>
54         <script type="text/javascript" src='vandelay.js'></script>
55     </head>
56     <body class="tundra tall">
57         <div dojoType="dijit.Toolbar" id='toolbar'>
58             <div dojoType="dijit.form.Button" iconClass="dijitEditorIcon dijitEditorIconCopy" 
59                 onclick='displayGlobalDiv("vl-marc-upload-div");' showLabel="true">Import Records</div>
60             <div dojoType="dijit.form.Button" iconClass="dijitEditorIcon dijitEditorIconCopy" 
61                 onclick='vlShowQueueSelect();' showLabel="true">Inspect Queue</div>
62         </div>
63
64         <div id="vl-generic-progress" class='progress'>
65             <div dojoType="dijit.ProgressBar" style="width:300px" indeterminate="true"></div>
66         </div>
67         <div id="vl-generic-progress-with-total" class='hidden progress'>
68             <div dojoType="dijit.ProgressBar" jsId='vlControlledProgressBar' style="width:300px"></div>
69         </div>
70
71         <div id='vl-marc-upload-status-div' class='hidden'>
72             <h1>Upload Status</h1><br/>
73             <div id='vl-upload-status-uploading'><h3>Uploading...</h3></div>
74             <div id='vl-upload-status-processing' class='hidden'>
75                 <h3>Processing... <span id='vl-upload-status-count'/></h3>
76             </div>
77         </div>
78
79         <!-- MARC upload form -->
80         <div id='vl-marc-upload-div' class='hidden'>
81             <h1>Evergreen MARC File Upload</h1><br/>
82             <form id="vl-marc-upload-form" enctype="multipart/form-data">
83                 <input type='hidden' name='ses' id='vl-ses-input'/>
84                 <br/>
85                 <table class='form_table'>
86                     <tr>
87                         <td>Record Type</td>
88                         <td colspan='4'>
89                             <select id='vl-record-type' dojoType='dijit.form.FilteringSelect' 
90                                     jsId='vlUploadRecordType' onchange='vlShowUploadForm();'>
91                                 <option value='bib' selected='selected'>Bibliographic Records</option>
92                                 <option value='auth'>Authority Records</option>
93                             </select>
94                         </td>
95                     </tr>
96                     <tr>
97                         <td>Create a New Upload Queue</td>
98                         <td>
99                             <input type='text' dojoType='dijit.form.TextBox' id='vl-queue-name' size='32'></input>
100                         </td>
101                         <td>or Add to an Existing Queue</td>
102                         <td>
103                             <select jsId='vlUploadQueueSelector' dojoType='dijit.form.FilteringSelect'>
104                             </select>
105                         </td>
106                     </tr>
107                     <tr>
108                         <td>Auto-Import Non-Colliding Records</td>
109                         <td colspan='4'>
110                             <input jsId='vlUploadQueueAutoImport' dojoType='dijit.form.CheckBox'/>
111                         </td>
112                     </tr>
113                     <tr>
114                         <td>
115                             <span id="vl-file-label">File to Upload:</span>
116                         </td>
117                         <td id='vl-input-td' colspan='4'>
118                             <input size='48' type="file" name="marc_upload"/>
119                         </td>
120                     </tr>
121                     <tr>
122                         <td align='center' colspan='4'>
123                             <button dojoType="dijit.form.Button" onclick="batchUpload()">Upload</button>
124                         </td>
125                     </tr>
126                 </table>
127             </form>
128         </div>
129
130         <!-- record queue grid -->
131         <div id='vl-queue-div' class='tall hidden'>
132             <h1>Record Queue</h1><br/>
133             <script>
134                 var vlQueueGridLayout;
135                 function resetVlQueueGridLayout() {
136                     vlQueueGridLayout = [{
137                         defaultCell: {styles: 'text-align: center;'},
138                         cells : [[
139                             {name: '<input id="vl-queue-grid-row-selector" type="checkbox" onclick="vlToggleQueueGridSelect();"/>', 
140                                 get: vlQueueGridDrawSelectBox },
141                             {name: 'Import Time', field:'import_time', get:vlGetDateTimeField, selectableColumn:true}
142                         ]]
143                     }];
144                 }
145             </script>
146             <div id='vl-queue-div-grid' class='tall'>
147                 <!-- column picker dialog -->
148                 <div dojoType="dijit.Dialog" jsId='vlQueueGridColumePickerDialog' title="Column Picker" execute="alert(2);">
149                     <table class='form_table'>
150                         <thead>
151                             <tr><th width='33%'>Column</th><th width='33%'>Dislapy</th><th width='33%'>Auto Width</th></tr>
152                         </thead>
153                         <tbody>
154                             <tr>
155                                 <td colspan='3' align='center'>
156                                     <button jsId='vlQueueGridColumnPickerButton' 
157                                         onclick='vlQueueGridColumePickerDialog.hide();vlQueueGridColumePicker.update();' 
158                                         dojoType='dijit.form.Button'>Done</button>
159                                 </td>
160                             </tr>
161                         </tbody>
162                     </table>
163                 </div>
164
165                 <!-- queue grid navigation row -->
166                 <table width='100%' style='margin-bottom:0px;'>
167                     <tr>
168                         <td align='left'>
169                             <button dojoType='dijit.form.Button' onclick='vlImportSelectedRecords();'>Import Selected</button>
170                             <button dojoType='dijit.form.Button' onclick='
171                                 if(confirm("Are you sure want to delete this queue?")) {
172                                     vlDeleteQueue(currentType, currentQueueId, 
173                                         function() { displayGlobalDiv("vl-marc-upload-div"); });
174                                 }'>Delete Queue</button>
175                         </td>
176                         <td align='middle'>
177                             <style>.filter_td { padding-right: 5px; border-right: 2px solid #e8e1cf; } </style>
178                             <table><tr>
179                                 <td class='filter_td'>
180                                     Limit to Collision Matches
181                                     <input dojoType='dijit.form.CheckBox' jsId='vlQueueGridShowMatches' checked='checked'/>
182                                 </td>
183                                 <td class='filter_td' style='padding-left:5px;'>
184                                     Results Per Page 
185                                     <select style='width:68px;' jsId='vlQueueDisplayLimit' dojoType='dijit.form.FilteringSelect' value='10'>
186                                         <option value='10'>10</option>
187                                         <option value='20'>20</option>
188                                         <option value='50'>50</option>
189                                         <option value='100'>100</option>
190                                     </select>
191                                 </td>
192                                 <td class='filter_td' style='padding-left:5px;'>
193                                     Page <input style='width:36px;' dojoType='dijit.form.TextBox' jsId='vlQueueDisplayPage' value='1'/>
194                                 </td style='padding-left:5px;'>
195                                 <td style='padding-left:5px;'>
196                                     <button dojoType='dijit.form.Button' 
197                                         onclick='retrieveQueuedRecords(currentType, currentQueueId, handleRetrieveRecords)'>Refresh</button>
198                                 </td>
199                             </tr></table>
200                         </td>
201                         <td align='right' valign='bottom'>
202                             <span style='padding-right:4px;'>
203                                 <a href='javascript:void(0);' onclick='
204                                     var page = parseInt(vlQueueDisplayPage.getValue());
205                                     if(page < 2) return;
206                                     vlQueueDisplayPage.setValue(page - 1);
207                                     retrieveQueuedRecords(currentType, currentQueueId, handleRetrieveRecords);'>&#171; Previous Page</a>
208                             </span>
209                             <span style='padding-right:10px;'>
210                                 <a href='javascript:void(0);' onclick='
211                                     vlQueueDisplayPage.setValue(parseInt(vlQueueDisplayPage.getValue())+1);
212                                     retrieveQueuedRecords(currentType, currentQueueId, handleRetrieveRecords);'>Next Page &#187;</a>
213                             </span>
214                             <span style='background:#e8e1cf;padding:3px 0px 0px 6px;-moz-border-radius:6px 0px 0px 0px;'>
215                                 <a href='javascript:void(0);' onclick='vlQueueGridColumePickerDialog.show();'>Select Columns</a>
216                             </span>
217                         </td>
218                     </tr>
219                 </table>
220
221                 <!-- Queue Grid -->
222                 <div class='tall'>
223                     <div dojoType='dojox.Grid' jsId='vlQueueGrid' class='tall'> </div>
224                 </div>
225             </div>
226         </div>
227
228         <!-- Grid of record matches -->
229         <div id='vl-match-div' class='tall hidden'>
230             <script>
231                 var vlMatchGridLayout;
232                 function resetVlMatchGridLayout() {
233                     vlMatchGridLayout = [{
234                         defaultCell: {styles: 'text-align: center;'},
235                         cells : [[
236                             {
237                                 name: 'Overlay Target', 
238                                 get: vlGetOverlayTargetSelector,
239                                 value: '<input type="radio" name="overlay_target" onclick="vlHandleOverlayTargetSelected();" id="vl-overlay-target-ID"/>'
240                             },
241                             {name:'Match Point', field:'field_type'},
242                             {name: 'ID', field:'id'},
243                             {   name: 'View MARC', 
244                                 get: vlGetViewMARC, 
245                                 value:'<a href="javascript:void(0);" onclick="vlLoadMARCHtml(RECID);">View MARC</a>'
246                             },
247                             {name: 'Creator', get: vlGetCreator},
248                             {name: 'Create Date', field:'create_date', get: vlGetDateTimeField},
249                             {name: 'Last Edit Date', field:'edit_date', get: vlGetDateTimeField},
250                             {name: 'Source', field:'source'},
251                             {name: 'TCN Source', field:'tcn_source'},
252                             {name: 'TCN Value', field:'tcn_value'}
253                         ]]
254                     }];
255                 }
256             </script>
257             <h1>Import Matches</h1><br/>
258             <div>
259                 <button dojoType='dijit.form.Button' 
260                     onclick='displayGlobalDiv("vl-queue-div");'>Back To Import Queue...</button>
261                 <span style='padding-left:20px;'>
262                     <input dojoType='dijit.form.CheckBox' jsId='vlOverlayTargetEnable' onclick='vlHandleOverlayTargetSelected'/> 
263                     Overlay selected record with imported record
264                 </span>
265             </div>
266             <div class='tall'>
267                 <div dojoType='dojox.Grid' jsId='vlMatchGrid'> </div>
268             </div>
269         </div>
270
271         <!-- MARC as HTML for matched records -->
272         <div id='vl-match-html-div' class='tall hidden'>
273             <h1>MARC Record</h1><br/>
274             <div>
275                 <button dojoType='dijit.form.Button' 
276                     onclick='displayGlobalDiv("vl-match-div");'>Back To Matches...</button>
277             </div>
278             <div>
279                 <style>#vl-match-record-html td {padding:0px;}</style>
280                 <div id='vl-match-record-html'> </div>
281             </div>
282         </div>
283
284         <!-- Form for choosing which queue to view -->
285         <div id='vl-queue-select-div' class='tall hidden'>
286             <h1>Select a Queue to Inspect</h1><br/>
287             <table class='form_table'>
288                 <tr>
289                     <td>Queue Type</td>
290                     <td>
291                         <select jsId='vlQueueSelectType' dojoType='dijit.form.FilteringSelect' onchange='vlShowQueueSelect();'>
292                             <option value='bib' selected='selected'>Bibliographic Records</option>
293                             <option value='auth'>Authority Records</option>
294                         </select>
295                     </td>
296                 </tr>
297                 <tr>
298                     <td>Queue</td>
299                     <td>
300                         <select jsId='vlQueueSelectQueueList' dojoType='dijit.form.FilteringSelect'>
301                         </select>
302                     </td>
303                 </tr>
304                 <tr>
305                     <td colspan='2'>
306                         <button dojoType='dijit.form.Button' onclick='vlFetchQueueFromForm();'>Retrieve Queue</button>
307                     </td>
308                 </tr>
309             </table>
310         </div>
311     </body>
312 </html>