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