Moved to Giraffe View Engine

Npm scripts

.gitignore

@@ -6,5 +6,7 @@
 /tables/*
 /Properties/
 /.idea/
-/wwwroot/scripts/js/
-/wwwroot/styles/css/*
+/wwwroot/scripts/*.js
+/wwwroot/scripts/*.js.map
+/wwwroot/styles/*
+/Folder.DotSettings.user

Ajax/Controller.fs

@@ -0,0 +1,15 @@
+module DredgePos.Ajax.Controller
+
+open DredgeFramework
+open language
+open Giraffe
+
+let getLanguageVars = ajaxSuccess languageVars
+
+let getKeyboardLayout (language: string) =
+    let layout = $"""wwwroot/languages/{language}/keyboardLayout.json"""
+                 |> GetFileContents
+    map [
+            "status", "success"
+            "data", layout
+        ] |> json

Ajax/Router.fs

@@ -0,0 +1,14 @@
+module DredgePos.Ajax.Router
+
+open Saturn
+open Giraffe
+
+let pipeline = pipeline {
+    use_warbler
+}
+
+let router = router {
+    getf "/getKeyboardLayout/%s" Controller.getKeyboardLayout
+    get "/languageVars" (json Controller.getLanguageVars)
+}
+

AjaxController.fs

@@ -1,148 +0,0 @@
-module AjaxController
-
-open DredgeFramework
-open DredgePos
-open Floorplan
-open Microsoft.AspNetCore.Http
-open Reservations
-open language
-open Giraffe
-open Types
-
-let loginWithLoginCode (context: HttpContext) (login_code: int) =
-     if Session.clerkLogin login_code context then ajaxSuccess "success"
-     else ajaxFail "fail"
-
-let getLanguageVars = ajaxSuccess languageVars
-
-let getActiveTables venue = Floorplan.getActiveTables venue |> ajaxSuccess |> json
-
-let getRoomData roomId = Floorplan.getRoom roomId |> ajaxSuccess |> json
-
-let mergeTables (tables: floorplan_table[]) =
-    let status =
-        if mergeTables tables.[0].table_number tables.[1].table_number then
-            let outputTables = map [
-                "parent", tables.[0];
-                "child", tables.[1];
-                "merged", getTable tables.[0].table_number;
-            ]
-            ajaxSuccess outputTables
-        else ajaxFail "Could Not Merge Tables"
-    status |> json
-
-let unmergeTable tableNumber =
-    let unmerged = Floorplan.unmergeTable tableNumber
-    let unmergedTables =
-        match unmerged  with
-            | Some (parent, child) ->
-                map["parent", parent; "child", child] |> ajaxSuccess
-            | None -> ajaxFail "Could not Unmerge Table"
-
-    unmergedTables |> json
-
-
-let getFloorplanData venue =
-    let tableList = Floorplan.tableList venue
-    let reservationList = getReservationList tableList
-    {|
-        tables = tableList
-        decorations = Decorations.decorationList venue
-        activeTableNumbers = Floorplan.getActiveTables venue
-        rooms = Floorplan.getRoomList venue
-        reservations = reservationList
-    |}
-    |> ajaxSuccess
-    |> json
-
-let getKeyboardLayout (language: string) =
-    let layout = $"""wwwroot/languages/{language}/keyboardLayout.json""" |> GetFileContents
-    map [
-            "status", "success"
-            "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
-
-let createTable (tableData: floorplan_table) =
-    let result =
-        if tableExists tableData.table_number = "False" then
-            ajaxSuccess (addNewTable tableData)
-        else ajaxFail (tableExists tableData.table_number)
-
-    result |> json
-
-let deleteTable (table: floorplan_table) =
-    Floorplan.deleteTable table.table_number
-    table |> ajaxSuccess |> json
-
-let transferTable (origin, destination) =
-    Floorplan.transferTable origin destination
-    let data = map ["origin", getTable origin ; "destination", getTable destination]
-    ajaxSuccess data |> json
-
-let AddDecoration (data: floorplan_decoration) =
-    let image = "wwwroot/images/decorations/" + data.decoration_image
-    let width, height = image |> GetImageSize
-    let aspectRatio = decimal width /  decimal height
-
-    let decoration : floorplan_decoration = {
-        id = 0
-        decoration_height = (200m / aspectRatio) |> int
-        decoration_width = 200
-        decoration_rotation = 0
-        decoration_image = data.decoration_image
-        decoration_pos_x = data.decoration_pos_x
-        decoration_pos_y = data.decoration_pos_y
-        decoration_room = data.decoration_room
-    }
-
-    Decorations.CreateDecoration decoration |> ajaxSuccess |> json
-
-let UpdateDecoration data =
-    Decorations.UpdateDecoration data |> ignore
-    ajaxSuccess "true" |> json
-
-let DeleteDecoration id = ajaxSuccess (Decorations.DeleteDecoration id) |> json
-
-let newEmptyReservation (reservation: reservation) =
-    let newReservation = {reservation with
-                            reservation_created_at = CurrentTime()
-                            reservation_time = CurrentTime()
-                          }
-
-    if reservation.reservation_table_id > 0 then
-        let table = {(getTableById reservation.reservation_table_id) with
-                        status = 2
-                        default_covers = reservation.reservation_covers}
-        updateTablePosition table |> ignore
-
-    let createdReservation = Floorplan.createEmptyReservation newReservation
-    ajaxSuccess createdReservation |> json
-
-let updateReservation (reservation: reservation) = updateReservation reservation |> ajaxSuccess |> json
-
-let unreserveTable (table: floorplan_table) =
-    let newTable = {table with status = 0}
-    updateTablePosition newTable |> ignore
-    DeleteReservation newTable.id
-    newTable |> ajaxSuccess |> json

Authenticate/Controller.fs

@@ -0,0 +1,16 @@
+module DredgePos.Authenticate.Controller
+
+open DredgeFramework
+open Microsoft.AspNetCore.Http
+open DredgePos.Global.Controller
+
+let loadAuthenticatePage =
+    let scripts = [|"dredgepos.authenticate.js"|] |> addDefaultScripts
+    let styles = [|"dredgepos.authenticate.css"|] |> addDefaultStyles
+    let metaTags = [|"viewport", "user-scalable = no, initial-scale=0.8,maximum-scale=0.8 ,shrink-to-fit=yes"|] |> addDefaultMetaTags
+
+    View.index scripts styles metaTags
+
+let loginWithLoginCode (context: HttpContext) (login_code: int) =
+     if Model.clerkLogin login_code context then ajaxSuccess "success"
+     else ajaxFail "fail"

Authenticate/Model.fs

@@ -1,13 +1,27 @@
-module Session
+module DredgePos.Authenticate.Model
 
 open System
 open DredgeFramework
 open Dapper.FSharp
-open Clerk
 open DredgePos
 open Thoth.Json.Net
 open Types
 
+let getClerkByLoginCode (loginCode: int) =
+    let clerk =
+        select {
+            table "clerks"
+            where (eq "clerk_login_code" loginCode)
+            take 1
+        }
+        |> db.Select<clerk>
+        |> EnumerableToArray
+
+    if (clerk |> length) > 0 then
+        Some (first clerk)
+    else
+        None
+
 let deleteSession sessionId context =
     delete {
         table "sessions"
@@ -65,12 +79,10 @@ let sessionExists (sessionId: string) context =
 
 let checkAuthentication clerk =
     let existingClerk = getClerkByLoginCode clerk.clerk_login_code
-    if existingClerk.IsSome
+    existingClerk.IsSome
     && existingClerk.Value.id = clerk.id
     && existingClerk.Value.clerk_name = clerk.clerk_name
     && existingClerk.Value.clerk_login_code = clerk.clerk_login_code
-       then true
-       else false
 
 let getLoginCookie context = Browser.getCookie "dredgepos_clerk_logged_in" context
 

Authenticate/Router.fs

@@ -0,0 +1,18 @@
+module DredgePos.Authenticate.Router
+
+open Saturn
+open Giraffe
+
+let homepage = (warbler (fun _ -> htmlView Controller.loadAuthenticatePage  ))
+let handlePostRoute<'a> handlerFunction post next ctx = json (handlerFunction ctx post) next ctx
+
+let pipeline = pipeline{
+    use_warbler
+}
+
+let router = router {
+    pipe_through pipeline
+    get "/" homepage
+    get "" homepage
+    post "/authenticateClerk" (bindJson<int> (handlePostRoute Controller.loginWithLoginCode) )
+}

Authenticate/View.fs

@@ -0,0 +1,10 @@
+module DredgePos.Authenticate.View
+
+open DredgePos.Global.View
+open Giraffe.ViewEngine
+
+let content = div [_id "authenticator"] []
+
+let index scripts styles metaTags = HtmlPage "Floorplan" (GetScripts scripts) (GetStyles styles) (GetMetaTags metaTags) [|content|]
+
+

Browser.module.fs

@@ -1,50 +0,0 @@
-module Browser
-
-open System
-open System.IO
-open Microsoft.AspNetCore.Builder
-open Microsoft.AspNetCore.Http
-open Microsoft.AspNetCore.Routing
-open Microsoft.Extensions.DependencyInjection
-open Microsoft.Extensions.Hosting
-open DredgeFramework
-
-
-let cookieExists name (context: HttpContext) =
-    context.Request.Cookies.ContainsKey(name)
-
-let deleteCookie name (context: HttpContext) =
-    if cookieExists name context then context.Response.Cookies.Delete(name)
-
-let getCookie cookieName (context: HttpContext) =
-    context.Request.Cookies.[cookieName] |? ""
-
-let setCookie name value (expiry: DateTimeOffset) (context: HttpContext) =
-    deleteCookie name context
-    let options = CookieOptions()
-    options.Expires <- expiry
-    context.Response.Cookies.Append(name, value, options);
-
-let redirect url (context: HttpContext) =
-    context.Response.Redirect url
-
-let addRoute path controller (endpoints: IEndpointRouteBuilder) =
-    endpoints.MapGet(path, fun context ->
-                    context.Response.WriteAsync(controller())) |> ignore
-    endpoints
-
-let addRouteWithParameter path controller param1 (endpoints: IEndpointRouteBuilder)  =
-    endpoints.MapGet(path, fun context ->
-                    let param1Name, param1Type = param1
-                    let parameter1 = context.Request.RouteValues.[param1Name] |> string |> param1Type
-                    context.Response.WriteAsync(controller parameter1)) |> ignore
-    endpoints
-
-let addRouteWithParameters path controller param1 param2 (endpoints: IEndpointRouteBuilder) =
-    endpoints.MapGet(path, fun context ->
-                    let param1Name, param1Type = param1
-                    let param2Name, param2Type = param2
-                    let parameter1 = context.Request.RouteValues.[param1Name] |> string |> param1Type
-                    let parameter2 = context.Request.RouteValues.[param2Name] |> string |> param2Type
-                    context.Response.WriteAsync(controller parameter1 parameter2)) |> ignore
-    endpoints

Clerk.module.fs

@@ -1,37 +0,0 @@
-module Clerk
-
-open Dapper.FSharp
-open DredgeFramework
-open DredgePos
-open Thoth.Json.Net
-open Types
-
-let mutable loginCookie = ""
-
-let clerk_decoder : Decoder<clerk> =
-        Decode.object
-            (fun get ->
-                {
-                    id = get.Required.Field "clerk_id" Decode.int
-                    clerk_name = get.Required.Field "clerk_name" Decode.string
-                    clerk_login_code = get.Required.Field "clerk_login_code" Decode.int
-                    clerk_usergroup = get.Required.Field "clerk_usergroup" Decode.int
-                })
-
-
-type user = {clerk_name:string}
-
-let getClerkByLoginCode (loginCode: int) =
-    let clerk =
-        select {
-            table "clerks"
-            where (eq "clerk_login_code" loginCode)
-            take 1
-        }
-        |> db.Select<clerk>
-        |> EnumerableToArray
-
-    if (clerk |> length) > 0 then
-        Some (first clerk)
-    else
-        None

Core/Browser.module.fs

@@ -0,0 +1,29 @@
+module Browser
+
+open System
+open System.IO
+open Microsoft.AspNetCore.Builder
+open Microsoft.AspNetCore.Http
+open Microsoft.AspNetCore.Routing
+open Microsoft.Extensions.DependencyInjection
+open Microsoft.Extensions.Hosting
+open DredgeFramework
+
+
+let cookieExists name (context: HttpContext) =
+    context.Request.Cookies.ContainsKey(name)
+
+let deleteCookie name (context: HttpContext) =
+    if cookieExists name context then context.Response.Cookies.Delete(name)
+
+let getCookie cookieName (context: HttpContext) =
+    context.Request.Cookies[cookieName] |? ""
+
+let setCookie name value (expiry: DateTimeOffset) (context: HttpContext) =
+    deleteCookie name context
+    let options = CookieOptions()
+    options.Expires <- expiry
+    context.Response.Cookies.Append(name, value, options);
+
+let redirect url (context: HttpContext) =
+    context.Response.Redirect url

Core/Database.module.fs

@@ -2,12 +2,14 @@
 
 open Dapper
 open Dapper.FSharp
-open Dapper.FSharp.MySQL
-open MySql.Data.MySqlClient
+open Dapper.FSharp.PostgreSQL
+
+
 open DredgeFramework
 
-let connString = "server=localhost;uid=root;pwd=;database=dredgepos;table cache = false"
-let connection = new MySqlConnection(connString)
+let connString = "Server=localhost;Port=5432;User Id=postgres;Password=root;Database=dredgepos;Include Error Detail=true"
+//let connString = "server=localhost;uid=root;pwd=;database=dredgepos;table cache = false"
+let connection = new Npgsql.NpgsqlConnection(connString)
 
 let Select<'a> asyncQuery =
     asyncQuery
@@ -28,18 +30,15 @@ let Insert<'a> asyncQuery =
 
 let InsertOutput<'a> asyncQuery =
     asyncQuery
-        |> connection.InsertAsync<'a>
+        |> connection.InsertOutputAsync<'a, 'a>
         |> RunSynchronously
-        |> ignore
-
-    let table = asyncQuery.Table
-    connection.Query<'a>($"""Select * From {table} Where id = (select last_insert_id())""")
         |> EnumerableToArray
 
 let Update<'a> asyncQuery =
     asyncQuery
-        |> connection.UpdateAsync<'a>
+        |> connection.UpdateOutputAsync<'a, 'a>
         |> RunSynchronously
+        |> EnumerableToArray
 
 let Delete<'a> asyncQuery =
     asyncQuery

Core/DredgeFramework.module.fs

@@ -2,7 +2,6 @@
 
 open System.Collections.Generic
 open System.Globalization
-open FSharp.Data.Sql
 open System
 open System.Drawing
 open System.IO
@@ -16,6 +15,10 @@ open Thoth.Json.Net
 
 let (|?) lhs rhs = if lhs = null then rhs else lhs
 
+let joinWithNewLine (arr: string[]) = arr |> String.concat "\n"
+
+let getCurrentVenue () = 1
+
 let map list = list |> Map.ofList
 
 let JoinArray (char: string) (array: 'a[]) = String.Join(char, array)
@@ -31,13 +34,16 @@ let EnumerableToArray (enumerable: IEnumerable<'T>) =  enumerable.ToArray()
 
 let getFileExtension (file: string) =  Path.GetExtension file
 
-let GetFileContents (file: string) = File.ReadAllText file
+let GetFileContents = File.ReadAllText
 let GetFileName (file: string) = Path.GetFileName file
+let FileExists = File.Exists
 
 let length (variable: 'T[]) = variable.Length
-let first (array: 'a[]) = array.[0]
-let last (array: 'a[]) = array.[array.Length-1]
+let first (array: 'a[]) = array[0]
 
+let last (array: 'a[]) = array[array.Length-1]
+
+let filterFirst (array:'a[]) = if array.Length > 0 then [|array[0]|] else [||]
 
 let removeFalseValues (variable: bool[]) = variable |> Array.filter id
 

Core/GenericEntities.module.fs

@@ -0,0 +1,76 @@
+module Entity
+open Dapper.FSharp
+open DredgeFramework
+open Pluralize.NET.Core
+open FSharp.Reflection
+
+let GetDatabaseTable<'x> =
+        let typeName = typeof<'x>.Name
+        Pluralizer().Pluralize typeName
+
+let Create (record: 'x)=
+    let tableName = GetDatabaseTable<'x>
+    insert {
+        table tableName
+        value record
+        excludeColumn "id"
+    }
+    |> db.InsertOutput
+    |> first
+
+
+let inline Update (record: ^x) =
+    let tableName = GetDatabaseTable<'x>
+    let id = ((^x) : (member id : int) record)
+    update {
+        table tableName
+        set record
+        where (eq "id" id)
+        excludeColumn "id"
+    }
+    |> db.Update
+
+let GetAll<'x> =
+    let tableName = GetDatabaseTable<'x>
+
+    select {
+        table tableName
+    }
+    |> db.Select<'x>
+
+let GetAllByColumn<'x> (column: string) (value: obj) =
+    let tableName = GetDatabaseTable<'x>
+
+    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 inline GetRelated<'x, .. > (entity: ^y) =
+    let columnName = typeof<'x>.Name + "_id"
+    let primaryKeyValue = typeof<'y>.GetProperty(columnName).GetValue(entity) :?> int
+    GetById<'x> primaryKeyValue
+
+let inline GetAllRelated<'x, .. > (entity: ^y) =
+    let id = typeof<'y>.GetProperty("id").GetValue(entity) :?> int
+    let columnName = typeof<'y>.Name + "_id"
+    GetAllByColumn<'x> columnName id
+
+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
+
+let inline Delete< ^x when  ^x: (member id: int) > (entity: ^x) =
+    typeof<'x>.GetProperty("id").GetValue(entity) :?> int
+    |> DeleteById<'x>

Core/Language.module.fs

@@ -19,15 +19,15 @@ let languageVars =
 //Gets a value of a language variable
 let get var =
     if languageVars.ContainsKey var then
-        languageVars.[var]
+        languageVars[var]
     else
         "Missing language variable: " + var
 
-let getAndReplace languageVar replacements =
+let getAndReplace languageVar (replacements: 'x list) =
     let langString = get languageVar
     replacements
-        |> List.mapi (fun index string
-                       -> index + 1, string)
+        |> List.mapi (fun index replacement
+                       -> index + 1, replacement.ToString())
         |> List.fold (fun (result: string) (index, string)
                          -> result.Replace($"[{index}]", string)
                       ) langString

Core/Theme.module.fs

@@ -1,6 +1,6 @@
 module Theme
 
-open System
+open System.Web
 open System.IO
 open System.Collections.Generic
 open System.Text.RegularExpressions
@@ -10,14 +10,14 @@ open DredgeFramework
 let currentTheme = "restaurant"
 
 let getHTMLForFile file =
-    let stylePath = $"/styles/css/{file}"
-    let scriptPath = $"/scripts/js/{file}"
+    let stylePath = $"/styles/{file}"
+    let scriptPath = $"/scripts/{file}"
     let fileExtension = file |> getFileExtension
     let scriptFileExists =  File.Exists ("wwwroot"+stylePath) || File.Exists("wwwroot"+scriptPath)
     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
@@ -26,7 +26,7 @@ let getHTMLForFile file =
 
 
 let ParseScriptsAndStylesheets files html =
-    let defaultScriptsAndStyles = ["dark.theme.css"; "external/jquery.js" ; "dredgepos.core.js"; "keyboards.js";]
+    let defaultScriptsAndStyles = ["dark.theme.css"; "./external/jquery.js" ; "dredgepos.core.js"; "keyboards.js";]
     let scriptsAndStylesheets = defaultScriptsAndStyles @ files
 
     let scriptAndStylesheetHTML =
@@ -43,24 +43,24 @@ let ParseVariables (varArray: Map<string, string>) (html:string) =
     Regex.Replace(html, "<!--\[var\:(.*?)\]-->",
         MatchEvaluator(
             fun matchedVar ->
-                let varName = matchedVar.Groups.[1] |> string |> StringTrim
+                let varName = matchedVar.Groups[1] |> string |> StringTrim
 
                 if varArray.ContainsKey varName then
-                    if varName |> ToLowerCase = "title" then titlePrefix varArray.[varName]
-                    else varArray.[varName]
+                    if varName |> ToLowerCase = "title" then titlePrefix varArray[varName]
+                    else varArray[varName]
                 else
-                    "<!--[Undefined Variable: " + varName + "]-->"
+                    ""
     ))
 
 let ParseArrays (arrayArray: Map<string, Map<string, string>>) (string:string) =
     Regex.Replace(string, "<!--\[arr\:(.*?)\|(.*?)\]-->",
         MatchEvaluator(
             fun matchedVar ->
-                let arrayName = matchedVar.Groups.[1].ToString() |> StringTrim
-                let keyName = matchedVar.Groups.[2].ToString()
+                let arrayName = matchedVar.Groups[1].ToString() |> StringTrim
+                let keyName = matchedVar.Groups[2].ToString()
 
-                if arrayArray.ContainsKey arrayName && arrayArray.[arrayName].ContainsKey keyName then
-                    arrayArray.[arrayName].[keyName]
+                if arrayArray.ContainsKey arrayName && arrayArray[arrayName].ContainsKey keyName then
+                    arrayArray[arrayName][keyName]
                 else
                    "<!--[Undefined Array: " + arrayName + "]-->"
         )
@@ -70,7 +70,7 @@ let ParseSimpleLanguageVariables (string:string) =
     Regex.Replace(string, "<!--\[lang\:(.*?)\]-->",
         new MatchEvaluator(
             fun matchedVar ->
-                let varName = matchedVar.Groups.[1].ToString()
+                let varName = matchedVar.Groups[1].ToString()
                               |> StringTrim
 
                 language.get varName
@@ -78,10 +78,10 @@ let ParseSimpleLanguageVariables (string:string) =
 
 let ParseLanguageVariablesWithReplacements (string: string) =
     Regex.Replace(string, "<!--\[lang\:(.*?)\|(.*?)\]-->",
-        new MatchEvaluator(
+        MatchEvaluator(
             fun matchedVar ->
-                let varName = matchedVar.Groups.[1].ToString()
-                let replacements = matchedVar.Groups.[2].ToString()
+                let varName = matchedVar.Groups[1].ToString()
+                let replacements = matchedVar.Groups[2].ToString()
                                    |> StringSplit ","
                                    |> Array.toList
 
@@ -89,7 +89,7 @@ let ParseLanguageVariablesWithReplacements (string: string) =
         ))
 
 let getTemplateFilePath templateName =
-    "wwwroot/themes/"+ currentTheme + "/" + templateName + ".tpl.htm"
+    "views/"+ currentTheme + "/" + templateName + ".tpl.htm"
 
 let templateExists templateName =
    templateName
@@ -115,13 +115,16 @@ let rec loadTemplateWithVarsArraysScriptsAndStyles templateName vars arrays scri
 and ParseTemplates vars arrays scripts styles (string: string) =
     Regex.Replace(string, "<!--\[template\:(.*?)\]-->",
         new MatchEvaluator( fun template ->
-            let templateName = template.Groups.[1].ToString() |> StringTrim
+            let templateName = template.Groups[1].ToString() |> StringTrim
             loadTemplateWithVarsArraysScriptsAndStyles templateName vars arrays scripts styles
         ))
 
 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>> [] []
 
@@ -135,3 +138,18 @@ let loadTemplateWithVarsAndStyles = loadTemplateWithVarsAndScripts
 
 let loadTemplateWithVarsScriptsAndStyles templateName vars scripts styles =
     loadTemplateWithVarsArraysScriptsAndStyles templateName vars Map.empty<string, Map<string, string>> scripts styles
+
+
+let htmlAttributes (attributes: Map<string, string>) =
+    " " + (attributes
+        |> Map.toArray
+        |> Array.map (fun (attribute, value) -> attribute+"='"+HttpUtility.HtmlEncode value + "'")
+        |> String.concat " ")
+
+let PosButton (text: string) (classes: string) (attributes: string) =
+    let vars = map [
+        "text", text
+        "classes", classes
+        "attributes", attributes
+    ]
+    loadTemplateWithVars "components/posButton" vars

Core/Types.fs

@@ -0,0 +1,112 @@
+module DredgePos.Types
+
+[<CLIMutable>]
+type reservation = {
+    id: int
+    name: string
+    time: int
+    covers: int
+    floorplan_table_id: int
+    created_at: int
+}
+
+[<CLIMutable>]
+type venue = {
+    id: int
+    venue_name: string
+}
+
+[<CLIMutable>]
+type floorplan_table = {
+    table_number: int
+    room_id: int
+    venue_id: int
+    pos_x: int
+    pos_y: int
+    shape: string
+    width: int
+    height: int
+    default_covers: int
+    rotation: int
+    merged_children: string
+    previous_state: string
+    status: int
+    id: int
+}
+
+[<CLIMutable>]
+type print_group = {
+    id: int
+    name: string
+    printer: int
+    venue_id: int
+}
+
+[<CLIMutable>]
+type sales_category = {
+    id: int
+    parent: int
+    name: string
+    print_group: int
+    venue_id: int
+}
+
+[<CLIMutable>]
+type floorplan_room = {
+    id: int
+    room_name: string
+    background_image: string
+    venue_id: int
+}
+
+[<CLIMutable>]
+type floorplan_decoration = {
+    id: int
+    decoration_room: int
+    decoration_pos_x: int
+    decoration_pos_y: int
+    decoration_rotation: int
+    decoration_width: int
+    decoration_height: int
+    decoration_image: string
+    venue_id: int
+}
+
+[<CLIMutable>]
+type clerk = {id: int; clerk_name: string; clerk_login_code: int; clerk_usergroup: int}
+
+[<CLIMutable>]
+type session = {id: int; session_id: string; clerk_json: string; clerk_id: int; expires: int}
+
+[<CLIMutable>]
+type order_screen_page_group = {id: int; order: 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: int
+    price2: int
+    price3: int
+    price4: int
+    price5: int
+}

Decorations.module.fs

@@ -1,86 +0,0 @@
-module Decorations
-
-open System
-open System.IO
-open System.Text.RegularExpressions
-open DredgeFramework
-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 getImageName (image: string, path: string) =
-    let imageName =
-        image
-            |> StringReplace "-" " "
-            |> StringReplace "_" " "
-            |> ToTitleCase
-
-    imageName, path
-
-let isImageFile (fileName: string) = Regex.IsMatch(fileName |> ToLowerCase, @"^.+\.(jpg|jpeg|png|gif)$")
-
-let getImageHTML (imageName: string, imageUrl: string) =
-    let vars = map [
-        "image_name", imageName
-        "image_url", imageUrl
-    ]
-    Theme.loadTemplateWithVars "decoratorItem" vars
-
-let GetFileNameWithoutExtension (path: string) =
-    let name = Path.GetFileNameWithoutExtension path
-    name, path |> Path.GetFileName
-
-let getImageRowHtml (imagesInRow: string[]) =
-    let vars = map ["decorations", String.Join("", imagesInRow)]
-    Theme.loadTemplateWithVars "decoratorRow" vars
-
-let generateDecorator () =
-    "wwwroot/images/decorations"
-        |> Directory.GetFiles
-        |> Array.filter isImageFile
-        |> Array.map GetFileNameWithoutExtension
-        |> Array.map getImageName
-        |> Array.map getImageHTML
-        |> 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

DredgePos.fsproj

@@ -5,20 +5,37 @@
     </PropertyGroup>
 
     <ItemGroup>
-        <Compile Include="Types.fs" />
-        <Compile Include="DredgeFramework.module.fs" />
-        <Compile Include="Browser.module.fs" />
-        <Compile Include="Database.module.fs" />
-        <Compile Include="GenericEntities.module.fs" />
-        <Compile Include="Language.module.fs" />
-        <Compile Include="Theme.module.fs" />
-        <Compile Include="Reservations.module.fs" />
-        <Compile Include="Floorplan.module.fs" />
-        <Compile Include="Decorations.module.fs" />
-        <Compile Include="Clerk.module.fs" />
-        <Compile Include="Session.module.fs" />
-        <Compile Include="PageController.fs" />
-        <Compile Include="AjaxController.fs" />
+        <Compile Include="Core\Types.fs" />
+        <Compile Include="Core\DredgeFramework.module.fs" />
+        <Compile Include="Core\Browser.module.fs" />
+        <Compile Include="Core\Database.module.fs" />
+        <Compile Include="Core\GenericEntities.module.fs" />
+        <Compile Include="Core\Language.module.fs" />
+        <Compile Include="Core\Theme.module.fs" />
+        <Compile Include="Printer.module.fs" />
+        <Compile Include="Global\View.fs" />
+        <Compile Include="Global\Controller.fs" />
+        <Compile Include="Global\Router.fs" />
+        <Compile Include="Entities\Floorplan_Decorations\Model.fs" />
+        <Compile Include="Entities\Floorplan_Decorations\View.fs" />
+        <Compile Include="Entities\Floorplan_Decorations\Controller.fs" />
+        <Compile Include="Entities\Floorplan_Decorations\Router.fs" />
+        <Compile Include="Authenticate\Model.fs" />
+        <Compile Include="Authenticate\View.fs" />
+        <Compile Include="Authenticate\Controller.fs" />
+        <Compile Include="Authenticate\Router.fs" />
+        <Compile Include="Ajax\Controller.fs" />
+        <Compile Include="Ajax\Router.fs" />
+        <Compile Include="Floorplan\Model.fs" />
+        <Compile Include="Floorplan\View.fs" />
+        <Compile Include="Floorplan\Controller.fs" />
+        <Compile Include="Floorplan\Router.fs" />
+        <Compile Include="OrderScreen\Model.fs" />
+        <Compile Include="OrderScreen\Controller.fs" />
+        <Compile Include="OrderScreen\Router.fs" />
+        <Compile Include="Reservations\Model.fs" />
+        <Compile Include="Reservations\Controller.fs" />
+        <Compile Include="Reservations\Router.fs" />
         <Compile Include="Program.fs" />
     </ItemGroup>
 
@@ -34,37 +51,87 @@
       </Content>
       <Content Remove="node_modules\**" />
       <Content Remove="wwwroot\scripts\ts\test.ts" />
+      <Content Remove="languages\**" />
+      <Content Include="sass\dark.theme.sass">
+        <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
+        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
+      </Content>
+      <Content Include="sass\dredgepos.authenticate.sass">
+        <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
+        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
+      </Content>
+      <Content Include="sass\dredgepos.core.sass">
+        <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
+        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
+      </Content>
+      <Content Include="sass\dredgepos.floorplan.sass">
+        <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
+        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
+      </Content>
+      <Content Include="sass\dredgepos.keyboards.sass">
+        <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
+        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
+      </Content>
+      <Content Include="sass\dredgepos.orderScreen.sass">
+        <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
+        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
+      </Content>
+      <Content Include="typescript\dredgepos.authenticate.ts">
+        <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
+        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
+      </Content>
+      <Content Include="typescript\dredgepos.core.ts">
+        <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
+        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
+      </Content>
+      <Content Include="typescript\dredgepos.floorplan.ts">
+        <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
+        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
+      </Content>
+      <Content Include="typescript\dredgepos.orderScreen.ts">
+        <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
+        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
+      </Content>
+      <Content Include="typescript\dredgepos.tables.ts">
+        <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
+        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
+      </Content>
+      <Content Include="typescript\keyboards.ts">
+        <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
+        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
+      </Content>
+      <Content Include="typescript\types.ts">
+        <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
+        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
+      </Content>
+      <Content Include="typescript\typings\currency.d.ts">
+        <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
+        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
+      </Content>
+      <Content Include="typescript\typings\konva.d.ts">
+        <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
+        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
+      </Content>
+      <Folder Include="wwwroot\styles" />
     </ItemGroup>
 
     <ItemGroup>
-      <PackageReference Include="Dapper" Version="2.0.78" />
-      <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="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" />
-      <PackageReference Include="Microsoft.EntityFrameworkCore" Version="6.0.0-preview.2.21154.2" />
-      <PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="6.0.0-preview.2.21154.2">
-        <PrivateAssets>all</PrivateAssets>
-        <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
-      </PackageReference>
-      <PackageReference Include="MySql.Data" Version="8.0.23" />
-      <PackageReference Include="MySql.Data.EntityFrameworkCore" Version="8.0.22" />
-      <PackageReference Include="SQLProvider" Version="1.2.1" />
+      <PackageReference Include="Dapper.FSharp" Version="2.4.1" />
+      <PackageReference Include="Giraffe" Version="6.0.0-alpha-2" />
+      <PackageReference Include="Npgsql" Version="6.0.0" />
+      <PackageReference Include="Pluralize.NET.Core" Version="1.0.0" />
+      <PackageReference Include="Saturn" Version="0.15.0" />
       <PackageReference Include="System.Drawing.Common" Version="6.0.0-preview.5.21301.5" />
       <PackageReference Include="Thoth.Json.Net" Version="5.0.0" />
+      <PackageReference Update="FSharp.Core" Version="6.0.2-beta.21631.1" />
     </ItemGroup>
 
     <ItemGroup>
-      <Folder Include="languages\english" />
       <Folder Include="tables\archived" />
       <Content Include="xslt\orderXMLtoHTML.xslt" />
       <Content Include="xslt\orderHtmltoXML.xslt" />
       <Content Include="xslt\htmlToEscPos.xslt" />
       <Content Include=".gitignore" />
-      <Folder Include="wwwroot\scripts\js" />
-      <Folder Include="wwwroot\styles\css" />
     </ItemGroup>
 
     <ItemGroup>
@@ -375,6 +442,7 @@
 
     <ItemGroup>
       <EmbeddedResource Remove="node_modules\**" />
+      <EmbeddedResource Remove="languages\**" />
     </ItemGroup>
 
 </Project>

DredgePos.sln

@@ -0,0 +1,16 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+Project("{F2A71F9B-5D33-465A-A702-920D77279786}") = "DredgePos", "DredgePos.fsproj", "{3C52169C-8E40-472B-B87B-82F43F96BFB0}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{3C52169C-8E40-472B-B87B-82F43F96BFB0}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{3C52169C-8E40-472B-B87B-82F43F96BFB0}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{3C52169C-8E40-472B-B87B-82F43F96BFB0}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{3C52169C-8E40-472B-B87B-82F43F96BFB0}.Release|Any CPU.Build.0 = Release|Any CPU
+	EndGlobalSection
+EndGlobal

Entities/Floorplan_Decorations/Controller.fs

@@ -0,0 +1,13 @@
+module DredgePos.Entities.Floorplan_Decorations.Controller
+
+open System.IO
+
+let generateDecorator () =
+    "wwwroot/images/decorations"
+        |> Directory.GetFiles
+        |> Array.filter Model.isImageFile
+        |> Array.map Model.GetFileNameWithoutExtension
+        |> Array.map Model.getImageName
+        |> Array.map View.decoratorItem
+        |> Array.chunkBySize 4
+        |> Array.map View.decoratorRow

Entities/Floorplan_Decorations/Model.fs

@@ -0,0 +1,24 @@
+module DredgePos.Entities.Floorplan_Decorations.Model
+
+open System
+open System.IO
+open System.Text.RegularExpressions
+open DredgeFramework
+
+let decorationsInRoom (roomId: int) = Entity.GetAllByColumn "decoration_room" roomId
+
+let getImageName (image: string, path: string) =
+    let imageName =
+        image
+            |> StringReplace "-" " "
+            |> StringReplace "_" " "
+            |> ToTitleCase
+
+    imageName, path
+
+let isImageFile (fileName: string) = Regex.IsMatch(fileName |> ToLowerCase, @"^.+\.(jpg|jpeg|png|gif)$")
+
+let GetFileNameWithoutExtension (path: string) =
+    let name = Path.GetFileNameWithoutExtension path
+    name, path |> Path.GetFileName
+

Entities/Floorplan_Decorations/Router.fs

@@ -0,0 +1,2 @@
+module DredgePos.Entities.Floorplan_Decorations.Router
+

Entities/Floorplan_Decorations/View.fs

@@ -0,0 +1,24 @@
+module DredgePos.Entities.Floorplan_Decorations.View
+
+open Giraffe.ViewEngine
+open DredgePos.Global.View
+
+let decoratorItem (imageName, imageUrl) =
+    let image = attr "data-image"
+    div [_class "decoratorItem"; image imageUrl] [
+        a [_style $"background-image:url('/images/decorations/{imageUrl}')"] []
+        a [] [str imageName]
+    ]
+
+let decoratorRow decoratorItems = div [_class "decoratorRow"] [yield! decoratorItems]
+
+let decorator (decorationRows: XmlNode[]) =
+    div [_id "decorator"] [
+        div [_id "decoratorHeader"] [
+            h2 [] [lang "choose_decoration"]
+            a [_class "posButton hideDecorator"] [str "×"]
+        ]
+        div [_id "decoratorContent"] [
+            yield! decorationRows
+        ]
+    ]

Floorplan/Controller.fs

@@ -0,0 +1,119 @@
+module DredgePos.Floorplan.Controller
+
+open DredgeFramework
+open DredgePos
+open DredgePos.Global.Controller
+open DredgePos.Entities
+open DredgePos.Types
+open Giraffe
+open Microsoft.AspNetCore.Http
+open Model
+open System.IO
+
+let makeRoomButton (room: floorplan_room) =
+    let vars = map [
+        "roomId", room.id |> string
+        "roomName", room.room_name
+    ]
+
+    Theme.loadTemplateWithVars "roomButton" vars
+
+let getActiveTables venue = Model.getActiveTables venue |> ajaxSuccess |> json
+
+let mergeTables (tables: floorplan_table[]) =
+    let status =
+        if mergeTables tables[0].table_number tables[1].table_number then
+            let outputTables = map [
+                "parent", tables[0];
+                "child", tables[1];
+                "merged", Model.getTable tables[0].table_number;
+            ]
+            ajaxSuccess outputTables
+        else ajaxFail "Could Not Merge Tables"
+    status |> json
+
+let unmergeTable tableNumber =
+    let unmerged = unmergeTable tableNumber
+    let unmergedTables =
+        match unmerged  with
+            | Some (parent, child) ->
+                map ["parent", parent; "child", child] |> ajaxSuccess
+            | None -> ajaxFail "Could not Unmerge Table"
+
+    unmergedTables |> json
+
+
+let getFloorplanData (id: int) =
+    let tableList = Entity.GetAllInVenue<floorplan_table>
+    let reservationList = getReservationList tableList
+    {|
+        tables = tableList
+        decorations = Entity.GetAllInVenue<floorplan_decoration>
+        activeTableNumbers = Model.getActiveTables (getCurrentVenue())
+        rooms = Entity.GetAllInVenue<floorplan_room>
+        reservations = reservationList
+    |}
+    |> ajaxSuccess
+    |> json
+
+let transformTable (table: floorplan_table) =
+        Entity.Update table
+        |> ajaxSuccess
+        |> json
+
+let createTable (tableData: floorplan_table) =
+    if tableExists tableData.table_number = "False" then
+        ajaxSuccess (addNewTable tableData)
+    else ajaxFail (tableExists tableData.table_number)
+    |> json
+
+let deleteTable (table: floorplan_table) =
+    Entity.DeleteById<floorplan_table> table.id
+        |> ignore
+    table |> ajaxSuccess |> json
+
+let transferTable (origin, destination) =
+    transferTable origin destination
+    let data = map ["origin", getTable origin ; "destination", getTable destination]
+    ajaxSuccess data |> json
+
+let AddDecoration (data: floorplan_decoration) =
+    let image = "wwwroot/images/decorations/" + data.decoration_image
+    let width, height = image |> GetImageSize
+    let aspectRatio = decimal width /  decimal height
+
+    let decoration : floorplan_decoration = {
+        id = 0
+        decoration_height = (200m / aspectRatio) |> int
+        decoration_width = 200
+        decoration_rotation = 0
+        decoration_image = data.decoration_image
+        decoration_pos_x = data.decoration_pos_x
+        decoration_pos_y = data.decoration_pos_y
+        decoration_room = data.decoration_room
+        venue_id = data.venue_id
+    }
+
+    Entity.Create decoration
+        |> ajaxSuccess
+        |> json
+
+let UpdateDecoration (data: floorplan_decoration) =
+    Entity.Update data
+        |> ignore
+    ajaxSuccess "true" |> json
+
+let DeleteDecoration (decorationToDelete: floorplan_decoration) =
+    Entity.DeleteById<floorplan_decoration> decorationToDelete.id
+    |> ajaxSuccess
+    |> json
+
+let loadFloorplanView (ctx: HttpContext) =
+   Authenticate.Model.RequireClerkAuthentication ctx
+   let roomMenu = Entity.GetAllInVenue<floorplan_room> |> Array.map View.roomButton
+   let currentClerk = Authenticate.Model.getCurrentClerk ctx
+   let styles = [|"dredgepos.floorplan.css"|] |> addDefaultStyles
+   let scripts = [|"./external/konva.min.js" ; "dredgepos.floorplan.js"|] |> addDefaultScripts
+   let metaTags = [|"viewport", "user-scalable = no, initial-scale=0.8,maximum-scale=0.8 ,shrink-to-fit=yes"|] |> addDefaultMetaTags
+
+   View.index styles scripts metaTags currentClerk (Floorplan_Decorations.Controller.generateDecorator ()) roomMenu

Floorplan/Model.fs

@@ -1,41 +1,12 @@
-module Floorplan
-
-open DredgePos
-open Reservations
-
-let currentVenue = 1
+module DredgePos.Floorplan.Model
 
+open DredgePos.Types
 open System
 open System.IO
 open System.Xml.Linq
 open DredgeFramework
-open Dapper
 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) =
@@ -50,11 +21,11 @@ let tableIsOpen (table: floorplan_table) = tableNumberIsOpen table.table_number
 
 let fileNameToTableNumber (fileName: string) = //Takes a file name for a floorplan table and returns the table number
     if fileName.Contains ".table" then
-        let fileName = (fileName.Split ".").[0]
-        (fileName.Split "/table").[1] |> int
+        let fileName = (fileName.Split ".")[0]
+        (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 +88,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,48 +110,16 @@ 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"
-    let parameters = [("column", box column); ("value", box value); ("tableNumber", box tableNumber)]
-    db.connection.Execute(sql, parameters) |> ignore
-
-    getTable tableNumber
-
-let updateTableShape (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) =
-    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.Update floorplanTable
 
 let createEmptyReservation (reservation: reservation) =
     update {
         table "floorplan_tables"
         set {| status = 2  |}
-        where(eq "id" reservation.reservation_table_id)
+        where(eq "id" reservation.floorplan_table_id)
     } |> db.Update |> ignore
 
-    insert{
-        table "reservations"
-        value reservation
-    } |> db.InsertOutput |> first
-
-
+    Entity.Create reservation
 
 let getChildTables tableNumber =
     let table = getTable tableNumber
@@ -213,15 +153,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)
 
@@ -229,7 +167,7 @@ let tableExists (tableNumber: int) =
             match allTables.Length with
                 | 0 -> false |> string //Table does not exist
                 | _ ->
-                    let parentTableData = getTable allTables.[0]
+                    let parentTableData = getTable allTables[0]
                     let parentRoom = getRoom parentTableData.room_id
                     let parentRoomName = parentRoom.room_name
                     language.getAndReplace "error_table_exists_merged" [parentRoomName; parentTableData.table_number.ToString()]
@@ -248,21 +186,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.Create newTable
 
 let mergeTables parent child = //Merge two tables together
     if parent = child then false else
@@ -292,13 +216,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 +237,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 +250,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,44 +274,22 @@ 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 vars = map [
-        "roomId", room.id |> string
-        "roomName", room.room_name
-    ]
 
-    Theme.loadTemplateWithVars "roomButton" vars
 
 let getReservationList (tableList: floorplan_table[]) =
-    let tableIds =
-        tableList
-            |> Array.map(fun table -> table.id)
-            |> JoinArray ","
-
-    db.connection.Query<reservation>($"""Select * From reservations Where reservation_table_id In ({tableIds})""")
-        |> EnumerableToArray
+    tableList |> Array.collect Entity.GetAllRelated<reservation, floorplan_table>
 
 let newReservation name time covers =
     let reservation = {
         id = 0
-        reservation_name = name
-        reservation_time = time
-        reservation_covers = covers
-        reservation_table_id = 0
-        reservation_created_at = CurrentTime()
+        name = name
+        time = time
+        covers = covers
+        floorplan_table_id = 0
+        created_at = CurrentTime()
     }
 
-    insert {
-        table "reservations"
-        value reservation
-    } |> db.Insert
+    Entity.Create 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>

Floorplan/Router.fs

@@ -0,0 +1,25 @@
+module DredgePos.Floorplan.Router
+
+open DredgePos
+open DredgePos.Global.Router
+open DredgePos.Types
+open Saturn
+open Giraffe
+
+let floorplan = (htmlViewWithContext Controller.loadFloorplanView)
+
+let router = router {
+    pipe_through Ajax.Router.pipeline
+    get "" floorplan
+    get "/" floorplan
+    post "/mergeTables" (bindJson<floorplan_table[]> Controller.mergeTables)
+    post "/transformTable" (bindJson<floorplan_table> Controller.transformTable)
+    post "/createTable" (bindJson<floorplan_table> Controller.createTable)
+    post "/addDecoration" (bindJson<floorplan_decoration> Controller.AddDecoration)
+    post "/updateDecoration" (bindJson<floorplan_decoration> Controller.UpdateDecoration)
+    post "/deleteDecoration" (bindJson<floorplan_decoration> Controller.DeleteDecoration)
+    post "/deleteTable" (bindJson<floorplan_table> Controller.deleteTable)
+    getf "/getFloorplanData/%i" Controller.getFloorplanData
+    getf "/transferTable/%i/%i" Controller.transferTable
+    getf "/unmergeTable/%i" Controller.unmergeTable
+}

Floorplan/View.fs

@@ -0,0 +1,88 @@
+module DredgePos.Floorplan.View
+
+open DredgePos.Global
+open DredgePos.Global.View
+open DredgePos.Entities
+open DredgePos.Types
+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 =
+    let loggedInText = str (language.getAndReplace "logged_in_as" [clerk.clerk_name])
+
+    div [_id "pageContainer"] [
+        div [_id "floorplanLeftColumn"] [
+            div [_class "topCell"] [
+                a [_class "posHeader"] [loggedInText]
+            ]
+            div [_class "middleCell"] []
+            div [_class "bottomCell"] []
+        ]
+
+        div [_id "floorplanCenterColumn"] [
+            div [_class "topCell"] [
+                yield! roomMenu
+            ]
+            div [_class "middleCell"] [
+                div [_id "floorplanCanvas"] []
+                div [_id "floorplanCanvas"] []
+            ]
+
+            div [_class "bottomCell"] [
+                div [_class "editControls" ; VisibleInMode ["tableSelected"]] [
+                    div [_class "posHeader currentTable"] [
+                        b [_class "selectedTableNumber"] []
+                        a [_class "reservationStatus"; VisibleInMode ["reservedTableSelected"]] []
+                        small [_class "selectedTableCovers"] []
+                    ]
+
+                    a [_class "posButton placeOrderButton"] [lang "order_table"]
+                    a [_class "posButton reserveTableButton";  InvisibleInMode ["reservedTableSelected"; "activeTableSelected"]] [lang "reserve_table"]
+                    a [_class "posButton unreserveTableButton";  VisibleInMode ["reservedTableSelected"]] [lang "unreserve_table"]
+                    a [_class "posButton payTableButton";  VisibleInMode ["activeTableSelected"]] [lang "pay_table"]
+                    a [_class "posButton viewTableButton";  VisibleInMode ["activeTableSelected"]] [lang "view_table"]
+                ]
+            ]
+        ]
+
+        div [_id "floorplanRightColumn"] [
+            div [_class "topCell"] [
+                a [_class "posButton logOut"] [str "×"]
+            ]
+
+            div [_class "middleCell"] [
+                a [_class "posButton editModeButton"] [lang "edit_floorplan"]
+                div [_class "floorplanControls useVisibility"; VisibleInMode ["edit"]] [
+                    a [_class "posButton addTableButton"] [lang "add_table"]
+                    a [_class "posButton addDecoration"] [lang "add_decoration"]
+                    a [_class "posButton deleteDecoration useVisibility"; VisibleInMode ["decorationSelected"; "edit"] ] [lang "delete_decoration"]
+                    a [_class "posButton deleteTableButton useVisibility"; VisibleInMode ["tableSelected"; "edit"]] [lang "delete_table"]
+                    a [_class "posButton changeShapeButton useVisibility"; VisibleInMode ["tableSelected"; "edit"]] [lang "change_shape"]
+                ]
+
+                div [_class "mergeControls useVisibility"; VisibleInMode ["tableSelected"]] [
+                    a [_class "posButton mergeButton"; ActiveInMode "merge"] [lang "merge_table"]
+                    a [_class "posButton unmergeButton"; VisibleInMode ["tableSelected"]] [lang "unmerge_table"]
+                    a [_class "posButton transferTableButton" ; ActiveInMode "transfer" ; VisibleInMode ["activeTableSelected"]] [lang "transfer_table"]
+                ]
+            ]
+
+            div [_class "bottomCell"] []
+        ]
+    ]
+
+let roomButton (room: floorplan_room) = a [_class "posButton roomButton"; Value (string room.id)] [str room.room_name ]
+
+let index styles scripts tags clerk decoratorRows roomMenu =
+    [|
+        pageContainer clerk roomMenu
+        decoratorRows |> Floorplan_Decorations.View.decorator
+    |]
+    |> HtmlPage "Floorplan" (GetScripts scripts) (GetStyles styles) (GetMetaTags tags)
+

GenericEntities.module.fs

@@ -1,26 +0,0 @@
-module Entity
-open DredgePos
-open Types
-open Dapper.FSharp
-open DredgeFramework
-
-let getDatabaseTable (record: 'a) = record.GetType().ToString().ToLower() + "s"
-
-let addToDatabase (record: 'x)=
-    let tableName = getDatabaseTable record
-    insert {
-        table tableName
-        value record
-    }
-    |> db.InsertOutput
-    |> first
-
-let updateInDatabase (record: 'x) =
-    let tableName = getDatabaseTable record
-    (* Run an update query *)
-    update {
-        table tableName
-        set record
-    }
-    |> db.Update |> ignore
-    record

Global/Controller.fs

@@ -0,0 +1,7 @@
+module DredgePos.Global.Controller
+
+open DredgeFramework
+
+let addDefaultScripts scripts = scripts |> Array.append [|"./external/jquery.js" ; "dredgepos.core.js"; "keyboards.js";|]
+let addDefaultStyles styles = styles |> Array.append  [|"dark.theme.css";|]
+let addDefaultMetaTags (tags: (string*string)[]) = tags |> Array.append [|"apple-mobile-web-app-capable", "yes"|]

Global/Router.fs

@@ -0,0 +1,11 @@
+module DredgePos.Global.Router
+
+open Saturn
+open Giraffe
+
+let htmlViewWithContext func =
+    (fun ctx ->
+        func (snd ctx)
+            |> htmlView
+    )
+    |> warbler

Global/View.fs

@@ -0,0 +1,109 @@
+module DredgePos.Global.View
+
+open Giraffe.ViewEngine
+open DredgeFramework
+
+let Value = attr "data-value"
+let innerText = str
+let lang key =  language.get key |> str
+
+let scriptToHTML (scriptFile: string) =
+    let scriptPath = $"/scripts/{scriptFile}"
+    match FileExists ("wwwroot" + scriptPath) with
+        | true -> script [_src scriptPath] []
+        | false -> comment $"[Missing script: {scriptFile}]"
+let GetScripts (scripts: string[]) = scripts |> Array.map scriptToHTML
+
+let styleToHTML (stylesheet:string) =
+    let stylePath = $"/styles/{stylesheet}"
+    match FileExists ("wwwroot" + stylePath) with
+        | true -> link [_rel "stylesheet" ; _href stylePath]
+        | false -> comment $"[Missing style: {stylesheet}]"
+
+let GetStyles (scripts: string[]) = scripts |> Array.map styleToHTML
+
+let tagToHtml (tag, content) = meta [_name tag; _content content]
+
+let GetMetaTags (tags: (string * string)[]) = tags |> Array.map tagToHtml
+
+let VirtualKeyboardRow numberOfButtons =
+    let buttons = Array.init numberOfButtons (fun _ -> a [] [])
+    div [_class "virtualKeyboardRow"] [
+        yield! buttons
+    ]
+
+let VirtualKeyboard =
+    div [_id "virtualKeyboard"] [
+        div [_class "headingRow"] [
+            h3 [_id "virtualKeyboardHeading"] []
+            a [_class "posButton closeKeyboards"] [str "X"]
+        ]
+        input [_type "text"; _name "virtualKeyboardInput"; _id "virtualKeyboardInput"]
+        div [_id "virtualKeyboardButtons"] [
+            VirtualKeyboardRow 13
+            VirtualKeyboardRow 14
+            VirtualKeyboardRow 13
+            VirtualKeyboardRow 11
+            VirtualKeyboardRow 1
+        ]
+        span [_class "forceFocus"] []
+    ]
+
+let VirtualNumpadButton (text: string) =
+    a [_href "#"; Value (text.ToLower()); _class "posButton virtualNumpadButton"] [str text]
+
+let VirtualNumpadRow (buttons:string[]) =
+    div [_class "virtualNumpadRow"] [
+        yield! Array.map VirtualNumpadButton buttons
+    ]
+
+let VirtualNumpad =
+    div [_id "virtualNumpad"] [
+        div [_class "headingRow"] [
+            h3 [_id "virtualNumpadHeading"] []
+            a [_class "posButton closeKeyboards"] [str "X"]
+        ]
+        div [_id "virtualNumpadInput"] []
+        div [_id "virtualNumpadButtons"] [
+            VirtualNumpadRow [|"1"; "2"; "3"|]
+            VirtualNumpadRow [|"4"; "5"; "6"|]
+            VirtualNumpadRow [|"7"; "8"; "9"|]
+            VirtualNumpadRow [|"0"; "."; "Clear"|]
+            VirtualNumpadRow [|"Submit"|]
+        ]
+    ]
+
+let alert =
+    div [_id "alert"] [
+        div [_id "alertHeading"] []
+        div [_id "alertMessage"] []
+        div [_id "alertButtons"] [
+            a [_class "posButton"; _id "alertOk"] [lang "alert_ok"]
+            a [_class "posButton"; _id "alertYes"] [lang "alert_yes"]
+            a [_class "posButton"; _id "alertNo"] [lang "alert_no"]
+        ]
+    ]
+let keyboards = [|
+    VirtualKeyboard
+    VirtualNumpad
+    alert
+|]
+
+let HtmlPage pageTitle scripts styles tags content =
+    html [] [
+        head [] [
+            title [] [innerText pageTitle]
+            link [_rel "manifest" ; _href "/manifest.webmanifest"]
+            yield! styles
+            yield! scripts
+            yield! tags
+        ]
+        body [] [
+            yield! content
+            yield! keyboards
+        ]
+    ]
+
+let HTMLPageWithScripts pageTitle scripts content = HtmlPage pageTitle scripts [||] content
+let HTMLPageWithStyles pageTitle styles content = HtmlPage pageTitle [||] styles content
+let HTMLPageWithNoScriptsOrStyles pageTitle content = HtmlPage pageTitle [||] [||] content

OrderScreen/Controller.fs

@@ -0,0 +1,89 @@
+module DredgePos.OrderScreen.Controller
+
+open DredgePos
+open DredgeFramework
+open DredgePos.Types
+open Giraffe
+open Microsoft.AspNetCore.Http
+
+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
+        table = Floorplan.Model.getTable tableNumber
+    |}
+    |> ajaxSuccess
+    |> json
+
+let loadGrid (gridId: int) =
+    let grid = Entity.GetById<grid> gridId
+    let gridHtml = Model.loadGrid gridId
+    if gridHtml = "Error" then ajaxFail gridHtml
+    else ajaxSuccess {|grid=grid;gridHtml=gridHtml|}
+    |> json
+
+let loadOrderScreen (ctx: HttpContext)  (tableNumber: int) : HttpHandler =
+   Authenticate.Model.RequireClerkAuthentication ctx
+
+   let table = Floorplan.Model.getTable tableNumber
+
+   let covers = if tableNumber > 0 then table.default_covers else 0
+   let coverString = language.getAndReplace "covers" [covers]
+
+   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 =
+       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
+
+   let grids =
+       Model.getAllPageGrids ()
+       |> Array.map Model.getPagesHTML
+       |> joinWithNewLine
+
+   let coverSelectorButtons =
+        Array.init (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"
+
+   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

OrderScreen/Model.fs

@@ -0,0 +1,136 @@
+module DredgePos.OrderScreen.Model
+
+open DredgeFramework
+open DredgePos
+open DredgePos.Types
+open FSharp.Collections
+open Thoth.Json.Net
+open Theme
+
+
+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 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.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.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.grid_rows; "cols", string grid.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.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

@@ -0,0 +1,15 @@
+module DredgePos.OrderScreen.Router
+
+open DredgePos
+open DredgePos.Types
+open Saturn
+open Giraffe
+
+let router = router {
+    pipe_through Ajax.Router.pipeline
+    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)))
+}

PageController.fs

@@ -1,54 +0,0 @@
-module PageController
-
-open Microsoft.AspNetCore.Http
-open Floorplan
-open Giraffe
-open DredgeFramework
-
-let loadHomePage(): HttpHandler =
-     let variables = map["title", "Log In"]
-     let scripts = ["dredgepos.authenticate.js"]
-     let styles = ["dredgepos.authenticate.css"]
-
-     htmlString <| Theme.loadTemplateWithVarsScriptsAndStyles "authenticate" variables scripts styles
-
-let loadFloorplan (ctx: HttpContext) : HttpHandler =
-   Session.RequireClerkAuthentication ctx
-
-   let roomMenu =
-       getRoomList currentVenue
-         |> Array.map convertRoomListToLinks
-         |> String.concat "\n"
-
-   let variables = map [
-       "title", "Floorplan"
-       "roomMenu", roomMenu
-       "decorator", Decorations.generateDecorator()
-   ]
-   let styles = ["dredgepos.floorplan.css"]
-   let scripts = ["external/konva.min.js" ; "dredgepos.floorplan.js"]
-   let currentClerk = recordToMap <| Session.getCurrentClerk ctx
-
-   let arrays = map["clerk", currentClerk]
-
-   htmlString <| Theme.loadTemplateWithVarsArraysScriptsAndStyles "floorplan" variables arrays scripts styles
-
-let loadContactPage id =
-    Session.clerkLogin 1408 |> ignore
-    Theme.loadTemplate "index"
-
-let getOpenTables() =
-    let rows = Floorplan.openTables
-    rows |> jsonEncode
-
-let transferTables() =
-
-    Theme.loadTemplate "index"
-
-let mergeTables parent child =
-    Floorplan.mergeTables parent child |> ignore
-    "done"
-
-let unmergeTables table =
-    Floorplan.unmergeTable table |> ignore
-    "done"

Printer.module.fs

@@ -0,0 +1,2 @@
+module Printer
+

Program.fs

@@ -1,62 +1,25 @@
-namespace WebApplication
-
+namespace DredgePos
 
 open DredgePos
-open Microsoft.AspNetCore.Server.Kestrel.Core
-open Reservations
 open Saturn
 open Giraffe
-open Types
 
 module Program =
-
-    let handlePostRoute<'a> handlerFunction post next ctx   =
-        json (handlerFunction ctx post) next ctx
-
-    let browser = pipeline {
-        use_warbler
-    }
-
-    let ajaxRouter = 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)
-        post "/updateDecoration" (bindJson<floorplan_decoration> AjaxController.UpdateDecoration)
-        post "/deleteDecoration" (bindJson<floorplan_decoration> AjaxController.DeleteDecoration)
-        post "/deleteTable" (bindJson<floorplan_table> AjaxController.deleteTable)
-        post "/mergeTables" (bindJson<floorplan_table[]> AjaxController.mergeTables)
-        post "/newEmptyReservation" (bindJson<reservation> AjaxController.newEmptyReservation)
-        post "/updateReservation" (bindJson<reservation> AjaxController.updateReservation)
-        post "/getReservation" (bindJson<int> (fun reservation -> json <| GetReservationById reservation) )
-        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)
-        getf "/getActiveTables/%i" AjaxController.getActiveTables
-        getf "/getFloorplanData/%i" AjaxController.getFloorplanData
-        getf "/tableIsOpen/%i" (fun tableNumber -> json <| Floorplan.tableNumberIsOpen tableNumber)
-        getf "/transferTable/%i/%i" AjaxController.transferTable
-        getf "/unmergeTable/%i" AjaxController.unmergeTable
-        getf "/tableExists/%i" (fun tableNumber -> json <| Floorplan.tableExists tableNumber)
-    }
-
-    let pageRouter = router {
-        pipe_through browser
+    let router = router {
+        pipe_through Ajax.Router.pipeline
         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
+        forward "/ajax" Ajax.Router.router
+        forward "/floorplan" DredgePos.Floorplan.Router.router
+        forward "/order" DredgePos.OrderScreen.Router.router
+        forward "/login" DredgePos.Authenticate.Router.router
+        forward "/reservations" DredgePos.Reservations.Router.router
     }
 
     let app = application {
+        use_mime_types [(".woff", "application/font-woff")]
         use_static "wwwroot"
-        use_router pageRouter
+        use_router router
         url "http://0.0.0.0:5001"
     }
 

Reservations/Controller.fs

@@ -0,0 +1,29 @@
+module DredgePos.Reservations.Controller
+
+open DredgeFramework
+open DredgePos
+open DredgePos.Types
+open Giraffe
+
+let newEmptyReservation (reservation: reservation) =
+    let newReservation = {reservation with
+                            created_at = CurrentTime()
+                            time = CurrentTime()
+                          }
+
+    if reservation.floorplan_table_id > 0 then
+        let table = {(Entity.GetById<floorplan_table> reservation.floorplan_table_id) with
+                        status = 2
+                        default_covers = reservation.covers}
+        Floorplan.Model.updateTablePosition table |> ignore
+
+    let createdReservation = Floorplan.Model.createEmptyReservation newReservation
+    ajaxSuccess createdReservation |> json
+
+let updateReservation (reservation: reservation) = Model.updateReservation reservation |> ajaxSuccess |> json
+
+let unreserveTable (table: floorplan_table) =
+    let newTable = {table with status = 0}
+    Floorplan.Model.updateTablePosition newTable |> ignore
+    Model.DeleteReservation newTable.id
+    newTable |> ajaxSuccess |> json

Reservations/Model.fs

@@ -1,19 +1,10 @@
-module Reservations
+module DredgePos.Reservations.Model
 
-open System
 open DredgeFramework
 open Dapper.FSharp
 open DredgePos
 open Types
 
-let GetReservationById (id: int) =
-    select {
-        table "reservations"
-        where (eq "id" id)
-    }
-    |> db.Select<reservation>
-    |> first
-
 let updateReservation (reservation: reservation) =
     update{
         table "reservations"
@@ -25,5 +16,5 @@ let updateReservation (reservation: reservation) =
 let DeleteReservation (tableId: int) =
     delete {
         table "reservations"
-        where (eq "reservation_table_id" tableId)
+        where (eq "floorplan_table_id" tableId)
     } |> db.Delete |> ignore

Reservations/Router.fs

@@ -0,0 +1,13 @@
+module DredgePos.Reservations.Router
+
+open DredgePos
+open DredgePos.Types
+open Saturn
+open Giraffe
+
+let router = router {
+    pipe_through Ajax.Router.pipeline
+    post "/newEmptyReservation" (bindJson<reservation> Controller.newEmptyReservation)
+    post "/updateReservation" (bindJson<reservation> Controller.updateReservation)
+    post "/unreserveTable" (bindJson<floorplan_table> Controller.unreserveTable )
+}

Types.fs

@@ -1,55 +0,0 @@
-module DredgePos.Types
-
-[<CLIMutable>]
-type reservation = {
-    id: int
-    reservation_name: string
-    reservation_time: int
-    reservation_covers: int
-    reservation_table_id: int
-    reservation_created_at: int
-}
-
-[<CLIMutable>]
-type floorplan_table = {
-    table_number: int
-    room_id: int
-    venue_id: int
-    pos_x: int
-    pos_y: int
-    shape: string
-    width: int
-    height: int
-    default_covers: int
-    rotation: int
-    merged_children: string
-    previous_state: string
-    status: int
-    id: int
-}
-
-[<CLIMutable>]
-type floorplan_room = {
-    id: int
-    room_name: string
-    background_image: string
-    venue_id: int
-}
-
-[<CLIMutable>]
-type floorplan_decoration = {
-    id: int
-    decoration_room: int
-    decoration_pos_x: int
-    decoration_pos_y: int
-    decoration_rotation: int
-    decoration_width: int
-    decoration_height: int
-    decoration_image: string
-}
-
-[<CLIMutable>]
-type clerk = {id: int; clerk_name: string; clerk_login_code: int; clerk_usergroup: int}
-
-[<CLIMutable>]
-type session = {id: int; session_id: string; clerk_json: string; clerk_id: int; expires: int}

package-lock.json

@@ -578,6 +578,11 @@
             "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
             "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o="
         },
+        "tsc": {
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/tsc/-/tsc-2.0.4.tgz",
+            "integrity": "sha512-fzoSieZI5KKJVBYGvwbVZs/J5za84f2lSTLPYf6AGiIf43tZ3GNrI1QzTLcjtyDDP4aLxd46RTZq1nQxe7+k5Q=="
+        },
         "typescript": {
             "version": "4.4.4",
             "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.4.4.tgz",

package.json

@@ -7,9 +7,15 @@
         "currency.js": "^2.0.4",
         "konva": "^8.2.2",
         "sass": "^1.43.4",
+        "tsc": "^2.0.4",
         "typescript": "^4.4.4"
     },
     "description": "",
     "license": "",
-    "repository": ""
+    "repository": "",
+    "scripts": {
+        "sass": "sass sass:wwwroot/styles",
+        "typescript": "tsc",
+        "build": "npm run sass && npm run typescript"
+    }
 }

sass/dark.theme.sass

@@ -13,4 +13,14 @@
     --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
 
+    /** Order Screen **/
+    --orderbox-header-background: #888
+    --orderbox-row-background: var(--pos-header-background)
+    --orderbox-selected-row-background: #dd7f37
+
+    /** Order Box/Payment Splitter Box **/
+    --pulse-first-color: #ffa93e
+    --pulse-second-color: #dd7f37
+    --pulse-final-color: var(--orderbox-row-background)

sass/dredgepos.core.sass

@@ -1,8 +1,37 @@
+@font-face
+    font-family: "manrope"
+    src: url("/fonts/OpenSans-Regular.ttf") format('truetype')
+    font-style: normal
+
+@font-face
+    font-family: "manrope"
+    src: url("/fonts/OpenSans-SemiBold.ttf") format('truetype')
+    font-weight: bold
+
+@font-face
+    font-family: "manrope"
+    src: url("/fonts/OpenSans-Light.ttf") format('truetype')
+    font-weight: 100
+
 *
     margin: 0
     padding: 0
     box-sizing: border-box
-    font-family: Arial, Helvetica, sans-serif
+    font-family: 'manrope', sans-serif
+    scroll-behavior: smooth
+
+*:not(input, textarea)
+    -webkit-touch-callout: none
+    -webkit-user-select: none
+    -khtml-user-select: none
+    -moz-user-select: none
+    -ms-user-select: none
+    user-select: none
+
+.rtl
+    direction: rtl
+
+
 
 input[type=text], select, textarea
     padding-left: 1em
@@ -18,6 +47,7 @@ input[type=text], select, textarea
     bottom: 0
     left: 0
     right: 0
+    z-index: 999
 
 @mixin mobile
     @media screen and (max-width: 900px)
@@ -50,17 +80,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 +97,29 @@ body
 .posButton, .posHeader
     @include flex
     text-align: center
-    cursor: default
 
 .posButton.active, .posButton:active
     border: inset 2px
+    background: var(--posbutton-background-active)
 
+.posButton.voidButton
+    background: var(--void-button-background)
 
+.invisible
+    visibility: hidden
+
+.hidden
+    display: none
+
+.pulse
+    animation-name: color
+    animation-duration: 300ms
+    animation-iteration-count: 1
+
+@keyframes color
+    0%
+        background-color: var(--pulse-first-color)
+    50%
+        background-color: var(--pulse-second-color)
+    100%
+        background-color: var(--pulse-final-color)

sass/dredgepos.floorplan.sass

@@ -62,6 +62,7 @@
     #floorplanCanvas
         aspect-ratio: 1/1
         background-repeat: no-repeat
+        background: var(--global-secondary-bgcolor)
 
     > *:not(#floorplanCanvas)
         @include flex-column-item

sass/dredgepos.orderScreen.sass

@@ -0,0 +1,343 @@
+@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)
+        overflow-y: auto
+
+    .orderBoxInfo
+        @include flex
+        flex-basis: 5%
+        background-color: white
+
+        .voidModeWarning
+            @include flex
+            @include flex-item
+            color: red
+            font-weight: bold
+
+    .orderBoxFooter
+        flex-basis: 10%
+        @include flex-column
+
+        > *
+            @include flex
+            @include flex-column-item
+            justify-content: flex-end
+            padding: 0 0.7em
+
+        > .orderBoxTotal
+            align-items: flex-end
+            font-size: 1.3em
+        > .orderBoxSelectedTotal
+            align-items: flex-start
+            font-size: 0.9em
+
+#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
+
+        .functionButtons
+            @include flex-column-item
+            @include flex
+            flex-basis: 100%
+
+            > .functionColumn
+                @include flex-item
+                @include flex-column
+                flex-basis: 25%
+                > *
+                    @include flex-column-item
+
+            > .printGroupButtons
+                flex-basis: 25%
+                height: 100%
+                display: grid
+                grid-template-columns: repeat(2, 1fr)
+                grid-auto-rows: auto
+
+                > *
+                    padding: 0.5em
+
+
+    #pageList
+        @include flex
+        @include flex-column-item
+        flex-basis: 10%
+        background-color: var(--global-secondary-bgcolor)
+        flex-grow: 0
+        flex-shrink: 0
+
+        > *
+            @include flex-item
+            border-bottom: solid 2px var(--global-border-color)
+
+        .active
+            border-bottom: none
+
+    #pageGroupContainer
+        @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
+
+.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: 65%
+        width: 100%
+        flex-shrink: 0
+        flex-grow: 0
+
+    .text
+        @include flex
+        align-items: flex-start
+        flex-grow: 0
+        flex-shrink: 0
+        flex-basis: 35%
+        width: 100%
+        overflow: hidden
+        font-size: 0.9em
+
+.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
+
+    > *
+        @include flex-item
+
+
+.coverSelector
+    display: flex
+    flex-wrap: wrap
+    border: 2px solid var(--global-border-color)
+    background: var(--global-bgcolor)
+    position: absolute
+    z-index: 100
+
+    .coverSelectorButton
+        flex-basis: 50%
+
+    .coverSelectorButton:first-of-type
+        flex-basis: 100%
+
+
+.orderBoxTable
+    width: 100%
+    border-collapse: collapse
+
+    tr
+        background: var(--orderbox-row-background)
+
+
+    .selected
+        background: var(--orderbox-selected-row-background)
+
+    thead tr
+        background: var(--orderbox-header-background)
+
+        th
+            font-weight: normal
+            text-align: center
+            padding: 0.2em 0.5em
+
+    tr
+        td, th
+            text-align: center
+            font-size: 0.9em
+
+        td
+            padding: 1em 0.5em
+            font-weight: bold
+
+        .itemCell
+            text-align: center
+            width: 60%
+
+        .qtyCell
+            width: 10%
+
+        .printGroupCell
+            width: 20%
+
+        .totalPriceCell
+            width: 10%
+
+        td.itemCell
+            text-align: left
+            display: flex
+            flex-direction: column
+
+    tr.instructionRow
+        td
+            font-weight: 100
+        td.itemCell
+            padding-left: 2em
+            small
+                font-size: 0
+
+        .qtyCell, .printGroupCell
+            font-size: 0
+
+.gridContainer
+    background: var(--global-bgcolor)
+    border: var(--global-border-color) solid 2px
+    z-index: 500
+    margin: auto
+    position: absolute
+    left: 0
+    right: 0
+    top: 50%
+    transform: translateY(-50%)
+
+    .gridContainerHeader
+        height: 3em
+        width: 100%
+        @include flex
+        background-color: var(--global-secondary-bgcolor)
+        border-bottom: solid 1px var(--global-border-color)
+
+        > *
+            @include flex
+            height: 100%
+
+        span
+            flex-basis: 90%
+        .closeGrid
+            flex-basis: 10%
+
+    .gridContainerGrid
+        width: 100%
+        @include flex-column
+        scrollbar-width: none
+        -ms-overflow-style: none
+
+        ::-webkit-scrollbar
+            display: none
+
+        .pageGroup
+            display: inline-flex
+            flex-basis: 100%
+            flex-grow: 0
+            overflow-x: auto
+
+            .gridPage
+                width: 100%
+                height: 100%
+                flex-shrink: 0
+                flex-grow: 0
+                display: grid

tsconfig.json

@@ -7,12 +7,12 @@
         "noImplicitAny":true,
         "removeComments":false,
         "preserveConstEnums":true,
-        "outDir":"../js",
+        "outDir":"wwwroot/scripts",
         "target":"ES2016",
         "sourceMap":true,
         "moduleResolution": "node"
     },
     "include":[
-        "*"
+        "typescript"
     ]
 }

typescript/dredgepos.authenticate.ts

@@ -1,9 +1,9 @@
 let showLoginBox = () => showVirtualNumpad('Enter Login Code', 6, true, false, false, authenticate)
 
 let  authenticate = (input : string) => {
-    let login = ajaxSync('/ajax/authenticateClerk', input)
+    let login = ajaxSync('/login/authenticateClerk', input)
     if(login === 'success'){
-        location.assign('/floorplan')
+        location.assign('/floorplan/')
     }
     else
         showLoginBox()

typescript/dredgepos.core.ts

@@ -0,0 +1,239 @@
+/// <reference path="./typings/currency.d.ts" />
+
+const Application: ApplicationState = {
+    keyboard: null,
+    mode: [],
+    languageVars: {}
+}
+
+
+/** Parses a language variable. */
+const lang = (key: string, replacements?: string[] | string) => {
+    let finalValue = Application.languageVars[key] || ''
+
+    if (!replacements) return finalValue
+    if (typeof replacements === 'string') replacements = [replacements]
+
+    replacements.forEach((replacement, index) => {
+        const correctIndex = index + 1
+        finalValue = finalValue.replace(`[${correctIndex}]`, replacement)
+    })
+
+    return finalValue
+}
+
+/** Check if a variable is defined */
+const defined = (variable: any) => {
+    return typeof variable !== 'undefined'
+}
+
+/** Call an Ajax function asynchronously */
+const ajax = (endpoint: string, data: any, method = 'POST', successFunction: Function, errorFunction: Function, beforeFunction: any) => {
+    data = (data == null) ? data : JSON.stringify(data)
+    return $.ajax({
+        url: endpoint,
+        method: method,
+        data: data,
+        success: (response: ajaxResult) => {
+            if (successFunction && response.status == 'success')
+                successFunction(JSON.parse(response.data))
+            else if (errorFunction && response.status != 'success') {
+                errorFunction(JSON.parse(response.data))
+            }
+        },
+        error: (error) => console.log(error.statusCode),
+        beforeSend: beforeFunction
+    })
+}
+/*
+    For the flow of the app, synchronous is commonly preferred
+    though trying to keep its usage as low as possible.
+ */
+const ajaxSync = (endpoint: string, data?: any, method = 'POST') => {
+    const response = JSON.parse(
+        $.ajax({
+            url: endpoint,
+            method: method,
+            data: JSON.stringify(data),
+            async: false,
+        }).responseText)
+
+    if (response.data) {
+        response.data = JSON.parse(response.data)
+        return response.data
+    }
+
+    return response
+}
+
+/* Redirect to a specific URL */
+const redirect = (url: string): void => location.assign(url)
+
+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)
+    window.addEventListener('resize', resize)
+    resize()
+
+    setElementVisibilityByMode()
+}
+
+
+const posAlert = (message: string, title = 'Message') => {
+    const alertBox = $('#alert')
+    alertBox.css('display', 'flex');
+    alertBox.data('value', '');
+    $('#alertHeading').text(title);
+    $('#alertMessage').text(message);
+
+    $('#alertOk').css('display', 'flex');
+    $('#alertYes').css('display', 'none');
+    $('#alertNo').css('display', 'none');
+}
+
+const confirmation = (message: string, data: any, title = 'Confirm', submitFunction = (data: any) => {hideAlerts()}) => {
+    const alert = $('#alert')
+
+    $(document).on('click', '#alert #alertYes', () => {
+        hideAlerts()
+        submitFunction(data)
+        $(document).off('click', '#alert #alertYes')
+    })
+
+    alert.css('display', 'flex')
+    $('#alertHeading').html(title)
+    $('#alertMessage').html(message)
+
+    $('#alertOk').css('display', 'none')
+    $('#alertYes').css('display', 'flex')
+    $('#alertNo').css('display', 'flex')
+}
+
+
+const hideAlerts = () => $('#alert').hide()
+
+const turnOnMode = (mode: PosMode) => {
+    Application.mode.push(mode)
+    setElementVisibilityByMode()
+}
+
+const turnOffMode = (mode: PosMode) => {
+    Application.mode = Application.mode.filter((value) => value != mode)
+    setElementVisibilityByMode()
+}
+
+const toggleMode = (mode: PosMode) => {
+    if (!isInMode(mode))
+        turnOnMode(mode)
+    else
+        turnOffMode(mode)
+}
+
+const clearModes = () => {
+    Application.mode = []
+    setElementVisibilityByMode()
+}
+
+const isInMode = (mode: PosMode) => Application.mode.includes(mode)
+
+const setElementVisibilityByMode = () => {
+    const mode = Application.mode
+    const elements = $('[data-visible-in-mode]')
+
+    elements.each((index, elem) => {
+        const element = $(elem)
+        const visibleInModes: PosModes = element.data('visible-in-mode')
+
+        const showElement = visibleInModes.every(visibleMode => {
+            return mode.includes(visibleMode)
+        });
+
+        if (element.hasClass('useVisibility')) {
+            if (showElement) {
+                element.css('visibility', 'visible')
+            } else element.css('visibility', 'hidden')
+        } else element.toggle(showElement)
+    })
+
+    const invisibleElements = $('[data-invisible-in-mode]')
+    invisibleElements.each((index, elem) => {
+        const element = $(elem)
+        const inVisibleInModes: PosModes = element.data('invisible-in-mode')
+        const hideElement = inVisibleInModes.some(invisibleMode => {
+            return mode.includes(invisibleMode)
+        })
+        element.toggle(!hideElement)
+    })
+
+
+    $('[data-active-in-mode]').each((index, elem) => {
+        const button = $(elem)
+        const activeInMode: PosMode = button.data('active-in-mode')
+
+        mode.includes(activeInMode)
+            ? button.addClass('active')
+            : button.removeClass('active')
+
+    })
+
+}
+
+const pulseElement = (element: JQuery) => element.addClass('pulse').on('animationend', () => element.removeClass('pulse'))
+
+Array.prototype.where = function<x>(this: x[], property: string, value: any) {
+    return this.filter( item => (item as any)[property] === value)[0] || null
+}
+
+const money = (amount: number, fromCents=true) => currency(amount, {fromCents: fromCents})
+const moneyFromString = (amount: string) => currency(amount)
+
+const toggle = (e: JQuery.TriggeredEvent) => {
+    const button = $(e.target)
+    const toggleGroup =  button.closest('.toggleGroup')
+    const input = toggleGroup.find('input.value')
+    const isActive = button.hasClass('active')
+        toggleGroup
+            .find('.toggle')
+            .removeClass('active')
+
+    let value = !isActive
+        ? button.addClass('active').data('value')
+        : toggleGroup
+            .find('.toggle.default')
+            .addClass('active')
+            .data('value')
+
+    input.val(value).trigger('change')
+}
+
+const resetToggle = (input: JQuery) => {
+    input
+        .closest('.toggleGroup')
+        .find('.toggle.default')
+        .trigger('click')
+}
+//Id generator.
+function* newestId(){
+    let id = 0
+    while(true){
+        id++
+        yield id
+    }
+}
+
+const loadTemplate = (templateSelector: string) => {
+    const content = $(templateSelector)
+            .clone()
+            .removeAttr('id')
+            .prop('content')
+    return $(content)
+}
+
+
+$(() => ajax('/ajax/languageVars', null, 'GET', setupCore, null, null))

typescript/dredgepos.floorplan.ts

@@ -10,7 +10,7 @@ interface floorplan{
     transformer: Konva.Transformer
     tableLayer: Konva.Layer
     rooms: room[]
-    tables: table[]
+    tables: floorplan_table[]
     decorations: decoration[]
     activeTableNumbers: number[]
     selectedTableNumber: number
@@ -24,7 +24,7 @@ interface floorplan{
 }
 
 interface floorplan_data{
-    tables: table[]
+    tables: floorplan_table[]
     decorations: decoration[]
     activeTableNumbers: number[]
     rooms: room[]
@@ -50,7 +50,7 @@ const Floorplan: floorplan = {
     selectedDecorationId: 0
 };
 
-$(() => ajax('/ajax/getFloorplanData/1', null, 'get', setupFloorplan, null, null) )
+$(() => ajax('/floorplan/getFloorplanData/1', null, 'get', setupFloorplan, null, null) )
 
 
 const setupFloorplanEvents = () => {
@@ -68,6 +68,11 @@ const setupFloorplanEvents = () => {
     doc.on('click', '.transferTableButton', toggleTransferMode)
     doc.on('click', '.reserveTableButton', reserveTable)
     doc.on('click', '.unreserveTableButton', unreserveTable)
+    doc.on('click', '.placeOrderButton', placeOrderButtonClicked)
+}
+
+const placeOrderButtonClicked = () => {
+    redirect(`/order/${Floorplan.selectedTableNumber}`)
 }
 
 const roomButtonClicked = (e: Event) => {
@@ -113,7 +118,7 @@ const loadRoom = (roomToLoad: room) => {
     setupKonva()
 
     $('.roomButton').removeClass('active')
-    let button = $(`.roomButton[data-value=${roomToLoad.id}]`)
+    let button = $(`.roomButton[data-value=${roomToLoad?.id}]`)
     button.addClass('active')
 
     const tablesInRoom = Floorplan.tables.filter(table => table.room_id == roomToLoad.id)
@@ -132,9 +137,9 @@ const getRoomById = (roomId: number) => {
     )
 }
 
-const tableIsOpen = (table: table) => Floorplan.activeTableNumbers.includes(table.table_number)
+const tableIsOpen = (table: floorplan_table) => Floorplan.activeTableNumbers.includes(table.table_number)
 
-const createTableShape = (table: table) => {
+const createTableShape = (table: floorplan_table) => {
     const draggable = isInMode('edit')
 
     const tableGroup = new Konva.Group({
@@ -168,7 +173,7 @@ const createTableShape = (table: table) => {
                 stroke: "black",
                 strokeWidth: 4,
                 draggable: false,
-                listening: true
+                listening: true,
             });
             break;
         default:
@@ -216,6 +221,8 @@ const setupTableEvents = (tableGroup: Konva.Group) => {
 
     tableGroup.on('click', tableClicked)
     tableGroup.on('tap', tableClicked)
+    tableGroup.on('dbltap', tableDblClicked)
+    tableGroup.on('dblclick', tableDblClicked)
     tableGroup.on('dragend', tableGroupTransformed)
     tableShape.on('transformend',  tableShapeTransformed)
 }
@@ -236,7 +243,7 @@ const saveTableTransformation = (tableGroup: Konva.Group) => {
     const originalTable = getTableDataFromGroup(tableGroup)
     const tableShape = getTableShapeFromGroup(tableGroup)
 
-    const newTableInfo : table = {
+    const newTableInfo : floorplan_table = {
         table_number : originalTable.table_number,
         previous_state : originalTable.previous_state,
         merged_children : originalTable.merged_children,
@@ -258,7 +265,7 @@ const saveTableTransformation = (tableGroup: Konva.Group) => {
 }
 
 
-const saveTable = (tableToUpdate: table) => {
+const saveTable = (tableToUpdate: floorplan_table) => {
     const tables =
         Floorplan
             .tables
@@ -269,7 +276,7 @@ const saveTable = (tableToUpdate: table) => {
     tables.push(tableToUpdate)
 
     Floorplan.tables = tables
-    ajax("/ajax/transformTable", tableToUpdate, 'post', null,null,null)
+    ajax("/floorplan/transformTable", tableToUpdate, 'post', null,null,null)
 }
 
 const setTransformerNodes = (nodes: Konva.Shape[]) => {
@@ -302,20 +309,20 @@ const getTableGroupFromTableNumber = (tableNumber : number) => {
     return getTableGroupFromShape(tableShape)
 }
 
-const setReservationStatus = (table: table) => {
+const setReservationStatus = (table: floorplan_table) => {
     const reservationText = $('.reservationStatus')
     const tableShape = getTableShapeFromTableNumber(table.table_number)
     reservationText.text('')
 
     if(table.status == 2) {
         tableShape.fill('lightgreen')
-        const reservations = Floorplan.reservations.filter(reservation => reservation.reservation_table_id == table.id)
+        const reservations = Floorplan.reservations.filter(reservation => reservation.floorplan_table_id == table.id)
         if (reservations.length) {
             turnOnMode('reservedTableSelected')
             reservationText.text(lang('reserved'))
             let reservation = reservations[0]
-            if (reservation.reservation_name != '') {
-                reservationText.text(lang('reserved_for', reservation.reservation_name))
+            if (reservation.name != '') {
+                reservationText.text(lang('reserved_for', reservation.name))
             }
         }
     } else {
@@ -333,21 +340,21 @@ const reserveTable = () => {
 const createEmptyReservation = (covers: number) => {
     const newReservation: reservation = {
         id: 0,
-        reservation_covers: covers,
-        reservation_created_at: 0,
-        reservation_table_id: getSelectedTableData().id,
-        reservation_name: '',
-        reservation_time: 0,
+        covers: covers,
+        created_at: 0,
+        floorplan_table_id: getSelectedTableData().id,
+        name: '',
+        time: 0,
     }
 
-    ajax('/ajax/newEmptyReservation', newReservation,'post', emptyReservationCreated, null, null )
+    ajax('/reservations/newEmptyReservation', newReservation,'post', emptyReservationCreated, null, null )
 }
 
 const emptyReservationCreated = (reservation: reservation) => {
     Floorplan.reservations.push(reservation)
     const selectedTable = getSelectedTableData()
     selectedTable.status = 2
-    selectedTable.default_covers = reservation.reservation_covers
+    selectedTable.default_covers = reservation.covers
     updateTableData(selectedTable)
     updateCoverText(selectedTable)
     setReservationStatus(getSelectedTableData())
@@ -357,9 +364,9 @@ const emptyReservationCreated = (reservation: reservation) => {
 
 const addReservationName = (name: string) => {
     hideVirtualKeyboard()
-    const reservation = Floorplan.reservations.filter(reservation => reservation.reservation_table_id == getSelectedTableData().id)[0]
-    reservation.reservation_name = name
-    ajax('/ajax/updateReservation', reservation, 'post', reservationNameAdded, null, null)
+    const reservation = Floorplan.reservations.filter(reservation => reservation.floorplan_table_id == getSelectedTableData().id)[0]
+    reservation.name = name
+    ajax('/reservations/updateReservation', reservation, 'post', reservationNameAdded, null, null)
 }
 
 const reservationNameAdded = (updatedReservation: reservation) => {
@@ -369,9 +376,9 @@ const reservationNameAdded = (updatedReservation: reservation) => {
     setReservationStatus(getSelectedTableData())
 }
 
-const getReservationsOnTable = (table: table) => Floorplan.reservations.filter(reservation => reservation.reservation_table_id == table.id)
+const getReservationsOnTable = (table: floorplan_table) => Floorplan.reservations.filter(reservation => reservation.floorplan_table_id == table.id)
 
-const updateTableData = (tableToRemove: table) => {
+const updateTableData = (tableToRemove: floorplan_table) => {
     Floorplan.tables = Floorplan.tables.filter(table => table.id != tableToRemove.id)
     Floorplan.tables.push(tableToRemove)
 }
@@ -379,11 +386,11 @@ const updateTableData = (tableToRemove: table) => {
 const unreserveTable = () => {
     const selectedTable = getSelectedTableData()
     selectedTable.status = 0
-    ajax('/ajax/unreserveTable', selectedTable, 'post', tableUnreserved, null, null)
+    ajax('/reservations/unreserveTable', selectedTable, 'post', tableUnreserved, null, null)
 }
 
-const tableUnreserved = (table: table) => {
-    Floorplan.reservations = Floorplan.reservations.filter(reservation => reservation.reservation_table_id != table.id)
+const tableUnreserved = (table: floorplan_table) => {
+    Floorplan.reservations = Floorplan.reservations.filter(reservation => reservation.floorplan_table_id != table.id)
     updateTableData(table)
     setReservationStatus(table)
 }
@@ -391,7 +398,7 @@ const tableUnreserved = (table: table) => {
 const getSelectedTableData = () => getTableDataFromTableNumber(Floorplan.selectedTableNumber)
 
 const deselectTables = () => {
-    Floorplan.stage.find('Rect, Ellipse').forEach( (shape: Konva.Shape, index) => {
+    Floorplan.stage.find('Rect, Ellipse').forEach( (shape: Konva.Shape) => {
         shape.stroke('black')
     });
 
@@ -431,7 +438,14 @@ const selectTable = (tableShape: Konva.Shape) => {
     turnOnMode('tableSelected')
 }
 
-const updateCoverText = (table:table) => $('.selectedTableCovers').text(lang('covers', table.default_covers.toString()))
+const updateCoverText = (table:floorplan_table) => $('.selectedTableCovers').text(lang('covers', table.default_covers.toString()))
+
+const tableDblClicked =  (event: Konva.KonvaEventObject<any>) => {
+    let tableShape = getTableShapeFromGroup(event.currentTarget as Konva.Group)
+    const table = getTableDataFromShape(tableShape)
+    redirect(`/order/${table.table_number}`)
+}
+
 
     const tableClicked =  (event: Konva.KonvaEventObject<any>) => {
     let tableShape = getTableShapeFromGroup(event.currentTarget as Konva.Group)
@@ -486,7 +500,7 @@ const createDecorationShape =  (decoration:decoration, select?: boolean) => {
             }
         }
 
-        decorationShape.src = 'images/decorations/' + decoration.decoration_image
+        decorationShape.src = '/images/decorations/' + decoration.decoration_image
 }
 
 const setupDecorationEvents = (decorationShape: Konva.Image) => {
@@ -500,12 +514,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()
     }
 }
 
@@ -534,6 +550,7 @@ const decorationTransformed = (event: Konva.KonvaEventObject<MouseEvent>|Konva.K
         decoration_width:  Math.round((decorationShape.scaleX() * decorationShape.width()) / Floorplan.visualScale),
         decoration_height:  Math.round((decorationShape.scaleY() * decorationShape.height()) / Floorplan.visualScale),
         decoration_image: oldDecorationData.decoration_image,
+        venue_id: oldDecorationData.venue_id,
     }
 
     saveDecoration(newDecoration)
@@ -550,7 +567,7 @@ const saveDecoration = (decorationToUpdate: decoration) => {
     decorations.push(decorationToUpdate)
 
     Floorplan.decorations = decorations
-    ajax("/ajax/updateDecoration", decorationToUpdate, 'post', null,null,null)
+    ajax("/floorplan/updateDecoration", decorationToUpdate, 'post', null,null,null)
 }
 
 const showDecorator = () => $('#decorator').css('display', 'flex')
@@ -567,10 +584,11 @@ const addDecoration = (e: Event) => {
         decoration_rotation: 0,
         decoration_width: 200,
         decoration_height: 200,
-        decoration_image: button.data('image')
+        decoration_image: button.data('image'),
+        venue_id: Floorplan.currentRoom.venue_id
     }
 
-   ajax('/ajax/addDecoration', newDecoration, 'post', decorationAdded, null, null)
+   ajax('/floorplan/addDecoration', newDecoration, 'post', decorationAdded, null, null)
 }
 
 const decorationAdded = (decoration: decoration) => {
@@ -582,7 +600,7 @@ const decorationAdded = (decoration: decoration) => {
 
 
 const deleteDecoration = () => ajax(
-                        '/ajax/deleteDecoration',
+                        '/floorplan/deleteDecoration',
                          getDecorationDataById(Floorplan.selectedDecorationId),
                         'post', decorationDeleted, null, null)
 
@@ -597,9 +615,11 @@ const setRoomBackground = (roomToLoad: room) => {
     const width = Floorplan.floorplanDiv.width()
     const height = Floorplan.floorplanDiv.height()
 
-    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`)
     }
+}
 
 const setupKonva = () => {
     const dimensions = getDimensions()
@@ -612,11 +632,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],
@@ -695,7 +718,7 @@ const redrawTable = (tableGroup: Konva.Group) => {
 const showAddTablePopup = () => showVirtualNumpad(lang('new_table_number'), 4, false, false, true, addTable);
 
 const addTable = (tableNumber: number) => {
-    const newTable : table  = {
+    const newTable : floorplan_table  = {
         id: 0,
         table_number: tableNumber,
         room_id: Floorplan.currentRoom.id,
@@ -712,10 +735,10 @@ const addTable = (tableNumber: number) => {
         venue_id: 1
     };
 
-    ajax('/ajax/createTable', newTable, 'post', tableAdded, tableNotAdded, null)
+    ajax('/floorplan/createTable', newTable, 'post', tableAdded, tableNotAdded, null)
 }
 
-const tableAdded = (table: table) => {
+const tableAdded = (table: floorplan_table) => {
     deselectTables()
     const newTableGroup = createTableShape(table)
     Floorplan.tables.push(table)
@@ -740,10 +763,10 @@ const deleteTable = (tableNumber: number) => {
         return false
     }
 
-    ajax(`/ajax/deleteTable`,  tableToDelete, 'post', tableDeleted, null, null);
+    ajax(`/floorplan/deleteTable`,  tableToDelete, 'post', tableDeleted, null, null);
 }
 
-const tableDeleted = (deletedTable: table) => {
+const tableDeleted = (deletedTable: floorplan_table) => {
     Floorplan.tables = Floorplan.tables.filter(table => table.table_number != deletedTable.table_number)
     const tableGroup = getTableGroupFromTableNumber(deletedTable.table_number)
     deselectTables()
@@ -753,16 +776,16 @@ const tableDeleted = (deletedTable: table) => {
 const toggleMergeMode = () => toggleMode('merge')
 
 
-const mergeTables = (table1: table, table2: table ) => {
+const mergeTables = (table1: floorplan_table, table2: floorplan_table ) => {
     toggleMergeMode()
     if(table1.table_number == table2.table_number){
         posAlert(lang('error_self_merge'))
         return false;
     }
-    ajax('/ajax/mergeTables', [table1, table2], 'post', tablesMerged, null, null)
+    ajax('/floorplan/mergeTables', [table1, table2], 'post', tablesMerged, null, null)
 }
 
-const tablesMerged = (tables: Record<'child'|'parent'|'merged', table>) => {
+const tablesMerged = (tables: Record<'child'|'parent'|'merged', floorplan_table>) => {
     tableDeleted(tables['child'])
     tableDeleted(tables['parent'])
     tableAdded(tables['merged'])
@@ -772,9 +795,9 @@ const tablesMerged = (tables: Record<'child'|'parent'|'merged', table>) => {
     tableGroup.draggable(true)
 }
 
-const unmergeTable = () => ajax(`/ajax/unmergeTable/${Floorplan.selectedTableNumber}`, null, 'get', tablesUnmerged, null, null)
+const unmergeTable = () => ajax(`/floorplan/unmergeTable/${Floorplan.selectedTableNumber}`, null, 'get', tablesUnmerged, null, null)
 
-const tablesUnmerged = (tables: Record<'child'|'parent', table>) => {
+const tablesUnmerged = (tables: Record<'child'|'parent', floorplan_table>) => {
     const parentTable = tables['parent']
     const childTable = tables['child']
 
@@ -786,16 +809,16 @@ const tablesUnmerged = (tables: Record<'child'|'parent', table>) => {
 
 const toggleTransferMode = () => toggleMode('transfer')
 
-const transferTables = (origin: table, destination: table) => {
+const transferTables = (origin: floorplan_table, destination: floorplan_table) => {
     if(origin.table_number == destination.table_number){
         posAlert(lang('transfer_self_error'))
         return
     }
 
-    ajax(`/ajax/transferTable/${origin.table_number}/${destination.table_number}`, null, 'get', tableTransferred, null, null)
+    ajax(`/floorplan/transferTable/${origin.table_number}/${destination.table_number}`, null, 'get', tableTransferred, null, null)
 }
 
-const tableTransferred = (tables: Record<"origin"|"destination", table>) => {
+const tableTransferred = (tables: Record<"origin"|"destination", floorplan_table>) => {
     const origin = tables['origin']
     const destination = tables['destination']
 

typescript/dredgepos.orderScreen.ts

@@ -0,0 +1,604 @@
+type OrderScreenData = {
+    order_screen_pages: order_screen_page[]
+    sales_categories: sales_category[]
+    print_groups: print_group[]
+    custom_item: item
+}
+
+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[]
+    qty_override: number
+    print_group_override: print_group
+    custom_item: item,
+    selected_cover: number
+    table: floorplan_table,
+}
+
+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: [],
+    qty_override: 1,
+    print_group_override: null,
+    custom_item: null,
+    selected_cover: 0,
+    table: null,
+}
+
+const loadPageGroup = (e: Event) => {
+    const button = $(e.target)
+    const container = $('#pageGroupContainer')
+
+    $('.loadPageGroup').removeClass('active')
+    button.addClass('active')
+
+    let pageGroupId = button.data('page-group-id')
+
+    container.find('.pageGroup').hide()
+
+    let activeGrid = $(`.pageGroup[data-page-group-id=${pageGroupId}]`)
+    let navButtons = container.next('.pageNavigation')
+    navButtons.css('display', 'flex')
+
+    activeGrid.find('.gridPage').length > 1
+        ? navButtons.show()
+        : navButtons.hide()
+
+    activeGrid.css('display', 'inline-flex')
+}
+
+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)
+
+    turnOnMode('accumulate')
+
+    $('.loadPageGroup').first().trigger('click')
+
+    let observer = new window.MutationObserver((mutations, observer) => updateOrderBoxTotals())
+
+    observer.observe($('.orderBoxTable tbody').get()[0], {
+        subtree: true,
+        attributes: true,
+        childList: true
+    });
+
+}
+
+/**
+ * @param direction 1 for forward, -1 for backwards.
+ * @param button
+ */
+const navigatePage = (direction: number, button: JQuery) => {
+    const grid =
+        button
+            .parent()
+            .parent()
+            .find('.pageGroup:visible')
+    grid.get()[0].scrollLeft += grid.width() * direction
+}
+
+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)
+        .filterByData('cover', orderItem.cover)
+        .last()
+
+
+    //If accumulating, just increase the quantity of the existing row.
+    if(existingRow.length > 0 && isInMode('accumulate')){
+        incrementRowQty(existingRow, orderItem.qty)
+        scrollToElement(existingRow)
+        existingRow.pulse()
+    } else {
+        const newRow = createOrderRow(orderItem)
+        lastRow.length > 0
+            ? lastRow.after(newRow)
+            : orderBox.append(newRow)
+        scrollToElement(newRow)
+        newRow.pulse()
+    }
+
+    deselectRow(orderBox.find('tr'))
+}
+
+
+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(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 lastRow = orderBox.find('tr').last()
+    newRow
+        .setColumnValue(lang('printgroup_header'), lastRow.getColumnValue(lang('printgroup_header')))
+        .appendTo(orderBox)
+        .pulse()
+    scrollToElement(newRow)
+}
+
+
+const addNewItem = (item: item, qty = 1) => {
+    const salesCategory = OrderScreen.sales_categories.where('id', item.item_category)
+    const printGroup = OrderScreen.print_group_override ?? OrderScreen.print_groups.where('id', salesCategory.print_group)
+    const orderItem : orderItem = {
+        id: OrderScreen.order_item_id_generator.next().value,
+        item: item,
+        qty: qty,
+        print_group: printGroup,
+        cover: OrderScreen.selected_cover,
+    }
+
+    switch(item.item_type){
+        case 'instruction':
+            addInstructionToOrderBox(orderItem)
+            break
+        case 'item':
+        default:
+            addItemToOrderBox(orderItem)
+            break
+    }
+}
+
+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 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)
+        }
+    })
+
+    tbody.replaceWith(newTbody)
+    const element = orderBox.find('tbody tr').last().get()[0]
+    element.scrollIntoView()
+    OrderScreen.last_added_item = null
+}
+
+const createOrderRow = (orderItem: orderItem) => {
+    const row = $('.orderBoxTable').EmptyRow()
+    const price = money(orderItem.item.price1)
+    const itemCellText = $('<span/>').text(orderItem.item.item_name)
+    row
+        .addClass(`${orderItem.item.item_type}Row`)
+        .setColumnValue(lang('qty_header'), orderItem.qty)
+        .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?.name)
+        .data('order-item-id', orderItem.id)
+        .data('order-item-id', orderItem.id)
+        .data('print_group', orderItem.print_group)
+        .data('cover', orderItem.cover)
+        .data('item', orderItem.item)
+        .find('td.itemCell')
+        .append(itemCellText)
+
+    changeCoverOnRow(row, orderItem.cover)
+
+    if(orderItem.item.item_type == 'instruction' && price.value <= 0){
+        row
+            .find('.totalPriceCell')
+            .css('font-size', 0)
+    }
+
+    return row
+}
+
+const itemButtonClicked = (e: JQuery.TriggeredEvent) => {
+    hideGrids()
+    const existingItemRows = $('.itemRow')
+    const button = $(e.target).closest('.posButton')
+    const item : item = button.data('item')
+
+    if(item.item_type == 'instruction' && existingItemRows.length < 1) return
+
+    const qty = OrderScreen.qty_override || 1
+    OrderScreen.qty_override = 1
+
+    addNewItem(item, qty)
+
+}
+
+const gridButtonClicked = (e: JQuery.TriggeredEvent) => {
+    const button = $(e.target).closest('.posButton')
+    const grid : number = button.data('grid')
+    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 grid = gridData.grid
+    const gridHtml = gridData.gridHtml
+
+    gridContainer
+        .show()
+        .width(gridCellWidth * grid.grid_cols)
+        .children('.gridContainerHeader')
+        .children('span')
+        .text(grid.grid_name)
+        .parent()
+        .parent()
+        .find('.pageGroup')
+        .html(gridHtml)
+        .show()
+        .parent()
+        .height(gridCellHeight * grid.grid_rows)
+        .closest('.gridContainer')
+        .find('.pageNavigation')
+        .toggle(gridContainer.find('.gridPage').length >  1)
+        .height(gridCellHeight)
+}
+
+const itemRowClicked = (e: JQuery.TriggeredEvent) => {
+    const row = $(e.target).closest('tr')
+
+    if(isInMode('void')){
+        voidRows(row)
+        turnOffMode('void')
+        return
+    }
+
+    if(!row.hasClass('selected')) selectRow(row)
+    else deselectRow(row)
+
+}
+
+const selectRow = (row: JQuery) => {
+    row.addClass('selected')
+    const instructionRows = row.nextUntil('.itemRow')
+
+    if(row.hasClass('itemRow') && instructionRows.length){
+        instructionRows.each((index, row) => {
+            selectRow($(row))
+        })
+    }
+}
+
+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 {
+        turnOnMode('void')
+    }
+}
+
+const voidLastItem = () => {
+    const orderBox = $('.orderBoxTable tbody')
+    const allRows = orderBox.find('tr')
+    if(allRows.length < 1) return
+    voidRows(allRows.last())
+}
+
+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))
+
+    $('.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 elemTop = element.offsetTop
+    const elemBottom = elemTop + $(element).height();
+    if (elemTop < containerTop) {
+        $(container).scrollTop(elemTop);
+    } else if (elemBottom > containerBottom) {
+        $(container).scrollTop(elemBottom - $(container).height());
+    }
+}
+
+const overrideQty = () => showVirtualNumpad(lang('multiplier'), 4, false, true, true, qtyOverridden)
+
+const qtyOverridden = (qtyString: string) => OrderScreen.qty_override = Number(qtyString)
+
+const printGroupOverride = (e: JQuery.TriggeredEvent) => {
+    const input = $(e.target)
+    const printGroupId =  Number(input.val())
+    const orderBox = $('.orderBoxTable tbody')
+    const selectedRows = orderBox.find('tr.selected')
+    const newPrintGroup = OrderScreen.print_groups.where('id', printGroupId)
+
+    if(selectedRows.length && newPrintGroup){
+        selectedRows.each((index, row) => {
+            $(row).setColumnValue(lang('printgroup_header'), newPrintGroup.name)
+            $(row).data('print_group', newPrintGroup)
+        })
+
+        OrderScreen.print_group_override = null
+        resetToggle(input)
+
+    } else {
+        OrderScreen.print_group_override = newPrintGroup
+    }
+}
+
+const freetext = () => showVirtualKeyboard('', 32,false, freetextSubmitted)
+
+const freetextSubmitted = (text: string) => {
+    if(text.trim().length < 1) return
+
+    if($('.orderBoxTable tbody tr').length < 1){
+        posAlert(lang('freetext_no_order'))
+    }
+
+    const item = Object.assign({}, OrderScreen.custom_item)
+    item.item_type = 'instruction'
+    item.item_name = text
+
+    addNewItem(item)
+
+}
+
+const customItem = () => showVirtualKeyboard(lang('enter_item_name'), 32,false, customItemTextSubmitted)
+
+const customItemTextSubmitted = (text: string) => {
+    const submitFunction = (priceString: string) => {
+        const price = currency(priceString, {fromCents: false})
+
+        const item = Object.assign({}, OrderScreen.custom_item)
+        item.item_type = 'item'
+        item.item_name = text
+        item.price1 = price.intValue
+
+        addNewItem(item)
+    }
+    showVirtualNumpad(lang('enter_item_price'), 4, false, true, true, submitFunction)
+}
+
+const getGridCellHeight = () => $('#pageGroupContainer').height()/8
+const getGridCellWidth = () => $('#pageGroupContainer').width()/6
+
+
+const showCoverSelector = (event: JQuery.TriggeredEvent) => {
+    const button = $(event.target)
+    const gridHeight = getGridCellHeight()
+
+    const coverSelector = $('.coverSelector')
+    coverSelector
+        .toggle(!coverSelector.is(':visible'))
+        .width(button.width())
+        .css({
+            left: button.offset().left + 'px',
+            top: button.offset().top + button.height() + 'px',
+        })
+        .find('.coverSelectorButton')
+        .height(gridHeight)
+
+}
+
+const coverSelected = (event: JQuery.TriggeredEvent) => {
+    $('.coverSelector').hide()
+    const button = $(event.target)
+    const cover = Number(button.data('cover'))
+    const selectedRows = $('.orderBoxTable tbody').find('tr.itemRow.selected')
+
+    selectedRows.each( (_, selectedRow) => changeCoverOnRow($(selectedRow), cover))
+    OrderScreen.selected_cover = cover
+}
+
+const changeCoverOnRow = (row: JQuery, cover: number) => {
+    row.data('cover', cover)
+    const itemCell = row.find('.itemCell')
+    const existingCoverSpan = itemCell.find('small')
+    const coverSpan = existingCoverSpan.length > 0
+                        ? existingCoverSpan
+                        : $('<small/>').appendTo(itemCell)
+
+    coverSpan.text(lang('selected_cover', cover.toString()))
+    if(cover < 1 || !row.hasClass('itemRow')) {
+        coverSpan.remove()
+    }
+}
+
+const changeCoverNumberPrompt = () =>
+    showVirtualNumpad(lang('how_many_covers'), 3, false, false, true, changeCoverNumberPromptSubmitted)
+
+
+const changeCoverNumberPromptSubmitted = (value: string) => updateCoverNumbers(Number(value))
+
+const updateCoverNumbers = (covers: number) => {
+    let newTable = Object.assign({}, OrderScreen.table)
+    newTable.default_covers = covers
+    ajax('/order/updateCovers', newTable, 'post', coverNumbersUpdated, null, null)
+}
+
+const coverNumbersUpdated = (newTable: floorplan_table) => {
+    const covers = newTable.default_covers
+    OrderScreen.table = newTable
+    $('.changeCoverNumberButton').text(lang('covers', covers.toString()))
+    generateCoverSelector()
+}
+
+const generateCoverSelector = () => {
+    const covers = OrderScreen.table.default_covers
+    const coverSelector = $('.coverSelector')
+    coverSelector.hide().children().remove()
+
+    for(let cover=0; cover<=covers; cover++) {
+        const buttonText = cover==0 ? lang('cover_zero') : lang('selected_cover', cover.toString())
+        loadTemplate('#posButtonTemplate')
+            .find('a')
+            .first()
+            .addClass('coverSelectorButton')
+            .text(buttonText)
+            .data('cover', cover)
+            .appendTo(coverSelector)
+    }
+}
+
+$(() => {
+    OrderScreen.table = $('#pageContainer').data('table') || null
+    ajax('/order/getOrderScreenData/1', null, 'get', setupOrderScreen, null, null)
+})

typescript/dredgepos.tables.ts

@@ -0,0 +1,53 @@
+interface JQuery {
+    getColumnValue(columnHeading: string) : string
+    setColumnValue(columnHeading: string, value: any) : JQuery
+    getColumnIndex(columnHeading: string) : number
+    EmptyRow() : JQuery<HTMLTableRowElement>
+    filterByData(prop: string, value: any) : JQuery
+    pulse() : JQuery
+}
+
+$.fn.pulse = function(this: JQuery) {
+    pulseElement(this)
+    return this
+}
+
+$.fn.EmptyRow = function(this: JQuery) {
+    const headingRow = this.find('th').first().closest('tr')
+    const headingCells = headingRow.find('th')
+    const newRow = $('<tr/>')
+    headingCells.each( (index, cell) => {
+        const newCell  = $('<td/>')
+        const attributes = Array.from(cell.attributes)
+        newCell.data('column', cell.innerText.trim())
+        newCell.data('column-index', index)
+        attributes.forEach(attribute => newCell.attr(attribute.name, attribute.value))
+        newRow.append(newCell)
+    })
+
+    return newRow as JQuery<HTMLTableRowElement>
+}
+
+$.fn.getColumnIndex = function(this: JQuery, columnHeading: string){
+    return this
+        .find('td')
+        .filterByData('column', columnHeading)
+        .data('column-index')
+}
+
+$.fn.getColumnValue = function(this: JQuery, columnHeading: string){
+    return this.find('td').filterByData('column', columnHeading).text()
+}
+
+$.fn.setColumnValue = function(this: JQuery, columnHeading: string, value: any){
+    this.find('td').filterByData('column', columnHeading).text(value)
+    return this
+}
+
+$.fn.filterByData = function(prop: string, val: any) {
+    return this.filter(
+        function() {
+            return $(this).data(prop)==val
+        }
+    )
+}

typescript/keyboards.ts

@@ -216,7 +216,6 @@ let showVirtualNumpad = (heading: string, maxlength = 4, isPassword: boolean, al
     }
 
      let setKeyboardLayout = (layout: string, modifier = '') => {
-
         if (modifier != '') modifier = `_${modifier}`
         Application.keyboard.currentLayout = layout
         let layoutToLoad = Application.keyboard.layouts[layout]
@@ -226,11 +225,9 @@ let showVirtualNumpad = (heading: string, maxlength = 4, isPassword: boolean, al
             We start at 1 instead of 0. Makes it easier for non-programmers
             and translators making their own language packs
             */
-            index = index + 1;
+            index = index + 1
 
-            // @ts-ignore
             let currentRow : string[] = layoutToLoad[`row${index}${modifier}`]
-
             $(row).children('a').each((keyIndex, button) => {
                 let key = $(button);
                 let keyValue: string = currentRow[keyIndex];

typescript/types.ts

@@ -1,6 +1,26 @@
-type PosMode = "edit" | "void" | "transfer" | "default" | "tableSelected" | "decorationSelected" | "activeTableSelected" | "merge" | "reservedTableSelected"
+type PosMode = "edit" | "void" | "transfer" | "default" | "tableSelected" | "decorationSelected" | "activeTableSelected" | "merge" | "reservedTableSelected" | "accumulate"
 type PosModes =  PosMode[]
 
+interface order {
+    clerk: string
+    split: boolean
+    items: orderItem[]
+}
+
+interface orderItem {
+    id: number
+    qty: number
+    print_group: print_group
+    item: item
+    cover: number
+}
+
+interface print_group {
+    id: number,
+    name: string,
+    printer: number,
+    venue_id: number,
+}
 
 interface ajaxResult {
     status: string
@@ -13,7 +33,7 @@ interface ApplicationState {
     languageVars: Record<any, string>
 }
 
-interface table {
+interface floorplan_table {
     table_number: number,
     room_id: number
     venue_id: number
@@ -39,6 +59,7 @@ interface decoration {
     decoration_width: number
     decoration_height: number
     decoration_image: string
+    venue_id: number
 }
 
 interface room {
@@ -51,11 +72,11 @@ interface room {
 
 interface reservation {
     id: number,
-    reservation_name: string,
-    reservation_time: number,
-    reservation_covers: number,
-    reservation_created_at: number,
-    reservation_table_id: number,
+    name: string,
+    time: number,
+    covers: number,
+    created_at: number,
+    floorplan_table_id: number,
 }
 
 interface keyboard {
@@ -64,3 +85,31 @@ interface keyboard {
     layouts: VirtualKeyboard
     currentLayout: 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}
+
+interface item {
+    id: number
+    item_code: string
+    item_category: number
+    item_name: string
+    item_type: string
+    price1: number
+    price2: number
+    price3: number
+    price4: number
+    price5: number
+}
+
+type sales_category = {
+    id: number
+    parent: number
+    name: string
+    print_group: string
+    venue_id: number
+}
+
+interface Array<T> {
+    where(property: string, value: any): T
+}