Added Basic Order Screen

AjaxController.fs

@@ -42,19 +42,27 @@ let unmergeTable tableNumber =
     unmergedTables |> json
 
 
-let getFloorplanData venue =
-    let tableList = Floorplan.tableList venue
+let getFloorplanData (id: int) =
+    let tableList = Entity.getAllInVenue<floorplan_table>
     let reservationList = getReservationList tableList
     {|
         tables = tableList
-        decorations = Decorations.decorationList venue
-        activeTableNumbers = Floorplan.getActiveTables venue
-        rooms = Floorplan.getRoomList venue
+        decorations = Entity.getAllInVenue<floorplan_decoration>
+        activeTableNumbers = Floorplan.getActiveTables (getCurrentVenue())
+        rooms = Entity.getAllInVenue<floorplan_room>
         reservations = reservationList
     |}
     |> ajaxSuccess
     |> json
 
+let getOrderScreenData (id: int) =
+    let pages = Entity.getAllInVenue<order_screen_page_group>
+    {|
+        order_screen_pages = pages
+    |}
+    |> ajaxSuccess
+    |> json
+
 let getKeyboardLayout (language: string) =
     let layout = $"""wwwroot/languages/{language}/keyboardLayout.json""" |> GetFileContents
     map [
@@ -62,28 +70,13 @@ let getKeyboardLayout (language: string) =
             "data", layout
         ] |> json
 
-
-let getRoomTablesAndDecorations roomId =
-    let tables = Floorplan.tablesInRoom roomId
-    let decorations = Decorations.decorationsInRoom roomId
-    let data = {|
-        tables = tables
-        decorations = decorations
-    |}
-
-    data |> ajaxSuccess |> json
-
-let getTableData tableNumber = json <| Floorplan.getTable tableNumber
-
-let updateTableShape (table: floorplan_table) =
-    Floorplan.updateTableShape table |> ignore
-    getTableData table.table_number
-
 let transformTable (table: floorplan_table) =
-    Floorplan.updateTablePosition table |> ignore
-    getTableData table.table_number
+        Entity.updateInDatabase table
+        |> ajaxSuccess
+        |> json
 
 let createTable (tableData: floorplan_table) =
+
     let result =
         if tableExists tableData.table_number = "False" then
             ajaxSuccess (addNewTable tableData)
@@ -92,7 +85,8 @@ let createTable (tableData: floorplan_table) =
     result |> json
 
 let deleteTable (table: floorplan_table) =
-    Floorplan.deleteTable table.table_number
+    Entity.deleteById<floorplan_table> table.id
+        |> ignore
     table |> ajaxSuccess |> json
 
 let transferTable (origin, destination) =
@@ -116,13 +110,19 @@ let AddDecoration (data: floorplan_decoration) =
         decoration_room = data.decoration_room
     }
 
-    Decorations.CreateDecoration decoration |> ajaxSuccess |> json
+    Entity.addToDatabase decoration
+        |> ajaxSuccess
+        |> json
 
-let UpdateDecoration data =
-    Decorations.UpdateDecoration data |> ignore
+let UpdateDecoration (data: floorplan_decoration) =
+    Entity.updateInDatabase data
+        |> ignore
     ajaxSuccess "true" |> json
 
-let DeleteDecoration id = ajaxSuccess (Decorations.DeleteDecoration id) |> json
+let DeleteDecoration (decorationToDelete: floorplan_decoration) =
+    Entity.deleteById<floorplan_decoration> decorationToDelete.id
+    |> ajaxSuccess
+    |> json
 
 let newEmptyReservation (reservation: reservation) =
     let newReservation = {reservation with

Decorations.module.fs

@@ -8,22 +8,7 @@ open Dapper.FSharp
 open DredgePos
 open Types
 
-let decorationList venue =
-    select {
-        table "floorplan_decorations"
-        innerJoin "floorplan_rooms" "id" "decoration_room"
-    }
-    |> db.SelectJoin<floorplan_decoration, floorplan_room>
-    |> Array.filter (fun (_, room) -> room.venue_id = venue )
-    |> Array.map fst
-
-let decorationsInRoom (roomId: int) =
-    select {
-        table "floorplan_decorations"
-        where (eq "decoration_room" roomId)
-    }
-    |> db.Select<floorplan_decoration>
-
+let decorationsInRoom (roomId: int) = Entity.getAllByColumn "decoration_room" roomId
 
 let getImageName (image: string, path: string) =
     let imageName =
@@ -61,26 +46,3 @@ let generateDecorator () =
         |> Array.chunkBySize 4
         |> Array.map getImageRowHtml
         |> JoinArray ""
-
-let CreateDecoration (decoration: floorplan_decoration) =
-    insert {
-        table "floorplan_decorations"
-        value decoration
-    }
-    |> db.InsertOutput
-    |> first
-
-
-let UpdateDecoration (decoration: floorplan_decoration) =
-    update {
-        table "floorplan_decorations"
-        set decoration
-        where (eq "id" decoration.id )
-    } |> db.Update
-
-let DeleteDecoration (decoration: floorplan_decoration) =
-    delete {
-        table "floorplan_decorations"
-        where (eq "id" decoration.id)
-    } |> db.Delete |> ignore
-    decoration

DredgeFramework.module.fs

@@ -16,6 +16,8 @@ open Thoth.Json.Net
 
 let (|?) lhs rhs = if lhs = null then rhs else lhs
 
+let getCurrentVenue () = 1
+
 let map list = list |> Map.ofList
 
 let JoinArray (char: string) (array: 'a[]) = String.Join(char, array)

DredgePos.fsproj

@@ -14,6 +14,7 @@
         <Compile Include="Theme.module.fs" />
         <Compile Include="Reservations.module.fs" />
         <Compile Include="Floorplan.module.fs" />
+        <Compile Include="OrderScreen.module.fs" />
         <Compile Include="Decorations.module.fs" />
         <Compile Include="Clerk.module.fs" />
         <Compile Include="Session.module.fs" />
@@ -41,6 +42,7 @@
       <PackageReference Include="Dapper.Contrib" Version="2.0.78" />
       <PackageReference Include="Dapper.FSharp" Version="1.16.0" />
       <PackageReference Include="FSharp.Data" Version="4.0.1" />
+      <PackageReference Include="Pluralize.NET.Core" Version="1.0.0" />
       <PackageReference Include="Saturn" Version="0.15.0-preview03" />
 	  <PackageReference Include="System.Data.SqlClient" Version="4.8.0" />
       <PackageReference Include="FSharp.Data.SqlClient" Version="2.1.0-beta1" />
@@ -63,6 +65,7 @@
       <Content Include="xslt\orderHtmltoXML.xslt" />
       <Content Include="xslt\htmlToEscPos.xslt" />
       <Content Include=".gitignore" />
+      <Folder Include="wwwroot\fonts" />
       <Folder Include="wwwroot\scripts\js" />
       <Folder Include="wwwroot\styles\css" />
     </ItemGroup>

Floorplan.module.fs

@@ -3,8 +3,6 @@
 open DredgePos
 open Reservations
 
-let currentVenue = 1
-
 open System
 open System.IO
 open System.Xml.Linq
@@ -14,28 +12,6 @@ open Dapper.FSharp
 open Thoth.Json.Net
 open Types
 
-let floorplan_table_decoder : Decoder<floorplan_table> =
-        Decode.object
-            (fun get ->
-                {
-                    table_number = get.Required.Field "table_number" Decode.int
-                    room_id = get.Required.Field "room_id" Decode.int
-                    venue_id = get.Required.Field "venue_id" Decode.int
-                    pos_x = get.Required.Field "pos_x" Decode.int
-                    pos_y = get.Required.Field "pos_y" Decode.int
-                    shape = get.Required.Field "shape" Decode.string
-                    width = get.Required.Field "width" Decode.int
-                    height = get.Required.Field "height" Decode.int
-                    default_covers = get.Required.Field "default_covers" Decode.int
-                    rotation = get.Required.Field "rotation" Decode.int
-                    merged_children = get.Required.Field "merged_children" Decode.string
-                    previous_state = get.Required.Field "previous_state" Decode.string
-                    status = get.Required.Field "status" Decode.int
-                    id = get.Required.Field "id" Decode.int
-                })
-
-
-
 let activeTablePath = "tables/active/"
 
 let getTableFile (tableNumber: int) =
@@ -54,7 +30,7 @@ let fileNameToTableNumber (fileName: string) = //Takes a file name for a floorpl
         (fileName.Split "/table").[1] |> int
     else 0
 
-let openTables = //Get a list of all open tables.
+let openTables () = //Get a list of all open tables.
     let tableList = Directory.GetFiles(activeTablePath)
 
     tableList
@@ -117,12 +93,13 @@ let saveOrderToTable orderXML tableNumber =
     File.WriteAllText(tableFile, tableXML)
 
 let getTable (tableNumber : int) =
-    select {
+    let query = select {
         table "floorplan_tables"
-        where (eq "table_number" tableNumber + eq "venue_id" currentVenue)
+        where (eq "table_number" tableNumber + eq "venue_id" (getCurrentVenue()))
     }
-      |> db.Select<floorplan_table>
-      |> first
+
+    let result = query |> db.Select<floorplan_table>
+    result |> first
 
 let getTableById (id : int) =
     select {
@@ -138,12 +115,6 @@ let getRoom (roomId: int) =
         where (eq "id" roomId)
     } |> db.Select<floorplan_room> |> first
 
-let getRoomList (venueId: int) =
-    select {
-        table "floorplan_rooms"
-        where (eq "venue_id" venueId)
-    }  |> db.Select<floorplan_room>
-
 let updateFloorplanTable (tableNumber:int) (column: string) value =
     //TODO: Make update query venue specific
     let sql = "Update floorplan_tables Set @column = @value Where table_number = @tableNumber"
@@ -156,16 +127,11 @@ let updateTableShape (floorplanTable: floorplan_table)  =
     update {
         table "floorplan_tables"
         set floorplanTable
-        where (eq "table_number" floorplanTable.table_number + eq "venue_id" currentVenue)
+        where (eq "table_number" floorplanTable.table_number + eq "venue_id" (getCurrentVenue()))
     } |> db.Update
 
 
-let updateTablePosition (floorplanTable: floorplan_table) =
-    update {
-        table "floorplan_tables"
-        set floorplanTable
-        where (eq "table_number" floorplanTable.table_number + eq "venue_id" currentVenue)
-    } |> db.Update
+let updateTablePosition (floorplanTable: floorplan_table) = Entity.updateInDatabase floorplanTable
 
 let createEmptyReservation (reservation: reservation) =
     update {
@@ -174,12 +140,7 @@ let createEmptyReservation (reservation: reservation) =
         where(eq "id" reservation.reservation_table_id)
     } |> db.Update |> ignore
 
-    insert{
-        table "reservations"
-        value reservation
-    } |> db.InsertOutput |> first
-
-
+    Entity.addToDatabase reservation
 
 let getChildTables tableNumber =
     let table = getTable tableNumber
@@ -213,15 +174,13 @@ let tableExists (tableNumber: int) =
     let numberOfResults =
        select{
            table "floorplan_tables"
-           where (eq "table_number" tableNumber + eq "venue_id" currentVenue)
+           where (eq "table_number" tableNumber + eq "venue_id" (getCurrentVenue()))
        } |> db.Select<floorplan_table> |> length
 
     match numberOfResults with
        | 0 ->
             let allTables =
-                select {
-                    table "floorplan_tables"
-                }   |> db.Select<floorplan_table>
+                Entity.getAllInVenue<floorplan_table>
                     |> Array.map(findChildTable tableNumber)
                     |> Array.filter(fun tableNumber -> tableNumber <> 0)
 
@@ -248,21 +207,7 @@ let addNewTableWithoutOutput (newTable: floorplan_table) =
     }
     |> db.Insert
 
-let addNewTable (newTable: floorplan_table) =
-        let newTableList =
-            insert{
-                table "floorplan_tables"
-                value newTable
-            }
-            |> db.InsertOutput
-
-        newTableList |> first
-
-let deleteTable (tableNumber: int) =
-    delete {
-        table "floorplan_tables"
-        where (eq "table_number" tableNumber + eq "venue_id" currentVenue)
-    } |> db.Delete |> ignore
+let addNewTable (newTable: floorplan_table) = Entity.addToDatabase newTable
 
 let mergeTables parent child = //Merge two tables together
     if parent = child then false else
@@ -292,13 +237,12 @@ let mergeTables parent child = //Merge two tables together
 
         let existingChildrenJson = parentTable.merged_children |> StringTrim
         let existingChildren =
-            existingChildrenJson
-                |> Decode.fromString(Decode.list floorplan_table_decoder)
+            existingChildrenJson |> Decode.Auto.fromString<floorplan_table[]>
 
         let tableList =
             match existingChildren with
-                | Error _ -> [newChildTable]
-                | Ok tables -> tables @ [newChildTable]
+                | Error _ -> [|newChildTable|]
+                | Ok tables -> [tables ; [|newChildTable|]] |> Array.concat
 
         let newChildrenJson = tableList |> jsonEncode
         let parentPreviousState = parentTable |> jsonEncode
@@ -314,10 +258,11 @@ let mergeTables parent child = //Merge two tables together
                    pos_y = newPosY
                    default_covers = parentTable.default_covers + childTable.default_covers
                 |}
-            where (eq "table_number" parent + eq "venue_id" currentVenue)
+            where (eq "table_number" parent + eq "venue_id" (getCurrentVenue()))
         } |> db.Update |> ignore
 
-        deleteTable child
+        Entity.deleteById<floorplan_table> newChildTable.id
+            |> ignore
 
         true
 
@@ -326,7 +271,7 @@ let updateUnmergedTables parentTable childTable =
     update {
        table "floorplan_tables"
        set parentTable
-       where(eq "table_number" parentTable.table_number + eq "venue_id" currentVenue)
+       where(eq "table_number" parentTable.table_number + eq "venue_id" (getCurrentVenue()))
     } |> db.Update |> ignore
 
     addNewTableWithoutOutput childTable |> ignore
@@ -350,7 +295,7 @@ let unmergeTable tableNumber = //Separates a merged table into itself and the la
             Some (getTable currentTable.table_number, unmergedChild)
         | Error _ -> None
 
-let convertRoomListToLinks (room: floorplan_room) =
+let makeRoomButton (room: floorplan_room) =
     let vars = map [
         "roomId", room.id |> string
         "roomName", room.room_name
@@ -377,17 +322,7 @@ let newReservation name time covers =
         reservation_created_at = CurrentTime()
     }
 
-    insert {
-        table "reservations"
-        value reservation
-    } |> db.Insert
+    Entity.addToDatabase reservation
 
 
-let tableList venueId =
-    select{
-            table "floorplan_tables"
-            innerJoin "floorplan_rooms" "id" "floorplan_tables.room_id"
-        }
-    |> db.SelectJoin<floorplan_table, floorplan_room>
-    |> Array.filter (fun (_, room) -> room.venue_id = venueId )
-    |> Array.map fst
+let tableList () = Entity.getAllInVenue<floorplan_table>

GenericEntities.module.fs

@@ -3,11 +3,16 @@ open DredgePos
 open Types
 open Dapper.FSharp
 open DredgeFramework
+open Pluralize.NET.Core
+open FSharp.Reflection
+let getDatabaseTable<'x> =
+        let typeName = typeof<'x>.Name
+        Pluralizer().Pluralize typeName
+
 
-let getDatabaseTable (record: 'a) = record.GetType().ToString().ToLower() + "s"
 
 let addToDatabase (record: 'x)=
-    let tableName = getDatabaseTable record
+    let tableName = getDatabaseTable<'x>
     insert {
         table tableName
         value record
@@ -15,12 +20,49 @@ let addToDatabase (record: 'x)=
     |> db.InsertOutput
     |> first
 
-let updateInDatabase (record: 'x) =
-    let tableName = getDatabaseTable record
+
+let inline updateInDatabase (record: ^x) =
+    let tableName = getDatabaseTable<'x>
+    let id = ((^x) : (member id : int) (record))
     (* Run an update query *)
     update {
         table tableName
         set record
+        where (eq "id" id)
     }
     |> db.Update |> ignore
     record
+
+let getAll<'x> =
+    let typeName = typeof<'x>.Name
+    let tableName = Pluralizer().Pluralize typeName
+
+    select {
+        table tableName
+    }
+    |> db.Select<'x>
+
+let getAllByColumn<'x> (column: string) (value: obj) =
+    let typeName = typeof<'x>.Name
+    let tableName = Pluralizer().Pluralize typeName
+
+    select {
+        table tableName
+        where (eq column value)
+    } |> db.Select<'x>
+
+let getAllInVenue<'x> = getAllByColumn<'x> "venue_id" (getCurrentVenue ())
+let getById<'x> (id: int) = getAllByColumn<'x> "id" id |> first
+
+let deleteById<'x> id =
+    let typeName = typeof<'x>.Name
+    let tableName = Pluralizer().Pluralize typeName
+
+    let entity = getById<'x>  id
+
+    delete {
+        table tableName
+        where (eq "id" id)
+    } |> db.Delete |> ignore
+
+    entity

OrderScreen.module.fs

@@ -0,0 +1,104 @@
+module OrderScreen
+open System.Security.Cryptography.Xml
+open DredgeFramework
+open DredgePos
+open FSharp.Collections
+open Thoth.Json.Net
+open Types
+open Theme
+
+let htmlAttributes (attributes: Map<string, string>) =
+    " " + (attributes
+        |> Map.toArray
+        |> Array.map (fun (attribute, value) -> attribute+"="+value)
+        |> String.concat " ")
+
+
+let getAllPageGrids () = Entity.getAllInVenue<order_screen_page_group>
+                         |> Array.filter(fun pageGroup -> pageGroup.grid_id <> 0)
+                         |> Array.map(fun pageGroup -> (Entity.getById<grid> pageGroup.grid_id), pageGroup)
+
+let getImageButtonData (button: button) =
+    let item = Entity.getAllByColumn<item> "item_code" button.primary_action_value
+                |> first
+
+    let extraData =
+        map [
+            "data-item-code", item.item_code
+            "data-item-price", item.price1.ToString()
+            "data-item-name", item.item_name
+            "data-item-type", item.item_type
+            "data-item-category", item.item_category.ToString()
+        ] |> htmlAttributes
+
+    {|
+        extra_data = extraData
+        text = item.item_name
+    |}
+
+
+let renderButton (buttonId: int) =
+    let button = Entity.getById<button> buttonId
+
+    let extra_styles =
+        match button.extra_styles.Length with
+            | 0 -> ""
+            | _ -> $""" style="{button.extra_styles}" """
+
+    let imageClass = if button.image.Length > 0 then "hasImage" else ""
+    let spacerClass = if button.primary_action = "spacer" || button.secondary_action = "spacer"
+                        then "invisible"
+                        else ""
+
+    let image = if button.image.Length > 0
+                    then loadTemplateWithVars "orderScreen/button_image" (map ["image", button.image])
+                    else ""
+
+    let extraClasses = [|imageClass; spacerClass|] |> String.concat " "
+
+    let action_data =
+        match button.primary_action with
+            | "item" -> getImageButtonData button
+            | "spacer" ->  {|extra_data=""; text=""|}
+            | _ -> {|extra_data=""; text=""|}
+
+    let vars = map[
+        "extra_classes",  button.extra_classes + " " + extraClasses
+        "extra_styles", extra_styles
+        "primary_action", button.primary_action
+        "secondary_action", button.secondary_action
+        "text", if button.text.Length >0 then button.text else action_data.text
+        "image", image
+        "extra_data", action_data.extra_data
+    ]
+
+    loadTemplateWithVars "orderScreen/grid_button" vars
+
+let renderPage (buttonHTML: string) =
+    let vars = map [
+        "pageButtons", buttonHTML
+    ]
+    loadTemplateWithVars "orderScreen/page" vars
+
+let renderPageGroup (pageGroup: order_screen_page_group) (pageHTML: string) =
+    let vars = map [
+        "pages", pageHTML
+        "page_group_id", pageGroup.id.ToString()
+    ]
+    loadTemplateWithVars "orderScreen/page_group" vars
+
+let getPagesHTML (gridInfo: grid * order_screen_page_group) =
+    let grid, pageGroup = gridInfo
+
+    let pages = grid.grid_data |> Decode.Auto.fromString<Map<string, int[]>>
+
+    match pages with
+    | Error _ -> "Error"
+    | Ok pages ->
+        pages
+        |> Map.toArray
+        |> Array.map snd
+        |> Array.map(fun row -> row |> Array.map renderButton |> String.concat "\n")
+        |> Array.map renderPage
+        |> String.concat "\n"
+        |> renderPageGroup pageGroup

PageController.fs

@@ -1,5 +1,7 @@
 module PageController
 
+open System
+open DredgePos.Types
 open Microsoft.AspNetCore.Http
 open Floorplan
 open Giraffe
@@ -16,8 +18,8 @@ let loadFloorplan (ctx: HttpContext) : HttpHandler =
    Session.RequireClerkAuthentication ctx
 
    let roomMenu =
-       getRoomList currentVenue
-         |> Array.map convertRoomListToLinks
+       Entity.getAllInVenue<floorplan_room>
+         |> Array.map makeRoomButton
          |> String.concat "\n"
 
    let variables = map [
@@ -33,22 +35,46 @@ let loadFloorplan (ctx: HttpContext) : HttpHandler =
 
    htmlString <| Theme.loadTemplateWithVarsArraysScriptsAndStyles "floorplan" variables arrays scripts styles
 
-let loadContactPage id =
-    Session.clerkLogin 1408 |> ignore
-    Theme.loadTemplate "index"
+let loadOrderScreen (ctx: HttpContext) : HttpHandler =
+   Session.RequireClerkAuthentication ctx
+
+   let categoryList =
+       Entity.getAll<order_screen_page_group>
+        |> Array.filter (fun category -> category.id <> 0)
+        |> Array.map (fun category ->
+            let categoryMap = recordToMap category
+            let categoryArray = map ["page", categoryMap]
+            Theme.loadTemplateWithArrays "orderScreen/page_group_button" categoryArray
+            )
+        |> String.concat "\n"
+
+   let grids =
+       OrderScreen.getAllPageGrids ()
+       |> Array.map OrderScreen.getPagesHTML
+       |> String.concat "\n"
+
+
+   let variables = map [
+       "title", "Order"
+       "categoryList", categoryList
+       "pageGroups", grids
+   ]
+
+   let styles = ["dredgepos.orderScreen.css"]
+   let scripts = ["dredgepos.orderScreen.js"]
+   let currentClerk = recordToMap <| Session.getCurrentClerk ctx
+   let arrays = map["clerk", currentClerk]
+
+   htmlString <| Theme.loadTemplateWithVarsArraysScriptsAndStyles "orderScreen" variables arrays scripts styles
 
 let getOpenTables() =
-    let rows = Floorplan.openTables
+    let rows = openTables()
     rows |> jsonEncode
 
-let transferTables() =
-
-    Theme.loadTemplate "index"
-
 let mergeTables parent child =
-    Floorplan.mergeTables parent child |> ignore
+    mergeTables parent child |> ignore
     "done"
 
 let unmergeTables table =
-    Floorplan.unmergeTable table |> ignore
+    unmergeTable table |> ignore
     "done"

Program.fs

@@ -17,10 +17,10 @@ module Program =
         use_warbler
     }
 
-    let ajaxRouter = router {
+
+    let floorplanRouter = router {
         pipe_through browser
         post "/authenticateClerk" (bindJson<int> (handlePostRoute AjaxController.loginWithLoginCode) )
-        post "/getTableData" (bindJson<int> AjaxController.getTableData)
         post "/transformTable" (bindJson<floorplan_table> AjaxController.transformTable)
         post "/createTable" (bindJson<floorplan_table> AjaxController.createTable)
         post "/addDecoration" (bindJson<floorplan_decoration> AjaxController.AddDecoration)
@@ -34,9 +34,8 @@ module Program =
         post "/unreserveTable" (bindJson<floorplan_table> AjaxController.unreserveTable )
         getf "/getRoomData/%i" AjaxController.getRoomData
         getf "/getKeyboardLayout/%s" AjaxController.getKeyboardLayout
-        getf "/getTablesAndDecorations/%i" AjaxController.getRoomTablesAndDecorations
         get "/languageVars" (json <| AjaxController.getLanguageVars)
-        get "/getOpenTables" (json <| Floorplan.getActiveTables Floorplan.currentVenue)
+        get "/getOpenTables" (json <| Floorplan.getActiveTables (DredgeFramework.getCurrentVenue()))
         getf "/getActiveTables/%i" AjaxController.getActiveTables
         getf "/getFloorplanData/%i" AjaxController.getFloorplanData
         getf "/tableIsOpen/%i" (fun tableNumber -> json <| Floorplan.tableNumberIsOpen tableNumber)
@@ -45,19 +44,28 @@ module Program =
         getf "/tableExists/%i" (fun tableNumber -> json <| Floorplan.tableExists tableNumber)
     }
 
+    let orderScreenRouter = router {
+        pipe_through browser
+        getf "/getOrderScreenData/%i" AjaxController.getOrderScreenData
+    }
+
     let pageRouter = router {
         pipe_through browser
         not_found_handler (setStatusCode 404 >=> text "404")
         get "/" (redirectTo true "/login")
         get "/login" (warbler (fun _ -> PageController.loadHomePage() ))
         get "/floorplan" (warbler (fun ctx -> PageController.loadFloorplan (snd ctx)))
-        forward "/ajax" ajaxRouter
+        get "/order" (warbler (fun ctx -> PageController.loadOrderScreen (snd ctx)))
+        forward "/ajax" floorplanRouter
+        forward "/orderScreen" orderScreenRouter
     }
 
     let app = application {
+        use_mime_types [(".woff", "application/font-woff")]
         use_static "wwwroot"
         use_router pageRouter
         url "http://0.0.0.0:5001"
     }
 
+
     run app

Theme.module.fs

@@ -17,7 +17,7 @@ let getHTMLForFile file =
     match scriptFileExists with
         | true ->
             match fileExtension with
-            | ".css" -> $"\t<link test rel=\"stylesheet\" href=\"{stylePath}\" />"
+            | ".css" -> $"\t<link rel=\"stylesheet\" href=\"{stylePath}\" />"
             | ".js" ->
                     let snippet = $"\t<script src=\"{scriptPath}\"></script>"
                     snippet
@@ -122,6 +122,9 @@ and ParseTemplates vars arrays scripts styles (string: string) =
 let loadTemplate templateName =
     loadTemplateWithVarsArraysScriptsAndStyles templateName Map.empty<string, string> Map.empty<string, Map<string, string>> [] []
 
+let loadTemplateWithArrays templateName arrays =
+    loadTemplateWithVarsArraysScriptsAndStyles templateName Map.empty arrays [] []
+
 let loadTemplateWithVars templateName vars =
     loadTemplateWithVarsArraysScriptsAndStyles templateName vars Map.empty<string, Map<string, string>> [] []
 

Types.fs

@@ -28,6 +28,14 @@ type floorplan_table = {
     id: int
 }
 
+[<CLIMutable>]
+type category = {
+    id: int
+    category_name: string
+    category_print_group: string
+    category_department: string
+}
+
 [<CLIMutable>]
 type floorplan_room = {
     id: int
@@ -53,3 +61,36 @@ type clerk = {id: int; clerk_name: string; clerk_login_code: int; clerk_usergrou
 
 [<CLIMutable>]
 type session = {id: int; session_id: string; clerk_json: string; clerk_id: int; expires: int}
+
+[<CLIMutable>]
+type order_screen_page_group = {id: int; venue_id: int; label: string; grid_id: int}
+
+[<CLIMutable>]
+type grid = {id: int; grid_name: string; grid_rows: int; grid_cols: int; grid_data: string}
+
+[<CLIMutable>]
+type button = {
+    id: int
+    text: string
+    primary_action: string
+    primary_action_value: string
+    secondary_action: string
+    secondary_action_value: string
+    image: string
+    extra_classes: string
+    extra_styles: string
+}
+
+[<CLIMutable>]
+type item = {
+    id: int
+    item_code: string
+    item_category: int
+    item_name: string
+    item_type: string
+    price1: float
+    price2: float
+    price3: float
+    price4: float
+    price5: float
+}

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

@@ -64,3 +64,7 @@ interface keyboard {
     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

@@ -5,105 +5,67 @@
 	<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>
+<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 id="orderBoxContainer">
-    			<!--[template:orderBoxTable]-->
+            <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 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>
+        <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>
 
-				<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">
+<!--[template:keyboards]-->
 
-				</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>
-
-	<!--[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>