Open-ILS/src/templates/staff/admin/workstation/t_print_config.tt2

   1 <div class="container" id="admin-workstation-printing">
   2
   3   <style>
   4     /* TODO: more context and move me */
   5     textarea {
   6       height: 400px;
   7       width: 100%;
   8     }
   9     .tab-pane .row {
  10       padding-top: 20px;
  11     }
  12     h2 { margin-bottom: 15px }
  13
  14   </style>
  15
  16   <div class="row">
  17     <div class="col-md-12">
  18       <h2>[% l('Hatch Printer Settings') %]</h2>
  19
  20       <div class="alert alert-warning"
  21         ng-if="hatchIsOpen() && !useHatchPrinting()">
  22         <p>
  23 [% l("Hatch printing is not enabled on this browser.  The settings below will have no effect until Hatch printing is enabled.") %]
  24           <a href="./admin/workstation/hatch" target="_self"
  25             title="[% l('Hatch Administration') %]">
  26             [% l('Enable Hatch Printing.') %]
  27           </a>
  28         </p>
  29       </div>
  30     </div>
  31   </div>
  32
  33   <div class="row">
  34     <div class="col-md-12">
  35       <ul class="nav nav-tabs">
  36         <li ng-class="{active : context == 'default'}">
  37           <a href='' ng-click="setContext('default')">[% l('Default') %]</a>
  38         </li>
  39         <li ng-class="{active : context == 'receipt'}">
  40           <a href='' ng-click="setContext('receipt')">[% l('Receipt') %]</a>
  41         </li>
  42         <li ng-class="{active : context == 'label'}">
  43           <a href='' ng-click="setContext('label')">[% l('Label') %]</a>
  44         </li>
  45         <li ng-class="{active : context == 'mail'}">
  46           <a href='' ng-click="setContext('mail')">[% l('Mail') %]</a>
  47         </li>
  48         <li ng-class="{active : context == 'offline'}">
  49           <a href='' ng-click="setContext('offline')">[% l('Offline') %]</a>
  50         </li>
  51         <li ng-class="{active : isTestView}" class="pull-right">
  52           <a href='' ng-click="isTestView=true">[% l('Test Printing') %]</a>
  53         </li>
  54       </ul>
  55       <div class="tab-content">
  56         <div class="tab-pane active">
  57
  58           <div class="alert alert-warning" ng-if="!isTestView && !hatchIsOpen()">
  59 [% l('Hatch is not installed in this browser.  Printing must be configured via the native browser print configuration.') %]
  60           </div>
  61
  62           <!-- printer config UI -->
  63           <div class="row" ng-hide="isTestView || !hatchIsOpen()">
  64             <div class="col-md-6">
  65               <div class="input-group">
  66                 <div class="input-group-btn" uib-dropdown>
  67                   <button type="button" class="btn btn-default" uib-dropdown-toggle>
  68                     [% l('Select Printer') %]
  69                     <span class="caret"></span></button>
  70                   <ul uib-dropdown-menu>
  71                     <li ng-repeat="printer in printers">
  72                       <a href='' ng-click="setPrinter(printer.name)">
  73                         {{printer.name}}
  74                       </a>
  75                     </li>
  76                   </ul>
  77                 </div><!-- /btn-group -->
  78                 <input ng-if="!printers[0]" type="text"
  79                   class="form-control" disabled="disabled"
  80                   value="[% l('No Printers Found') %]">
  81                 <input ng-if="printers[0] && !printConfig[context]" type="text"
  82                   class="form-control" disabled="disabled"
  83                   value="[% l('No Printer Selected') %]">
  84                 <input ng-if="printConfig[context].printer" type="text"
  85                   class="form-control" disabled="disabled"
  86                   value="{{printConfig[context].printer}}">
  87               </div><!-- /input-group -->
  88             </div><!-- col -->
  89             <div class="col-md-4">
  90               <span class="pad-right-min">
  91                 <button class="btn btn-warning"
  92                   ng-click="resetPrinterSettings(context)">
  93                   [% l('Reset Form') %]
  94                 </button>
  95               </span>
  96               <button class="btn btn-success"
  97                 ng-click="savePrinterSettings(context)">
  98                 [% l('Apply Changes') %]
  99               </button>
 100             </div>
 101           </div><!-- row -->
 102
 103           <div class="row" ng-hide="isTestView || !hatchIsOpen()">
 104             <div class="col-md-10">
 105               <div class="row">
 106                 <div class="col-md-1"></div>
 107                 <div class="col-md-2">
 108                   <label>[% l('Print Color') %]</label>
 109                 </div>
 110                 <div class="col-md-4">
 111                   <select
 112                     class="form-control"
 113                     ng-model="printConfig[context].printColor"
 114                     ng-options="val for val in printerOptions.printColor | orderBy:'val'">
 115                   </select>
 116                 </div>
 117                 <div class="col-md-3">
 118                   <span>[% l('Default: [_1]',
 119                     '{{printerOptions.defaultPrintColor}}') %]</span>
 120                 </div>
 121               </div>
 122               <div class="row">
 123                 <div class="col-md-1"></div>
 124                 <div class="col-md-2">
 125                   <label>[% l('Paper Source') %]</label>
 126                 </div>
 127                 <div class="col-md-4">
 128                   <select
 129                     class="form-control"
 130                     ng-model="printConfig[context].paperSource"
 131                     ng-options="val for val in printerOptions.paperSource | orderBy:'val'">
 132                   </select>
 133                 </div>
 134                 <div class="col-md-3">
 135                   <span>[% l('Default: [_1]',
 136                     '{{printerOptions.defaultPaperSource}}') %]</span>
 137                 </div>
 138               </div>
 139
 140               <div class="row">
 141                 <div class="col-md-1"></div>
 142                 <div class="col-md-2">
 143                   <label>[% l('Paper Type') %]</label>
 144                 </div>
 145                 <div class="col-md-4">
 146                   <select
 147                     class="form-control"
 148                     ng-model="printConfig[context].paper"
 149                     ng-options="val for val in printerOptions.paper | orderBy:'val'">
 150                   </select>
 151                 </div>
 152                 <div class="col-md-3">
 153                   <span>[% l('Default: [_1]',
 154                     '{{printerOptions.defaultPaper}}') %]</span>
 155                 </div>
 156               </div>
 157
 158               <div class="row">
 159                 <div class="col-md-1"></div>
 160                 <div class="col-md-2">
 161                   <label>[% l('Page Orientation') %]</label>
 162                 </div>
 163                 <div class="col-md-4">
 164                   <select
 165                     class="form-control"
 166                     ng-model="printConfig[context].pageOrientation"
 167                     ng-options="val for val in printerOptions.pageOrientation | orderBy:'val'">
 168                   </select>
 169                 </div>
 170                 <div class="col-md-3">
 171                   <span>[% l('Default: [_1]',
 172                     '{{printerOptions.defaultPageOrientation}}') %]</span>
 173                 </div>
 174               </div>
 175
 176               <div class="row">
 177                 <div class="col-md-1"></div>
 178                 <div class="col-md-2">
 179                   <label>[% l('Collation') %]</label>
 180                 </div>
 181                 <div class="col-md-4">
 182                   <select
 183                     class="form-control"
 184                     ng-model="printConfig[context].collation"
 185                     ng-options="val for val in printerOptions.collation | orderBy:'val'">
 186                   </select>
 187                 </div>
 188                 <div class="col-md-3">
 189                   <span>[% l('Default: [_1]',
 190                     '{{printerOptions.defaultCollation}}') %]</span>
 191                 </div>
 192               </div>
 193
 194               <div class="row">
 195                 <div class="col-md-1"></div>
 196                 <div class="col-md-2">
 197                   <label>[% l('Print Quality') %]</label>
 198                 </div>
 199                 <div class="col-md-4">
 200                   <select
 201                     class="form-control"
 202                     ng-model="printConfig[context].printQuality"
 203                     ng-options="val for val in printerOptions.printQuality | orderBy:'val'">
 204                   </select>
 205                 </div>
 206                 <div class="col-md-3">
 207                   <span>[% l('Default: [_1]',
 208                     '{{printerOptions.defaultPrintQuality}}') %]</span>
 209                 </div>
 210               </div>
 211
 212               <div class="row">
 213                 <div class="col-md-1"></div>
 214                 <div class="col-md-2">
 215                   <label>[% l('Print Sides') %]</label>
 216                 </div>
 217                 <div class="col-md-4">
 218                   <select
 219                     class="form-control"
 220                     ng-model="printConfig[context].printSides"
 221                     ng-options="val for val in printerOptions.printSides | orderBy:'val'">
 222                   </select>
 223                 </div>
 224                 <div class="col-md-3">
 225                   <span>[% l('Default: [_1]',
 226                     '{{printerOptions.defaultPrintSides}}') %]</span>
 227                 </div>
 228               </div>
 229
 230               <div class="row">
 231                 <div class="col-md-1"></div>
 232                 <div class="col-md-2">
 233                   <label>[% l('Number of Items') %]</label>
 234                 </div>
 235                 <div class="col-md-4">
 236                   <input type="text" size="4" class="form-control"
 237                     ng-model="printConfig[context].copies"/>
 238                 </div>
 239                 <div class="col-md-3">
 240                   <span>[% l('Default: [_1]',
 241                     '{{printerOptions.defaultCopies}}') %]</span>
 242                 </div>
 243               </div>
 244
 245               <div class="row">
 246                 <div class="col-md-1">
 247                   <input type="radio" name="margins"
 248                     ng-click="printConfig[context].autoMargins=true"
 249                     ng-checked="printConfig[context].autoMargins"/>
 250                 </div>
 251                 <div class="col-md-2">
 252                   <label>[% l('Automatic Margins') %]</label>
 253                 </div>
 254                 <div class="col-md-4">
 255                   <select
 256                     class="form-control"
 257                     ng-model="printConfig[context].marginType"
 258                     ng-disabled="!printConfig[context].autoMargins"
 259                     ng-options="val for val in printerOptions.marginType | orderBy:'val'">
 260                   </select>
 261                 </div>
 262                 <div class="col-md-3">
 263                   <span>[% l('Default: [_1]',
 264                     '{{printerOptions.defaultMarginType}}') %]</span>
 265                 </div>
 266               </div>
 267
 268               <div class="row">
 269                 <div class="col-md-1">
 270                   <input type="radio" name="margins"
 271                     ng-click="printConfig[context].autoMargins=false"
 272                     ng-checked="!printConfig[context].autoMargins"/>
 273                 </div>
 274                 <div class="col-md-2">
 275                   <label>[% l('Manual Margins') %]</label>
 276                 </div>
 277                 <div class="col-md-2">
 278                   <div class="input-group">
 279                     <span class="input-group-addon">[% l('Left') %]</span>
 280                     <input type="text" class="form-control"
 281                       ng-disabled="printConfig[context].autoMargins"
 282                       ng-model="printConfig[context].leftMargin"/>
 283                   </div>
 284                 </div>
 285                 <div class="col-md-2">
 286                   <div class="input-group">
 287                     <span class="input-group-addon">[% l('Top') %]</span>
 288                     <input type="text" class="form-control"
 289                       ng-disabled="printConfig[context].autoMargins"
 290                       ng-model="printConfig[context].topMargin"/>
 291                   </div>
 292                 </div>
 293               </div>
 294               <div class="row">
 295                 <div class="col-md-3"></div>
 296                 <div class="col-md-2">
 297                   <div class="input-group">
 298                     <span class="input-group-addon">[% l('Right') %]</span>
 299                     <input type="text" class="form-control"
 300                       ng-disabled="printConfig[context].autoMargins"
 301                       ng-model="printConfig[context].rightMargin"/>
 302                   </div>
 303                 </div>
 304                 <div class="col-md-2">
 305                   <div class="input-group">
 306                     <span class="input-group-addon">[% l('Bottom') %]</span>
 307                     <input type="text" class="form-control"
 308                       ng-disabled="printConfig[context].autoMargins"
 309                       ng-model="printConfig[context].bottomMargin"/>
 310                   </div>
 311                 </div>
 312               </div>
 313
 314               <div class="row">
 315                 <div class="col-md-1"></div>
 316                 <div class="col-md-2"><label>[% l('Page Ranges') %]</label></div>
 317                 <div class="col-md-2">
 318                   [% l('All Pages') %]
 319                   <input type='radio' name='pageRanges'
 320                     ng-checked="printConfig[context].allPages"
 321                     ng-click="printConfig[context].allPages=true"/>
 322                 </div>
 323                 <div class="col-md-2">
 324                   [% l('Page Range') %]
 325                   <input type='radio' name='pageRanges'
 326                     ng-checked="!printConfig[context].allPages"
 327                     ng-click="printConfig[context].allPages=false"/>
 328                 </div>
 329               </div>
 330               <div class="row">
 331                 <div class="col-md-3"></div>
 332                 <div class="col-md-2">
 333                   <div class="input-group">
 334                     <span class="input-group-addon">[% l('Start') %]</span>
 335                     <input type="text" class="form-control"
 336                       ng-disabled="printConfig[context].allPages"
 337                       ng-model="printConfig[context].pageRanges[0]"/>
 338                   </div>
 339                 </div>
 340                 <div class="col-md-2">
 341                   <div class="input-group">
 342                     <span class="input-group-addon">[% l('End') %]</span>
 343                     <input type="text" class="form-control"
 344                       ng-disabled="printConfig[context].allPages"
 345                       ng-model="printConfig[context].pageRanges[1]"/>
 346                   </div>
 347                 </div>
 348                 <!-- TODO: support multiple page ranges by
 349                     dynamically adding additional pageRanges[X] pairs -->
 350               </div>
 351             </div><!-- col -->
 352           </div><!-- row -->
 353
 354           <div class="row" ng-hide="isTestView || !hatchIsOpen()">
 355             <div class="col-md-12">
 356               <h3>[% l('Compiled Printer Settings') %]</h3>
 357               <pre>{{printerConfString()}}</pre>
 358             </div><!-- col -->
 359           </div><!-- row -->
 360
 361           <!-- printer test UI -->
 362           <div class="row" ng-show="isTestView">
 363             <div class="col-md-10">
 364               <div class="btn-group">
 365                 <button type="button"
 366                   class="btn btn-default btn-lg"
 367                   ng-class="{active : contentType=='text/plain'}"
 368                   ng-click="setContentType('text/plain')">[% l('Plain Text') %]</button>
 369                 <button type="button"
 370                   class="btn btn-default btn-lg"
 371                   ng-class="{active : contentType=='text/html'}"
 372                   ng-click="setContentType('text/html')">[% l('HTML') %]</button>
 373               </div>
 374             </div>
 375             <div class="col-md-2">
 376               <div class="input-group pull-right">
 377                 <div class="input-group-btn">
 378                   <button type="button"
 379                     ng-click="testPrint()"
 380                     class="btn btn-default btn-success">
 381                       [% l('Print') %]</button>
 382                   <button type="button"
 383                     ng-click="testPrint(true)"
 384                     class="btn btn-default btn-info">
 385                       [% l('Print with Dialog') %]</button>
 386                 </div>
 387               </div>
 388             </div>
 389           </div>
 390
 391           <div class="row" ng-show="isTestView">
 392             <div class="col-md-12">
 393               <div ng-show="contentType=='text/plain'"
 394 ng-init="textPrintContent='
 395 [% l('Test Print') %]
 396
 397 1234567890
 398
 399 12345678901234567890
 400
 401 123456789012345678901234567890
 402
 403 1234567890123456789012345678901234567890
 404
 405 12345678901234567890123456789012345678901234567890
 406
 407 12345678901234567890123456789012345678901234567890123456790
 408
 409 [% l('Test Print') %]
 410 '">
 411         <pre><textarea>{{textPrintContent}}</textarea></pre>
 412       </div>
 413
 414       <div ng-show="contentType=='text/html'">
 415         <textarea ng-model="htmlPrintContent"
 416 ng-init="htmlPrintContent='
 417 <div>
 418   <style>p { color: blue }</style>
 419   <h2>[% l('Test HTML Print') %]</h2>
 420   <br/>
 421   <img src=\'https://[% ctx.hostname %]/opac/images/main_logo.png\' width=\'140\' height=\'24\'/>
 422   <p>[% l('Welcome, Stranger!') %]</p>
 423   <p>{{value1}}</p>
 424   <p>{{value2}}</p>
 425   <p>{{date_value | date}}</p>
 426 </div>
 427 '">
 428                 </textarea>
 429               </div><!-- html content -->
 430             </div><!-- col -->
 431           </div><!-- row -->
 432         </div><!-- tab pane -->
 433       </div><!-- tab content -->
 434     </div><!-- col -->
 435   </div><!-- row -->
 436 </div><!-- container -->
 437