From ac30d8147ec6e86c4faf867a824c3a1fa23c43aa Mon Sep 17 00:00:00 2001 From: dredgy <72254513+dredgy@users.noreply.github.com> Date: Thu, 7 Jul 2022 14:48:32 +1000 Subject: [PATCH 1/2] Few updates to cover selector width calculation --- Installer/Router.fs | 5 ++++- typescript/dredgepos.core.ts | 2 ++ typescript/dredgepos.orderScreen.ts | 32 +++++++++++++++++------------ 3 files changed, 25 insertions(+), 14 deletions(-) diff --git a/Installer/Router.fs b/Installer/Router.fs index 1014b33..08bbfb4 100644 --- a/Installer/Router.fs +++ b/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 } \ No newline at end of file diff --git a/typescript/dredgepos.core.ts b/typescript/dredgepos.core.ts index 561be3a..ffdb2d6 100644 --- a/typescript/dredgepos.core.ts +++ b/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(this: x[], property: string, value: any) { diff --git a/typescript/dredgepos.orderScreen.ts b/typescript/dredgepos.orderScreen.ts index 8f43556..93fcb6b 100644 --- a/typescript/dredgepos.orderScreen.ts +++ b/typescript/dredgepos.orderScreen.ts @@ -309,14 +309,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 +325,11 @@ const gridHtmlGenerated = (gridData: {gridHtml:string, grid: grid}) => { .html(gridHtml) .show() .parent() - .height(gridCellHeight * grid.rows) + .height(cellDimensions.width * grid.rows) .closest('.gridContainer') .find('.pageNavigation') .toggle(gridContainer.find('.gridPage').length > 1) - .height(gridCellHeight) + .height(cellDimensions.height) } const itemRowClicked = (e: JQuery.TriggeredEvent) => { @@ -514,21 +513,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) From 9558074c4f58fe07a142b5ca2039197d5d6315c7 Mon Sep 17 00:00:00 2001 From: dredgy <72254513+dredgy@users.noreply.github.com> Date: Thu, 7 Jul 2022 15:42:40 +1000 Subject: [PATCH 2/2] Slight refactoring to button action attributes --- Entities/Buttons/Model.fs | 3 +-- OrderScreen/View.fs | 7 +++++-- typescript/dredgepos.orderScreen.ts | 8 +++++--- typescript/keyboards.ts | 14 +++++++------- 4 files changed, 18 insertions(+), 14 deletions(-) diff --git a/Entities/Buttons/Model.fs b/Entities/Buttons/Model.fs index 5680079..354c7ff 100644 --- a/Entities/Buttons/Model.fs +++ b/Entities/Buttons/Model.fs @@ -7,12 +7,11 @@ let attr = Giraffe.ViewEngine.HtmlElements.attr let getItemActionAttributes (itemCode: string) = let item = Entity.GetFirstByColumn "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 diff --git a/OrderScreen/View.fs b/OrderScreen/View.fs index af9afc7..a95903e 100644 --- a/OrderScreen/View.fs +++ b/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] diff --git a/typescript/dredgepos.orderScreen.ts b/typescript/dredgepos.orderScreen.ts index 93fcb6b..9f749e8 100644 --- a/typescript/dredgepos.orderScreen.ts +++ b/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 @@ -325,7 +327,7 @@ const gridHtmlGenerated = (gridData: {gridHtml:string, grid: grid}) => { .html(gridHtml) .show() .parent() - .height(cellDimensions.width * grid.rows) + .height(cellDimensions.height * grid.rows) .closest('.gridContainer') .find('.pageNavigation') .toggle(gridContainer.find('.gridPage').length > 1) diff --git a/typescript/keyboards.ts b/typescript/keyboards.ts index 37ee35b..d8c05da 100644 --- a/typescript/keyboards.ts +++ b/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':