Added a simple close modal feature.

Entities/Buttons/Model.fs

@@ -7,11 +7,12 @@ let attr = Giraffe.ViewEngine.HtmlElements.attr
 
 let getItemActionAttributes (itemCode: string) =
     let item = Entity.GetFirstByColumn<item> "code" (StringTrim itemCode)
-    [item |> jsonEncode |> attr "data-item"]
+    [(attr "data-item") <| jsonEncode item]
 
 let getGridActionAttributes (gridId: int) = [(attr "data-grid") <| jsonEncode gridId]
 
 let getActionAttributes (action: string) (actionValue: string) =
+
     match action with
         | "item" -> getItemActionAttributes actionValue
         | "grid" -> actionValue |> int |> getGridActionAttributes

Entities/Floorplan_Decorations/View.fs

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

Installer/Router.fs

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

OrderScreen/View.fs

@@ -116,9 +116,6 @@ let itemButtonImage (button: button) =
         _style $"background-image:url(\"/images/items/{button.image}\");"
     ] []
 
-let _data_primary_action = attr "data-primary-action"
-let _data_secondary_action = attr "data-secondary-action"
-
 let itemButton (button: button) =
     let extraClasses =
         if button.image.Length > 0 then button.extra_classes + " hasImage"
@@ -131,8 +128,8 @@ let itemButton (button: button) =
         yield! primaryAttributes
         yield! secondaryAttributes
         _style button.extra_styles
-        _data_primary_action button.primary_action
+        (attr "data-primary-action") button.primary_action
-        _data_secondary_action button.secondary_action
+        (attr "data-secondary-action") button.secondary_action
     ] [
         if button.image.Length > 0 then itemButtonImage button
         span [_class "text "] [str button.text]

typescript/dredgepos.core.ts

@@ -23,9 +23,7 @@ const lang = (key: string, replacements?: string[] | string) => {
 }
 
 /** Check if a variable is defined */
-const defined = (variable: any) => {
+const defined = (variable: any) => typeof variable !== 'undefined'
-    return typeof variable !== 'undefined'
-}
 
 /** Call an Ajax function asynchronously */
 const ajax = (endpoint: string, data: any, method = 'POST', successFunction: Function, errorFunction: Function, beforeFunction: any) => {
@@ -69,18 +67,17 @@ const ajaxSync = (endpoint: string, data?: any, method = 'POST') => {
 /* Redirect to a specific URL */
 const redirect = (url: string): void => location.assign(url)
 
-const resize = () => {
+const resize = () => $('#pageContainer').height(window.innerHeight + "px");
-    $('#pageContainer').height(window.innerHeight + "px");
-}
 
 const setupCore = (languageVars: Record<string, string>) => {
     Application.languageVars = languageVars
-    const doc = $(document)
+    $(document)
-    doc.on('click', '#alertNo, #alertOk', hideAlerts)
+        .on('click', '#alertNo, #alertOk', hideAlerts)
-    doc.on('click', '.toggle', toggle)
+        .on('click', '.toggle', toggle)
+        .on('click', '.hideModals', hideModals)
+    
     window.addEventListener('resize', resize)
     resize()
-
     setElementVisibilityByMode()
 }
 
@@ -117,6 +114,7 @@ const confirmation = (message: string, data: any, title = 'Confirm', submitFunct
 
 
 const hideAlerts = () => $('#alert').hide()
+const hideModals = () => $('.modal').hide()
 
 const turnOnMode = (mode: PosMode) => {
     Application.mode.push(mode)
@@ -184,8 +182,6 @@ const setElementVisibilityByMode = () => {
 
 }
 
-const getPercentageOfPageContainerWidth = (pixels: number) => ( (pixels / $('#pageContainer').width()) * 100) + '%'
-
 const pulseElement = (element: JQuery) => element.addClass('pulse').on('animationend', () => element.removeClass('pulse'))
 
 Array.prototype.where = function<x>(this: x[], property: string, value: any) {

typescript/dredgepos.orderScreen.ts

@@ -69,8 +69,8 @@ const setupOrderScreen = (data: OrderScreenData) => {
     doc.on('click', '.nextButton', goToNextPage)
     doc.on('click', '.prevButton', goToPrevPage)
     doc.on('click', '.loadPageGroup', loadPageGroup)
-    doc.on('click', getElementsByAction('item'), itemButtonClicked)
+    doc.on('click', '[data-primary-action=item]', itemButtonClicked)
-    doc.on('click', getElementsByAction('grid'), gridButtonClicked)
+    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)
@@ -98,8 +98,6 @@ const setupOrderScreen = (data: OrderScreenData) => {
 
 }
 
-const getElementsByAction = (action: string) => `[data-primary-action=${action}], [data-secondary-action=${action}]`
-
 /**
  * @param direction 1 for forward, -1 for backwards.
  * @param button
@@ -253,12 +251,6 @@ const renderOrderBox = () => {
     const element = orderBox.find('tbody tr').last().get()[0]
     element.scrollIntoView()
     OrderScreen.last_added_item = null
-    updateOrderBoxTotals()
-}
-
-const setOrderItems = (orderItems: orderItem[]) => {
-    OrderScreen.order_items = orderItems
-    renderOrderBox()
 }
 
 const createOrderRow = (orderItem: orderItem) => {
@@ -317,13 +309,14 @@ const hideGrids = () => $('.gridContainer').hide()
 
 const gridHtmlGenerated = (gridData: {gridHtml:string, grid: grid}) => {
     const gridContainer = $('.gridContainer')
-    const cellDimensions = getGridCellDimensions()
+    const gridCellWidth = getGridCellWidth()
+    const gridCellHeight = getGridCellHeight()
     const grid = gridData.grid
     const gridHtml = gridData.gridHtml
 
     gridContainer
         .show()
-        .width(cellDimensions.width * grid.cols)
+        .width(gridCellWidth * grid.cols)
         .children('.gridContainerHeader')
         .children('span')
         .text(grid.name)
@@ -333,11 +326,11 @@ const gridHtmlGenerated = (gridData: {gridHtml:string, grid: grid}) => {
         .html(gridHtml)
         .show()
         .parent()
-        .height(cellDimensions.height * grid.rows)
+        .height(gridCellHeight * grid.rows)
         .closest('.gridContainer')
         .find('.pageNavigation')
         .toggle(gridContainer.find('.gridPage').length >  1)
-        .height(cellDimensions.height)
+        .height(gridCellHeight)
 }
 
 const itemRowClicked = (e: JQuery.TriggeredEvent) => {
@@ -521,28 +514,21 @@ const customItemTextSubmitted = (text: string) => {
     showVirtualNumpad(lang('enter_item_price'), 4, false, true, true, submitFunction)
 }
 
-const getGridCellDimensions = () => {
+const getGridCellHeight = () => $('#pageGroupContainer').height()/8
-    const container = $('#pageGroupContainer')
+const getGridCellWidth = () => $('#pageGroupContainer').width()/6
-    return {
+
-        height: container.height()/8,
-        width: container.width()/6
-    }
-}
 
 const showCoverSelector = (event: JQuery.TriggeredEvent) => {
     const button = $(event.target)
-    const gridHeight = getGridCellDimensions().height
+    const gridHeight = getGridCellHeight()
+
     const coverSelector = $('.coverSelector')
-
-    const buttonPositionLeftPercent = getPercentageOfPageContainerWidth(button.offset().left)
-    const buttonWidthPercent = getPercentageOfPageContainerWidth(button.width())
-
     coverSelector
         .toggle(!coverSelector.is(':visible'))
+        .width(button.width())
         .css({
-            width: buttonWidthPercent,
+            left: button.offset().left + 'px',
-            left: buttonPositionLeftPercent,
+            top: button.offset().top + button.height() + 'px',
-            top: (button.offset().top + button.height()) + 'px'
         })
         .find('.coverSelectorButton')
         .height(gridHeight)

typescript/keyboards.ts

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