Merge pull request #15 from dredgy/make_order_screen_reactive

Fixed slight bug in void system

.gitignore

@@ -10,3 +10,4 @@
 /wwwroot/scripts/*.js.map
 /wwwroot/styles/*
 /Folder.DotSettings.user
+sql.log

Core/Browser.module.fs

@@ -25,5 +25,4 @@ let setCookie name value (expiry: DateTimeOffset) (context: HttpContext) =
     options.Expires <- expiry
     context.Response.Cookies.Append(name, value, options);
 
-let redirect url (context: HttpContext) =
-    context.Response.Redirect url
+let redirect url (context: HttpContext) = context.Response.Redirect url

DredgePos.fsproj

@@ -20,6 +20,7 @@
         <Compile Include="Entities\Floorplan_Decorations\View.fs" />
         <Compile Include="Entities\Floorplan_Decorations\Controller.fs" />
         <Compile Include="Entities\Floorplan_Decorations\Router.fs" />
+        <Compile Include="Entities\Buttons\Model.fs" />
         <Compile Include="Authenticate\Model.fs" />
         <Compile Include="Authenticate\View.fs" />
         <Compile Include="Authenticate\Controller.fs" />
@@ -36,6 +37,7 @@
         <Compile Include="Floorplan\Controller.fs" />
         <Compile Include="Floorplan\Router.fs" />
         <Compile Include="OrderScreen\Model.fs" />
+        <Compile Include="OrderScreen\View.fs" />
         <Compile Include="OrderScreen\Controller.fs" />
         <Compile Include="OrderScreen\Router.fs" />
         <Compile Include="Reservations\Model.fs" />

Entities/Buttons/Model.fs

@@ -0,0 +1,18 @@
+module DredgePos.Entities.Buttons.Model
+
+open DredgePos.Types
+open DredgeFramework
+
+let attr = Giraffe.ViewEngine.HtmlElements.attr
+
+let getItemActionAttributes (itemCode: string) =
+    let item = Entity.GetFirstByColumn<item> "code" (StringTrim itemCode)
+    [item |> jsonEncode |> attr "data-item"]
+
+let getGridActionAttributes (gridId: int) = [(attr "data-grid") <| jsonEncode gridId]
+
+let getActionAttributes (action: string) (actionValue: string) =
+    match action with
+        | "item" -> getItemActionAttributes actionValue
+        | "grid" -> actionValue |> int |> getGridActionAttributes
+        | _ -> []

Entities/Floorplan_Decorations/View.fs

@@ -13,10 +13,10 @@ let decoratorItem (imageName, imageUrl) =
 let decoratorRow decoratorItems = div [_class "decoratorRow"] [yield! decoratorItems]
 
 let decorator (decorationRows: XmlNode[]) =
-    div [_id "decorator"] [
+    div [_id "decorator"; _class "modal"] [
         div [_id "decoratorHeader"] [
             h2 [] [lang "choose_decoration"]
-            a [_class "posButton hideDecorator"] [str "×"]
+            a [_class "posButton hideModals"] [str "×"]
         ]
         div [_id "decoratorContent"] [
             yield! decorationRows

Floorplan/Model.fs

@@ -87,14 +87,20 @@ let saveOrderToTable orderXML tableNumber =
 
     File.WriteAllText(tableFile, tableXML)
 
-let getTable (tableNumber : int) =
+let getTableSafely (tableNumber: int) =
     let query = select {
         table "floorplan_tables"
         where (eq "table_number" tableNumber + eq "venue_id" (getCurrentVenue()))
     }
 
-    let result = query |> Database.Select<floorplan_table>
-    result |> first
+    query
+        |> Database.Select<floorplan_table>
+        |> Array.tryItem 0
+
+let getTable (tableNumber : int) =
+    match getTableSafely tableNumber with
+        | None -> failwith $"Table {tableNumber} not found in current venue"
+        | Some table -> table
 
 let getTableById (id : int) =
     select {
@@ -106,7 +112,7 @@ let getTableById (id : int) =
 
 let getRoom (roomId: int) =
     select {
-        table "floorplan_rooms"
+        table "rooms"
         where (eq "id" roomId)
     } |> Database.Select<room> |> first
 

Floorplan/View.fs

@@ -8,9 +8,7 @@ open Giraffe.ViewEngine
 open DredgeFramework
 
 
-let VisibleInMode (value: string list) = value |> jsonEncode |> (attr "data-visible-in-mode")
-let InvisibleInMode (value: string list) = value |> jsonEncode |> (attr "data-invisible-in-mode")
-let ActiveInMode (value: string) = value |> (attr "data-active-in-mode")
+
 
 
 let pageContainer (clerk: clerk) roomMenu =

Global/Router.fs

@@ -9,3 +9,10 @@ let htmlViewWithContext func =
             |> htmlView
     )
     |> warbler
+
+let htmlViewWithContextAndId (id: int) func =
+    (fun ctx ->
+        func (snd ctx) id
+            |> htmlView
+    )
+    |> warbler

Global/View.fs

@@ -1,12 +1,20 @@
 module DredgePos.Global.View
 
-open Giraffe.ViewEngine
 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")
+let ActiveInMode (value: string) = value |> (attr "data-active-in-mode")
 let innerText = str
 let lang key =  language.get key |> str
 
+let template = tag "template"
+
 let scriptToHTML (scriptFile: string) =
     let scriptPath = $"/scripts/{scriptFile}"
     match FileExists ("wwwroot" + scriptPath) with
@@ -89,6 +97,23 @@ let keyboards = [|
     alert
 |]
 
+let posButton (extraClasses: string) attrs content =
+    let allAttrs = [_class $"posButton {extraClasses}"] |> List.append attrs
+    a allAttrs content
+
+let PosButton classes (attrs: Map<string, 'x>) text =
+    let attrArray =
+        attrs
+            |> Map.map (fun key value ->
+                (attr key) (string value)
+            )
+            |> Map.values
+            |> Array.ofSeq
+
+    posButton classes [
+        yield! attrArray
+    ] [str text]
+
 let HtmlPage pageTitle scripts styles tags content =
     html [] [
         head [] [

Installer/Router.fs

@@ -4,7 +4,10 @@ open DredgePos
 open Saturn
 open Giraffe
 
+let installer = (warbler (fun _ -> htmlString (Controller.RunAllMigrations ())))
+
 let router = router {
     pipe_through Ajax.Router.pipeline
-    get "/" (warbler (fun _ -> htmlString (Controller.RunAllMigrations ())))
+    get "/" installer
+    get "" installer
 }

Migrations/PopulateTestData.fs

@@ -4,13 +4,26 @@ open DredgeFramework
 open DredgePos.Types
 open System.IO
 
+let spaceButton () = (Entity.GetFirstByColumn<button> "primary_action" "spacer").id
+
+let getPageOrder pageName =
+    match pageName with
+    | "entrees" -> 1
+    | "mains" -> 2
+    | "dessert" -> 3
+    | "beer" -> 4
+    | "wine" -> 5
+    | _ -> 0
+
 let CreatePageFromDirectory index (dir: string) =
     let dirName = DirectoryInfo(dir).Name
 
     let printGroup =
         match dirName.ToLower() with
-            | "beer" | "wine" -> (Entity.GetFirstByColumn<print_group> "name" "Beverage").id
-            | _ -> (Entity.GetFirstByColumn<print_group> "name" "Food").id
+            | "beer" | "wine" -> (Entity.GetFirstByColumn<print_group> "name" "Drinks").id
+            | "entrees" | "dips" -> (Entity.GetFirstByColumn<print_group> "name" "Entrees").id
+            | "dessert" -> (Entity.GetFirstByColumn<print_group> "name" "Desserts").id
+            | _ -> (Entity.GetFirstByColumn<print_group> "name" "Mains").id
 
     let parentName =
         match dirName.ToLower() with
@@ -18,7 +31,7 @@ let CreatePageFromDirectory index (dir: string) =
             | _ -> "Food"
     let parentCategory = Entity.GetFirstByColumn<sales_category> "name" parentName
 
-    if dirName.ToLower() <> "dips" && dirName.ToLower() <> "Steak Temperatures" then
+    if dirName.ToLower() <> "dips" && dirName.ToLower() <> "steak temperatures" then
         let NewGrid = Entity.Create {
             id=0
             name=dirName
@@ -29,11 +42,19 @@ let CreatePageFromDirectory index (dir: string) =
 
         Entity.Create {
             id=0
-            order=index
+            order= getPageOrder (dirName.ToLower())
             venue_id=1
             label=dirName
             grid_id=NewGrid.id
         } |> ignore
+    elif dirName.ToLower() = "steak temperatures" then
+        Entity.Create {
+            id=0
+            name=dirName
+            rows=4
+            cols=6
+            data=""
+        } |> ignore
     else ()
 
     Entity.Create {
@@ -49,38 +70,52 @@ let CreatePageFromDirectory index (dir: string) =
 let CreateDefaultPrintGroups (path: string) =
     Entity.Create {
         id=0
-        name="Food"
+        name="Entrees"
         printer_id=1
         venue_id=1
     } |> ignore
 
     Entity.Create {
         id=0
-        name="Beverage"
+        name="Mains"
         printer_id=1
         venue_id=1
     } |> ignore
 
+    Entity.Create {
+        id=0
+        name="Desserts"
+        printer_id=1
+        venue_id=1
+    } |> ignore
+
+    Entity.Create {
+        id=0
+        name="Drinks"
+        printer_id=2
+        venue_id=1
+    } |> ignore
+
 
     path
 
 let CreateDefaultVenue (path: string) =
-    let venue: venue = {
+    {
         id=0
         name="Megalomania"
     }
-    Entity.Create venue
+    |> Entity.Create
     |>ignore
     path
 
 let CreateDefaultClerk (path: string) =
-    let venue: clerk = {
+    {
         id=0
         name="Josh"
         login_code=1408
         user_group_id=1
     }
-    Entity.Create venue
+    |> Entity.Create
     |>ignore
     path
 
@@ -89,7 +124,7 @@ let CreateDefaultSalesCategories (path: string) =
         id=0
         parent=0
         name="Food"
-        print_group_id=(Entity.GetFirstByColumn<print_group> "name" "Food").id
+        print_group_id=(Entity.GetFirstByColumn<print_group> "name" "Mains").id
         venue_id=1
     } |> ignore
 
@@ -97,12 +132,39 @@ let CreateDefaultSalesCategories (path: string) =
         id=0
         parent=0
         name="Beverage"
-        print_group_id=(Entity.GetFirstByColumn<print_group> "name" "Beverage").id
+        print_group_id=(Entity.GetFirstByColumn<print_group> "name" "Drinks").id
         venue_id=1
     } |> ignore
 
     path
 
+let CreateDefaultButtons (path: string) =
+    Entity.Create {
+        id = 0
+        text = ""
+        primary_action = "spacer"
+        secondary_action = ""
+        primary_action_value = ""
+        secondary_action_value = ""
+        image = ""
+        extra_classes = "invisible"
+        extra_styles = ""
+    }
+    |> ignore
+    path
+
+let CreateDefaultItems (path: string) =
+    Entity.Create {
+        id = 0
+        name = "Custom Item"
+        code = "OPEN000"
+        sales_category_id = (Entity.GetFirstByColumn<sales_category> "name" "Food").id
+        item_type = "item"
+        price1 = 0
+    }
+    |> ignore
+    path
+
 let CreateRooms () =
     "wwwroot/images/rooms"
     |> Directory.GetFiles
@@ -122,23 +184,24 @@ let populateEntreeGrid () =
     let DipSalesCategory = Entity.GetFirstByColumn<sales_category> "name" "Dips"
     let Entrees = Entity.GetAllByColumn<item> "sales_category_id" SalesCategory.id
     let Dips = Entity.GetAllByColumn<item> "sales_category_id" DipSalesCategory.id
+    let space = spaceButton()
     let GridData =
         [|
-            0; 0; 0; 0; 0; 0;
-            0; 0; 0; 0; 0; 0;
-            0; 0; 0; 0; 0; 0;
-            0; 0; 0; 0; 0; 0;
-            0; 0; 0; 0; 0; 0;
-            0; 0; 0; 0; 0; 0;
-            0; 0; 0; 0; 0; 0;
-            0; 0; 0; 0; 0; 0;
+            space; space; space; space; space; space;
+            space; space; space; space; space; space;
+            space; space; space; space; space; space;
+            space; space; space; space; space; space;
+            space; space; space; space; space; space;
+            space; space; space; space; space; space;
+            space; space; space; space; space; space;
+            space; space; space; space; space; space;
         |]
         |> Array.mapi (fun index current ->
          let isFirstColumn = (index % 6) = 0
          if not isFirstColumn then current else
              let entree = Entrees |> Array.tryItem (index/6)
              match entree with
-             | None -> 0
+             | None -> space
              | Some x -> x.id
         )
         |> Array.mapi (fun index current ->
@@ -146,7 +209,7 @@ let populateEntreeGrid () =
          if not isSecondRow then current else
              let entree = Dips |> Array.tryItem (index-7)
              match entree with
-             | None -> 0
+             | None -> space
              | Some x -> x.id
         )
 
@@ -162,20 +225,21 @@ let populateEntreeGrid () =
 let populateMainGrid (category: string) () =
     let SalesCategory = Entity.GetFirstByColumn<sales_category> "name" category
     let Mains = Entity.GetAllByColumn<item> "sales_category_id" SalesCategory.id
+    let space = spaceButton()
     let getId index =
         match Mains |> Array.tryItem index with
-            | None -> 0
+            | None -> space
             | Some x -> x.id
     let GridData =
         [|
-            getId 0; 0; getId 1; 0; getId 2; 0;
-            0; 0; 0; 0; 0; 0;
-            getId 3; 0; getId 4; 0; getId 5; 0;
-            0; 0; 0; 0; 0; 0;
-            0; 0; 0; 0; 0; 0;
-            0; 0; 0; 0; 0; 0;
-            0; 0; 0; 0; 0; 0;
-            0; 0; 0; 0; 0; 0;
+            getId 0; space; getId 1; space; getId 2; space;
+            space; space; space; space; space; space;
+            getId 3; space; getId 4; space; getId 5; space;
+            space; space; space; space; space; space;
+            space; space; space; space; space; space;
+            space; space; space; space; space; space;
+            space; space; space; space; space; space;
+            space; space; space; space; space; space;
         |]
 
     let grid =
@@ -186,22 +250,23 @@ let populateMainGrid (category: string) () =
     Entity.Update newGrid |> ignore
 
 let populateDessertGrid () =
+    let space = spaceButton()
     let SalesCategory = Entity.GetFirstByColumn<sales_category> "name" "Dessert"
     let Desserts = Entity.GetAllByColumn<item> "sales_category_id" SalesCategory.id
     let getId index =
         match Desserts |> Array.tryItem index with
-            | None -> 0
+            | None -> space
             | Some x -> x.id
     let GridData =
         [|
-            getId 0; 0; getId 1; 0; 0 ; 0;
-            0; 0; 0; 0; 0; 0;
-            0; getId 2; 0; getId 4; 0; 0;
-            0; 0; 0; 0; 0; 0;
-            0; 0; 0; 0; 0; 0;
-            0; 0; 0; 0; 0; 0;
-            0; 0; 0; 0; 0; 0;
-            0; 0; 0; 0; 0; 0;
+            getId 0; space; getId 1; space; space ; space;
+            space; space; space; space; space; space;
+            space; getId 2; space; getId 3; space; space;
+            space; space; space; space; space; space;
+            space; space; space; space; space; space;
+            space; space; space; space; space; space;
+            space; space; space; space; space; space;
+            space; space; space; space; space; space;
         |]
 
     let grid =
@@ -212,58 +277,57 @@ let populateDessertGrid () =
     Entity.Update newGrid |> ignore
 
 let populateBeerGrid () =
+    let space = spaceButton()
     let SalesCategory = Entity.GetFirstByColumn<sales_category> "name" "Beer"
     let Beers = Entity.GetAllByColumn<item> "sales_category_id" SalesCategory.id
     let grid =
         Entity.GetFirstByColumn<order_screen_page_group> "label" "Beer"
         |> Entity.GetRelated<grid, order_screen_page_group>
 
-    let GridData =
+    let mutable buttonMap = Map.empty<string, int[]>
     Beers
     |> Array.chunkBySize 24
     |> Array.map (fun beerPage ->
         let getId index =
             match beerPage |> Array.tryItem index with
-                    | None -> 0
+                | None -> space
                 | Some x -> x.id
         [|
             getId 0; getId 1; getId 2; getId 3; getId 4 ; getId 5;
-                0; 0; 0; 0; 0 ;0;
+            space; space; space; space; space; space;
             getId 6; getId 7; getId 8; getId 9; getId 10 ; getId 11;
-                0; 0; 0; 0; 0 ;0;
+            space; space; space; space; space; space;
             getId 12; getId 13; getId 14; getId 15; getId 16 ; getId 17;
-                0; 0; 0; 0; 0 ;0;
+            space; space; space; space; space; space;
             getId 18; getId 19; getId 20; getId 21; getId 22 ; getId 23;
-                0; 0; 0; 0; 0 ;0;
+            space; space; space; space; space; space;
         |]
     )
-        |> Array.mapi (fun index beerpage -> (map [$"page{index+1}", beerpage]))
-        |> jsonEncode
+    |> Array.iteri (fun index buttonIds ->
+        buttonMap <- buttonMap |> Map.add $"page{index+1}" buttonIds
+    )
+
+    let GridData = buttonMap |> jsonEncode
 
     let newGrid = {grid with data=GridData}
     Entity.Update newGrid |> ignore
 
 let populateSteakTemperaturesGrid () =
+    let space = spaceButton()
     let SalesCategory = Entity.GetFirstByColumn<sales_category> "name" "Steak Temperatures"
     let Temps = Entity.GetAllByColumn<item> "sales_category_id" SalesCategory.id
-    let grid =
-        Entity.GetFirstByColumn<order_screen_page_group> "label" "Steak Temperatures"
-        |> Entity.GetRelated<grid, order_screen_page_group>
+    let grid = Entity.GetFirstByColumn<grid> "name" "Steak Temperatures"
 
     let getId index =
         match Temps |> Array.tryItem index with
-            | None -> 0
+            | None -> space
             | Some x -> x.id
     let GridData =
         [|
-            getId 0; 0; getId 1; 0; getId 2; 0;
-            0; 0; 0; 0; 0; 0;
-            getId 3; 0; getId 4; 0; getId 5; 0;
-            0; 0; 0; 0; 0; 0;
-            0; 0; 0; 0; 0; 0;
-            0; 0; 0; 0; 0; 0;
-            0; 0; 0; 0; 0; 0;
-            0; 0; 0; 0; 0; 0;
+            getId 0; space; getId 1; space; getId 2; space;
+            space; space; space; space; space; space;
+            getId 3; space; getId 4; space; getId 5; space;
+            space; space; space; space; space; space;
         |]
 
     let newGrid = {grid with data=(jsonEncode {|page1=GridData|}); rows=4; cols=6}
@@ -287,14 +351,13 @@ let CreateItemFromFileName (index: int) (dirName: string) (file: string) =
     let fileName = Path.GetFileNameWithoutExtension file
     let itemType =
         match dirName.ToLower() with
-            | "dips" -> "instruction"
-            | "steak temperatures" -> "instruction"
+            | "dips" | "steak temperatures" -> "instruction"
             | _ -> "item"
 
     let categories = (Entity.GetAllByColumn<sales_category> "name" dirName)
     let categoryID =
         if categories.Length > 0 then categories[0].id
-        else 1
+        else (Entity.GetFirstByColumn<sales_category> "name" "Mains").id
 
     let newItem = Entity.Create {
         id = 0
@@ -302,7 +365,7 @@ let CreateItemFromFileName (index: int) (dirName: string) (file: string) =
         sales_category_id=categoryID
         name=fileName
         item_type=itemType
-        price1=10
+        price1=1000
     }
 
     let classes =
@@ -310,7 +373,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
@@ -332,14 +395,91 @@ let CreateItemsAndButtons (dir: string) =
     |> Array.filter (fun file -> Path.GetExtension file = ".png" || Path.GetExtension file = ".jpg")
     |> Array.iteri (fun index -> CreateItemFromFileName index dirName)
 
+let addFloorplanTable tableNumber x y shape width height rotation (room:room) =
+    Entity.Create {
+        id=0
+        table_number=tableNumber
+        pos_x=x
+        pos_y=y
+        shape=shape
+        width=width
+        height=height
+        rotation=rotation
+        room_id=room.id
+        venue_id=1
+        default_covers=2
+        merged_children=""
+        previous_state=""
+        status=0
+    } |> ignore
+    room
+
+
+let PopulateRooms () =
+    Entity.GetFirstByColumn<room> "name" "Deck & Courtyard"
+        |> addFloorplanTable 1 1151 1145 "square" 115 115 45
+        |> addFloorplanTable 2 827 1152 "square" 115 115 0
+        |> addFloorplanTable 3 836 922 "square" 115 115 0
+        |> addFloorplanTable 4 956 712 "square" 115 115 0
+        |> addFloorplanTable 5 535 704 "square" 115 115 0
+        |> addFloorplanTable 6 265 861 "square" 115 115 0
+        |> addFloorplanTable 7 265 1031 "square" 115 115 0
+        |> addFloorplanTable 8 265 1197 "square" 115 115 0
+        |> addFloorplanTable 19 90 533 "square" 115 115 0
+        |> addFloorplanTable 20 90 378 "square" 115 115 0
+        |> addFloorplanTable 21 90 233 "square" 115 115 0
+        |> addFloorplanTable 22 90 77 "square" 115 115 0
+        |> addFloorplanTable 23 622 80 "square" 115 115 0
+        |> addFloorplanTable 24 613 296 "square" 115 115 -45
+        |> addFloorplanTable 25 498 539 "square" 115 115 0
+        |> addFloorplanTable 26 854 546 "square" 115 115 0
+        |> addFloorplanTable 27 932 191 "square" 115 115 45
+        |> addFloorplanTable 28 1136 79 "square" 115 115 0
+        |> addFloorplanTable 29 1145 317 "square" 115 115 0
+        |> addFloorplanTable 30 1145 522 "square" 115 115 0
+        |> ignore
+
+    Entity.GetFirstByColumn<room> "name" "Inside"
+        |> addFloorplanTable 31 943 1196 "square" 215 90 0
+        |> addFloorplanTable 32 943 952 "square" 215 90 0
+        |> addFloorplanTable 33 927 565 "circle" 150 150 0
+        |> addFloorplanTable 39 725 67 "square" 115 115 0
+        |> addFloorplanTable 40 685 222 "square" 115 115 0
+        |> addFloorplanTable 41 685 357 "square" 115 115 0
+        |> addFloorplanTable 42 725 531 "square" 115 115 0
+        |> addFloorplanTable 43 185 452 "square" 100 100 0
+        |> addFloorplanTable 44 185 326 "square" 100 100 0
+        |> addFloorplanTable 45 185 199 "square" 100 100 0
+        |> addFloorplanTable 46 185 69 "square" 100 100 0
+        |> addFloorplanTable 51 685 948 "square" 200 100 0
+        |> addFloorplanTable 52 685 1198 "square" 200 100 0
+        |> addFloorplanTable 61 415 762 "circle" 100 100 0
+        |> addFloorplanTable 62 415 901 "circle" 100 100 0
+        |> addFloorplanTable 63 415 1039 "circle" 100 100 0
+        |> addFloorplanTable 64 415 1176 "circle" 100 100 0
+        |> ignore
+
+    Entity.GetFirstByColumn<room> "name" "Function Room"
+        |> addFloorplanTable 71 1039 361 "square" 110 110 0
+        |> addFloorplanTable 72 1000 652 "square" 200 100 0
+        |> addFloorplanTable 73 976 966 "square" 130 130 0
+        |> addFloorplanTable 74 658 962 "square" 120 115 0
+        |> addFloorplanTable 75 567 629 "square" 110 200 0
+        |> addFloorplanTable 76 120 511 "square" 230 100 0
+        |> addFloorplanTable 77 120 847 "square" 230 100 0
+
+
 let run () =
     "wwwroot/images/items"
         |> CreateDefaultVenue
         |> CreateDefaultClerk
         |> CreateDefaultPrintGroups
         |> CreateDefaultSalesCategories
+        |> CreateDefaultItems
+        |> CreateDefaultButtons
         |> Directory.GetDirectories
         |> Array.mapi CreatePageFromDirectory
         |> Array.iter CreateItemsAndButtons
         |> CreateRooms
         |> PopulateGrids
+        |> PopulateRooms

OrderScreen/Controller.fs

@@ -3,87 +3,88 @@
 open DredgePos
 open DredgeFramework
 open DredgePos.Types
+open DredgePos.Global.Controller
+open Saturn.CSRF
+open Thoth.Json.Net
 open Giraffe
 open Microsoft.AspNetCore.Http
+open FSharp.Collections
 
 let getOrderScreenData (tableNumber: int) =
     {|
         order_screen_pages = Entity.GetAllInVenue<order_screen_page_group>
         sales_categories = Entity.GetAllInVenue<sales_category>
         print_groups = Entity.GetAllInVenue<print_group>
-        custom_item = Entity.GetAllByColumn<item> "item_code" "OPEN000" |> first
+        custom_item = Entity.GetFirstByColumn<item> "code" "OPEN000"
         table = Floorplan.Model.getTable tableNumber
     |}
     |> ajaxSuccess
     |> 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 loadGrid (gridId: int) =
     let grid = Entity.GetById<grid> gridId
-    let gridHtml = Model.loadGrid gridId
+    let gridNodes = (renderGrid grid) |> List.ofArray
+    let gridHtml = Giraffe.ViewEngine.RenderView.AsString.htmlNodes gridNodes
+
     if gridHtml = "Error" then ajaxFail gridHtml
     else ajaxSuccess {|grid=grid;gridHtml=gridHtml|}
     |> json
 
-let loadOrderScreen (ctx: HttpContext)  (tableNumber: int) : HttpHandler =
+let loadOrderScreenView (ctx: HttpContext)  (tableNumber: int) =
     Authenticate.Model.RequireClerkAuthentication ctx
+    let tableOption = DredgePos.Floorplan.Model.getTableSafely tableNumber
+    let attr = Giraffe.ViewEngine.HtmlElements.attr
 
-   let table = Floorplan.Model.getTable tableNumber
+    match tableOption with
+        | None ->
+            Browser.redirect "/" ctx
+            View.posButtonTemplate
+        | Some table ->
+            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 covers = if tableNumber > 0 then table.default_covers else 0
-   let coverString = language.getAndReplace "covers" [covers]
+            let printGroupButtons =
+                Entity.GetAllInVenue<print_group>
+                    |> Array.map View.printGroupButton
 
-   let changeCoverNumberButton = if tableNumber > 0 then Theme.loadTemplateWithVars "orderScreen/change_cover_number_button" (map ["covers", coverString]) else ""
-
-   let orderNumber =
-       if tableNumber > 0 then language.getAndReplace "active_table" [tableNumber]
-       else language.get "new_order"
-
-   let containerAttributes =
-        if tableNumber > 0 then
-            map ["data-table", jsonEncode table]
-                |> Theme.htmlAttributes
-        else ""
-
-   let categoryList =
+            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 (fun category ->
-            let categoryMap = recordToMap category
-            let categoryArray = map ["page", categoryMap]
-            Theme.loadTemplateWithArrays "orderScreen/page_group_button" categoryArray
-            )
-        |> joinWithNewLine
+                |> Array.map View.pageGroupButton
 
-   let grids =
-       Model.getAllPageGrids ()
-       |> Array.map Model.getPagesHTML
-       |> joinWithNewLine
+            let grids = Model.getAllPageGridsInVenue ()
+            let pageGroupNodes =
+                grids
+                |> Array.map(fun (grid, page_group) ->
+                    renderGrid grid
+                    |> View.pageGroup page_group
+                )
 
             let coverSelectorButtons =
-        Array.init (covers+1) id
+                Array.init (table.default_covers + 1) id
                     |> Array.map(fun coverNumber ->
                         let text = if coverNumber > 0 then language.getAndReplace "selected_cover" [coverNumber]
                                    else language.get "cover_zero"
-                Theme.PosButton text "coverSelectorButton" $"""data-cover="{coverNumber}" """)
-            |> String.concat "\n"
+                        Global.View.PosButton "coverSelectorButton" (map ["data-cover", coverNumber]) text
+                    )
 
-   let variables = map [
-       "title", "Order"
-       "containerAttributes", containerAttributes
-       "categoryList", categoryList
-       "pageGroups", grids
-       "orderNumber", orderNumber
-       "changeCoverNumberButton", changeCoverNumberButton
-       "covers", coverString
-       "salesCategoryOverrideButtons", Model.generateSalesCategoryOverrideButtons ()
-       "coverSelectorButtons", coverSelectorButtons
-   ]
-
-   let styles = ["dredgepos.orderScreen.css"]
-   let scripts = ["dredgepos.tables.js";"./external/currency.min.js";"dredgepos.orderScreen.js"; ]
-   let currentClerk = recordToMap <| Authenticate.Model.getCurrentClerk ctx
-   let arrays = map ["clerk", currentClerk]
-
-   Theme.loadTemplateWithVarsArraysScriptsAndStyles "orderScreen" variables arrays scripts styles
-    |> htmlString
+            View.index tableNumber styles scripts metaTags currentClerk printGroupButtons orderScreenPageGroupButtons pageGroupNodes coverSelectorButtons

OrderScreen/Model.fs

@@ -8,129 +8,11 @@ open Thoth.Json.Net
 open Theme
 
 
-let getAllPageGrids () = Entity.GetAllInVenue<order_screen_page_group>
+let getAllPageGridsInVenue () =
+    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 itemCode =
-        if button.primary_action = "item" then button.primary_action_value
-        else button.secondary_action_value
-
-    let item = Entity.GetAllByColumn<item> "item_code" itemCode
-                |> first
-
-    let extraData =
-        map [
-            "data-item", jsonEncode item
-        ] |> htmlAttributes
-
-    {|
-        extra_data = extraData
-        text = item.name
-    |}
-
-let getGridButtonData (button: button) =
-    let gridId =
-        if button.primary_action = "grid" then button.primary_action_value
-        else button.secondary_action_value
-        |> int
-
-    let grid = Entity.GetById<grid> gridId
-    {|
-        extra_data = map ["data-grid", jsonEncode gridId] |> htmlAttributes
-        text = grid.name
-    |}
-
-let getActionData (button: button) (action: string) =
-    let actionValue =
-        if action = "primary" then button.primary_action
-        else button.secondary_action
-
-    match actionValue with
-        | "item" -> getImageButtonData button
-        | "grid" -> getGridButtonData button
-        | "spacer" ->  {|extra_data=""; text=""|}
-        | _ -> {|extra_data=""; text=""|}
-
-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 primary_action_data = getActionData button "primary"
-    let secondary_action_data = getActionData button "secondary"
-
-    let action_extra_data = primary_action_data.extra_data + " " + secondary_action_data.extra_data
-    let button_text =
-        if button.text.Length > 0 then button.text
-        else
-            if primary_action_data.text.Length > 0 then primary_action_data.text
-            else secondary_action_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", button_text
-        "image", image
-        "extra_data", action_extra_data
-    ]
-
-    loadTemplateWithVars "orderScreen/grid_button" vars
-
-let renderPage (grid: grid)  (buttonHTML: string) =
-    let vars = map ["pageButtons", buttonHTML; "rows", string grid.rows; "cols", string grid.cols]
-    loadTemplateWithVars "orderScreen/page" vars
-
-let renderPageGroup (pageGroup: order_screen_page_group) (pageHTML: string) =
-    let vars = map [
-        "pages", pageHTML
-        "page_group_id", string pageGroup.id
-    ]
-    loadTemplateWithVars "orderScreen/page_group" vars
-
 let printGroupPosButton (printGroup: print_group) =
     PosButton (language.getAndReplace "print_with" [printGroup.name]) "printGroupOverrideButton toggle" $"""data-value="{printGroup.id}" """
 
-let generateSalesCategoryOverrideButtons () =
-    Entity.GetAllInVenue<print_group>
-        |> Array.map printGroupPosButton
-        |> Array.append [|PosButton (language.getAndReplace "print_with" ["default"]) "printGroupOverrideButton toggle default active" """data-value="0" """|]
-        |> joinWithNewLine
-
-
-let renderGrid (grid: grid) =
-    let gridData = grid.data |> Decode.Auto.fromString<Map<string, int[]>>
-
-    match gridData 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 grid)
-                |> joinWithNewLine
-
-let loadGrid gridId = renderGrid (Entity.GetById<grid> gridId)
-
-
-let getPagesHTML (gridInfo: grid * order_screen_page_group) =
-    let grid, pageGroup = gridInfo
-
-    renderGrid grid
-    |> renderPageGroup pageGroup

OrderScreen/Router.fs

@@ -10,6 +10,5 @@ let router = router {
     getf "/getOrderScreenData/%i" Controller.getOrderScreenData
     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

@@ -0,0 +1,167 @@
+module DredgePos.OrderScreen.View
+
+open DredgeFramework
+open DredgePos.Types
+open DredgePos.Global.View
+open DredgePos.Entities.Buttons.Model
+open Thoth.Json.Net
+open Giraffe.ViewEngine
+open language
+
+let coverSelector buttons = div [_class "coverSelector"] [
+    yield! buttons
+]
+
+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])]
+            div [_class "tableInfo"] [
+                posButton "changeCoverNumberButton" [] [str (getAndReplace "covers" [floorplanTable.default_covers])]
+                posButton "" [] [str (getAndReplace "logged_in_as" [clerk.name])]
+            ]
+            div [_class "orderBox"] [
+                table [_class "orderBoxTable"] [
+                    thead [] [
+                        tr [] [
+                            th [_class "orderBoxCell qtyCell"] [str (get "qty_header")]
+                            th [_class "orderBoxCell itemIdCell"] [str (get "id_header")]
+                            th [_class "orderBoxCell itemCell"] [str (get "item_header")]
+                            th [_class "orderBoxCell unitPriceCell"] [str (get "price_header")]
+                            th [_class "orderBoxCell totalPriceCell"] [str (get "total_price_header")]
+                            th [_class "orderBoxCell printGroupCell"] [str (get "printgroup_header")]
+                        ]
+                    ]
+                    tbody [] []
+                ]
+            ]
+            div [_class "orderBoxInfo"] [
+                span [_class "voidModeWarning"; VisibleInMode ["void"]] [str (get "void_mode")]
+            ]
+            div [_class "orderBoxFooter"] [
+                span [_class "orderBoxTotal"] [str (getAndReplace "totalPrice" ["0.00"])]
+                small [_class "orderBoxSelectedTotal"] [str (getAndReplace "selectedPrice" ["0.00"])]
+
+            ]
+        ]
+        div [_id "rightColumn"] [
+            div [_id "topHalf"] [
+                div [_class "functionButtons"] [
+                    div [_class "printGroupButtons toggleGroup"] [
+                        input [_type "hidden"; _class "value"; _name "print_override"]
+                        posButton "printGroupOverrideButton toggle default" [
+                            (attr "data-value") (string 0)
+                        ] [
+                            ["default"] |> getAndReplace "print_with" |> str
+                        ]
+                        yield! printGroupButtons
+                    ]
+                    div [_class "functionColumn"] [
+                        posButton "accumulateButton" [ActiveInMode "accumulate"] [str (get "accumulate_function")]
+                        posButton "showCoverSelectorButton" [] [str (get "select_covers")]
+                    ]
+                    div [_class "functionColumn"] [
+                        posButton "voidButton"  [ActiveInMode "void"] [str (get "void")]
+                        posButton "openItemButton"  [] [str (get "custom_item_button")]
+                        posButton "freetextButton"  [] [str (get "freetext_button")]
+                        posButton "numpadButton"  [] [str (get "numpad_button")]
+                    ]
+                    div [_class "functionColumn"] [
+                        posButton "" [] ["pay_function" |> get |> str]
+                        posButton "" [] ["print_function" |> 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 *)
+
+let posButtonTemplate =
+    template [_id "posButtonTemplate"] [
+        posButton "" [] []
+    ]
+
+let gridContainer =
+    div [_class "gridContainer"] [
+        div [_class "gridContainerHeader"] [
+            span [] []
+            div [_class "posButton closeGrid"] [str "×"]
+        ]
+        div [_class "gridContainerGrid"] [
+            div [_class "pageGroup"] []
+        ]
+        div [_class "pageNavigation"] [
+            posButton "prevButton" [] ["prev_page" |> get |> str]
+            posButton "nextButton" [] ["next_page" |> get |> str]
+        ]
+    ]
+
+let pageGroupButton (pageGroup: order_screen_page_group) = posButton "loadPageGroup" [(attr "data-page-group-id") (string pageGroup.id)] [str pageGroup.label]
+let printGroupButton (printGroup: print_group) = posButton "toggle printGroupOverrideButton" [(attr "data-value") (string printGroup.id)] [ [printGroup.name] |> getAndReplace "print_with" |> str ]
+
+let itemButtonImage (button: button) =
+    span [
+        _class "buttonImg"
+        _style $"background-image:url(\"/images/items/{button.image}\");"
+    ] []
+
+let _data_primary_action = attr "data-primary-action"
+let _data_secondary_action = attr "data-secondary-action"
+
+let itemButton (button: button) =
+    let extraClasses =
+        if button.image.Length > 0 then button.extra_classes + " hasImage"
+        else button.extra_classes
+
+    let primaryAttributes = getActionAttributes button.primary_action button.primary_action_value
+    let secondaryAttributes = getActionAttributes button.secondary_action button.secondary_action_value
+
+    posButton extraClasses [
+        yield! primaryAttributes
+        yield! secondaryAttributes
+        _style button.extra_styles
+        _data_primary_action button.primary_action
+        _data_secondary_action button.secondary_action
+    ] [
+        if button.image.Length > 0 then itemButtonImage button
+        span [_class "text "] [str button.text]
+    ]
+
+let _dataPageGroup = attr "data-page-group"
+let _dataPageGroupId = attr "data-page-group-id"
+
+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 coverSelectorButtons  =
+    [|
+        pageContainer (DredgePos.Floorplan.Model.getTable orderNumber) clerk printGroupButtons orderScreenPageGroupButtons pageGroupNodes
+        posButtonTemplate
+        gridContainer
+        coverSelector coverSelectorButtons
+    |]
+    |> HtmlPage "Order" (GetScripts scripts) (GetStyles styles) (GetMetaTags tags)

Program.fs

@@ -17,7 +17,10 @@ module Program =
         forward "/install" DredgePos.Installer.Router.router
     }
 
-    let app = application {
+    let app =
+        let ipAddress = System.Net.Dns.GetHostEntry(System.Net.Dns.GetHostName()).AddressList[2];
+        printf $"DredgePOS is now running at http://{ipAddress}:5001\n"
+        application {
             use_mime_types [(".woff", "application/font-woff")]
             use_static "wwwroot"
             use_router router

package.json

@@ -8,7 +8,7 @@
         "konva": "^8.2.2",
         "sass": "^1.43.4",
         "tsc": "^2.0.4",
-        "typescript": "^4.4.4"
+        "typescript": "^4.7.4"
     },
     "description": "",
     "license": "",

sass/dredgepos.orderScreen.sass

@@ -268,6 +268,9 @@
             text-align: center
             width: 60%
 
+        .itemIdCell
+            display: none
+
         .qtyCell
             width: 10%
 

tsconfig.json

@@ -8,7 +8,7 @@
         "removeComments":false,
         "preserveConstEnums":true,
         "outDir":"wwwroot/scripts",
-        "target":"ES2016",
+        "target":"ESNext",
         "sourceMap":true,
         "moduleResolution": "node"
     },

typescript/dredgepos.core.ts

@@ -23,9 +23,7 @@ const lang = (key: string, replacements?: string[] | string) => {
 }
 
 /** Check if a variable is defined */
-const defined = (variable: any) => {
-    return typeof variable !== 'undefined'
-}
+const defined = (variable: any) => typeof variable !== 'undefined'
 
 /** Call an Ajax function asynchronously */
 const ajax = (endpoint: string, data: any, method = 'POST', successFunction: Function, errorFunction: Function, beforeFunction: any) => {
@@ -69,18 +67,17 @@ const ajaxSync = (endpoint: string, data?: any, method = 'POST') => {
 /* Redirect to a specific URL */
 const redirect = (url: string): void => location.assign(url)
 
-const resize = () => {
-    $('#pageContainer').height(window.innerHeight + "px");
-}
+const resize = () => $('#pageContainer').height(window.innerHeight + "px");
 
 const setupCore = (languageVars: Record<string, string>) => {
     Application.languageVars = languageVars
-    const doc = $(document)
-    doc.on('click', '#alertNo, #alertOk', hideAlerts)
-    doc.on('click', '.toggle', toggle)
+    $(document)
+        .on('click', '#alertNo, #alertOk', hideAlerts)
+        .on('click', '.toggle', toggle)
+        .on('click', '.hideModals', hideModals)
+    
     window.addEventListener('resize', resize)
     resize()
-
     setElementVisibilityByMode()
 }
 
@@ -117,6 +114,7 @@ const confirmation = (message: string, data: any, title = 'Confirm', submitFunct
 
 
 const hideAlerts = () => $('#alert').hide()
+const hideModals = () => $('.modal').hide()
 
 const turnOnMode = (mode: PosMode) => {
     Application.mode.push(mode)
@@ -184,15 +182,46 @@ const setElementVisibilityByMode = () => {
 
 }
 
-const pulseElement = (element: JQuery) => element.addClass('pulse').on('animationend', () => element.removeClass('pulse'))
+const getPercentageOfPageContainerWidth = (pixels: number) => ( (pixels / $('#pageContainer').width()) * 100) + '%'
+
+const pulseElement = (element: JQuery) => {
+    const orderItem: orderItem = element.data('order-item')
+    removeOrderItemsToPulse(orderItem.id)
+    element
+        .addClass('pulse')
+        .on('animationend', () => element.removeClass('pulse'))
+}
+
+Array.prototype.collect = function<x, y>(this: x[], func: (item: x) => y[]) {
+    return this.map(func).flat(1)
+}
 
 Array.prototype.where = function<x>(this: x[], property: string, value: any) {
     return this.filter( item => (item as any)[property] === value)[0] || null
 }
+Array.prototype.first = function<x>(this: x[]) {
+    return this[0]
+}
+Array.prototype.last = function<x>(this: x[]) {
+    return this[this.length-1]
+}
+Array.prototype.unique = function<x>(this: x[]) {
+    return [... new Set(this)]
+}
+
+const clone = <x>(obj: x) => JSON.parse(JSON.stringify(obj)) as x
 
 const money = (amount: number, fromCents=true) => currency(amount, {fromCents: fromCents})
 const moneyFromString = (amount: string) => currency(amount)
 
+const array_push = <x>(array: x[], value: x) => {
+    let copy = array.slice()
+    return [...copy, value]
+};
+const array_remove = <x>(array: x[], valueToRemove: x) => array.filter(item => item != valueToRemove)
+const array_pop = <x>(array:x[]) => array.slice(0,-1);
+const array_unique = <x>(array:x[]) => [... new Set(array)]
+
 const toggle = (e: JQuery.TriggeredEvent) => {
     const button = $(e.target)
     const toggleGroup =  button.closest('.toggleGroup')

typescript/dredgepos.floorplan.ts

@@ -615,8 +615,8 @@ const setRoomBackground = (roomToLoad: room) => {
     const width = Floorplan.floorplanDiv.width()
     const height = Floorplan.floorplanDiv.height()
 
-    if(roomToLoad.background_image) {
-        Floorplan.floorplanDiv.css("background-image", `url(/images/rooms/${roomToLoad.background_image})`)
+    if(roomToLoad.background_image != "") {
+        Floorplan.floorplanDiv.css("background-image", `url('/images/rooms/${roomToLoad.background_image}')`)
         Floorplan.floorplanDiv.css("background-size", `${width}px ${height}px`)
     } else {
         Floorplan.floorplanDiv.css("background-image", "none")

typescript/dredgepos.orderScreen.ts

@@ -7,32 +7,34 @@ type OrderScreenData = {
 
 type OrderScreen = {
     order_screen_pages: order_screen_page[]
-    last_added_item: orderItem
     order_items: orderItem[]
     sales_categories: sales_category[]
     print_groups: print_group[]
     order_item_id_generator: Generator
     selected_item_ids: number[]
+    order_item_ids_to_pulse: number[]
     qty_override: number
     print_group_override: print_group
     custom_item: item,
     selected_cover: number
     table: floorplan_table,
+    last_added_item_ids: number[]
 }
 
 let OrderScreen : OrderScreen = {
     order_screen_pages: null,
-    last_added_item: null,
     order_items: [],
     print_groups: [],
     sales_categories: [],
     order_item_id_generator: newestId(),
     selected_item_ids: [],
+    order_item_ids_to_pulse: [],
     qty_override: 1,
     print_group_override: null,
     custom_item: null,
     selected_cover: 0,
     table: null,
+    last_added_item_ids: [],
 }
 
 const loadPageGroup = (e: Event) => {
@@ -43,7 +45,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}]`)
@@ -58,33 +59,30 @@ 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
     OrderScreen.print_groups = data.print_groups
     OrderScreen.custom_item = data.custom_item
 
     updateOrderBoxTotals()
-    let doc = $(document)
-    doc.on('click', '.nextButton', goToNextPage)
-    doc.on('click', '.prevButton', goToPrevPage)
-    doc.on('click', '.loadPageGroup', loadPageGroup)
-    doc.on('click', '[data-primary-action=item]', itemButtonClicked)
-    doc.on('click', '[data-primary-action=grid],[data-secondary-action=grid]', gridButtonClicked)
-    doc.on('click', '.closeGrid', hideGrids)
-    doc.on('click', '.freetextButton', freetext)
-    doc.on('click', '.openItemButton', customItem)
-    doc.on('click', '.orderBoxTable tbody tr', itemRowClicked)
-    doc.on('click', '.voidButton', voidButtonClicked)
-    doc.on('dblclick', '.voidButton', voidLastItem)
-    doc.on('click', '.numpadButton', overrideQty)
-    doc.on('click', '.accumulateButton', () => toggleMode('accumulate'))
-    doc.on('click', '.changeCoverNumberButton', changeCoverNumberPrompt)
-    doc.on('click', '.showCoverSelectorButton', showCoverSelector)
-    doc.on('click', '.coverSelectorButton', coverSelected)
-    doc.on('change', '[name=print_override]', printGroupOverride)
+    $(document)
+        .on('click', '.nextButton', goToNextPage)
+        .on('click', '.prevButton', goToPrevPage)
+        .on('click', '.loadPageGroup', loadPageGroup)
+        .on('click', getElementsByAction('item'), itemButtonClicked)
+        .on('click', getElementsByAction('grid'), gridButtonClicked)
+        .on('click', '.closeGrid', hideGrids)
+        .on('click', '.freetextButton', freetext)
+        .on('click', '.openItemButton', customItem)
+        .on('click', '.orderBoxTable tbody tr', itemRowClicked)
+        .on('click', '.voidButton', voidButtonClicked)
+        .on('dblclick', '.voidButton', voidLastItem)
+        .on('click', '.numpadButton', overrideQty)
+        .on('click', '.accumulateButton', () => toggleMode('accumulate'))
+        .on('click', '.changeCoverNumberButton', changeCoverNumberPrompt)
+        .on('click', '.showCoverSelectorButton', showCoverSelector)
+        .on('click', '.coverSelectorButton', coverSelected)
+        .on('change', '[name=print_override]', printGroupOverride)
 
     turnOnMode('accumulate')
 
@@ -100,6 +98,8 @@ const setupOrderScreen = (data: OrderScreenData) => {
 
 }
 
+const getElementsByAction = (action: string) => `[data-primary-action=${action}], [data-secondary-action=${action}]`
+
 /**
  * @param direction 1 for forward, -1 for backwards.
  * @param button
@@ -113,88 +113,156 @@ const navigatePage = (direction: number, button: JQuery) => {
     grid.get()[0].scrollLeft += grid.width() * direction
 }
 
+const getOrderBox = () => $('.orderBoxTable tbody')
 const goToNextPage = (e: JQuery.TriggeredEvent) => navigatePage(1, $(e.target))
 const goToPrevPage = (e: JQuery.TriggeredEvent) => navigatePage(-1, $(e.target))
 
-const addItemToOrderBox = (orderItem:orderItem) => {
-    const orderBox = $('.orderBoxTable tbody')
-    let selectedRows = orderBox.find('tr.selected')
-    let lastRow : JQuery = selectedRows.length ? getLastInstructionRow(selectedRows.first()) : orderBox.find('tr').last()
-    const existingRow = orderBox
-        .find('tr')
-        .filterByData('item', orderItem.item)
-        .filterByData('print_group', orderItem.print_group_id)
-        .filterByData('cover', orderItem.cover)
-        .last()
+const setItemQty = (orderItem: orderItem, qty: number) => {
+    if(!orderItem || !OrderScreen.order_items.find(existingItem => orderItem.id == existingItem.id)) return;
 
+    const instructionIds = getInstructionItems(orderItem.id).map(orderItem => orderItem.id)
 
-    //If accumulating, just increase the quantity of the existing row.
-    if(existingRow.length > 0 && isInMode('accumulate')){
-        incrementRowQty(existingRow, orderItem.qty)
-        scrollToElement(existingRow)
-        existingRow.pulse()
+    if(qty < 1){
+        const newItems = OrderScreen.order_items.filter(existingOrderItem =>
+            (existingOrderItem.id != orderItem.id) && !instructionIds.includes(existingOrderItem.id)
+        )
+
+        OrderScreen.selected_item_ids = array_remove(OrderScreen.selected_item_ids, orderItem.id)
+        if(orderItem.item.item_type == "item") {
+            const lastItem = newItems.filter(orderItem => orderItem.item.item_type == "item")?.last()
+            OrderScreen.last_added_item_ids = newItems.length > 0 && lastItem ? [lastItem.id] : []
+        }
+        setOrderItems(newItems)
+        return;
+    }
+
+    const newItems = OrderScreen.order_items.map(existingOrderItem => {
+            if(existingOrderItem.id == orderItem.id){
+                existingOrderItem.qty = qty
+            }
+            return existingOrderItem
+        })
+
+    setOrderItems(newItems)
+}
+
+const incrementItemQty = (orderItem:orderItem) => setItemQty(orderItem, orderItem?.qty+1)
+const decrementItemQty = (orderItem:orderItem) => setItemQty(orderItem, orderItem?.qty-1)
+
+const deselectAllRows = () => {
+    OrderScreen.selected_item_ids = []
+    $('tr.selected').removeClass('selected')
+}
+
+const addOrderItemsToPulse = (id: number) => OrderScreen.order_item_ids_to_pulse = array_push(OrderScreen.order_item_ids_to_pulse, id)
+const removeOrderItemsToPulse = (id: number) => OrderScreen.order_item_ids_to_pulse = array_remove(OrderScreen.order_item_ids_to_pulse, id)
+
+const addItemToOrderBox = (newOrderItem:orderItem) => {
+    const existingItems = OrderScreen.order_items
+        .filter(existingOrderItem =>
+          existingOrderItem.item.id == newOrderItem.item.id
+          && existingOrderItem.print_group.id == newOrderItem.print_group.id
+          && existingOrderItem.cover == newOrderItem.cover
+        )
+
+    if(existingItems.length > 0 && isInMode('accumulate')) {
+        addOrderItemsToPulse(existingItems[0].id)
+        incrementItemQty(existingItems[0])
+        OrderScreen.last_added_item_ids = [existingItems[0].id]
     } else {
-        const newRow = createOrderRow(orderItem)
-        lastRow.length > 0
-            ? lastRow.after(newRow)
-            : orderBox.append(newRow)
-        scrollToElement(newRow)
-        newRow.pulse()
+        addOrderItemsToPulse(newOrderItem.id)
+        if(!OrderScreen.selected_item_ids.length) {
+            const newItems = array_push(OrderScreen.order_items, newOrderItem)
+            setOrderItems(newItems)
+        } else {
+            const newItems =
+                OrderScreen.order_items
+                    .collect(existingOrderItem => {
+                        const firstSelectedItemId = getLastInstructionItem(OrderScreen.selected_item_ids.first()).id
+                        return firstSelectedItemId == existingOrderItem.id
+                            ? [existingOrderItem, newOrderItem]
+                            : [existingOrderItem]
+                    })
+            setOrderItems(newItems)
+        }
+        OrderScreen.last_added_item_ids = [newOrderItem.id]
+    }
+    deselectAllRows()
 }
 
-    deselectRow(orderBox.find('tr'))
+const getParentItem = (orderItemId: number, itemList:orderItem[]) => {
+    const itemIndex = itemList.findIndex(orderItem => orderItem.id === orderItemId);
+    if(itemList[itemIndex].item.item_type == "item"){
+        return itemList[itemIndex]
+    }
+    return itemList
+            .filter((orderItem, index) => index < itemIndex && orderItem.item.item_type === 'item')
+            .last()
 }
 
+const getInstructionItems = (orderItemId: number) => {
+    const itemIndex = OrderScreen.order_items.findIndex(orderItem => orderItem.id === orderItemId);
+    if(!OrderScreen.order_items[itemIndex+1]
+        || OrderScreen.order_items[itemIndex+1].item.item_type == "item"
+        || OrderScreen.order_items[itemIndex].item.item_type == "instruction"
+    )
+        return [OrderScreen.order_items[itemIndex]]
+
+
+    const nextItem =
+        OrderScreen.order_items
+            .filter((orderItem, index) =>  index > itemIndex && orderItem.item.item_type === 'item')
+            ?.first()
+    if(!nextItem) {
+        return OrderScreen.order_items.filter((orderItem, index) => index > itemIndex)
+    }
+    const nextItemIndex = OrderScreen.order_items.findIndex(orderItem => orderItem.id === nextItem.id);
+    return OrderScreen.order_items.slice(itemIndex, nextItemIndex)
+
+}
+
+const getLastInstructionItem = (orderItemId: number) => getInstructionItems(orderItemId).last()
 
 const addInstructionToOrderBox = (instruction: orderItem) => {
-    const orderBox = $('.orderBoxTable tbody')
-    let selectedRows = orderBox.find('tr.selected')
-    const newRow = createOrderRow(instruction)
-
     //If no items are added, then you can't add an instruction row.
-    if(!orderBox.find('tr.itemRow').length) return
+    if(!OrderScreen.order_items.length) return
 
-    if(selectedRows.length > 0){
-        selectedRows.each( (_, row) => {
-            const selectedRow = $(row)
-            const parentRow = getParentRow(selectedRow)
-            if(parentRow.is(selectedRow) || !parentRow.hasClass('selected')) {
-                const newRow = createOrderRow(instruction)
-                getLastInstructionRow(selectedRow).after(newRow)
-                newRow
-                    .setColumnValue( lang('printgroup_header'), selectedRow.getColumnValue(lang('printgroup_header')) )
-
-
-                if(parentRow.hasClass('selected')){
-                    selectRow(newRow)
-                } else {
-                    newRow.pulse()
-                }
-
-                scrollToElement(newRow)
-            }
+    const addAfter = OrderScreen.selected_item_ids.length
+        ? OrderScreen.selected_item_ids
+            .filter(selectedItemId => {
+                const orderItem = OrderScreen.order_items.find(orderItem => orderItem.id == selectedItemId)
+                const parentItem = getParentItem(selectedItemId, OrderScreen.order_items)
+                return !(orderItem.item.item_type == "instruction" && OrderScreen.selected_item_ids.includes(parentItem.id))
             })
+            .map(selectedItemId => getLastInstructionItem(selectedItemId).id)
+            .unique()
+        : OrderScreen.last_added_item_ids.map(itemId => getLastInstructionItem(itemId).id)
+
+    const newItems = OrderScreen.order_items.collect(existingItem => {
+        const newInstruction = createNewOrderItem(instruction.item, instruction.qty, instruction.print_group)
+        addOrderItemsToPulse(newInstruction.id)
+        return addAfter.includes(existingItem.id)
+            ? [existingItem, newInstruction]
+            : [existingItem]
+    })
+    setOrderItems(newItems)
 }
 
-    const lastRow = orderBox.find('tr').last()
-    newRow
-        .setColumnValue(lang('printgroup_header'), lastRow.getColumnValue(lang('printgroup_header')))
-        .appendTo(orderBox)
-        .pulse()
-    scrollToElement(newRow)
+const createNewOrderItem = (item: item, qty: number, printGroup: print_group) : orderItem => {
+    return {
+        id: OrderScreen.order_item_id_generator.next().value,
+        item: clone(item),
+        qty: qty,
+        print_group: printGroup,
+        cover: OrderScreen.selected_cover,
+    }
 }
 
 
 const addNewItem = (item: item, qty = 1) => {
-    const salesCategory = OrderScreen.sales_categories.where('id', item.category)
+    const salesCategory = OrderScreen.sales_categories.where('id', item.sales_category_id)
     const printGroup = OrderScreen.print_group_override ?? OrderScreen.print_groups.where('id', salesCategory.print_group_id)
-    const orderItem : orderItem = {
-        id: OrderScreen.order_item_id_generator.next().value,
-        item: item,
-        qty: qty,
-        print_group_id: printGroup,
-        cover: OrderScreen.selected_cover,
-    }
+    const orderItem = createNewOrderItem(item, qty, printGroup)
 
     switch(item.item_type){
         case 'instruction':
@@ -207,52 +275,34 @@ const addNewItem = (item: item, qty = 1) => {
     }
 }
 
-const getLastInstructionRow = (row: JQuery) => {
-        let stopCounting = false
-        let finalRow = row
-        row.nextAll().each(function (index, activeRow){
-            if(!stopCounting){
-                if($(activeRow).hasClass('instructionRow')){
-                    finalRow = $(activeRow)
-                } else {
-                    stopCounting = true
-                }
-            }
-        })
-
-        return $(finalRow)
-}
-
-const getParentRow = (row: JQuery) => {
-    return row.hasClass('instructionRow')
-        ? row.prevAll('.itemRow').first()
-        : row
-}
-
-const incrementRowQty = (row: JQuery, qty: number) => {
-    const existingQty = Number(row.getColumnValue(lang('qty_header')))
-    const newQty = qty + existingQty
-    row.setColumnValue(lang('qty_header'), newQty)
-    calculateRowTotal(row)
-}
-
 const renderOrderBox = () => {
-    const orderBox = $('.orderBoxTable')
-    const tbody = orderBox.children('tbody')
+    const orderBox = getOrderBox()
     const newTbody = $('<tbody />')
     OrderScreen.order_items.forEach(orderItem => {
         const newRow = createOrderRow(orderItem)
         newTbody.append(newRow)
-        newRow.pulse()
+
         if(OrderScreen.selected_item_ids.includes(orderItem.id)){
-            selectRow(newRow)
+            newRow.addClass('selected')
+        }
+
+        if(OrderScreen.order_item_ids_to_pulse.includes(orderItem.id)){
+            newRow.pulse()
         }
     })
 
-    tbody.replaceWith(newTbody)
-    const element = orderBox.find('tbody tr').last().get()[0]
+    orderBox.replaceWith(newTbody)
+    const element = newTbody.find('tr').last().get()[0]
+    if(element) {
         element.scrollIntoView()
-    OrderScreen.last_added_item = null
+    }
+        updateOrderBoxTotals()
+}
+
+
+const setOrderItems = (orderItems: orderItem[]) => {
+    OrderScreen.order_items = orderItems
+    renderOrderBox()
 }
 
 const createOrderRow = (orderItem: orderItem) => {
@@ -265,10 +315,10 @@ const createOrderRow = (orderItem: orderItem) => {
         .setColumnValue(lang('price_header'), price)
         .setColumnValue(lang('id_header'), orderItem.item.id)
         .setColumnValue(lang('total_price_header'), price.multiply(orderItem.qty))
-        .setColumnValue(lang('printgroup_header'), orderItem.print_group_id?.name)
+        .setColumnValue(lang('printgroup_header'), orderItem.print_group?.name)
         .data('order-item-id', orderItem.id)
-        .data('order-item-id', orderItem.id)
-        .data('print_group', orderItem.print_group_id)
+        .data('order-item', orderItem)
+        .data('print_group', orderItem.print_group)
         .data('cover', orderItem.cover)
         .data('item', orderItem.item)
         .find('td.itemCell')
@@ -278,7 +328,7 @@ const createOrderRow = (orderItem: orderItem) => {
 
     if(orderItem.item.item_type == 'instruction' && price.value <= 0){
         row
-            .find('.totalPriceCell')
+            .find('.totalPriceCell,.unitPriceCell')
             .css('font-size', 0)
     }
 
@@ -306,20 +356,18 @@ const gridButtonClicked = (e: JQuery.TriggeredEvent) => {
     ajax(`/order/getGridHtml/${grid}`, null, null,gridHtmlGenerated, null, null)
 }
 
-
 const hideGrids = () => $('.gridContainer').hide()
 
 
 const gridHtmlGenerated = (gridData: {gridHtml:string, grid: grid}) => {
     const gridContainer = $('.gridContainer')
-    const gridCellWidth = getGridCellWidth()
-    const gridCellHeight = getGridCellHeight()
+    const cellDimensions = getGridCellDimensions()
     const grid = gridData.grid
     const gridHtml = gridData.gridHtml
 
     gridContainer
         .show()
-        .width(gridCellWidth * grid.cols)
+        .width(cellDimensions.width * grid.cols)
         .children('.gridContainerHeader')
         .children('span')
         .text(grid.name)
@@ -329,133 +377,97 @@ const gridHtmlGenerated = (gridData: {gridHtml:string, grid: grid}) => {
         .html(gridHtml)
         .show()
         .parent()
-        .height(gridCellHeight * grid.rows)
+        .height(cellDimensions.height * grid.rows)
         .closest('.gridContainer')
         .find('.pageNavigation')
         .toggle(gridContainer.find('.gridPage').length >  1)
-        .height(gridCellHeight)
+        .height(cellDimensions.height)
 }
 
 const itemRowClicked = (e: JQuery.TriggeredEvent) => {
     const row = $(e.target).closest('tr')
+    const orderItem: orderItem = row.data('order-item')
 
     if(isInMode('void')){
-        voidRows(row)
+        voidOrderItems([orderItem.id])
         turnOffMode('void')
         return
     }
 
-    if(!row.hasClass('selected')) selectRow(row)
-    else deselectRow(row)
-
+    if(!row.hasClass('selected')) {
+        OrderScreen.selected_item_ids = array_push(OrderScreen.selected_item_ids, orderItem.id)
+        getInstructionItems(orderItem.id).forEach(instruction => OrderScreen.selected_item_ids = array_push(OrderScreen.selected_item_ids, instruction.id))
+        OrderScreen.selected_item_ids = OrderScreen.selected_item_ids.unique()
+    }
+    else {
+        OrderScreen.selected_item_ids = array_remove(OrderScreen.selected_item_ids, orderItem.id)
+        getInstructionItems(orderItem.id).forEach(instruction => OrderScreen.selected_item_ids = array_remove(OrderScreen.selected_item_ids, instruction.id))
     }
 
-const selectRow = (row: JQuery) => {
-    row.addClass('selected')
-    const instructionRows = row.nextUntil('.itemRow')
+    renderOrderBox()
+}
 
-    if(row.hasClass('itemRow') && instructionRows.length){
-        instructionRows.each((index, row) => {
-            selectRow($(row))
+const voidOrderItems = (orderItemIds: number[]) => {
+    const originalOrderItemList = clone(OrderScreen.order_items)
+    const originalSelectedIds = clone(OrderScreen.selected_item_ids)
+    orderItemIds.forEach(orderItemId => {
+        const orderItemToVoid = originalOrderItemList.find(item => item.id == orderItemId)
+        if(orderItemToVoid.item.item_type == "instruction") {
+            const parentItem = getParentItem(orderItemToVoid.id, originalOrderItemList)
+            if(originalSelectedIds.includes(parentItem.id) && parentItem.qty-1 < 1 || !originalSelectedIds.includes(parentItem.id)){
+                decrementItemQty(orderItemToVoid)
+            }
+        } else decrementItemQty(orderItemToVoid)
     })
 }
-}
-
-const deselectRow = (row: JQuery) => {
-    row.removeClass('selected')
-    const instructionRows = row.nextUntil('.itemRow')
-
-    if(row.hasClass('itemRow') && instructionRows.length){
-        deselectRow(instructionRows)
-    }
-}
-
-const deleteRow = (row: JQuery) => row.find('*:not(.hidden)').slideUp('fast', () => row.remove())
-
-const voidInstructionRow = (row: JQuery) => {
-    if(!row.prevAll('.itemRow').first().hasClass('selected'))
-        deleteRow(row)
-}
-
-const voidItemRow = (row : JQuery) => decrementQty(row)
-
-const voidRow = (row: JQuery) => {
-    if(row.hasClass('itemRow')) voidItemRow(row)
-    else voidInstructionRow(row)
-}
-
-const voidRows = (rows: JQuery) => rows.each((index, row) => voidRow($(row)))
 
 const voidButtonClicked = () => {
-    const selectedRows = $('.orderBox tr.selected')
     if(isInMode('void')){
         turnOffMode('void')
-    } else if(selectedRows.length){
-        voidRows(selectedRows)
+    } else if(OrderScreen.selected_item_ids.length){
+        voidOrderItems(OrderScreen.selected_item_ids)
     } else {
         turnOnMode('void')
     }
 }
 
 const voidLastItem = () => {
-    const orderBox = $('.orderBoxTable tbody')
-    const allRows = orderBox.find('tr')
-    if(allRows.length < 1) return
-    voidRows(allRows.last())
+    if (OrderScreen.order_items.length)
+        decrementItemQty(OrderScreen.order_items.last())
 }
 
+const getSelectedTotals = () =>
+    OrderScreen.selected_item_ids
+        .map(selectedId => OrderScreen.order_items.find(orderItem => orderItem.id == selectedId))
+        .reduce((resultSoFar, currentOrderItem) => {
+            return resultSoFar.add(currentOrderItem.item.price1 * currentOrderItem.qty)
+        }, money(0))
+
+const getTotals = () =>
+    OrderScreen.order_items
+        .reduce((resultSoFar, currentOrderItem) => {
+            return resultSoFar.add(currentOrderItem.item.price1 * currentOrderItem.qty)
+        }, money(0))
+
 const updateOrderBoxTotals = () => {
-    const allRows = $('.orderBoxTable tbody tr')
-    const selectedRows = $('.orderBoxTable tbody tr.selected')
-    const completeTotal = lang('totalPrice', getTotalOfRows(allRows))
-    const selectedTotal = lang('selectedPrice', getTotalOfRows(selectedRows))
+    const completeTotal = lang('totalPrice', getTotals().format())
+    const selectedTotal = lang('selectedPrice', getSelectedTotals().format())
 
     $('.orderBoxTotal').text(completeTotal)
     $('.orderBoxSelectedTotal').text(selectedTotal)
 }
 
-const getTotalOfRows = (rows: JQuery) => {
-    return money(rows
-        .find('td.totalPriceCell')
-        .get()
-        .map(cell => Number(cell.innerText))
-        .filter(number => !isNaN(number))
-        .reduce( (total, number) => total + number , 0), false)
-        .format()
-}
-
-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)
-    row.setColumnValue(lang('total_price_header'), price.multiply(qty))
-}
-
-const decrementQty = (row: JQuery, qty=1) => {
-    const existingQty = getQty(row)
-
-    if(existingQty <= 1){
-        const childRows = row.nextUntil('.itemRow')
-        deleteRow(row)
-        deleteRow(childRows)
-        return
-    }
-    row.setColumnValue(lang('qty_header'), existingQty - qty)
-    calculateRowTotal(row)
-}
-
 const scrollToElement = (JQueryElement: JQuery) => {
     const element = JQueryElement.get()[0]
     const container = JQueryElement.closest('.orderBox').get()[0]
     const containerTop = $(container).scrollTop()
-    const containerBottom = containerTop + $(container).height();
+    const containerBottom = containerTop + $(container).height()
     const elemTop = element.offsetTop
-    const elemBottom = elemTop + $(element).height();
+    const elemBottom = elemTop + $(element).height()
     if (elemTop < containerTop) {
-        $(container).scrollTop(elemTop);
+        $(container).scrollTop(elemTop)
     } else if (elemBottom > containerBottom) {
-        $(container).scrollTop(elemBottom - $(container).height());
+        $(container).scrollTop(elemBottom - $(container).height())
     }
 }
 
@@ -498,7 +510,6 @@ const freetextSubmitted = (text: string) => {
     item.name = text
 
     addNewItem(item)
-
 }
 
 const customItem = () => showVirtualKeyboard(lang('enter_item_name'), 32,false, customItemTextSubmitted)
@@ -517,21 +528,28 @@ const customItemTextSubmitted = (text: string) => {
     showVirtualNumpad(lang('enter_item_price'), 4, false, true, true, submitFunction)
 }
 
-const getGridCellHeight = () => $('#pageGroupContainer').height()/8
-const getGridCellWidth = () => $('#pageGroupContainer').width()/6
-
+const getGridCellDimensions = () => {
+    const container = $('#pageGroupContainer')
+    return {
+        height: container.height()/8,
+        width: container.width()/6
+    }
+}
 
 const showCoverSelector = (event: JQuery.TriggeredEvent) => {
     const button = $(event.target)
-    const gridHeight = getGridCellHeight()
-
+    const gridHeight = getGridCellDimensions().height
     const coverSelector = $('.coverSelector')
+
+    const buttonPositionLeftPercent = getPercentageOfPageContainerWidth(button.offset().left)
+    const buttonWidthPercent = getPercentageOfPageContainerWidth(button.width())
+
     coverSelector
         .toggle(!coverSelector.is(':visible'))
-        .width(button.width())
         .css({
-            left: button.offset().left + 'px',
-            top: button.offset().top + button.height() + 'px',
+            width: buttonWidthPercent,
+            left: buttonPositionLeftPercent,
+            top: (button.offset().top + button.height()) + 'px'
         })
         .find('.coverSelectorButton')
         .height(gridHeight)
@@ -569,7 +587,7 @@ const changeCoverNumberPrompt = () =>
 const changeCoverNumberPromptSubmitted = (value: string) => updateCoverNumbers(Number(value))
 
 const updateCoverNumbers = (covers: number) => {
-    let newTable = Object.assign({}, OrderScreen.table)
+    let newTable = clone(OrderScreen.table)
     newTable.default_covers = covers
     ajax('/order/updateCovers', newTable, 'post', coverNumbersUpdated, null, null)
 }
@@ -600,5 +618,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)
 })

typescript/keyboards.ts

@@ -25,9 +25,9 @@ let showVirtualNumpad = (heading: string, maxlength = 4, isPassword: boolean, al
         inputBox.text('');
 
         numpad.data('maxlength', maxlength)
-        numpad.data('submitfunction', submitFunction)
+        numpad.data('submit-function', submitFunction)
         numpad.data('password', isPassword);
-        numpad.data('allowdecimals', allowDecimals);
+        numpad.data('allow-decimals', allowDecimals);
 
         $(document).off('keyup');
         $(document).on('keyup', e => {
@@ -64,9 +64,9 @@ let showVirtualNumpad = (heading: string, maxlength = 4, isPassword: boolean, al
      let virtualNumpadInput = (input: string) => {
         let inputBox = $('#virtualNumpadInput')
         let numpad = $('#virtualNumpad')
-        let maxlength = numpad.data('maxlength')
-        let allowDecimals = numpad.data('allowdecimals')
-        let submitFunction = numpad.data('submitfunction')
+        let maxlength : number = numpad.data('maxlength')
+        let allowDecimals: boolean = numpad.data('allow-decimals')
+        let submitFunction : Function = numpad.data('submit-function')
         let allowedValues = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'submit', 'clear']
         let currentValue = numpad.data('value').toString()
 
@@ -144,7 +144,7 @@ let showVirtualNumpad = (heading: string, maxlength = 4, isPassword: boolean, al
         inputBox.val('')
         keyboard.data('maxlength', maxlength)
         keyboard.data('password', isPassword)
-        keyboard.data('submitfunction', submitFunction)
+        keyboard.data('submit-function', submitFunction)
         inputBox.attr('autofocus', 'autofocus');
         inputBox.trigger('focus')
         inputBox.trigger('click')
@@ -175,7 +175,7 @@ let showVirtualNumpad = (heading: string, maxlength = 4, isPassword: boolean, al
                 break;
             case 'submit':
                 hideVirtualKeyboard();
-                let submitFunction = keyboard.data('submitfunction')
+                let submitFunction = keyboard.data('submit-function')
                 submitFunction(inputBox.val());
                 break;
             case 'shift':

typescript/types.ts

@@ -10,7 +10,7 @@ interface order {
 interface orderItem {
     id: number
     qty: number
-    print_group_id: print_group
+    print_group: print_group
     item: item
     cover: number
 }
@@ -92,7 +92,7 @@ interface grid {id: number; name: string; rows: number; cols: number; data: stri
 interface item {
     id: number
     code: string
-    category: number
+    sales_category_id: number
     name: string
     item_type: string
     price1: number
@@ -108,4 +108,8 @@ type sales_category = {
 
 interface Array<T> {
     where(property: string, value: any): T
+    first(): T
+    last(): T
+    unique(): this
+    collect<y>(func: (item: T) => y[]): y[]
 }