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