Added Basic Order Screen

wwwroot/scripts/ts/dredgepos.core.ts

@@ -3,7 +3,7 @@
         mode: [],
         languageVars: {}
     }
-
+    
 
     /** Parses a language variable. */
      let lang = (key: string, replacements?: string[] | string) => {

wwwroot/scripts/ts/dredgepos.floorplan.ts

@@ -500,12 +500,14 @@ const decorationClicked = (event: Konva.KonvaEventObject<any>) => {
     let decorationShape = event.target as Konva.Image
     if(isInMode('edit')){
         turnOffMode('tableSelected')
-        if ((Floorplan.transformer.nodes().length > 0 && Floorplan.transformer.nodes()[0] != decorationShape) || Floorplan.transformer.nodes().length == 0) {
+        if ((isInMode('decorationSelected') && Floorplan.selectedDecorationId != Number(decorationShape.id())) || !isInMode('decorationSelected')) {
             selectDecorationShape(decorationShape)
         }  else {
             deselectTables()
             decorationShape.moveToBottom()
         }
+    } else {
+        deselectTables()
     }
 }
 
@@ -612,11 +614,14 @@ const setupKonva = () => {
         height: dimensions.height,
     })
 
-    Floorplan.stage.on('click', e => {
+    const stageClick = (e: Konva.KonvaEventObject<any> ) => {
         if(e.target == Floorplan.stage){
             deselectTables()
         }
-    })
+    }
+
+    Floorplan.stage.on('click', stageClick)
+    Floorplan.stage.on('tap', stageClick)
 
     Floorplan.transformer = new Konva.Transformer({
         rotationSnaps: [0, 15, 30, 45, 60, 75, 90, 105, 120, 135, 150, 165, 180, 225, 270, -15, -30, -45, -60, -75, -90, -105, -120, -135, -150, -165, -180, -225, -270, 360, -360],

wwwroot/scripts/ts/dredgepos.orderScreen.ts

@@ -0,0 +1,48 @@
+interface OrderScreen{
+    order_screen_pages: order_screen_page[]
+}
+
+let OrderScreen : OrderScreen = {
+    order_screen_pages: null
+}
+
+const loadPageGroup = (e: Event) => {
+    let button = $(e.target)
+    $('.loadPageGroup').removeClass('active')
+    button.addClass('active')
+    let pageGroupId = button.data('page-group-id')
+    $('.pageGroup').hide()
+    let activeGrid = $(`.pageGroup[data-page-group-id=${pageGroupId}]`)
+
+    let navButtons = $('.pageNavigation')
+
+    activeGrid.find('.gridPage').length > 1
+        ? navButtons.show()
+        : navButtons.hide()
+
+    activeGrid.css('display', 'inline-flex')
+}
+
+const setupOrderScreen = (data: OrderScreen) => {
+    OrderScreen = data
+    let doc = $(document)
+    doc.on('click', '.nextButton', goToNextPage)
+    doc.on('click', '.prevButton', goToPrevPage)
+    doc.on('click', '.loadPageGroup', loadPageGroup)
+
+    let initialPage = $('.loadPageGroup').first().trigger('click')
+}
+
+/**
+ * @param direction 1 for forward, -1 for backwards.
+ */
+const navigatePage = (direction: number) => {
+    let grid = $('.pageGroup:visible')
+    grid.get()[0].scrollLeft += grid.width() * direction
+}
+
+const goToNextPage = () => navigatePage(1)
+const goToPrevPage = () => navigatePage(-1)
+
+
+$(() => ajax('/orderScreen/getOrderScreenData/1', null, 'get', setupOrderScreen, null, null) )

wwwroot/scripts/ts/types.ts

@@ -63,4 +63,8 @@ interface keyboard {
     shift: boolean
     layouts: VirtualKeyboard
     currentLayout: string
-}
+}
+
+interface order_screen_page_group  {id: number; venue_id: number; label: string}
+interface order_screen_page{id: number; order_screen_page_group_id: number; grid_id: number}
+interface grid {id: number; grid_name: string; grid_rows: number; grid_cols: number; grid_data: string}

wwwroot/styles/sass/dark.theme.sass

@@ -13,4 +13,5 @@
     --posbutton-text-color-active: #fff
     --posbutton-background: #232B30 -webkit-linear-gradient(top, #3D4850 3%, #000 4%, #333 100%)
     --posbutton-background-active: #20282D -webkit-gradient(linear, left top, left bottom, color-stop(3%,#20282D), color-stop(51%,#252E34), color-stop(100%,#222A30)) 0 top
+    --void-button-background: red -webkit-gradient(linear, left top, left bottom, color-stop(3%,darkred), color-stop(51%,darkred), color-stop(100%,red)) 0 top
 

wwwroot/styles/sass/dredgepos.core.sass

@@ -1,8 +1,18 @@
+@font-face
+    font-family: "manrope"
+    src: url("/fonts/OpenSans-Regular.ttf") format('truetype')
+    font-style: normal
+
+
 *
     margin: 0
     padding: 0
     box-sizing: border-box
-    font-family: Arial, Helvetica, sans-serif
+    font-family: 'manrope', sans-serif
+    scroll-behavior: smooth
+
+.rtl
+    direction: rtl
 
 input[type=text], select, textarea
     padding-left: 1em
@@ -50,17 +60,15 @@ body
     background: var(--posbutton-background)
     text-shadow: 1px 1px #1f272b
     border: solid 1px var(--posbutton-border-color)
+    overflow: hidden
+    cursor: pointer
+    text-decoration: none
 
 .posHeader
     padding: 0.5em
     color: var(--pos-header-text-color)
     background: var(--pos-header-background)
-
-.posButton.active,.posButton:active, .posButton:focus
-    border-color: var(--posbutton-border-color-active)
-    color: var(--posbutton-text-color-active)
-    background: var(--posbutton-background-active) /* webkit */
-    box-shadow: 1px 1px 1px rgba(255,255,255,0.1) /* CSS3 */
+    cursor: default
 
 #pageContainer
     @include flex
@@ -69,9 +77,12 @@ body
 .posButton, .posHeader
     @include flex
     text-align: center
-    cursor: default
 
 .posButton.active, .posButton:active
     border: inset 2px
 
+.posButton.voidButton
+    background: var(--void-button-background)
 
+.invisible
+    visibility: hidden

wwwroot/styles/sass/dredgepos.orderScreen.sass

@@ -0,0 +1,198 @@
+@import dredgepos.keyboards
+
+#leftColumn
+    @include flex-column
+    flex-basis: 30%
+    height: 100%
+    background-color: grey
+
+    > *
+        @include flex-column-item
+
+    .tableHeading
+        @include flex
+        color: black
+        background-color: white
+        flex-basis: 5%
+
+    .tableInfo
+        @include flex
+        flex-basis: 5%
+
+        > *
+            @include flex-item
+            @include flex
+
+    .orderBox
+        flex-basis: 75%
+        background: var(--global-bgcolor)
+
+    .orderBoxInfo
+        flex-basis: 5%
+        background-color: white
+
+    .orderBoxFooter
+        flex-basis: 10%
+
+#rightColumn
+    @include flex-column
+    height: 100%
+    flex-basis: 70%
+    background-color: var(--global-bgcolor)
+    border-left: 2px solid var(--global-border-color)
+
+    #topHalf
+        @include flex-column
+        @include flex-column-item
+        flex-basis: 30%
+        flex-grow:  0
+        flex-shrink: 0
+
+        .utilityButtons
+            @include flex-column-item
+            @include flex
+            flex-basis: 20%
+
+            > *
+                @include flex-item
+                @include flex
+                flex-basis: 30%
+
+            .logoutButton
+                flex-basis: 10%
+
+
+        .functionButtons
+            @include flex-column-item
+            @include flex
+            flex-basis: 80%
+
+            > *
+                @include flex-item
+                @include flex-column
+
+                > *
+                    @include flex-column-item
+
+
+    #pageList
+        @include flex
+        @include flex-column-item
+        flex-basis: 10%
+        background-color: magenta
+        flex-grow: 0
+        flex-shrink: 0
+
+        > *
+            @include flex-item
+            border-bottom: solid 2px var(--global-border-color)
+
+        .active
+            border-bottom: none
+
+    #pageContainer
+        @include flex-column
+        @include flex-column-item
+        justify-content: flex-end
+        flex-basis: 45%
+        height: 50%
+        scrollbar-width: none
+        -ms-overflow-style: none
+
+        ::-webkit-scrollbar
+             display: none
+
+        .pageGroup
+            /*display: inline-flex*/
+            @include flex-column-item
+            flex-basis: 100%
+            flex-grow: 0
+            overflow-x: auto
+            display: none
+
+            .gridPage
+                width: 100%
+                height: 100%
+                flex-shrink: 0
+                flex-grow: 0
+                display: grid
+                grid-template-columns: repeat(6, 1fr)
+                grid-template-rows: repeat(8, 1fr)
+
+                .doubleWidth
+                    width: calc(200%)
+                    z-index: 10
+
+                .doubleHeight
+                    height: calc(200%)
+                    z-index: 10
+
+                .hasImage
+                    .buttonImg
+                        background-repeat: no-repeat
+                        background-size: contain
+                        background-position: center
+                        background-origin: content-box
+
+                .hasImage.normal
+                    font-size: 0.8em
+                    .buttonImg
+                        flex-basis: 40%
+                        height: 100%
+                        padding: 0.7em
+                        justify-content: flex-end
+
+                    .text
+                        @include flex
+                        justify-content: flex-start
+                        flex-basis: 60%
+                        height: 100%
+
+                .hasImage.doubleHeight
+                    @include flex-column
+
+                    .buttonImg
+                        padding: 0.6em
+                        flex-basis: 80%
+                        width: 100%
+
+                    .text
+                        @include flex
+                        flex-basis: 20%
+                        width: 100%
+
+                .hasImage.doubleWidth
+                    flex-direction: row
+                    .buttonImg
+                        @include flex
+                        flex-basis: 30%
+                        height: 100%
+                        padding-top: 2%
+
+                    .text
+                        @include flex
+                        flex-basis: 70%
+                        height: 100%
+                        justify-content: flex-start
+
+                .hasImage.doubleHeight.doubleWidth
+                    flex-direction: row
+
+                    .buttonImg
+                        @include flex
+                        flex-basis: 50%
+                        height: 100%
+
+
+                    .text
+                        @include flex
+                        flex-basis: 50%
+                        height: 100%
+
+    .pageNavigation
+        @include flex
+        @include flex-column-item
+        flex-basis: 15%
+
+        > *
+            @include flex-item

wwwroot/themes/restaurant/authenticate.tpl.htm

@@ -6,7 +6,7 @@
     <meta name = "viewport" content = "user-scalable = no, initial-scale=0.8,maximum-scale=0.8 ,shrink-to-fit=yes"  />
     <link rel="manifest" href="/manifest.webmanifest">
 </head>
-<body ontouchstart="" class="darkMode">
+<body>
 	<div id="authenticator">
 
 	</div>

wwwroot/themes/restaurant/orderScreen.tpl.htm

@@ -1,109 +1,71 @@
 <!DOCTYPE html>
 <html>
 <head>
-	<title>DredgePOS</title>	
+	<title>DredgePOS</title>
 	<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
 	<script src="https://unpkg.com/current-device/umd/current-device.min.js"></script>
     <meta name="apple-mobile-web-app-capable" content="yes" />
-	<link rel="stylesheet" type="text/css" href="themes/restaurant/theme.css?id=ax" media="screen" />
-	<link rel="stylesheet" type="text/css" href="themes/restaurant/screen.css?id=ax" media="screen" />
-    <meta name = "viewport" content = "user-scalable = no, initial-scale=0.8, maximum-scale=0.8 ,shrink-to-fit=yes"  />
-	<script type="text/javascript" src="currency.min.js"></script>
-    <script type="text/javascript" src="posFunctions.js"></script>
+    <meta name = "viewport" content = "user-scalable = no ,shrink-to-fit=yes"  />
+    <link rel="manifest" href="/manifest.webmanifest">
 </head>
-<body class="darkMode">
-	<span id="covers" style="display:none"><!--[var:covers]--></span> 
-	<div id="pageContainer">
-		<div id="leftColumn">
-			<div id="tableDetails">
-                <h2><!--[var:activeTable]--></h2>
-				<div>
-					<a class="posButton coverNumbers"><!--[var:coverString]--></a>
-					<a class="posButton"><!--[var:loggedInAs]--></a>
-				</div>
-            </div>
-            <div id="orderBoxContainer">
-    			<!--[template:orderBoxTable]-->
-            </div>
-			<div id="leftColumnFooter">
-				<p class="messageBox"></p>
-				<h2 class="orderBoxTotals">Total Price: <span >$0.00</span></h2>
-                <p class="selectedTotal">($0.00 Selected)</p>
-			</div>
-		</div>
-		<div id="rightColumn">
-			<div id="topBar">
-					<a class="posButton selectCover"><!--[lang:select_covers]--></a>
-					<a class="posButton freeText" data-type="instruction" data-id="freetext" 
-						data-name=""
-						data-price="0"
-						data-category="0"
-						data-department="0"
-						data-printgroup="0"><!--[lang:freetext_button]--></a>
-					<a class="posButton numpadMultiplier"><!--[lang:numpad_button]--></a>
-				<div class="exit posButton" onclick="loadScreen('tableMap')">×</div>
-			</div>
-			<div id="topHalf">
-	
-				<div class="functionColumn">
-					<a onclick="setPrintGroupOverride(false, this)" class="posButton toggle default active"><!--[lang:print_with|default]--></a>
-					<a onclick="setPrintGroupOverride('Starters', this)" class="posButton toggle"><!--[lang:print_with|Starters]--></a>
-					<a onclick="setPrintGroupOverride('Mains', this)" class="posButton toggle"><!--[lang:print_with|Mains]--></a>
-					<a onclick="setPrintGroupOverride('Desserts', this)" class="posButton toggle"><!--[lang:print_with|Desserts]--></a>
-					<a onclick="setPrintGroupOverride('Drinks', this)" class="posButton toggle"><!--[lang:print_with|Drinks]--></a>
-				</div>
-				<div class="functionColumn">
-                    <a class="posButton accumulateButton"><!--[lang:accumulate_function]--></a>								
-					<a class="posButton void"><!--[lang:void]--></a>
-					<a class="posButton saveOrder"><!--[lang:print_function]--></a>		
-				</div>
-				<div class="functionColumn">
-	
-				</div>
-				<div class="endFunctionColumn">		
-					
-				</div>
-			</div>
-			<div id="middleHalf">
-				<!--[template:categoryMenu]-->
-				
-			</div>
-			<div id="bottomHalf">
-				<div id="pageWrapper">
-									
-				</div>
-			</div>
-			<div class="pageControls">
-				<a class="posButton previousPage"><!--[lang:prev_page]--></a>
-				<a class="posButton nextPage"><!--[lang:next_page]--></a>
-			</div>
-		</div>
-		<div id="coverControl" class="popupBox"></div>
-		<div id="gridContainer">
-			<div id="gridHeader">
-				<h3>Heading</h3>
-				<a class="posButton closeGrid" onclick="hideGrids()">x</a>
-			</div>
-			<div id="gridBody"></div>
-		</div>
-	</div>
+<body>
+
+<div id="pageContainer">
+    <div id="leftColumn">
+        <h1 class="tableHeading"><!--[lang:active_table]--></h1>
+        <div class="tableInfo">
+            <a href="#" class="posButton"><!--[lang:covers]--></a>
+            <a class="posHeader">Logged in as <!--[arr:clerk|clerk_name]--></a></a>
+        </div>
+        <div class="orderBox">
+
+        </div>
+        <div class="orderBoxInfo"></div>
+        <div class="orderBoxFooter">
+
+        </div>
+    </div>
+    <div id="rightColumn">
+        <div id="topHalf">
+            <div class="utilityButtons">
+                <a class="posButton"></a>
+                <a class="posButton"></a>
+                <a class="posButton"></a>
+                <a class="posButton logoutButton">×</a>
+            </div>
+            <div class="functionButtons">
+                <div class="functionColumn">
+                    <a class="posButton"></a>
+                    <a class="posButton"></a>
+                    <a class="posButton"></a>
+                    <a class="posButton"></a>
+                    <a class="posButton"></a>
+                    <a class="posButton"></a>
+                </div>
+                <div class="functionColumn">
+                    <a class="posButton"></a>
+                    <a class="posButton"></a>
+                    <a class="posButton voidButton"><!--[lang:void]--></a>
+                    <a class="posButton"></a>
+                </div>
+                <div class="functionColumn"></div>
+                <div class="functionColumn"></div>
+            </div>
+        </div>
+        <div id="pageList">
+            <!--[var:categoryList]-->
+        </div>
+        <div id="pageContainer">
+                <!--[var:pageGroups]-->
+        </div>
+        <div class="pageNavigation">
+            <a class="posButton prevButton"><!--[lang:prev_page]--></a>
+            <a class="posButton nextButton"><!--[lang:next_page]--></a>
+        </div>
+    </div>
+</div>
+
+<!--[template:keyboards]-->
 
-	<!--[template:keyboards]-->
-	<script type="text/javascript">
-		$(document).ready( function () {
-			//Base grid width must be defined for multipage functionality to work.
-            baseGridWidth = $('#bottomHalf').width();
-			dredgePosSetup('#pageContainer');			
-			loadCategory('Starters');	
-			
-			updateTotal();
-						
-            $("#orderBox tbody tr").on( 'click', function ( e ) {
-                selectRow($(this));
-            } )
-        } );
-  
-		
-	</script>
 </body>
 </html>

wwwroot/themes/restaurant/orderScreen/button_image.tpl.htm

@@ -0,0 +1 @@
+<span class="buttonImg" style="background-image:url(images/items/<!--[var:image]-->);"></span>

wwwroot/themes/restaurant/orderScreen/grid_button.tpl.htm

@@ -0,0 +1,6 @@
+<a href="#" class="posButton <!--[var:extra_classes]-->"
+   data-primary-action="<!--[var:primary_action]-->"
+   data-secondary-action="<!--[var:secondary_action]-->" <!--[var: extra_data]--> <!--[var: extra_styles]-->>
+    <!--[var:image]-->
+    <span class="text"><!--[var:text]--></span>
+</a>

wwwroot/themes/restaurant/orderScreen/page.tpl.htm

@@ -0,0 +1,3 @@
+<div class="gridPage">
+    <!--[var:pageButtons]-->
+</div>

wwwroot/themes/restaurant/orderScreen/page_group.tpl.htm

@@ -0,0 +1,3 @@
+<div class="pageGroup" data-page-group-id="<!--[var:page_group_id]-->">
+    <!--[var:pages]-->
+</div>

wwwroot/themes/restaurant/orderScreen/page_group_button.tpl.htm

@@ -0,0 +1,3 @@
+<a data-page-group-id="<!--[arr:page|id]-->" class="posButton loadPageGroup">
+    <!--[arr:page|label]-->
+</a>

wwwroot/themes/restaurant/virtualNumpad.tpl.htm

@@ -6,23 +6,23 @@
 	<div id="virtualNumpadInput"></div>
 	<div id="virtualNumpadButtons">
 		<div class="virtualNumpadRow">
-		<a data-value="1" class="posButton virtualNumpadButton">1</a>
-		<a data-value="2" class="posButton virtualNumpadButton">2</a>
-		<a data-value="3" class="posButton virtualNumpadButton">3</a>
+		<a href="#" data-value="1" class="posButton virtualNumpadButton">1</a>
+		<a href="#" data-value="2" class="posButton virtualNumpadButton">2</a>
+		<a href="#" data-value="3" class="posButton virtualNumpadButton">3</a>
 		</div><div class="virtualNumpadRow">
-		<a data-value="4" class="posButton virtualNumpadButton">4</a>
-		<a data-value="5" class="posButton virtualNumpadButton">5</a>
-		<a data-value="6" class="posButton virtualNumpadButton">6</a>
+		<a href="#" data-value="4" class="posButton virtualNumpadButton">4</a>
+		<a href="#" data-value="5" class="posButton virtualNumpadButton">5</a>
+		<a href="#" data-value="6" class="posButton virtualNumpadButton">6</a>
 		</div><div class="virtualNumpadRow">
-		<a data-value="7" class="posButton virtualNumpadButton">7</a>
-		<a data-value="8" class="posButton virtualNumpadButton">8</a>
-		<a data-value="9" class="posButton virtualNumpadButton">9</a>
+		<a href="#" data-value="7" class="posButton virtualNumpadButton">7</a>
+		<a href="#" data-value="8" class="posButton virtualNumpadButton">8</a>
+		<a href="#" data-value="9" class="posButton virtualNumpadButton">9</a>
 		</div><div class="virtualNumpadRow">
-		<a data-value="0" class="posButton virtualNumpadButton">0</a>				
-		<a data-value="." class="posButton virtualNumpadButton">.</a>	
-		<a data-value="clear" class="posButton virtualNumpadButton virtualNumpadClear">Clear</a>
-		</div><div class="virtualNumpadRow">		
-		<a data-value="submit" class="posButton virtualNumpadButton virtualNumpadSubmit">Enter</a>		
+		<a href="#" data-value="0" class="posButton virtualNumpadButton">0</a>
+		<a href="#" data-value="." class="posButton virtualNumpadButton">.</a>
+		<a href="#" data-value="clear" class="posButton virtualNumpadButton virtualNumpadClear">Clear</a>
+		</div><div class="virtualNumpadRow">
+		<a href="#" data-value="submit" class="posButton virtualNumpadButton virtualNumpadSubmit">Enter</a>
 		</div>
 	</div>
 </div>