Preparing for reactivity

Light fixes

Entities/Buttons/Model.fs

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

Installer/Router.fs

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

OrderScreen/View.fs

@@ -116,6 +116,9 @@ 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"
@@ -128,8 +131,8 @@ let itemButton (button: button) =
         yield! primaryAttributes
         yield! secondaryAttributes
         _style button.extra_styles
-        (attr "data-primary-action") button.primary_action
-        (attr "data-secondary-action") button.secondary_action
+        _data_primary_action button.primary_action
+        _data_secondary_action button.secondary_action
     ] [
         if button.image.Length > 0 then itemButtonImage button
         span [_class "text "] [str button.text]

typescript/dredgepos.core.ts

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

typescript/keyboards.ts

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