Buttons now render entirely in Giraffe

Migrations/PopulateTestData.fs

@@ -310,7 +310,7 @@ let CreateItemFromFileName (index: int) (dirName: string) (file: string) =
             | "beer" | "dessert" -> "doubleHeight"
             | "mains" | "wine" | "steak temperatures" -> "doubleHeight doubleWidth"
             | "entrees" -> "doubleWidth"
-            | _ -> ""
+            | _ -> "normal"
 
     Entity.Create {
         id=0

OrderScreen/Controller.fs

@@ -4,8 +4,10 @@ open DredgePos
 open DredgeFramework
 open DredgePos.Types
 open DredgePos.Global.Controller
+open Thoth.Json.Net
 open Giraffe
 open Microsoft.AspNetCore.Http
+open FSharp.Collections
 
 let getOrderScreenData (tableNumber: int) =
     {|
@@ -25,6 +27,24 @@ let loadGrid (gridId: int) =
     else ajaxSuccess {|grid=grid;gridHtml=gridHtml|}
     |> json
 
+
+let renderGrid (grid: grid) =
+    let gridData = grid.data |> Decode.Auto.fromString<Map<string, int[]>>
+    match gridData with
+    | Error message -> failwith message
+    | Ok data ->
+        data
+        |> Map.toArray
+        |> Array.map snd
+        |> Array.map(
+            fun buttonIds ->
+                buttonIds
+                    |> Array.map Entity.GetById<button>
+                    |> Array.map View.itemButton
+                    |> View.gridPage grid
+        )
+
+
 let loadOrderScreenView (ctx: HttpContext)  (tableNumber: int) =
     Authenticate.Model.RequireClerkAuthentication ctx
     let currentClerk = Authenticate.Model.getCurrentClerk ctx
@@ -32,19 +52,27 @@ let loadOrderScreenView (ctx: HttpContext)  (tableNumber: int) =
     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 =
+    let printGroupButtons =
+        Entity.GetAllInVenue<sales_category>
+            |> Array.map View.printGroupButton
+
+    let orderScreenPageGroupButtons =
        Entity.GetAllInVenue<order_screen_page_group>
         |> Array.filter (fun page_group -> page_group.id <> 0)
         |> Array.sortBy (fun {order=order} -> order)
+        |> Array.map View.pageGroupButton
 
-(*    let grids =
-        Model.getAllPageGridsInVenue ()
+    let grids =  Model.getAllPageGridsInVenue ()
+    let pageGroupNodes =
+        grids
         |> Array.map(fun (grid, page_group) ->
-
+            renderGrid grid
+            |> View.pageGroup page_group
         )
-        |>*)
 
-    View.index tableNumber styles scripts metaTags currentClerk orderScreenPageGroups
+
+
+    View.index tableNumber styles scripts metaTags currentClerk printGroupButtons orderScreenPageGroupButtons pageGroupNodes
 
 let loadOrderScreen (ctx: HttpContext)  (tableNumber: int) : HttpHandler =
    Authenticate.Model.RequireClerkAuthentication ctx

OrderScreen/View.fs

@@ -8,7 +8,7 @@ open language
 
 let coverSelector = div [_class "coverSelector"] []
 
-let pageContainer floorplanTable (clerk: clerk) orderScreenPageGroups =
+let pageContainer floorplanTable (clerk: clerk) printGroupButtons orderScreenPageGroupButtons pageGroups =
     div [_id "pageContainer" ; _table floorplanTable] [
         div [_id "leftColumn"] [
             h1 [_class "tableHeading"] [str (getAndReplace "active_table" [floorplanTable.table_number])]
@@ -45,7 +45,7 @@ let pageContainer floorplanTable (clerk: clerk) orderScreenPageGroups =
                 div [_class "functionButtons"] [
                     div [_class "printGroupButtons toggleGroup"] [
                         input [_type "hidden"; _class "value"]
-                        (* Sales category override buttons *)
+                        yield! printGroupButtons
                     ]
                     div [_class "functionColumn"] [
                         posButton "accumulateButton" [ActiveInMode "accumulate"] [str (get "accumulate_function")]
@@ -62,17 +62,18 @@ let pageContainer floorplanTable (clerk: clerk) orderScreenPageGroups =
                         posButton "" [] ["print_function" |> get |> str]
                     ]
                  ]
-                div [_id "pageList"] [
-                    yield! orderScreenPageGroups
-                ]
-                div [_id "pageGroupContainer"] [
-
-                ]
-                div [_class "pagNavigation"] [
-                    posButton "prevButton" [] ["prev_page" |> get |> str]
-                    posButton "nextButton" [] ["next_page" |> get |> str]
-                ]
             ]
+            div [_id "pageList"] [
+                yield! orderScreenPageGroupButtons
+            ]
+            div [_id "pageGroupContainer"] [
+                yield! pageGroups
+            ]
+            div [_class "pageNavigation"] [
+                posButton "prevButton" [] ["prev_page" |> get |> str]
+                posButton "nextButton" [] ["next_page" |> get |> str]
+            ]
+
         ]
     ]
     (* Grid Container, Cover Selector *)
@@ -97,21 +98,54 @@ let gridContainer =
         ]
     ]
 
-let pageGroupButton (pageGroup: order_screen_page_group) = posButton "loadPageGroup" [] [str pageGroup.label]
+let pageGroupButton (pageGroup: order_screen_page_group) = posButton "loadPageGroup" [(attr "data-page-group-id") (string pageGroup.id)] [str pageGroup.label]
+let printGroupButton (printGroup: sales_category) = posButton "" [(attr "data-print-group-id") (string printGroup.id)] [str printGroup.name]
 
-let pageGroup grids =
-    div [_class "pageGroup"] [
-        yield! grids
+let itemButton (button: button) =
+    let extraClasses =
+        if button.primary_action = "spacer" then button.extra_classes + " invisible"
+        elif button.image.Length > 0 then button.extra_classes + " hasImage"
+        else button.extra_classes
+
+    let image =
+        if button.image.Length = 0 then str ""
+        else
+            span [
+                _class "buttonImg"
+                _style $"background-image:url('/images/items/{button.image}');"
+            ] []
+
+    posButton extraClasses [
+        (attr "data-primary-action") button.primary_action
+        (attr "data-secondary-action") button.secondary_action
+    ] [
+        image
+        span [_class "text "] [str button.text]
     ]
 
-let index orderNumber styles scripts tags clerk (orderScreenPageGroups: order_screen_page_group[])  =
+let _dataPageGroup = attr "data-page-group"
+let _dataPageGroupId = attr "data-page-group-id"
 
-    let orderScreenPageGroupButtons =
-        orderScreenPageGroups
-        |> Array.map pageGroupButton
+let pageGroup (page_group: order_screen_page_group) gridNodes  =
+    div [_class "pageGroup"; _dataPageGroupId (string page_group.id); ] [
+        yield! gridNodes
+    ]
+
+let gridPage (grid: grid) buttonNodes =
+    div [
+        _class "gridPage"
+        _style $"
+        grid-template-columns: repeat({grid.cols}, 1fr);
+        grid-template-rows: repeat({grid.rows}, 1fr);"
+    ] [
+        yield! buttonNodes
+    ]
+
+
+let index orderNumber styles scripts tags clerk printGroupButtons orderScreenPageGroupButtons pageGroupNodes  =
 
     [|
-        pageContainer (DredgePos.Floorplan.Model.getTable orderNumber) clerk orderScreenPageGroupButtons
+        pageContainer (DredgePos.Floorplan.Model.getTable orderNumber) clerk printGroupButtons orderScreenPageGroupButtons pageGroupNodes
         posButtonTemplate
         gridContainer
         coverSelector

typescript/dredgepos.orderScreen.ts

@@ -43,7 +43,6 @@ const loadPageGroup = (e: Event) => {
     button.addClass('active')
 
     let pageGroupId = button.data('page-group-id')
-
     container.find('.pageGroup').hide()
 
     let activeGrid = $(`.pageGroup[data-page-group-id=${pageGroupId}]`)