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             td { padding: 6px; }
  23             .match_div {
  24                 height: 95%;
  25                 width: 95%;
  26             }
  27             .match_div a {
  28                 color: red;
  29                 font-weight:bold;
  30             }
  31             .match_div a:visited {
  32                 color: red;
  33                 font-weight:bold;
  34             }
  35             .tall { height:100%; }
  36             .hidden { display: none; }
  37             #toolbar { margin-top: 0px; }
  38             body { width:100%; height:100%; border:0; margin:0; padding:0; }
  39             .progress {
  40                 width:100%;
  41                 text-align:center;
  42                 margin: 20px;
  43             }
  44             .overlay_selected {
  45                 padding: 2px;
  46                 background: #d9e8f9;
  47                 border: 1px solid red;
  48             }
  49         </style>
  50         <script type="text/javascript" djConfig="parseOnLoad: true,isDebug:false" src="/js/dojo/dojo/dojo.js"></script>
  51         <script type="text/javascript" src='/js/dojo/openils/MarcXPathParser.js'></script>
  52         <script type="text/javascript" src='vandelay.js'></script>
  53     </head>
  54     <body class="tundra tall">
  55         <div dojoType="dijit.Toolbar" id='toolbar'>
  56             <div dojoType="dijit.form.Button" iconClass="dijitEditorIcon dijitEditorIconCopy"
  57                 onclick='displayGlobalDiv("vl-marc-upload-div");' showLabel="true">Import Records</div>
  58             <div dojoType="dijit.form.Button" iconClass="dijitEditorIcon dijitEditorIconCopy"
  59                 onclick='vlShowQueueSelect();' showLabel="true">Inspect Queue</div>
  60         </div>
  61
  62         <div id="vl-generic-progress" class='progress'>
  63             <div dojoType="dijit.ProgressBar" style="width:300px" indeterminate="true"></div>
  64         </div>
  65         <div id="vl-generic-progress-with-total" class='hidden progress'>
  66             <div dojoType="dijit.ProgressBar" jsId='vlControlledProgressBar' style="width:300px"></div>
  67         </div>
  68
  69         <div id='vl-marc-upload-status-div' class='hidden'>
  70             <h1>Upload Status</h1><br/>
  71             <div id='vl-upload-status-uploading'><h3>Uploading...</h3></div>
  72             <div id='vl-upload-status-processing' class='hidden'><h3>Processing...</h3></div>
  73         </div>
  74
  75         <!-- MARC upload form -->
  76         <div id='vl-marc-upload-div' class='hidden'>
  77             <h1>Evergreen MARC File Upload</h1><br/>
  78             <form id="vl-marc-upload-form" enctype="multipart/form-data">
  79                 <input type='hidden' name='ses' id='vl-ses-input'/>
  80                 <br/>
  81                 <table>
  82                     <tr>
  83                         <td>Record Type</td>
  84                         <td colspan='4'>
  85                             <select id='vl-record-type' dojoType='dijit.form.FilteringSelect'
  86                                     jsId='vlUploadRecordType' onchange='vlShowUploadForm();'>
  87                                 <option value='bib' selected='selected'>Bibliographic Records</option>
  88                                 <option value='auth'>Authority Records</option>
  89                             </select>
  90                         </td>
  91                     </tr>
  92                     <tr>
  93                         <td>Create a Upload New Queue</td>
  94                         <td>
  95                             <input type='text' dojoType='dijit.form.TextBox' id='vl-queue-name' size='32'></input>
  96                         </td>
  97                         <td>or Add to an Existing Queue</td>
  98                         <td>
  99                             <select jsId='vlUploadQueueSelector' dojoType='dijit.form.FilteringSelect'>
 100                             </select>
 101                         </td>
 102                     </tr>
 103                     <tr>
 104                         <td>Purpose</td>
 105                         <td colspan='4'>
 106                             <select name='purpose' dojoType='dijit.form.FilteringSelect'>
 107                                 <option value='import'>Import</option>
 108                                 <option value='overlay'>Overlay</option>
 109                             </select>
 110                         </td>
 111                     </tr>
 112                     <tr>
 113                         <td>
 114                             <span id="vl-file-label">File to Upload:</span>
 115                         </td>
 116                         <td id='vl-input-td' colspan='4'>
 117                             <input size='48' type="file" name="marc_upload"/>
 118                         </td>
 119                     </tr>
 120                     <tr>
 121                         <td align='center' colspan='4'>
 122                             <button dojoType="dijit.form.Button" onclick="batchUpload()">Upload</button>
 123                         </td>
 124                     </tr>
 125                 </table>
 126             </form>
 127         </div>
 128
 129         <!-- record queue grid -->
 130         <div id='vl-queue-div' class='tall hidden'>
 131             <h1>Record Queue</h1><br/>
 132             <div id='vl-queue-no-records' class='hidden'><h2>There are no records in the selected queue</h2></div>
 133             <script>
 134                 var vlQueueGridLayout;
 135                 function resetVlQueueGridLayout() {
 136                     vlQueueGridLayout = [{
 137                         defaultCell: {styles: 'text-align: center;'},
 138                         cells : [[
 139                             {name: 'Selected', get: vlQueueGridDrawSelectBox },
 140                             {name: 'Import Time', field:'import_time', get:vlGetDateTimeField}
 141                         ]]
 142                     }];
 143                 }
 144             </script>
 145             <div id='vl-queue-div-grid' class='tall'>
 146                 <table width='100%'>
 147                     <tr><td align='left'>
 148                             <button dojoType='dijit.form.Button' onclick='vlSelectAllGridRecords();'>Select All</button>
 149                             <button dojoType='dijit.form.Button' onclick='vlSelectNoGridRecords();'>Select None</button>
 150                             <button dojoType='dijit.form.Button' onclick='vlImportSelectedRecords();'>Import Selected</button>
 151                         </td>
 152                         <td align='right'>
 153                             <span style='padding-right:4px;'>
 154                                 <a href='javascript:void(0);' onclick='
 155                                     var page = parseInt(vlQueueDisplayPage.getValue());
 156                                     if(page < 2) return;
 157                                     vlQueueDisplayPage.setValue(page - 1);
 158                                     retrieveQueuedRecords(currentType, currentQueueId, handleRetrieveRecords);'>&#171; Previous Page</a>
 159                             </span>
 160                             <span style='padding-right:4px;'>
 161                                 <a href='javascript:void(0);' onclick='
 162                                     vlQueueDisplayPage.setValue(parseInt(vlQueueDisplayPage.getValue())+1);
 163                                     retrieveQueuedRecords(currentType, currentQueueId, handleRetrieveRecords);'>Next Page &#187;</a>
 164                             </span>
 165                             Only show possible matches
 166                             <input dojoType='dijit.form.CheckBox' jsId='vlQueueGridShowMatches' checked='checked'/>
 167                             Page Size <input style='width:36px;' dojoType='dijit.form.TextBox' jsId='vlQueueDisplayLimit' value='10'/>
 168                             Page <input style='width:36px;' dojoType='dijit.form.TextBox' jsId='vlQueueDisplayPage' value='1'/>
 169                                 <button dojoType='dijit.form.Button'
 170                                 onclick='retrieveQueuedRecords(currentType, currentQueueId, handleRetrieveRecords)'>Refresh</button>
 171                     </td></tr>
 172                 </table>
 173                 <div class='tall'>
 174                     <div dojoType='dojox.Grid' jsId='vlQueueGrid' class='tall'> </div>
 175                 </div>
 176             </div>
 177         </div>
 178
 179         <!-- Grid of record matches -->
 180         <div id='vl-match-div' class='tall hidden'>
 181             <script>
 182                 var vlMatchGridLayout;
 183                 function resetVlMatchGridLayout() {
 184                     vlMatchGridLayout = [{
 185                         defaultCell: {styles: 'text-align: center;'},
 186                         cells : [[
 187                             {
 188                                 name: 'Overlay Target',
 189                                 get: vlGetOverlayTargetSelector,
 190                                 value: '<input type="radio" name="overlay_target" onclick="vlHandleOverlayTargetSelected();" id="vl-overlay-target-ID"/>'
 191                             },
 192                             {name:'Match Point', field:'field_type'},
 193                             {name: 'ID', field:'id'},
 194                             {   name: 'View MARC',
 195                                 get: vlGetViewMARC,
 196                                 value:'<a href="javascript:void(0);" onclick="vlLoadMARCHtml(RECID);">View MARC</a>'
 197                             },
 198                             {name: 'Creator', get: vlGetCreator},
 199                             {name: 'Create Date', field:'create_date', get: vlGetDateTimeField},
 200                             {name: 'Last Edit Date', field:'edit_date', get: vlGetDateTimeField},
 201                             {name: 'Source', field:'source'},
 202                             {name: 'TCN Source', field:'tcn_source'},
 203                             {name: 'TCN Value', field:'tcn_value'}
 204                         ]]
 205                     }];
 206                 }
 207             </script>
 208             <h1>Import Matches</h1><br/>
 209             <div>
 210                 <button dojoType='dijit.form.Button'
 211                     onclick='displayGlobalDiv("vl-queue-div");'>Back To Import Queue...</button>
 212                 <span style='padding-left:20px;'>
 213                     <input dojoType='dijit.form.CheckBox' jsId='vlOverlayTargetEnable' onclick='vlHandleOverlayTargetSelected'/>
 214                     Overlay selected record with imported record
 215                 </span>
 216             </div>
 217             <div class='tall'>
 218                 <div dojoType='dojox.Grid' jsId='vlMatchGrid'> </div>
 219             </div>
 220         </div>
 221
 222         <!-- MARC as HTML for matched records -->
 223         <div id='vl-match-html-div' class='tall hidden'>
 224             <h1>MARC Record</h1><br/>
 225             <div>
 226                 <button dojoType='dijit.form.Button'
 227                     onclick='displayGlobalDiv("vl-match-div");'>Back To Matches...</button>
 228             </div>
 229             <div>
 230                 <style>#vl-match-record-html td {padding:0px;}</style>
 231                 <div id='vl-match-record-html'> </div>
 232             </div>
 233         </div>
 234
 235         <!-- Form for choosing which queue to view -->
 236         <div id='vl-queue-select-div' class='tall hidden'>
 237             <h1>Select a Queue to Inspect</h1><br/>
 238             <table>
 239                 <tr>
 240                     <td>Queue Type</td>
 241                     <td>
 242                         <select jsId='vlQueueSelectType' dojoType='dijit.form.FilteringSelect' onchange='vlShowQueueSelect();'>
 243                             <option value='bib' selected='selected'>Bibliographic Records</option>
 244                             <option value='auth'>Authority Records</option>
 245                         </select>
 246                     </td>
 247                 </tr>
 248                 <tr>
 249                     <td>Queue</td>
 250                     <td>
 251                         <select jsId='vlQueueSelectQueueList' dojoType='dijit.form.FilteringSelect'>
 252                         </select>
 253                     </td>
 254                 </tr>
 255                 <tr>
 256                     <td colspan='2'>
 257                         <button dojoType='dijit.form.Button' onclick='vlFetchQueueFromForm();'>Retrieve Queue</button>
 258                     </td>
 259                 </tr>
 260             </table>
 261         </div>
 262     </body>
 263 </html>