Open-ILS/web/vandelay/vandelay.html

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