Updates to Order Screen

Global/Router.fs

@@ -8,4 +8,11 @@ let htmlViewWithContext func =
         func (snd ctx)
             |> htmlView
     )
+    |> warbler
+
+let htmlViewWithContextAndId (id: int) func =
+    (fun ctx ->
+        func (snd ctx) id
+            |> htmlView
+    )
     |> warbler

Global/View.fs

@@ -1,9 +1,11 @@
 module DredgePos.Global.View
 
 open DredgeFramework
+open DredgePos.Types
 open Giraffe.ViewEngine
 
 let Value = attr "data-value"
+let _table (value: floorplan_table) = value |> jsonEncode |> (attr "data-table")
 
 let VisibleInMode (value: string list) = value |> jsonEncode |> (attr "data-visible-in-mode")
 let InvisibleInMode (value: string list) = value |> jsonEncode |> (attr "data-invisible-in-mode")

OrderScreen/Controller.fs

@@ -3,6 +3,7 @@
 open DredgePos
 open DredgeFramework
 open DredgePos.Types
+open DredgePos.Global.Controller
 open Giraffe
 open Microsoft.AspNetCore.Http
 
@@ -24,6 +25,20 @@ let loadGrid (gridId: int) =
     else ajaxSuccess {|grid=grid;gridHtml=gridHtml|}
     |> json
 
+let loadOrderScreenView (ctx: HttpContext)  (tableNumber: int) =
+    Authenticate.Model.RequireClerkAuthentication ctx
+    let currentClerk = Authenticate.Model.getCurrentClerk ctx
+    let styles = [|"dredgepos.orderScreen.css"|] |> addDefaultStyles
+    let scripts = [|"dredgepos.tables.js";"./external/currency.min.js";"dredgepos.orderScreen.js"; |] |> addDefaultScripts
+    let metaTags = [|"viewport", "user-scalable = no, initial-scale=0.8,maximum-scale=0.8 ,shrink-to-fit=yes"|] |> addDefaultMetaTags
+
+    let orderScreenPageGroups =
+       Entity.GetAllInVenue<order_screen_page_group>
+        |> Array.filter (fun page_group -> page_group.id <> 0)
+        |> Array.sortBy (fun {order=order} -> order)
+
+    View.index tableNumber styles scripts metaTags currentClerk orderScreenPageGroups
+
 let loadOrderScreen (ctx: HttpContext)  (tableNumber: int) : HttpHandler =
    Authenticate.Model.RequireClerkAuthentication ctx
 

OrderScreen/Model.fs

@@ -128,7 +128,6 @@ let renderGrid (grid: grid) =
 
 let loadGrid gridId = renderGrid (Entity.GetById<grid> gridId)
 
-
 let getPagesHTML (gridInfo: grid * order_screen_page_group) =
     let grid, pageGroup = gridInfo
 

OrderScreen/Router.fs

@@ -11,5 +11,5 @@ let router = router {
     getf "/getGridHtml/%i" Controller.loadGrid
     post "/updateCovers" (bindJson<floorplan_table> (fun table -> Entity.Update table |> Array.head |> DredgeFramework.ajaxSuccess |> json))
     get "/" (warbler (fun ctx -> Controller.loadOrderScreen (snd ctx) 0))
-    getf "/%i" (fun number -> (warbler (fun ctx -> Controller.loadOrderScreen (snd ctx) number)))
+    getf "/%i" (fun number -> (warbler (fun ctx -> htmlView <| Controller.loadOrderScreenView (snd ctx) number)))
 }

OrderScreen/View.fs

@@ -6,12 +6,14 @@ open DredgePos.Global.Controller
 open Giraffe.ViewEngine
 open language
 
-let pageContainer orderNumber (clerk: clerk) =
-    div [_id "pageContainer"] [
+let coverSelector = div [_class "coverSelector"] []
+
+let pageContainer floorplanTable (clerk: clerk) orderScreenPageGroups =
+    div [_id "pageContainer" ; _table floorplanTable] [
         div [_id "leftColumn"] [
-            h1 [_class "tableHeading"] [str (string orderNumber)]
+            h1 [_class "tableHeading"] [str (getAndReplace "active_table" [floorplanTable.table_number])]
             div [_class "tableInfo"] [
-                (* Cover Change Button *)
+                coverSelector
                 posButton "" [] [str (getAndReplace "logged_in_as" [clerk.name])]
             ]
             div [_class "orderBox"] [
@@ -61,7 +63,7 @@ let pageContainer orderNumber (clerk: clerk) =
                     ]
                  ]
                 div [_id "pageList"] [
-                    (* Category List *)
+                    yield! orderScreenPageGroups
                 ]
                 div [_id "pageGroupContainer"] [
                     (* Page Groups *)
@@ -95,12 +97,16 @@ let gridContainer =
         ]
     ]
 
-let coverSelector =
-    div [_class "coverSelector"] []
+let pageGroupButton (pageGroup: order_screen_page_group) = posButton "loadPageGroup" [] [str pageGroup.label]
+
+let index orderNumber styles scripts tags clerk (orderScreenPageGroups: order_screen_page_group[])  =
+
+    let orderScreenPageGroupButtons =
+        orderScreenPageGroups
+        |> Array.map pageGroupButton
 
-let index orderNumber clerk styles scripts tags =
     [|
-        pageContainer orderNumber clerk
+        pageContainer (DredgePos.Floorplan.Model.getTable orderNumber) clerk orderScreenPageGroupButtons
         posButtonTemplate
         gridContainer
         coverSelector

typescript/dredgepos.orderScreen.ts

@@ -59,7 +59,6 @@ const loadPageGroup = (e: Event) => {
 
 const setupOrderScreen = (data: OrderScreenData) => {
 
-    $('.coverSelector, .gridContainer').hide()
 
     OrderScreen.order_screen_pages = data.order_screen_pages
     OrderScreen.sales_categories = data.sales_categories
@@ -426,6 +425,7 @@ const getTotalOfRows = (rows: JQuery) => {
 
 const getQty = (row: JQuery) => Number(row.getColumnValue(lang('qty_header')))
 const getUnitPrice = (row: JQuery) => moneyFromString(row.getColumnValue(lang('price_header')))
+
 const calculateRowTotal = (row: JQuery) => {
     let price = getUnitPrice(row)
     let qty = getQty(row)
@@ -600,5 +600,7 @@ const generateCoverSelector = () => {
 
 $(() => {
     OrderScreen.table = $('#pageContainer').data('table') || null
-    ajax('/order/getOrderScreenData/1', null, 'get', setupOrderScreen, null, null)
+    $('.coverSelector, .gridContainer').hide()
+    if(OrderScreen.table)
+        ajax(`/order/getOrderScreenData/${OrderScreen.table.table_number}`, null, 'get', setupOrderScreen, null, null)
 })