Floorplan Updated

wwwroot/scripts/js/dredgepos.core.js

@@ -1,11 +1,11 @@
 let Application = {
     keyboard: null,
-    mode: "default",
+    mode: [],
     languageVars: {}
 };
 /** Parses a language variable. */
 let lang = (key, replacements) => {
-    let finalValue = Application.languageVars[key];
+    let finalValue = Application.languageVars[key] || '';
     if (!replacements)
         return finalValue;
     if (typeof replacements === 'string')
@@ -28,16 +28,19 @@ let ajax = (endpoint, data, method = 'POST', successFunction, errorFunction, bef
         method: method,
         data: data,
         success: (response) => {
-            if (successFunction)
+            if (successFunction && response.status == 'success')
                 successFunction(JSON.parse(response.data));
+            else if (errorFunction && response.status != 'success') {
+                errorFunction(JSON.parse(response.data));
+            }
         },
-        error: errorFunction,
+        error: (error) => console.log(error.statusCode),
         beforeSend: beforeFunction
     });
 };
 /*
     For the flow of the app, synchronous is commonly preferred
-    though trying to keep it's usage as low as possible.
+    though trying to keep its usage as low as possible.
  */
 let ajaxSync = (endpoint, data, method = 'POST') => {
     let response = JSON.parse($.ajax({
@@ -56,11 +59,14 @@ let ajaxSync = (endpoint, data, method = 'POST') => {
 let redirect = (url) => {
     window.location.href = url;
 };
-let setLanguageVariables = () => {
-    Application.languageVars = ajaxSync('/ajax/languageVars', null, 'GET');
+let setupCore = (languageVars) => {
+    Application.languageVars = languageVars;
+    const doc = $(document);
+    doc.on('click', '#alertNo, #alertOk', hideAlerts);
+    setElementVisibilityByMode();
 };
 // @ts-ignore
-let alert = (message, title = 'Message') => {
+let posAlert = (message, title = 'Message') => {
     let alertBox = $('#alert');
     alertBox.css('display', 'flex');
     alertBox.data('value', '');
@@ -70,12 +76,11 @@ let alert = (message, title = 'Message') => {
     $('#alertYes').css('display', 'none');
     $('#alertNo').css('display', 'none');
 };
-// @ts-ignore
-let confirm = (message, data, title = 'Confirm', submitFunction = (data) => { hideAlerts(); }) => {
+let confirmation = (message, data, title = 'Confirm', submitFunction = (data) => { hideAlerts(); }) => {
     let alert = $('#alert');
     $(document).on('click', '#alert #alertYes', () => {
-        submitFunction(data);
         hideAlerts();
+        submitFunction(data);
         $(document).off('click', '#alert #alertYes');
     });
     alert.css('display', 'flex');
@@ -85,12 +90,58 @@ let confirm = (message, data, title = 'Confirm', submitFunction = (data) => { hi
     $('#alertYes').css('display', 'flex');
     $('#alertNo').css('display', 'flex');
 };
-let hideAlerts = () => {
-    $('#alert').hide();
+let hideAlerts = () => $('#alert').hide();
+let turnOnMode = (mode) => {
+    Application.mode.push(mode);
+    setElementVisibilityByMode();
 };
-$(() => {
-    let doc = $(document);
-    setLanguageVariables();
-    doc.on('click', '#alertNo, #alertOk', () => $('#alert').hide());
-});
+let turnOffMode = (mode) => {
+    Application.mode = Application.mode.filter((value) => value != mode);
+    setElementVisibilityByMode();
+};
+let toggleMode = (mode) => {
+    if (!isInMode(mode))
+        turnOnMode(mode);
+    else
+        turnOffMode(mode);
+};
+let clearModes = () => { Application.mode = []; };
+let isInMode = (mode) => Application.mode.includes(mode);
+let setElementVisibilityByMode = () => {
+    const mode = Application.mode;
+    const elements = $('[data-visible-in-mode]');
+    elements.each((index, elem) => {
+        let element = $(elem);
+        let visibleInModes = element.data('visible-in-mode');
+        let 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) => {
+        let element = $(elem);
+        let inVisibleInModes = element.data('invisible-in-mode');
+        let hideElement = inVisibleInModes.every(invisibleMode => {
+            return mode.includes(invisibleMode);
+        });
+        element.toggle(!hideElement);
+    });
+    $('[data-active-in-mode]').each((index, elem) => {
+        const button = $(elem);
+        const activeInMode = button.data('active-in-mode');
+        mode.includes(activeInMode)
+            ? button.addClass('active')
+            : button.removeClass('active');
+    });
+};
+$(() => ajax('/ajax/languageVars', null, 'GET', setupCore, null, null));
 //# sourceMappingURL=dredgepos.core.js.map

wwwroot/scripts/js/keyboards.js

@@ -17,8 +17,8 @@ let showVirtualNumpad = (heading, maxlength = 4, isPassword, allowDecimals = tru
     numpad.data('submitfunction', submitFunction);
     numpad.data('password', isPassword);
     numpad.data('allowdecimals', allowDecimals);
-    $(document).unbind('keyup');
-    $(document).keyup(e => {
+    $(document).off('keyup');
+    $(document).on('keyup', e => {
         let key = e.key;
         switch (key) {
             case 'Backspace':
@@ -52,7 +52,6 @@ let virtualNumpadInput = (input) => {
     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();
-    //Test
     if (allowDecimals)
         allowedValues.push('.', ',');
     let validInput = allowedValues.includes(input);
@@ -91,11 +90,12 @@ let setupVirtualNumpad = () => {
         hideVirtualNumpad();
     });
 };
-let setupVirtualKeyboard = () => {
+let setupVirtualKeyboard = (keyboardLayouts) => {
     Application.keyboard = {
         capsLock: false,
         shift: false,
-        layout: 'default'
+        layouts: keyboardLayouts,
+        currentLayout: 'default',
     };
     $(document).on('click', '.virtualKeyboardButton', e => {
         virtualKeyboardInput($(e.target).data('value'));
@@ -138,7 +138,7 @@ let virtualKeyboardInput = (input) => {
         case 'submit':
             hideVirtualKeyboard();
             let submitFunction = keyboard.data('submitfunction');
-            submitFunction();
+            submitFunction(inputBox.text());
             break;
         case 'shift':
             if (Application.keyboard.capsLock)
@@ -174,16 +174,17 @@ let virtualKeyboardInput = (input) => {
     }
 };
 let setKeyboardLayout = (layout, modifier = '') => {
-    let keyboardLayout = ajaxSync('/languages/english/keyboardLayout.json', null, 'get');
     if (modifier != '')
         modifier = `_${modifier}`;
+    Application.keyboard.currentLayout = layout;
+    let layoutToLoad = Application.keyboard.layouts[layout];
     $('.virtualKeyboardRow').each((index, row) => {
         /*
         We start at 1 instead of 0. Makes it easier for non-programmers
         and translators making their own language packs
         */
         index = index + 1;
-        let currentRow = keyboardLayout[layout]["row" + index + modifier];
+        let currentRow = layoutToLoad[`row${index}${modifier}`];
         $(row).children('a').each((keyIndex, button) => {
             let key = $(button);
             let keyValue = currentRow[keyIndex];
@@ -211,6 +212,6 @@ let setKeyboardLayout = (layout, modifier = '') => {
 };
 $(() => {
     setupVirtualNumpad();
-    setupVirtualKeyboard();
+    ajax('/ajax/getKeyboardLayout/english', null, 'get', setupVirtualKeyboard, null, null);
 });
 //# sourceMappingURL=keyboards.js.map

wwwroot/scripts/ts/dredgepos.core.ts

@@ -1,13 +1,13 @@
      let Application : ApplicationState = {
         keyboard : null,
-        mode: "default",
+        mode: [],
         languageVars: {}
     }
 
 
     /** Parses a language variable. */
      let lang = (key: string, replacements?: string[] | string) => {
-        let finalValue = Application.languageVars[key]
+        let finalValue = Application.languageVars[key] || ''
 
         if(!replacements) return finalValue
         if(typeof replacements === 'string') replacements = [replacements]
@@ -26,17 +26,20 @@
     }
 
     /** Call an Ajax function asynchronously */
-     let ajax = (endpoint : string, data: any, method = 'POST', successFunction : Function , errorFunction : JQuery.Ajax.ErrorCallback<any>, beforeFunction: any) => {
+     let 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) => {
-                if(successFunction)
+            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: errorFunction,
+            error: (error) => console.log(error.statusCode),
             beforeSend: beforeFunction
         })
     }
@@ -44,7 +47,7 @@
 
     /*
         For the flow of the app, synchronous is commonly preferred
-        though trying to keep it's usage as low as possible.
+        though trying to keep its usage as low as possible.
      */
      let ajaxSync = (endpoint : string, data?: any, method = 'POST') => {
         let response =  JSON.parse(
@@ -69,12 +72,17 @@
     }
 
 
-     let setLanguageVariables = () => {
-        Application.languageVars = ajaxSync('/ajax/languageVars', null, 'GET')
-    }
+     let setupCore = (languageVars: Record<string, string>) => {
+         Application.languageVars = languageVars
+         const doc = $(document)
+         doc.on('click', '#alertNo, #alertOk', hideAlerts)
+
+         setElementVisibilityByMode()
+     }
+
 
      // @ts-ignore
-     let alert = (message: string, title='Message') => {
+     let posAlert = (message: string, title='Message') => {
         let alertBox = $('#alert')
         alertBox.css('display', 'flex');
         alertBox.data('value', '');
@@ -86,13 +94,12 @@
         $('#alertNo').css('display', 'none');
     }
 
-     // @ts-ignore
-     let confirm = (message: string, data: any, title='Confirm', submitFunction = (data: any) => {hideAlerts()}) => {
+     let confirmation = (message: string, data: any, title='Confirm', submitFunction = (data: any) => {hideAlerts()}) => {
         let alert = $('#alert')
 
         $(document).on('click', '#alert #alertYes', () => {
-            submitFunction(data)
             hideAlerts()
+            submitFunction(data)
             $(document).off('click', '#alert #alertYes')
         })
 
@@ -106,13 +113,69 @@
     }
 
 
-     let hideAlerts = () => {
-        $('#alert').hide()
-    }
+     let hideAlerts = () => $('#alert').hide()
 
-$( () => {
-    let doc = $(document)
-    setLanguageVariables()
+     let turnOnMode = (mode : PosMode) => {
+         Application.mode.push(mode)
+         setElementVisibilityByMode()
+     }
 
-    doc.on('click', '#alertNo, #alertOk', () => $('#alert').hide())
-})
+     let turnOffMode = (mode : PosMode) => {
+         Application.mode = Application.mode.filter((value) => value != mode)
+         setElementVisibilityByMode()
+
+     }
+
+     let toggleMode = (mode: PosMode) => {
+         if(!isInMode(mode))
+             turnOnMode(mode)
+         else
+             turnOffMode(mode)
+     }
+
+     let clearModes = () => {Application.mode = []}
+     let isInMode = (mode: PosMode) => Application.mode.includes(mode)
+
+     let setElementVisibilityByMode = () => {
+         const mode = Application.mode
+         const elements = $('[data-visible-in-mode]')
+
+         elements.each((index, elem) => {
+             let element = $(elem)
+             let visibleInModes : PosModes = element.data('visible-in-mode')
+
+             let 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) => {
+            let element = $(elem)
+            let inVisibleInModes: PosModes = element.data('invisible-in-mode')
+            let hideElement = inVisibleInModes.every(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')
+
+         })
+
+     }
+
+$( () => ajax('/ajax/languageVars', null, 'GET', setupCore, null, null))

wwwroot/scripts/ts/keyboards.ts

@@ -1,4 +1,9 @@
- let showVirtualNumpad = (heading: string, maxlength = 4, isPassword: boolean, allowDecimals = true, allowClose = true, submitFunction: Function) => {
+type KeyboardRowName = `row${number}${"" | "_"}${string}`;
+interface VirtualKeyboard {
+    [layoutName: string]: Partial<Record<KeyboardRowName, string[]>>;
+}
+
+let showVirtualNumpad = (heading: string, maxlength = 4, isPassword: boolean, allowDecimals = true, allowClose = true, submitFunction: Function) => {
         let numpad = $('#virtualNumpad');
         let inputBox = $('#virtualNumpadInput')
         let closeKeyboardButton = $('.closeKeyboards')
@@ -23,10 +28,9 @@
         numpad.data('password', isPassword);
         numpad.data('allowdecimals', allowDecimals);
 
-        $(document).unbind('keyup');
-        $(document).keyup(e => {
+        $(document).off('keyup');
+        $(document).on('keyup', e => {
             let key = e.key;
-
             switch (key) {
                 case 'Backspace':
                 case 'Delete':
@@ -64,7 +68,7 @@
         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()
-        //Test
+
         if (allowDecimals)
             allowedValues.push('.', ',')
 
@@ -96,7 +100,7 @@
      let clearNumpadInput = () => {
         $('#virtualNumpadInput').text("")
         $('#virtualNumpad').data('value', '')
-    }
+     }
 
      let setupVirtualNumpad = () => {
         $(document).on('click', '.virtualNumpadButton', e => {
@@ -109,11 +113,12 @@
         });
     }
 
-     let setupVirtualKeyboard = () => {
+     let setupVirtualKeyboard = (keyboardLayouts: VirtualKeyboard) => {
         Application.keyboard = {
             capsLock: false,
             shift: false,
-            layout: 'default'
+            layouts: keyboardLayouts,
+            currentLayout: 'default',
         }
 
         $(document).on('click', '.virtualKeyboardButton', e => {
@@ -123,7 +128,7 @@
         setKeyboardLayout('default')
     }
 
-     let showVirtualKeyboard = (heading: string, maxlength = 32, isPassword = false, submitFunction = () => {
+     let showVirtualKeyboard = (heading: string, maxlength = 32, isPassword = false, submitFunction :Function = () => {
         hideVirtualKeyboard()
     }) => {
         let keyboard = $('#virtualKeyboard')
@@ -166,7 +171,7 @@
             case 'submit':
                 hideVirtualKeyboard();
                 let submitFunction = keyboard.data('submitfunction')
-                submitFunction();
+                submitFunction(inputBox.text());
                 break;
             case 'shift':
                 if (Application.keyboard.capsLock) break;
@@ -206,8 +211,10 @@
     }
 
      let setKeyboardLayout = (layout: string, modifier = '') => {
-        let keyboardLayout = ajaxSync('/languages/english/keyboardLayout.json', null, 'get')
+
         if (modifier != '') modifier = `_${modifier}`
+        Application.keyboard.currentLayout = layout
+        let layoutToLoad = Application.keyboard.layouts[layout]
 
         $('.virtualKeyboardRow').each((index, row) => {
             /*
@@ -215,7 +222,7 @@
             and translators making their own language packs
             */
             index = index + 1;
-            let currentRow: Record<string, string> = keyboardLayout[layout]["row" + index + modifier]
+            let currentRow = layoutToLoad[`row${index}${modifier}`]
 
             $(row).children('a').each((keyIndex, button) => {
                 let key = $(button);
@@ -251,6 +258,6 @@
     }
 
 $(() => {
-        setupVirtualNumpad()
-        setupVirtualKeyboard();
+   setupVirtualNumpad()
+   ajax('/ajax/getKeyboardLayout/english', null, 'get',setupVirtualKeyboard, null, null)
 })

wwwroot/scripts/ts/test.ts

@@ -0,0 +1 @@
+

wwwroot/scripts/ts/types.ts

@@ -1,4 +1,5 @@
-type PosMode = "edit" | "void" | "transfer" | "default"
+type PosMode = "edit" | "void" | "transfer" | "default" | "tableSelected" | "decorationSelected" | "activeTableSelected" | "merge" | "reservedTableSelected"
+type PosModes =  PosMode[]
 
 interface ajaxResult {
     status: string
@@ -7,11 +8,10 @@ interface ajaxResult {
 
 interface ApplicationState {
     keyboard: keyboard
-    mode: PosMode
+    mode: PosModes
     languageVars: Record<any, string>
 }
 
-
 interface table {
     table_number: number,
     room_id: number
@@ -25,20 +25,41 @@ interface table {
     rotation: number
     merged_children: string
     previous_state: string
-    status: string
-    table_id: number
+    status: number
+    id: number
+}
+
+interface decoration {
+    id: number
+    decoration_room: number
+    decoration_pos_x: number
+    decoration_pos_y: number
+    decoration_rotation: number
+    decoration_width: number
+    decoration_height: number
+    decoration_image: string
 }
 
 interface room {
-    room_id: number
+    id: number
     room_name: string
     background_image: string
     venue_id: number
 }
 
 
+interface reservation {
+    id: number,
+    reservation_name: string,
+    reservation_time: number,
+    reservation_covers: number,
+    reservation_created_at: number,
+    reservation_table_id: number,
+}
+
 interface keyboard {
     capsLock: boolean
     shift: boolean
-    layout: string
+    layouts: VirtualKeyboard
+    currentLayout: string
 }