Prettied up some buttons, fixed some awful UI stuff

RiggiG · Dec 9, 2019 · d148d21 · d148d21
1 parent d75b0d6
commit d148d21
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 23 deletions.
diff --git a/system/#pos_boot.sh# b/system/#pos_boot.sh#
@@ -0,0 +1,4 @@
+#!/bin/bash
+sleep 10
+cd /.RPiPOS/442projects-team-7/system
+npm start
diff --git a/system/datastore/datastore.db b/system/datastore/datastore.db
diff --git a/system/display/custLookup.css b/system/display/custLookup.css
@@ -16,6 +16,13 @@ html, body {
     transform: translate(-50%, -50%);
     text-align: center;
 }
+input {
+    border:none;
+}
+button {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+
 tbody {
   display:block;
   height:95%;
@@ -232,4 +239,4 @@ input[type=button] {
 
 input[type=button]:hover{
     background-color: #808080;
-}
+}
diff --git a/system/display/custLookup.html b/system/display/custLookup.html
@@ -10,7 +10,7 @@
         <div id="Table-Wrapper">
             <table id="Item-List-Panel">
                 <thead id="Column-Headers">
-                    <tr">
+                    <tr>
                         <th id="CID-Column">CID #</th>
                         <th id="Customer-Column">Customer Name</th>
                         <th id="Phone-Column">Phone #</th>
@@ -82,7 +82,7 @@
                         <td class = "tableColumn4"><input id="row_9_email_input" class="input1" disabled="true"></td></td>
                         <td class = "tableColumn5"><input id="row_9_address_input" class="input2" disabled="true"></td></td>
                     </tr>
-                    <tr id="row_10" class = "tableEntryB">
+                   <tr id="row_10" class = "tableEntryB">
                         <td class = "tableColumn1"></td>
                         <td class = "tableColumn2"><input id="row_10_name_input" class="input1" disabled="true"></td>
                         <td class = "tableColumn3"><input id="row_10_phone_input" class="input1" disabled="true"></td></td>
@@ -179,4 +179,4 @@
             <script src="../main.js"></script>
         </div>
     </body>
-</html>
+</html>
diff --git a/system/display/login.css b/system/display/login.css
@@ -43,11 +43,12 @@ form .login {
 h1 .login {
 
 }
-label .login {
+label.login.centered {
     display: inline-block;
     text-align: right;
     font-size: 120%;
     font-weight: bold;
+    width: 150px;
 
 }
 input[type=password],input[type=text] {

diff --git a/system/display/pos.css b/system/display/pos.css
@@ -40,6 +40,9 @@ tr:hover {
     transform: translate(-50%, -50%);
     text-align: center;
 }
+button {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
 /*Quick Button Panel*/
 aside {
     width:30%;
@@ -65,6 +68,7 @@ div.pbtns {
     padding: 2%;
     width: 31%;
     height: 100px;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
 .qbtn-group button:hover{
@@ -77,6 +81,7 @@ div.pbtns {
     padding: 2%;
     width: 31%;
     height: 100px;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
 .ubtn-group button:hover{
@@ -89,6 +94,7 @@ div.pbtns {
     padding: 2%;
     width: 31%;
     height: 75px;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
 .pbtn-group button:hover{
@@ -101,6 +107,7 @@ div.flex-row {
 }
 div.customer-column {
     flex: 50%;
+    height: 2em;
 }
 #Customer-Info {
     padding-left: 1%;
@@ -195,13 +202,17 @@ div.customer-column {
   font-size: 36px;
   color: #818181;
   background-color: #1b1b1b;
+  border:none;
   transition: 0.3s;
 
 }
 .fulloverlay label {
     padding: 8px;
     text-decoration: none;
     font-size: 36px;
+    float: left;
+    clear: left;
+    width: 220px;
 }
 
 .fulloverlay input[type=number] {
@@ -319,6 +330,7 @@ div #Quick-Buttons {
   top: 59px;
 
   background: #2F2F2F;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 section {
   position: absolute;
@@ -328,6 +340,7 @@ section {
   top: 59px;
 
   background: #2F2F2F;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 div #Transaction-Info-Panel {
   position: relative;
@@ -380,7 +393,7 @@ div #Column-Headers {
 }
 div #SKU-Column {
   position: relative;
-  width: 10%;
+  width: 114px;
   height: 30px;
   left: 0px;
   top: 0px;
@@ -534,6 +547,7 @@ label .login {
   width: 150px;
   height: 30px;
   margin: 4px 2px;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
 input[type=text]:focus, input[type=password]:focus {

diff --git a/system/display/pos.html b/system/display/pos.html
@@ -238,22 +238,22 @@
 		  <strong><em>Customer Info</em></strong>
 		  <div class="flex-row">
 		    <div class="customer-column">
-		      <p id="custidval">654321</p>
+		      <p id="custidval"></p>
 		    </div>
 		  </div>
 		  <div class="flex-row">
 		    <div class="customer-column">
-		      <p id="custnameval">John Doe</p> <!--Concatenate first+last name in script that sets this via customer selection-->
+		      <p id="custnameval">Guest</p> <!--Concatenate first+last name in script that sets this via customer selection-->
 		    </div>
 		  </div>
 		  <div class="flex-row">
 		    <div class="customer-column">
-		      <p id="custphoneval">(555) 555-5555</p>
+		      <p id="custphoneval"></p>
 		    </div>
 		  </div>
 		  <div class="flex-row">
 		    <div class="customer-column">
-		      <p id="custemailval">[email protected]</p>
+		      <p id="custemailval"></p>
 		    </div>
 		  </div>
 		</div>
@@ -264,7 +264,7 @@
 		      <p id="custpointsavaillabel">Available:</p>
 		    </div>
 		    <div class="customer-column">
-		      <p id="custpointsavailval">3</p>
+		      <p id="custpointsavailval">0</p>
 		    </div>
 		  </div>
 		  <div class="flex-row">
@@ -280,7 +280,7 @@
 		      <p id="custpointsremaininglabel">Remaining:</p>
 		    </div>
 		    <div class="customer-column">
-		      <p id="custpointsremainingval">3</p>
+		      <p id="custpointsremainingval">0</p>
 		    </div>
 		  </div>
 		</div>
@@ -327,7 +327,7 @@
 	    <div class="qbtn-group">
 	      <button onClick="requestProductRow(1); updateTotals();">Taco</button>
 	      <button onClick="requestProductRow(2); updateTotals();">Burrito</button>
-	      <button onClick="requestProductRow(3); updateTotals();">Bowl</button>
+	      <button onClick="requestProductRow(4); updateTotals();">Bowl</button>
 	    </div>
 	    <p class="btn-group">Protein</p>
 	    <div class="qbtn-group">
@@ -353,9 +353,9 @@
 	  <div class="ubtns">
       <p class="btn-group">Utility</p>
 	    <div class="ubtn-group">
-	      <button>Utility Button</button>
-	      <button>Utility Button</button>
-	      <button>Utility Button</button>
+	      <button>Clear Sale</button>
+	      <button>Process Refund</button>
+	      <button>Clock In/Out</button>
 	    </div>
 	   <!-- <br>
 	    <div class="ubtn-group">
@@ -370,8 +370,8 @@
 	  <div class="pbtns">
 	    <div class="pbtn-group">
 	      <button onclick="openNav();">Accept Cash Payment</button>
-	      <button>Payment Button</button>
-	      <button>Payment Button</button>
+	      <button>Accept Credit Payment</button>
+	      <button>Accept Check Payment</button>
 	    </div>
 	  </div>
         </aside>
@@ -411,6 +411,7 @@
       function closeNav() {
 	  document.getElementById("cashpaymentolay").style.height = "0%";
 	  document.getElementById("oldsaleoverlay").style.height = "0%";
+	  updateTotals();
       }
 
       function processPayment() {

diff --git a/system/main.js b/system/main.js
@@ -25,7 +25,8 @@ function createWindow(){
 	    nodeIntegration: true
 	}
     })
-
+    win.removeMenu();
+    //win.setFullScreen(true);
     win.loadFile('./display/index.html')
     win.on('closed',() => {
 		win=null;
@@ -333,8 +334,10 @@ ipcMain.on('loadPosDisplay', function(event) {
 	    nodeIntegration: true
 	}
     })
-	 mainWindow.loadFile('./display/pos.html');
-	 mainWindow.once('ready-to-show', () => {
+	mainWindow.loadFile('./display/pos.html');
+        mainWindow.removeMenu();
+        //mainWindow.setFullScreen(true);
+	mainWindow.once('ready-to-show', () => {
   		 mainWindow.show();
 	});
 	 mainWindow.on('closed',() => {
@@ -349,7 +352,7 @@ ipcMain.on('loadItemManip', function(event) {
 	let win = new BrowserWindow({
 	show: false,
 	width: 1025,
-	height: 560,
+	height: 940,
 	resizable: false,
 	alwaysOnTop: true,
 	webPreferences: {
@@ -372,7 +375,7 @@ ipcMain.on('loadCustLookup', function(event) {
 	let win = new BrowserWindow({
 	show: false,
 	width: 1025,
-	height: 560,
+	height: 740,
 	resizable: false,
 	alwaysOnTop: true,
 	webPreferences: {