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             table.dijitTooltipTable { border-collapse: separate; } // else the tooltip-table is ugly
  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 {margin: 20px;}
  43             .overlay_selected {
  44                 padding: 2px;
  45                 background: #d9e8f9;
  46                 border: 1px solid red;
  47             }
  48         </style>
  49         <script type="text/javascript" djConfig="parseOnLoad: true,isDebug:false" src="/js/dojo/dojo/dojo.js"></script>
  50         <script type="text/javascript" src='/js/dojo/openils/MarcXPathParser.js'></script>
  51         <script type="text/javascript" src='vandelay.js'></script>
  52     </head>
  53     <body class="tundra tall">
  54       <div dojoType="dijit.layout.LayoutContainer" orientation="vertical" class="tall">
  55
  56
  57         <!-- navigation toolbar -->
  58         <div dojoType="dijit.layout.ContentPane" layoutAlign='top'>
  59             <div dojoType="dijit.Toolbar" id='toolbar'>
  60                 <div dojoType="dijit.form.Button" iconClass="dijitEditorIcon dijitEditorIconCopy"
  61                     onclick='displayGlobalDiv("vl-marc-upload-div");' showLabel="true">Import Records</div>
  62                 <div dojoType="dijit.form.Button" iconClass="dijitEditorIcon dijitEditorIconCopy"
  63                     onclick='vlShowQueueSelect();' showLabel="true">Inspect Queue</div>
  64
  65                 <div dojoType="dijit.form.Button" iconClass="dijitEditorIcon dijitEditorIconCopy"
  66                      onclick="vlShowBibAttrDefs();" showLabel="true">Bib Attr Definitions</div>
  67             </div>
  68         </div>
  69
  70         <div dojoType="dijit.layout.ContentPane" layoutAlign='client' id="vl-generic-progress" class='progress'>
  71             <div dojoType="dijit.ProgressBar" style="width:300px" indeterminate="true"></div>
  72         </div>
  73         <div dojoType="dijit.layout.ContentPane" layoutAlign='client' id="vl-generic-progress-with-total" class='hidden progress'>
  74             <div dojoType="dijit.ProgressBar" jsId='vlControlledProgressBar' style="width:300px"></div>
  75         </div>
  76
  77         <div dojoType="dijit.layout.ContentPane" layoutAlign='client' id='vl-marc-upload-status-div' class='hidden'>
  78             <h1>Upload Status</h1><br/>
  79             <div id='vl-upload-status-uploading'><h3>Uploading...</h3></div>
  80             <div id='vl-upload-status-processing' class='hidden'>
  81                 <h3>Processing... <span id='vl-upload-status-count'/></h3>
  82             </div>
  83         </div>
  84
  85         <!-- MARC upload form -->
  86         <div dojoType="dijit.layout.ContentPane" layoutAlign='client' id='vl-marc-upload-div' class='hidden'>
  87             <h1>Evergreen MARC File Upload</h1><br/>
  88             <form id="vl-marc-upload-form" enctype="multipart/form-data">
  89                 <input type='hidden' name='ses' id='vl-ses-input'/>
  90                 <br/>
  91                 <table class='form_table'>
  92                     <tr>
  93                         <td>Record Type</td>
  94                         <td colspan='4'>
  95                             <select id='vl-record-type' dojoType='dijit.form.FilteringSelect'
  96                                     jsId='vlUploadRecordType' onchange='vlShowUploadForm();'>
  97                                 <option value='bib' selected='selected'>Bibliographic Records</option>
  98                                 <option value='auth'>Authority Records</option>
  99                             </select>
 100                         </td>
 101                     </tr>
 102                     <tr>
 103                         <td>Create a New Upload Queue</td>
 104                         <td>
 105                             <input type='text' dojoType='dijit.form.TextBox' id='vl-queue-name' size='32'></input>
 106                         </td>
 107                         <td>or Add to an Existing Queue</td>
 108                         <td>
 109                             <select jsId='vlUploadQueueSelector' dojoType='dijit.form.FilteringSelect'>
 110                             </select>
 111                         </td>
 112                     </tr>
 113                     <tr>
 114                         <td>Auto-Import Non-Colliding Records</td>
 115                         <td colspan='4'>
 116                             <input jsId='vlUploadQueueAutoImport' dojoType='dijit.form.CheckBox'/>
 117                         </td>
 118                     </tr>
 119                     <tr>
 120                         <td>
 121                             <span id="vl-file-label">File to Upload:</span>
 122                         </td>
 123                         <td id='vl-input-td' colspan='4'>
 124                             <input size='48' type="file" name="marc_upload"/>
 125                         </td>
 126                     </tr>
 127                     <tr>
 128                         <td align='center' colspan='4'>
 129                             <button dojoType="dijit.form.Button" onclick="batchUpload()">Upload</button>
 130                         </td>
 131                     </tr>
 132                 </table>
 133             </form>
 134         </div>
 135
 136         <!-- record queue grid -->
 137         <div dojoType="dijit.layout.ContentPane" layoutAlign='client' id='vl-queue-div' class='tall hidden'>
 138             <h1>Record Queue</h1><br/>
 139             <script>
 140                 var vlQueueGridLayout;
 141                 function resetVlQueueGridLayout() {
 142                     vlQueueGridLayout = [{
 143                         defaultCell: {styles: 'text-align: center;'},
 144                         cells : [[
 145                             {name: '<input id="vl-queue-grid-row-selector" type="checkbox" onclick="vlToggleQueueGridSelect();"/>',
 146                                 get: vlQueueGridDrawSelectBox },
 147                             {   name: 'View MARC',
 148                                 get: vlGetViewMARC,
 149                                 value:'<a href="javascript:void(0);" onclick="vlLoadMARCHtml(RECID, false, '+
 150                                     'function(){displayGlobalDiv(\'vl-queue-div\');});">View MARC</a>'
 151                             },
 152                             {   name: 'Matches',
 153                                 get: vlGetViewMatches,
 154                                 value:'<a href="javascript:void(0);" onclick="vlLoadMatchUI(RECID);">Matches</a>'
 155                             },
 156                             {name: 'Import Time', field:'import_time', get:vlGetDateTimeField, selectableColumn:true}
 157                         ]]
 158                     }];
 159                 }
 160             </script>
 161             <div id='vl-queue-div-grid' class='tall' dojoType="dijit.layout.ContentPane" layoutAlign='client'>
 162
 163                 <!-- column picker dialog -->
 164                 <div dojoType="dijit.Dialog" jsId='vlQueueGridColumePickerDialog' title="Column Picker" execute="alert(2);">
 165                     <table class='form_table'>
 166                         <thead>
 167                             <tr><th width='33%'>Column</th><th width='33%'>Display</th><th width='33%'>Auto Width</th></tr>
 168                         </thead>
 169                         <tbody>
 170                             <tr>
 171                                 <td colspan='3' align='center'>
 172                                     <button jsId='vlQueueGridColumnPickerButton'
 173                                         onclick='vlQueueGridColumePickerDialog.hide();vlQueueGridColumePicker.update();'
 174                                         dojoType='dijit.form.Button'>Done</button>
 175                                 </td>
 176                             </tr>
 177                         </tbody>
 178                     </table>
 179                 </div>
 180
 181                 <!-- queue grid navigation row -->
 182                 <div dojoType="dijit.layout.ContentPane" layoutAlign='client'>
 183                     <table width='100%' style='margin-bottom:0px;'>
 184                         <tr>
 185                             <td align='left'>
 186                                 <button dojoType='dijit.form.Button' onclick='vlImportSelectedRecords();'>Import Selected</button>
 187                                 <button dojoType='dijit.form.Button' onclick='
 188                                     if(confirm("Are you sure want to delete this queue?")) {
 189                                         vlDeleteQueue(currentType, currentQueueId,
 190                                             function() { displayGlobalDiv("vl-marc-upload-div"); });
 191                                     }'>Delete Queue</button>
 192                             </td>
 193                             <td align='middle'>
 194                                 <style>.filter_td { padding-right: 5px; border-right: 2px solid #e8e1cf; } </style>
 195                                 <table><tr>
 196                                     <td class='filter_td'>
 197                                         Limit to Collision Matches
 198                                         <input dojoType='dijit.form.CheckBox' jsId='vlQueueGridShowMatches' checked='checked'/>
 199                                     </td>
 200                                     <td class='filter_td' style='padding-left:5px;'>
 201                                         Results Per Page
 202                                         <select style='width:68px;' jsId='vlQueueDisplayLimit' dojoType='dijit.form.FilteringSelect' value='10'>
 203                                             <option value='10'>10</option>
 204                                             <option value='20'>20</option>
 205                                             <option value='50'>50</option>
 206                                             <option value='100'>100</option>
 207                                         </select>
 208                                     </td>
 209                                     <td class='filter_td' style='padding-left:5px;'>
 210                                         Page <input style='width:36px;' dojoType='dijit.form.TextBox' jsId='vlQueueDisplayPage' value='1'/>
 211                                     </td style='padding-left:5px;'>
 212                                     <td style='padding-left:5px;'>
 213                                         <button dojoType='dijit.form.Button'
 214                                             onclick='retrieveQueuedRecords(currentType, currentQueueId, handleRetrieveRecords)'>Refresh</button>
 215                                     </td>
 216                                 </tr></table>
 217                             </td>
 218                             <td align='right' valign='bottom'>
 219                                 <span style='padding-right:4px;'>
 220                                     <a href='javascript:void(0);' onclick='
 221                                         var page = parseInt(vlQueueDisplayPage.getValue());
 222                                         if(page < 2) return;
 223                                         vlQueueDisplayPage.setValue(page - 1);
 224                                         retrieveQueuedRecords(currentType, currentQueueId, handleRetrieveRecords);'>&#171; Previous Page</a>
 225                                 </span>
 226                                 <span style='padding-right:10px;'>
 227                                     <a href='javascript:void(0);' onclick='
 228                                         vlQueueDisplayPage.setValue(parseInt(vlQueueDisplayPage.getValue())+1);
 229                                         retrieveQueuedRecords(currentType, currentQueueId, handleRetrieveRecords);'>Next Page &#187;</a>
 230                                 </span>
 231                                 <span style='background:#e8e1cf;padding:3px 0px 0px 6px;-moz-border-radius:6px 0px 0px 0px;'>
 232                                     <a href='javascript:void(0);' onclick='vlQueueGridColumePickerDialog.show();'>Select Columns</a>
 233                                 </span>
 234                             </td>
 235                         </tr>
 236                     </table>
 237                 </div>
 238
 239                 <!-- Queue Grid -->
 240                 <div class='' style='height:90%;' dojoType="dijit.layout.ContentPane" layoutAlign='client'>
 241                     <div dojoType='dojox.Grid' jsId='vlQueueGrid'> </div>
 242                 </div>
 243             </div>
 244         </div>
 245
 246         <!-- Grid of record matches -->
 247         <div dojoType="dijit.layout.ContentPane" layoutAlign='client' id='vl-match-div' class='tall hidden'>
 248             <script>
 249                 var vlMatchGridLayout;
 250                 function resetVlMatchGridLayout() {
 251                     vlMatchGridLayout = [{
 252                         defaultCell: {styles: 'text-align: center;'},
 253                         cells : [[
 254                             {
 255                                 name: 'Overlay Target',
 256                                 get: vlGetOverlayTargetSelector,
 257                                 value: '<input type="radio" name="overlay_target" '+
 258                                     'onclick="vlHandleOverlayTargetSelected();" id="vl-overlay-target-ID"/>'
 259                             },
 260                             {name:'Source Match Point', field:'src_matchpoint'},
 261                             {name:'Destination Match Point', field:'dest_matchpoint'},
 262                             {name: 'ID', field:'id'},
 263                             {   name: 'View MARC',
 264                                 get: vlGetViewMARC,
 265                                 value:'<a href="javascript:void(0);" onclick="vlLoadMARCHtml(RECID, '+
 266                                     'true, function(){displayGlobalDiv(\'vl-match-div\');});">View MARC</a>'
 267                             },
 268                             {name: 'Creator', get: vlGetCreator},
 269                             {name: 'Create Date', field:'create_date', get: vlGetDateTimeField},
 270                             {name: 'Last Edit Date', field:'edit_date', get: vlGetDateTimeField},
 271                             {name: 'Source', field:'source'},
 272                             {name: 'TCN Source', field:'tcn_source'},
 273                             {name: 'TCN Value', field:'tcn_value'}
 274                         ]]
 275                     }];
 276                 }
 277             </script>
 278             <h1>Import Matches</h1><br/>
 279             <div>
 280                 <button dojoType='dijit.form.Button'
 281                     onclick='displayGlobalDiv("vl-queue-div");'>&#x2196; Back To Import Queue</button>
 282                 <span style='padding-left:20px;'>
 283                     <input dojoType='dijit.form.CheckBox' jsId='vlOverlayTargetEnable' onclick='vlHandleOverlayTargetSelected'/>
 284                     Overlay selected record with imported record
 285                 </span>
 286             </div>
 287             <div class='tall'>
 288                 <div dojoType='dojox.Grid' jsId='vlMatchGrid'> </div>
 289             </div>
 290         </div>
 291
 292         <!-- MARC as HTML -->
 293         <div dojoType="dijit.layout.ContentPane" layoutAlign='client' id='vl-marc-html-div' class='tall hidden'>
 294             <h1>MARC Record</h1><br/>
 295             <div>
 296                 <button id='vl-marc-html-done-button' dojoType='dijit.form.Button'>&#x2196; Return</button>
 297             </div>
 298             <div>
 299                 <style>#vl-marc-record-html td {padding:0px;}</style>
 300                 <div id='vl-marc-record-html'> </div>
 301             </div>
 302         </div>
 303
 304         <!-- Form for choosing which queue to view -->
 305         <div dojoType="dijit.layout.ContentPane" layoutAlign='client' id='vl-queue-select-div' class='tall hidden'>
 306             <h1>Select a Queue to Inspect</h1><br/>
 307             <table class='form_table'>
 308                 <tr>
 309                     <td>Queue Type</td>
 310                     <td>
 311                         <select jsId='vlQueueSelectType' dojoType='dijit.form.FilteringSelect' onchange='vlShowQueueSelect();'>
 312                             <option value='bib' selected='selected'>Bibliographic Records</option>
 313                             <option value='auth'>Authority Records</option>
 314                         </select>
 315                     </td>
 316                 </tr>
 317                 <tr>
 318                     <td>Queue</td>
 319                     <td>
 320                         <select jsId='vlQueueSelectQueueList' dojoType='dijit.form.FilteringSelect'>
 321                         </select>
 322                     </td>
 323                 </tr>
 324                 <tr>
 325                     <td colspan='2'>
 326                         <button dojoType='dijit.form.Button' onclick='vlFetchQueueFromForm();'>Retrieve Queue</button>
 327                     </td>
 328                 </tr>
 329             </table>
 330         </div>
 331
 332         <!-- bib attribute definitions  -->
 333         <div dojoType="dijit.layout.ContentPane"  id="vl-bib-attr-defs-div"
 334                 class='hidden bib-attr-detail-content-pane' title="Bib Attr Definition" style='height:400px;' layoutAlign="client">
 335
 336             <div class='vl-bib-attr-defs-actions-div' style='margin:8px;'>
 337
 338                 <div dojoType="dijit.form.DropDownButton" id="vl-create-bib-attr-button">
 339                     <span name="create">Create Attribute Definition</span>
 340                     <span name="update" class="hidden">Update Attribute Definition</span>
 341
 342                     <div dojoType="dijit.TooltipDialog" execute="saveNewBibAttrRecord(arguments[0]);" id="bib-attr-dialog">
 343                         <script type='dojo/connect' event='onOpen'>onAttrEditorOpen();</script>
 344                         <script type='dojo/connect' event='onClose'>onAttrEditorClose();</script>
 345                         <table class='dijitTooltipTable'>
 346                             <tr>
 347                                 <td><label for="code">Code: </label></td>
 348                                 <td><input id='oils-bib-attr-code' name="code" dojoType="dijit.form.TextBox"/></td>
 349                             </tr>
 350                             <tr>
 351                                 <td><label for="description">Description: </label></td>
 352                                 <td><input id='bib-attr-description' dojoType="dijit.form.TextBox" name="description"> </input></td>
 353                             </tr>
 354                             <tr>
 355                                 <td><label for="amount">Tag(s): </label></td>
 356                                 <td><input id="bib-attr-tag" dojoType="dijit.form.TextBox" name="tag"></input>
 357                                 <div class="hidden" id="bib-attr-tag-tip">
 358                                 <p>You can enter multiple tags, separated by spaces and/or commas.</p>
 359                                 <p>Example: <code>120, 220, 300</code> or <code>120 220 330</code></p></div>
 360                                 </td>
 361                             </tr>
 362
 363                             <tr>
 364                                 <td><label for="amount">Subfield(s): </label></td>
 365                                 <td><input dojoType="dijit.form.TextBox" name="subfield" id="bib-attr-subfield"></input></td>
 366                                 <div class="hidden" id="bib-attr-subfield-tip">
 367                                 <p>You can enter multiple subfields, separated by spaces and/or commas.</p>
 368                                 <p>Example: <code>a, b, j, x</code> or <code>a b j x</code></p></div>
 369
 370                             </tr>
 371                             <tr>
 372                                 <td><label for="ident">Identifer Field?: </label></td>
 373                                 <td>
 374                                     <select dojoType="dijit.form.FilteringSelect" name="ident" id="bib-attr-ident-selector">
 375                                         <option value='f' selected='selected'>False</option>
 376                                         <option value='t'>True</option>
 377                                     </select>
 378                                 </td>
 379                             </tr>
 380                             <tr>
 381                                 <td><label for="amount">XPath (advanced): </label></td>
 382
 383                                 <td><input dojoType="dijit.form.TextBox" id="bib-attr-xpath" name="xpath"></input></td>
 384                             </tr>
 385                             <tr>
 386                                 <td><label for="amount">Remove (advanced): </label></td>
 387
 388                                 <td><input dojoType="dijit.form.TextBox" id="bib-attr-remove" name="remove"></input></td>
 389                             </tr>
 390                             <tr class="create_bar">
 391                                 <td colspan='2' align='center'>
 392                                     <button dojoType="dijit.form.Button" type="submit"
 393                                             id="bib-attr-create-button">Create</button>
 394                                     <button type="button" dojoType="dijit.form.Button"
 395                                             onclick="dijit.byId('bib-attr-dialog').onCancel();">Cancel</button>
 396                                 </td>
 397                             </tr>
 398                             <tr class="update_bar">
 399                                 <td colspan='2' align='center'>
 400                                     <button dojoType="dijit.form.Button" type="submit"
 401                                             id="bib-attr-update-button">Update</button>
 402                                     <button type="button" dojoType="dijit.form.Button"
 403                                             onclick="dijit.byId('bib-attr-dialog').onCancel();">Cancel</button>
 404                                     <button dojoType="dijit.form.Button"
 405                                             type="button"
 406                                             id="bib-attr-delete-button"
 407                                             style="padding-left: 2em;">Delete record</button>
 408                                 </td>
 409                             </tr>
 410                         </table>
 411
 412                     </div>
 413                 </div>
 414
 415             </div>
 416             <script>
 417                 var bibAttrGridLayout = [{
 418                 cells : [[
 419                 {name: 'ID', field: 'id'},
 420                 {name: 'Code', field:'code', width:'auto'},
 421                 {name: 'Description', field: "description", width:'auto'},
 422                 {name: 'Tag', get:getTag},
 423                 {name: 'Subfield', get: getSubfield},
 424                 {name: 'Identifier', field:'ident'},
 425                 {name: 'XPath', field:'xpath', width:'auto'},
 426                 {name: 'Remove', field:'remove', width:'auto'}
 427                 ]]
 428                 }];
 429               </script>
 430
 431               <div class='tall'>
 432                 <div dojoType='dojox.Grid' jsId='bibAttrGrid'> </div>
 433               </div>
 434
 435         </div>
 436
 437         <div style='text-align:center;width:100%;' dojoType="dijit.layout.ContentPane" layoutAlign='bottom'>
 438             Powered by Evergreen!
 439         </div>
 440       </div>
 441     </body>
 442 </html>