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, function(){displayGlobalDiv(\'vl-queue-div\');});">View MARC</a>'
 146                             },
 147                             {name: 'Import Time', field:'import_time', get:vlGetDateTimeField, selectableColumn:true}
 148                         ]]
 149                     }];
 150                 }
 151             </script>
 152             <div id='vl-queue-div-grid' class='tall' dojoType="dijit.layout.ContentPane" layoutAlign='client'>
 153
 154                 <!-- column picker dialog -->
 155                 <div dojoType="dijit.Dialog" jsId='vlQueueGridColumePickerDialog' title="Column Picker" execute="alert(2);">
 156                     <table class='form_table'>
 157                         <thead>
 158                             <tr><th width='33%'>Column</th><th width='33%'>Display</th><th width='33%'>Auto Width</th></tr>
 159                         </thead>
 160                         <tbody>
 161                             <tr>
 162                                 <td colspan='3' align='center'>
 163                                     <button jsId='vlQueueGridColumnPickerButton'
 164                                         onclick='vlQueueGridColumePickerDialog.hide();vlQueueGridColumePicker.update();'
 165                                         dojoType='dijit.form.Button'>Done</button>
 166                                 </td>
 167                             </tr>
 168                         </tbody>
 169                     </table>
 170                 </div>
 171
 172                 <!-- queue grid navigation row -->
 173                 <div dojoType="dijit.layout.ContentPane" layoutAlign='client'>
 174                     <table width='100%' style='margin-bottom:0px;'>
 175                         <tr>
 176                             <td align='left'>
 177                                 <button dojoType='dijit.form.Button' onclick='vlImportSelectedRecords();'>Import Selected</button>
 178                                 <button dojoType='dijit.form.Button' onclick='
 179                                     if(confirm("Are you sure want to delete this queue?")) {
 180                                         vlDeleteQueue(currentType, currentQueueId,
 181                                             function() { displayGlobalDiv("vl-marc-upload-div"); });
 182                                     }'>Delete Queue</button>
 183                             </td>
 184                             <td align='middle'>
 185                                 <style>.filter_td { padding-right: 5px; border-right: 2px solid #e8e1cf; } </style>
 186                                 <table><tr>
 187                                     <td class='filter_td'>
 188                                         Limit to Collision Matches
 189                                         <input dojoType='dijit.form.CheckBox' jsId='vlQueueGridShowMatches' checked='checked'/>
 190                                     </td>
 191                                     <td class='filter_td' style='padding-left:5px;'>
 192                                         Results Per Page
 193                                         <select style='width:68px;' jsId='vlQueueDisplayLimit' dojoType='dijit.form.FilteringSelect' value='10'>
 194                                             <option value='10'>10</option>
 195                                             <option value='20'>20</option>
 196                                             <option value='50'>50</option>
 197                                             <option value='100'>100</option>
 198                                         </select>
 199                                     </td>
 200                                     <td class='filter_td' style='padding-left:5px;'>
 201                                         Page <input style='width:36px;' dojoType='dijit.form.TextBox' jsId='vlQueueDisplayPage' value='1'/>
 202                                     </td style='padding-left:5px;'>
 203                                     <td style='padding-left:5px;'>
 204                                         <button dojoType='dijit.form.Button'
 205                                             onclick='retrieveQueuedRecords(currentType, currentQueueId, handleRetrieveRecords)'>Refresh</button>
 206                                     </td>
 207                                 </tr></table>
 208                             </td>
 209                             <td align='right' valign='bottom'>
 210                                 <span style='padding-right:4px;'>
 211                                     <a href='javascript:void(0);' onclick='
 212                                         var page = parseInt(vlQueueDisplayPage.getValue());
 213                                         if(page < 2) return;
 214                                         vlQueueDisplayPage.setValue(page - 1);
 215                                         retrieveQueuedRecords(currentType, currentQueueId, handleRetrieveRecords);'>&#171; Previous Page</a>
 216                                 </span>
 217                                 <span style='padding-right:10px;'>
 218                                     <a href='javascript:void(0);' onclick='
 219                                         vlQueueDisplayPage.setValue(parseInt(vlQueueDisplayPage.getValue())+1);
 220                                         retrieveQueuedRecords(currentType, currentQueueId, handleRetrieveRecords);'>Next Page &#187;</a>
 221                                 </span>
 222                                 <span style='background:#e8e1cf;padding:3px 0px 0px 6px;-moz-border-radius:6px 0px 0px 0px;'>
 223                                     <a href='javascript:void(0);' onclick='vlQueueGridColumePickerDialog.show();'>Select Columns</a>
 224                                 </span>
 225                             </td>
 226                         </tr>
 227                     </table>
 228                 </div>
 229
 230                 <!-- Queue Grid -->
 231                 <div class='' style='height:90%;' dojoType="dijit.layout.ContentPane" layoutAlign='client'>
 232                     <div dojoType='dojox.Grid' jsId='vlQueueGrid'> </div>
 233                 </div>
 234             </div>
 235         </div>
 236
 237         <!-- Grid of record matches -->
 238         <div dojoType="dijit.layout.ContentPane" layoutAlign='client' id='vl-match-div' class='tall hidden'>
 239             <script>
 240                 var vlMatchGridLayout;
 241                 function resetVlMatchGridLayout() {
 242                     vlMatchGridLayout = [{
 243                         defaultCell: {styles: 'text-align: center;'},
 244                         cells : [[
 245                             {
 246                                 name: 'Overlay Target',
 247                                 get: vlGetOverlayTargetSelector,
 248                                 value: '<input type="radio" name="overlay_target" onclick="vlHandleOverlayTargetSelected();" id="vl-overlay-target-ID"/>'
 249                             },
 250                             {name:'Match Point', field:'field_type'},
 251                             {name: 'ID', field:'id'},
 252                             {   name: 'View MARC',
 253                                 get: vlGetViewMARC,
 254                                 value:'<a href="javascript:void(0);" onclick="vlLoadMARCHtml(RECID, true, function(){displayGlobalDiv(\'vl-match-div\');});">View MARC</a>'
 255                             },
 256                             {name: 'Creator', get: vlGetCreator},
 257                             {name: 'Create Date', field:'create_date', get: vlGetDateTimeField},
 258                             {name: 'Last Edit Date', field:'edit_date', get: vlGetDateTimeField},
 259                             {name: 'Source', field:'source'},
 260                             {name: 'TCN Source', field:'tcn_source'},
 261                             {name: 'TCN Value', field:'tcn_value'}
 262                         ]]
 263                     }];
 264                 }
 265             </script>
 266             <h1>Import Matches</h1><br/>
 267             <div>
 268                 <button dojoType='dijit.form.Button'
 269                     onclick='displayGlobalDiv("vl-queue-div");'>Back To Import Queue...</button>
 270                 <span style='padding-left:20px;'>
 271                     <input dojoType='dijit.form.CheckBox' jsId='vlOverlayTargetEnable' onclick='vlHandleOverlayTargetSelected'/>
 272                     Overlay selected record with imported record
 273                 </span>
 274             </div>
 275             <div class='tall'>
 276                 <div dojoType='dojox.Grid' jsId='vlMatchGrid'> </div>
 277             </div>
 278         </div>
 279
 280         <!-- MARC as HTML -->
 281         <div dojoType="dijit.layout.ContentPane" layoutAlign='client' id='vl-marc-html-div' class='tall hidden'>
 282             <h1>MARC Record</h1><br/>
 283             <div>
 284                 <button id='vl-marc-html-done-button' dojoType='dijit.form.Button'>Return...</button>
 285             </div>
 286             <div>
 287                 <style>#vl-marc-record-html td {padding:0px;}</style>
 288                 <div id='vl-marc-record-html'> </div>
 289             </div>
 290         </div>
 291
 292         <!-- Form for choosing which queue to view -->
 293         <div dojoType="dijit.layout.ContentPane" layoutAlign='client' id='vl-queue-select-div' class='tall hidden'>
 294             <h1>Select a Queue to Inspect</h1><br/>
 295             <table class='form_table'>
 296                 <tr>
 297                     <td>Queue Type</td>
 298                     <td>
 299                         <select jsId='vlQueueSelectType' dojoType='dijit.form.FilteringSelect' onchange='vlShowQueueSelect();'>
 300                             <option value='bib' selected='selected'>Bibliographic Records</option>
 301                             <option value='auth'>Authority Records</option>
 302                         </select>
 303                     </td>
 304                 </tr>
 305                 <tr>
 306                     <td>Queue</td>
 307                     <td>
 308                         <select jsId='vlQueueSelectQueueList' dojoType='dijit.form.FilteringSelect'>
 309                         </select>
 310                     </td>
 311                 </tr>
 312                 <tr>
 313                     <td colspan='2'>
 314                         <button dojoType='dijit.form.Button' onclick='vlFetchQueueFromForm();'>Retrieve Queue</button>
 315                     </td>
 316                 </tr>
 317             </table>
 318         </div>
 319         <div style='text-align:center;width:100%;' dojoType="dijit.layout.ContentPane" layoutAlign='bottom'>
 320             I live at the bottom of the page and I'm powered by Evergreen!
 321         </div>
 322
 323       </div>
 324     </body>
 325 </html>