LP1840773 SCKO Angular

Signed-off-by: Bill Erickson <berickxx@gmail.com>

diff --git a/Open-ILS/src/eg2/src/app/scko/banner.component.html b/Open-ILS/src/eg2/src/app/scko/banner.component.html
index 52a11da..963fe5d 100644 (file)
--- a/Open-ILS/src/eg2/src/app/scko/banner.component.html
+++ b/Open-ILS/src/eg2/src/app/scko/banner.component.html
@@ -14,6 +14,8 @@
           <form (ngSubmit)="submitPatronLogin()" #patronLoginForm="ngForm"
             autocomplete="off" class="form-validated form-inline">
 
+            <label class="sr-only" for="patron-username" i18n>Username</label>
+
             <input type="text" class="form-control border border-dark shadow-rounded" 
               autocomplete="off" id="patron-username" required 
               [(ngModel)]="patronUsername" name="patron-username"
@@ -33,6 +35,32 @@
       </div>
     </ng-container>
 
+    <ng-container *ngIf="scko.patron">
+      <div id="scko-scan-input-text" i18n>Please enter an item barcode</div>
+      <div class="d-flex mt-3 mb-3">
+        <div class="flex-1"></div>
+        <div>
+          <form (ngSubmit)="submitBarcode()" #barcodeForm="ngForm"
+            autocomplete="off" class="form-validated form-inline">
+
+            <label class="sr-only" for="item-barcode" i18n>Item Barcode</label>
+
+            <input type="text" class="form-control border border-dark shadow-rounded" 
+              autocomplete="off" id="item-barcode" required 
+              [(ngModel)]="itemBarcode" name="item-barcode"
+              placeholder="Item Barcode" i18n-placeholder>
+
+          </form>
+        </div>
+        <div class="flex-1 d-flex">
+          <div class="flex-1"></div>
+          <div id="scko-welcome-message" class="mr-2 rounded" i18n>Welcome,
+            {{scko.patron.pref_first_given_name() || scko.patron.first_given_name()}}
+          </div>
+        </div>
+      </div>
+    </ng-container>
+
   </div>
 </div>
 

diff --git a/Open-ILS/src/eg2/src/app/scko/banner.component.ts b/Open-ILS/src/eg2/src/app/scko/banner.component.ts
index 0447864..a632ebe 100644 (file)
--- a/Open-ILS/src/eg2/src/app/scko/banner.component.ts
+++ b/Open-ILS/src/eg2/src/app/scko/banner.component.ts
@@ -27,6 +27,8 @@ export class SckoBannerComponent implements OnInit {
     staffWorkstation: string;
     staffLoginFailed = false;
 
+    itemBarcode: string;
+
     constructor(
         private route: ActivatedRoute,
         private store: StoreService,
@@ -183,5 +185,9 @@ export class SckoBannerComponent implements OnInit {
         });
     }
 
+    submitBarcode() {
+        console.log('Submitting barcode ', this.itemBarcode);
+    }
+
 }
 

diff --git a/Open-ILS/src/eg2/src/app/scko/scko.component.css b/Open-ILS/src/eg2/src/app/scko/scko.component.css
index 3da1af8..bf79e6e 100644 (file)
--- a/Open-ILS/src/eg2/src/app/scko/scko.component.css
+++ b/Open-ILS/src/eg2/src/app/scko/scko.component.css
@@ -26,4 +26,54 @@ body {
   padding: 10px;                                                             
 } 
 
+#scko-welcome-message {
+  font-size: 16px;                                                           
+  background: none repeat scroll 0 0 #252525;                                
+  color: white;                                                              
+  padding: 10px;                                                             
+}
+
+#scko-circ-info-div fieldset {
+    margin: 15px 10px 15px 10px;
+    padding: 8px;
+    background: #ffffff; /* Old browsers */
+    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
+    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk4JSIgc3RvcC1jb2xvcj0iI2UwZTBlMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
+    background: -moz-linear-gradient(top,  #ffffff 0%, #e0e0e0 98%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(98%,#e0e0e0)); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(top,  #ffffff 0%,#e0e0e0 98%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top,  #ffffff 0%,#e0e0e0 98%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(top,  #ffffff 0%,#e0e0e0 98%); /* IE10+ */
+    background: linear-gradient(to bottom,  #ffffff 0%,#e0e0e0 98%); /* W3C */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e0e0e0',GradientType=0 ); /* IE6-8 */
+    border: 1px solid #DDDDDD;
+    color: #333333;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+}
+
+#scko-circ-info-div fieldset legend {
+    font-size: 13px;
+    color: #00593d;
+    background-color: white;
+    font-weight: bold;
+}
 
+.scko-button { 
+    color: #FBF9F9;
+    font-weight: bold;
+    letter-spacing: 1px;
+    font-size: 94%;
+    text-shadow: 1px 1px 1px #555555;
+    cursor: pointer !important;
+    border-radius: 12px;
+    border: 1px solid #007a54;
+    background: linear-gradient(#007a54, #00593d);
+    background: -moz-linear-gradient(#007a54, #00593d);
+    background: -o-linear-gradient(#007a54, #00593d);
+    background: -webkit-linear-gradient(#007a54, #00593d);
+    background-color: #00593d;
+    padding: 5px 10px 6px;
+    outline: 0 none;
+    text-decoration: none;
+}

diff --git a/Open-ILS/src/eg2/src/app/scko/scko.component.html b/Open-ILS/src/eg2/src/app/scko/scko.component.html
index 24bf192..3edb18b 100644 (file)
--- a/Open-ILS/src/eg2/src/app/scko/scko.component.html
+++ b/Open-ILS/src/eg2/src/app/scko/scko.component.html
@@ -1,7 +1,12 @@
 
 <eg-scko-banner></eg-scko-banner>
 
-<router-outlet></router-outlet>
+<div *ngIf="scko.patron" class="row mt-3">
+  <div class="col-lg-9">
+    <router-outlet></router-outlet>
+  </div>
+  <div class="col-lg-3"><eg-scko-summary></eg-scko-summary></div>
+</div>
 
 <!-- global toast alerts -->
 <eg-toast></eg-toast>

diff --git a/Open-ILS/src/eg2/src/app/scko/scko.module.ts b/Open-ILS/src/eg2/src/app/scko/scko.module.ts
index 31f202d..5743595 100644 (file)
--- a/Open-ILS/src/eg2/src/app/scko/scko.module.ts
+++ b/Open-ILS/src/eg2/src/app/scko/scko.module.ts
@@ -8,11 +8,13 @@ import {SckoComponent} from './scko.component';
 import {SckoRoutingModule} from './routing.module';
 import {SckoService} from './scko.service';
 import {SckoBannerComponent} from './banner.component';
+import {SckoSummaryComponent} from './summary.component';
 
 @NgModule({
   declarations: [
     SckoComponent,
     SckoBannerComponent,
+    SckoSummaryComponent,
   ],
   imports: [
     EgCommonModule,

diff --git a/Open-ILS/src/eg2/src/app/scko/summary.component.html b/Open-ILS/src/eg2/src/app/scko/summary.component.html
new file mode 100644 (file)
index 0000000..4f20b9c
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/scko/summary.component.html
@@ -0,0 +1,70 @@
+
+<div id="scko-circ-info-div">
+
+  <div class="pl-2">
+    <span>
+      <a (click)="null" class="mr-2">
+        <button type="button" class="scko-button">Home</button>
+      </a>
+    </span>
+    <span>
+      <a (click)="null">
+        <button type="button" class="scko-button">Logout</button>
+      </a>
+    </span>
+  </div>
+
+  <div class="pl-2 mt-3">
+    <div class="form-check form-check-inline">
+      <input class="form-check-input" name="receipt-type" type="radio" 
+        [(ngModel)]="receiptType" id="receipt-email" value="email">
+      <label class="form-check-label" for="receipt-email" i18n>Email</label>
+    </div>
+
+    <div class="form-check form-check-inline">
+      <input class="form-check-input" name="receipt-type" type="radio" 
+        [(ngModel)]="receiptType" id="receipt-print" value="print">
+      <label class="form-check-label" for="receipt-print" i18n>Print</label>
+    </div>
+
+    <div class="form-check form-check-inline">
+      <input class="form-check-input" name="receipt-type" type="radio" 
+        [(ngModel)]="receiptType" id="receipt-none" value="none">
+      <label class="form-check-label" for="receipt-none" i18n>None</label>
+    </div>
+  </div>
+
+  <fieldset>
+    <legend i18n>Items Checked Out</legend>
+    <div id='oils-selfck-circ-session-total'></div>
+    <div id='oils-selfck-circ-account-total'></div>
+    <div>
+      <a href='javascript:void(0);' id='oils-selfck-items-out-details-link'>
+        <button type="button" class="scko-button" i18n>View Items Out</button>
+      </a>
+    </div>
+  </fieldset>
+  <fieldset>
+    <legend i18n>Holds</legend>
+    <div id='oils-selfck-holds-ready'></div>
+    <div id='oils-selfck-holds-total'></div>
+    <div>
+      <a href='javascript:void(0);' id='oils-selfck-hold-details-link'>
+        <button type="button" class="scko-button" i18n>View Holds</button>
+      </a>
+    </div>
+  </fieldset>
+  <fieldset>
+    <legend i18n>Fines</legend>
+    <div id='oils-selfck-fines-total'></div>
+    <div>
+      <span>
+        <a href='javascript:void(0);' id='oils-selfck-view-fines-link'>
+          <button type="button" class="scko-button" i18n>View Details</button>
+        </a>
+      </span>
+    </div>
+  </fieldset>
+</div>
+
+

diff --git a/Open-ILS/src/eg2/src/app/scko/summary.component.ts b/Open-ILS/src/eg2/src/app/scko/summary.component.ts
new file mode 100644 (file)
index 0000000..4baaff1
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/scko/summary.component.ts
@@ -0,0 +1,35 @@
+import {Component, OnInit, NgZone, HostListener} from '@angular/core';
+import {Location} from '@angular/common';
+import {Router, ActivatedRoute, NavigationEnd} from '@angular/router';
+import {AuthService, AuthWsState} from '@eg/core/auth.service';
+import {NetService} from '@eg/core/net.service';
+import {StoreService} from '@eg/core/store.service';
+import {SckoService} from './scko.service';
+import {OrgService} from '@eg/core/org.service';
+import {EventService, EgEvent} from '@eg/core/event.service';
+
+@Component({
+  selector: 'eg-scko-summary',
+  templateUrl: 'summary.component.html'
+})
+
+export class SckoSummaryComponent implements OnInit {
+
+    receiptType = 'email';
+
+    constructor(
+        private route: ActivatedRoute,
+        private store: StoreService,
+        private net: NetService,
+        private auth: AuthService,
+        private evt: EventService,
+        private ngLocation: Location,
+        private org: OrgService,
+        public scko: SckoService
+    ) {}
+
+    ngOnInit() {
+
+    }
+}
+