diff --git a/addons/pos_restaurant/static/src/app/floor_screen/edit_bar.js b/addons/pos_restaurant/static/src/app/floor_screen/edit_bar.js new file mode 100644 index 00000000000..0b3357bd7f9 --- /dev/null +++ b/addons/pos_restaurant/static/src/app/floor_screen/edit_bar.js @@ -0,0 +1,24 @@ +/** @odoo-module */ + +import { Component, useState } from "@odoo/owl"; + +export class EditBar extends Component { + static template = "pos_restaurant.EditBar"; + static props = { + selectedTable: [{ type: Object, shape: { shape: String, "*": true } }, { value: false }], + floorMapScrollTop: Number, + createTable: Function, + duplicateTable: Function, + renameTable: Function, + changeSeatsNum: Function, + changeShape: Function, + setTableColor: Function, + setFloorColor: Function, + deleteTable: Function, + }; + + setup() { + super.setup(); + this.state = useState({ isColorPicker: false }); + } +} diff --git a/addons/pos_restaurant/static/src/xml/Screens/FloorScreen/EditBar.xml b/addons/pos_restaurant/static/src/app/floor_screen/edit_bar.xml similarity index 99% rename from addons/pos_restaurant/static/src/xml/Screens/FloorScreen/EditBar.xml rename to addons/pos_restaurant/static/src/app/floor_screen/edit_bar.xml index 76aff3d9f5d..cd734cd3196 100644 --- a/addons/pos_restaurant/static/src/xml/Screens/FloorScreen/EditBar.xml +++ b/addons/pos_restaurant/static/src/app/floor_screen/edit_bar.xml @@ -1,7 +1,7 @@ - +
diff --git a/addons/pos_restaurant/static/src/app/floor_screen/editable_table.js b/addons/pos_restaurant/static/src/app/floor_screen/editable_table.js new file mode 100644 index 00000000000..8ab8f3e9f72 --- /dev/null +++ b/addons/pos_restaurant/static/src/app/floor_screen/editable_table.js @@ -0,0 +1,121 @@ +/** @odoo-module */ + +import { Draggable } from "@point_of_sale/js/Misc/Draggable"; +import { ResizeHandle } from "./resize_handle"; +import { onWillUnmount, useEffect, useRef, Component } from "@odoo/owl"; +import { Table } from "./table"; + +const MIN_TABLE_SIZE = 30; // px + +function constrain(num, [min, max]) { + return Math.min(Math.max(num, min), max); +} +export class EditableTable extends Component { + static template = "pos_restaurant.EditableTable"; + static components = { Draggable, ResizeHandle }; + static props = { + onSaveTable: Function, + limit: { type: Object, shape: { el: [HTMLElement, { value: null }] } }, + table: Table.props.table, + }; + + setup() { + super.setup(); + useEffect(this._setElementStyle.bind(this)); + this.root = useRef("root"); + this.handles = { + "top left": ["minX", "minY"], + "top right": ["maxX", "minY"], + "bottom left": ["minX", "maxY"], + "bottom right": ["maxX", "maxY"], + }; + onWillUnmount(() => this.props.onSaveTable(this.props.table)); + } + + onHandleMoveStart() { + this.startTable = { ...this.props.table }; + } + + onHandleMove(dir, { dx, dy }) { + const table = this.startTable; + // Working with min/max x and y makes constraints much easier to apply uniformly + const { width, height, position_h: minX, position_v: minY } = table; + const maxX = minX + width; + const maxY = minY + height; + const newTable = { minX, minY, maxX, maxY }; + + const [moveX, moveY] = this.handles[dir]; + const { limits } = this; + const bounds = { + maxX: [minX + MIN_TABLE_SIZE, limits.maxX], + minX: [limits.minX, maxX - MIN_TABLE_SIZE], + maxY: [minY + MIN_TABLE_SIZE, limits.maxY], + minY: [limits.minY, maxY - MIN_TABLE_SIZE], + }; + newTable[moveX] = constrain(newTable[moveX] + dx, bounds[moveX]); + newTable[moveY] = constrain(newTable[moveY] + dy, bounds[moveY]); + + // Convert back to server format at the end + this.props.table.position_h = newTable.minX; + this.props.table.position_v = newTable.minY; + this.props.table.width = newTable.maxX - newTable.minX; + this.props.table.height = newTable.maxY - newTable.minY; + this._setElementStyle(); + } + /** + * Offsets the resize handles from the edge of the table. For square tables, + * the offset is half the width of the handle (we just want a quarter circle + * to be visible), for round tables it's half the width plus the distance of + * the middle of the rounded border's arc to the edge. + * + * @param {`${'top'|'bottom'} ${'left'|'right'}`} handleName the handle for + * which to compute the style + * @returns {string} the value of the style attribute for the given handle + */ + computeHandleStyle(handleName) { + const table = this.props.table; + // 24 is half the handle's width + let offset = -24; + if (table.shape === "round") { + // min(width/2, height/2) is the real border radius + // 0.2929 is (1 - cos(45°)) to get in the middle of the border's arc + offset += Math.min(table.width / 2, table.height / 2) * 0.2929; + } + return handleName + .split(" ") + .map((dir) => `${dir}: ${offset}px;`) + .join(" "); + } + + get limits() { + const limitRect = this.props.limit.el.getBoundingClientRect(); + const offsetParentRect = this.root.el.offsetParent.getBoundingClientRect(); + return { + minY: limitRect.top - offsetParentRect.top, + minX: limitRect.left - offsetParentRect.left, + maxY: limitRect.top - offsetParentRect.top + limitRect.height, + maxX: limitRect.left - offsetParentRect.left + limitRect.width, + }; + } + + _setElementStyle() { + const table = this.props.table; + Object.assign(this.root.el.style, { + left: `${table.position_h}px`, + top: `${table.position_v}px`, + width: `${table.width}px`, + height: `${table.height}px`, + background: table.color || "rgb(53, 211, 116)", + "line-height": `${table.height}px`, + "border-radius": table.shape === "round" ? "1000px" : "3px", + "font-size": table.height >= 150 && table.width >= 150 ? "32px" : "16px", + }); + } + + onDragEnd(event) { + const { loc } = event.detail; + const table = this.props.table; + table.position_v = loc.top; + table.position_h = loc.left; + } +} diff --git a/addons/pos_restaurant/static/src/app/floor_screen/editable_table.xml b/addons/pos_restaurant/static/src/app/floor_screen/editable_table.xml new file mode 100644 index 00000000000..f4579672a7a --- /dev/null +++ b/addons/pos_restaurant/static/src/app/floor_screen/editable_table.xml @@ -0,0 +1,20 @@ + + + + + +
+ + + + + + + + + +
+ + + + diff --git a/addons/pos_restaurant/static/src/js/Screens/FloorScreen/FloorScreen.js b/addons/pos_restaurant/static/src/app/floor_screen/floor_screen.js similarity index 94% rename from addons/pos_restaurant/static/src/js/Screens/FloorScreen/FloorScreen.js rename to addons/pos_restaurant/static/src/app/floor_screen/floor_screen.js index a3248a6879e..7d6141b11a6 100644 --- a/addons/pos_restaurant/static/src/js/Screens/FloorScreen/FloorScreen.js +++ b/addons/pos_restaurant/static/src/app/floor_screen/floor_screen.js @@ -1,6 +1,5 @@ /** @odoo-module */ -import { LegacyComponent } from "@web/legacy/legacy_component"; import { debounce } from "@web/core/utils/timing"; import { registry } from "@web/core/registry"; @@ -8,27 +7,24 @@ import { TextInputPopup } from "@point_of_sale/js/Popups/TextInputPopup"; import { NumberPopup } from "@point_of_sale/js/Popups/NumberPopup"; import { ConfirmPopup } from "@point_of_sale/js/Popups/ConfirmPopup"; -import { EditableTable } from "./EditableTable"; -import { EditBar } from "./EditBar"; -import { TableWidget } from "./TableWidget"; +import { EditableTable } from "./editable_table"; +import { EditBar } from "./edit_bar"; +import { Table } from "./table"; import { usePos } from "@point_of_sale/app/pos_hook"; import { useService } from "@web/core/utils/hooks"; +import { Component, onPatched, onMounted, onWillUnmount, useRef, useState } from "@odoo/owl"; -const { onPatched, onMounted, onWillUnmount, useRef, useState } = owl; - -export class FloorScreen extends LegacyComponent { - static components = { EditableTable, EditBar, TableWidget }; - static template = "FloorScreen"; +export class FloorScreen extends Component { + static components = { EditableTable, EditBar, Table }; + static template = "pos_restaurant.FloorScreen"; + static props = { isShown: Boolean, floor: { type: true, optional: true } }; static storeOnOrder = false; - /** - * @param {Object} props - * @param {Object} props.floor - */ setup() { super.setup(); this.pos = usePos(); this.popup = useService("popup"); + this.rpc = useService("rpc"); const floor = this.props.floor ? this.props.floor : this.env.pos.floors[0]; this.state = useState({ selectedFloorId: floor.id, @@ -93,6 +89,7 @@ export class FloorScreen extends LegacyComponent { height: 75, shape: "square", seats: 1, + color: "rgb(53, 211, 116)", }; } newTable.name = this._getNewTableName(newTable.name); @@ -298,6 +295,7 @@ export class FloorScreen extends LegacyComponent { return; } const originalSelectedTableId = this.state.selectedTableId; + this.env.pos.tables_by_id[originalSelectedTableId].active = false; await this.rpc({ model: "restaurant.table", method: "create_from_ui", diff --git a/addons/pos_restaurant/static/src/xml/Screens/FloorScreen/FloorScreen.xml b/addons/pos_restaurant/static/src/app/floor_screen/floor_screen.xml similarity index 91% rename from addons/pos_restaurant/static/src/xml/Screens/FloorScreen/FloorScreen.xml rename to addons/pos_restaurant/static/src/app/floor_screen/floor_screen.xml index 2b67a5f7b3c..fa3d98dd682 100644 --- a/addons/pos_restaurant/static/src/xml/Screens/FloorScreen/FloorScreen.xml +++ b/addons/pos_restaurant/static/src/app/floor_screen/floor_screen.xml @@ -1,7 +1,7 @@ - +
@@ -29,8 +29,8 @@
- - + + { + this.onMove({ x: ev.clientX, y: ev.clientY }); + }; + this.onTouchMove = (ev) => { + this.onMove({ + x: ev.touches[0].clientX, + y: ev.touches[0].clientY, + }); + }; + onWillUnmount(() => { + document.removeEventListener("mousemove", this.onMouseMove); + document.removeEventListener("touchmove", this.onTouchMove); + }); + } + + onMouseDown(ev) { + this.startPosition = { x: ev.clientX, y: ev.clientY }; + this.props.onMoveStart(); + document.addEventListener("mousemove", this.onMouseMove); + document.addEventListener( + "mouseup", + (ev) => { + ev.stopPropagation(); + document.removeEventListener("mousemove", this.onMouseMove); + }, + { once: true, capture: true } + ); + } + + onTouchStart(ev) { + this.startPosition = { x: ev.touches[0].clientX, y: ev.touches[0].clientY }; + this.props.onMoveStart(); + document.addEventListener("touchmove", this.onTouchMove); + document.addEventListener( + "touchend", + (ev) => { + ev.stopPropagation(); + document.removeEventListener("touchmove", this.onTouchMove); + }, + { once: true, capture: true } + ); + } + + /** + * Calls the onMove props with the delta x/y since the dragging began. + * + * @param {{x: number, y: number}} param0 the new position of the cursor + */ + onMove({ x, y }) { + this.props.onMove({ + dx: x - this.startPosition.x, + dy: y - this.startPosition.y, + }); + } +} diff --git a/addons/pos_restaurant/static/src/app/floor_screen/resize_handle.xml b/addons/pos_restaurant/static/src/app/floor_screen/resize_handle.xml new file mode 100644 index 00000000000..82d897ad9b7 --- /dev/null +++ b/addons/pos_restaurant/static/src/app/floor_screen/resize_handle.xml @@ -0,0 +1,6 @@ + + + + + + diff --git a/addons/pos_restaurant/static/src/js/Screens/FloorScreen/TableWidget.js b/addons/pos_restaurant/static/src/app/floor_screen/table.js similarity index 59% rename from addons/pos_restaurant/static/src/js/Screens/FloorScreen/TableWidget.js rename to addons/pos_restaurant/static/src/app/floor_screen/table.js index e6ba281c3a4..ac054345d65 100644 --- a/addons/pos_restaurant/static/src/js/Screens/FloorScreen/TableWidget.js +++ b/addons/pos_restaurant/static/src/app/floor_screen/table.js @@ -1,42 +1,39 @@ /** @odoo-module */ -import { LegacyComponent } from "@web/legacy/legacy_component"; +import { Component } from "@odoo/owl"; -/** - * props: { - * onClick: callback, - * table: table object, - * } - */ -export class TableWidget extends LegacyComponent { - static template = "TableWidget"; +export class Table extends Component { + static template = "pos_restaurant.Table"; + static props = { + onClick: Function, + table: { + type: Object, + shape: { + position_h: Number, + position_v: Number, + width: Number, + height: Number, + shape: String, + color: [String, { value: false }], + name: String, + seats: Number, + "*": true, + }, + }, + }; - setup() { - owl.onMounted(this.onMounted); - } - onMounted() { + get style() { const table = this.props.table; - function unit(val) { - return `${val}px`; - } - const style = { - width: unit(table.width), - height: unit(table.height), - "line-height": unit(table.height), - top: unit(table.position_v), - left: unit(table.position_h), - "border-radius": table.shape === "round" ? unit(1000) : "3px", - }; - if (table.color) { - style.background = table.color; - } - if (table.height >= 150 && table.width >= 150) { - style["font-size"] = "32px"; - } - Object.assign(this.el.style, style); - - const tableCover = this.el.querySelector(".table-cover"); - Object.assign(tableCover.style, { height: `${Math.ceil(this.fill * 100)}%` }); + return ` + width: ${table.width}px; + height: ${table.height}px; + line-height: ${table.height}px; + top: ${table.position_v}px; + left: ${table.position_h}px; + border-radius: ${table.shape === "round" ? 1000 : 3}px; + background: ${table.color || "rgb(53, 211, 116)"}; + font-size: ${table.height >= 150 && table.width >= 150 ? 32 : 16}px; + `; } get fill() { const customerCount = this.env.pos.getCustomerCount(this.props.table.id); diff --git a/addons/pos_restaurant/static/src/xml/Screens/FloorScreen/TableWidget.xml b/addons/pos_restaurant/static/src/app/floor_screen/table.xml similarity index 80% rename from addons/pos_restaurant/static/src/xml/Screens/FloorScreen/TableWidget.xml rename to addons/pos_restaurant/static/src/app/floor_screen/table.xml index 12838995a82..e7a6819cb89 100644 --- a/addons/pos_restaurant/static/src/xml/Screens/FloorScreen/TableWidget.xml +++ b/addons/pos_restaurant/static/src/app/floor_screen/table.xml @@ -1,9 +1,9 @@ - -
- + +
+ diff --git a/addons/pos_restaurant/static/src/app/pos_store.js b/addons/pos_restaurant/static/src/app/pos_store.js index c1d201f4cc2..d290ce3e338 100644 --- a/addons/pos_restaurant/static/src/app/pos_store.js +++ b/addons/pos_restaurant/static/src/app/pos_store.js @@ -3,7 +3,7 @@ import { patch } from "@web/core/utils/patch"; import { PosStore } from "@point_of_sale/app/pos_store"; import { PaymentScreen } from "@point_of_sale/js/Screens/PaymentScreen/PaymentScreen"; -import { FloorScreen } from "@pos_restaurant/js/Screens/FloorScreen/FloorScreen"; +import { FloorScreen } from "@pos_restaurant/app/floor_screen/floor_screen"; const NON_IDLE_EVENTS = [ "mousemove", diff --git a/addons/pos_restaurant/static/src/js/Resizeable.js b/addons/pos_restaurant/static/src/js/Resizeable.js deleted file mode 100644 index 36e1c1c4c89..00000000000 --- a/addons/pos_restaurant/static/src/js/Resizeable.js +++ /dev/null @@ -1,325 +0,0 @@ -/** @odoo-module */ - -import { useListener } from "@web/core/utils/hooks"; -import { LegacyComponent } from "@web/legacy/legacy_component"; - -const { onMounted, useExternalListener } = owl; - -export class Resizeable extends LegacyComponent { - static template = "Resizeable"; - - setup() { - super.setup(); - useExternalListener(document, "mousemove", this.resizeN); - useExternalListener(document, "mouseup", this.endResizeN); - useListener("mousedown", ".resize-handle-n", this.startResizeN); - - useExternalListener(document, "mousemove", this.resizeS); - useExternalListener(document, "mouseup", this.endResizeS); - useListener("mousedown", ".resize-handle-s", this.startResizeS); - - useExternalListener(document, "mousemove", this.resizeW); - useExternalListener(document, "mouseup", this.endResizeW); - useListener("mousedown", ".resize-handle-w", this.startResizeW); - - useExternalListener(document, "mousemove", this.resizeE); - useExternalListener(document, "mouseup", this.endResizeE); - useListener("mousedown", ".resize-handle-e", this.startResizeE); - - useExternalListener(document, "mousemove", this.resizeNW); - useExternalListener(document, "mouseup", this.endResizeNW); - useListener("mousedown", ".resize-handle-nw", this.startResizeNW); - - useExternalListener(document, "mousemove", this.resizeNE); - useExternalListener(document, "mouseup", this.endResizeNE); - useListener("mousedown", ".resize-handle-ne", this.startResizeNE); - - useExternalListener(document, "mousemove", this.resizeSW); - useExternalListener(document, "mouseup", this.endResizeSW); - useListener("mousedown", ".resize-handle-sw", this.startResizeSW); - - useExternalListener(document, "mousemove", this.resizeSE); - useExternalListener(document, "mouseup", this.endResizeSE); - useListener("mousedown", ".resize-handle-se", this.startResizeSE); - - useExternalListener(document, "touchmove", this.resizeN); - useExternalListener(document, "touchend", this.endResizeN); - useListener("touchstart", ".resize-handle-n", this.startResizeN); - - useExternalListener(document, "touchmove", this.resizeS); - useExternalListener(document, "touchend", this.endResizeS); - useListener("touchstart", ".resize-handle-s", this.startResizeS); - - useExternalListener(document, "touchmove", this.resizeW); - useExternalListener(document, "touchend", this.endResizeW); - useListener("touchstart", ".resize-handle-w", this.startResizeW); - - useExternalListener(document, "touchmove", this.resizeE); - useExternalListener(document, "touchend", this.endResizeE); - useListener("touchstart", ".resize-handle-e", this.startResizeE); - - useExternalListener(document, "touchmove", this.resizeNW); - useExternalListener(document, "touchend", this.endResizeNW); - useListener("touchstart", ".resize-handle-nw", this.startResizeNW); - - useExternalListener(document, "touchmove", this.resizeNE); - useExternalListener(document, "touchend", this.endResizeNE); - useListener("touchstart", ".resize-handle-ne", this.startResizeNE); - - useExternalListener(document, "touchmove", this.resizeSW); - useExternalListener(document, "touchend", this.endResizeSW); - useListener("touchstart", ".resize-handle-sw", this.startResizeSW); - - useExternalListener(document, "touchmove", this.resizeSE); - useExternalListener(document, "touchend", this.endResizeSE); - useListener("touchstart", ".resize-handle-se", this.startResizeSE); - - this.size = { height: 0, width: 0 }; - this.loc = { top: 0, left: 0 }; - this.tempSize = {}; - - onMounted(() => { - this.limitArea = this.props.limitArea - ? document.querySelector(this.props.limitArea) - : this.el.offsetParent; - this.limitAreaBoundingRect = this.limitArea.getBoundingClientRect(); - if (this.limitArea === this.el.offsetParent) { - this.limitLeft = 0; - this.limitTop = 0; - this.limitRight = this.limitAreaBoundingRect.width; - this.limitBottom = this.limitAreaBoundingRect.height; - } else { - this.limitLeft = -this.el.offsetParent.offsetLeft; - this.limitTop = -this.el.offsetParent.offsetTop; - this.limitRight = - this.limitAreaBoundingRect.width - this.el.offsetParent.offsetLeft; - this.limitBottom = - this.limitAreaBoundingRect.height - this.el.offsetParent.offsetTop; - } - this.limitAreaWidth = this.limitAreaBoundingRect.width; - this.limitAreaHeight = this.limitAreaBoundingRect.height; - }); - } - startResizeN(event) { - let realEvent; - if (event instanceof CustomEvent) { - realEvent = event.detail; - } else { - realEvent = event; - } - const { y } = this._getEventLoc(realEvent); - this.isResizingN = true; - this.startY = y; - this.size.height = this.el.offsetHeight; - this.loc.top = this.el.offsetTop; - event.stopPropagation(); - } - resizeN(event) { - if (this.isResizingN) { - const { y: newY } = this._getEventLoc(event); - let dY = newY - this.startY; - if (dY < 0 && Math.abs(dY) > this.loc.top) { - dY = -this.loc.top; - } else if (dY > 0 && dY > this.size.height) { - dY = this.size.height; - } - this.el.style.height = `${this.size.height - dY}px`; - this.el.style.top = `${this.loc.top + dY}px`; - } - } - endResizeN() { - if (this.isResizingN && !this.isResizingE && !this.isResizingW && !this.isResizingS) { - this.isResizingN = false; - this._triggerResizeEnd(); - } - } - startResizeS(event) { - let realEvent; - if (event instanceof CustomEvent) { - realEvent = event.detail; - } else { - realEvent = event; - } - const { y } = this._getEventLoc(realEvent); - this.isResizingS = true; - this.startY = y; - this.size.height = this.el.offsetHeight; - this.loc.top = this.el.offsetTop; - event.stopPropagation(); - } - resizeS(event) { - if (this.isResizingS) { - const { y: newY } = this._getEventLoc(event); - let dY = newY - this.startY; - if (dY > 0 && dY > this.limitAreaHeight - (this.size.height + this.loc.top)) { - dY = this.limitAreaHeight - (this.size.height + this.loc.top); - } else if (dY < 0 && Math.abs(dY) > this.size.height) { - dY = -this.size.height; - } - this.el.style.height = `${this.size.height + dY}px`; - } - } - endResizeS() { - if (!this.isResizingN && !this.isResizingE && !this.isResizingW && this.isResizingS) { - this.isResizingS = false; - this._triggerResizeEnd(); - } - } - startResizeW(event) { - let realEvent; - if (event instanceof CustomEvent) { - realEvent = event.detail; - } else { - realEvent = event; - } - const { x } = this._getEventLoc(realEvent); - this.isResizingW = true; - this.startX = x; - this.size.width = this.el.offsetWidth; - this.loc.left = this.el.offsetLeft; - event.stopPropagation(); - } - resizeW(event) { - if (this.isResizingW) { - const { x: newX } = this._getEventLoc(event); - let dX = newX - this.startX; - if (dX > 0 && dX > this.size.width) { - dX = this.size.width; - } else if (dX < 0 && Math.abs(dX) > this.loc.left + Math.abs(this.limitLeft)) { - dX = -this.loc.left + this.limitLeft; - } - this.el.style.width = `${this.size.width - dX}px`; - this.el.style.left = `${this.loc.left + dX}px`; - } - } - endResizeW() { - if (!this.isResizingN && !this.isResizingE && this.isResizingW && !this.isResizingS) { - this.isResizingW = false; - this._triggerResizeEnd(); - } - } - startResizeE(event) { - let realEvent; - if (event instanceof CustomEvent) { - realEvent = event.detail; - } else { - realEvent = event; - } - const { x } = this._getEventLoc(realEvent); - this.isResizingE = true; - this.startX = x; - this.size.width = this.el.offsetWidth; - this.loc.left = this.el.offsetLeft; - event.stopPropagation(); - } - resizeE(event) { - if (this.isResizingE) { - const { x: newX } = this._getEventLoc(event); - let dX = newX - this.startX; - if ( - dX > 0 && - dX > - this.limitAreaWidth - - (this.size.width + this.loc.left + Math.abs(this.limitLeft)) - ) { - dX = - this.limitAreaWidth - - (this.size.width + this.loc.left + Math.abs(this.limitLeft)); - } else if (dX < 0 && Math.abs(dX) > this.size.width) { - dX = -this.size.width; - } - this.el.style.width = `${this.size.width + dX}px`; - } - } - endResizeE() { - if (!this.isResizingN && this.isResizingE && !this.isResizingW && !this.isResizingS) { - this.isResizingE = false; - this._triggerResizeEnd(); - } - } - startResizeNW(event) { - this.startResizeN(event); - this.startResizeW(event); - } - resizeNW(event) { - this.resizeN(event); - this.resizeW(event); - } - endResizeNW() { - if (this.isResizingN && !this.isResizingE && this.isResizingW && !this.isResizingS) { - this.isResizingN = false; - this.isResizingW = false; - this._triggerResizeEnd(); - } - } - startResizeNE(event) { - this.startResizeN(event); - this.startResizeE(event); - } - resizeNE(event) { - this.resizeN(event); - this.resizeE(event); - } - endResizeNE() { - if (this.isResizingN && this.isResizingE && !this.isResizingW && !this.isResizingS) { - this.isResizingN = false; - this.isResizingE = false; - this._triggerResizeEnd(); - } - } - startResizeSE(event) { - this.startResizeS(event); - this.startResizeE(event); - } - resizeSE(event) { - this.resizeS(event); - this.resizeE(event); - } - endResizeSE() { - if (!this.isResizingN && this.isResizingE && !this.isResizingW && this.isResizingS) { - this.isResizingS = false; - this.isResizingE = false; - this._triggerResizeEnd(); - } - } - startResizeSW(event) { - this.startResizeS(event); - this.startResizeW(event); - } - resizeSW(event) { - this.resizeS(event); - this.resizeW(event); - } - endResizeSW() { - if (!this.isResizingN && !this.isResizingE && this.isResizingW && this.isResizingS) { - this.isResizingS = false; - this.isResizingW = false; - this._triggerResizeEnd(); - } - } - _getEventLoc(event) { - let coordX, coordY; - if (event.touches && event.touches[0]) { - coordX = event.touches[0].clientX; - coordY = event.touches[0].clientY; - } else { - coordX = event.clientX; - coordY = event.clientY; - } - return { - x: coordX, - y: coordY, - }; - } - _triggerResizeEnd() { - const size = { - height: this.el.offsetHeight, - width: this.el.offsetWidth, - }; - const loc = { - top: this.el.offsetTop, - left: this.el.offsetLeft, - }; - this.trigger("resize-end", { size, loc }); - } -} diff --git a/addons/pos_restaurant/static/src/js/Screens/FloorScreen/EditBar.js b/addons/pos_restaurant/static/src/js/Screens/FloorScreen/EditBar.js deleted file mode 100644 index 4d9a2589f90..00000000000 --- a/addons/pos_restaurant/static/src/js/Screens/FloorScreen/EditBar.js +++ /dev/null @@ -1,14 +0,0 @@ -/** @odoo-module */ - -import { LegacyComponent } from "@web/legacy/legacy_component"; - -const { useState } = owl; - -export class EditBar extends LegacyComponent { - static template = "EditBar"; - - setup() { - super.setup(); - this.state = useState({ isColorPicker: false }); - } -} diff --git a/addons/pos_restaurant/static/src/js/Screens/FloorScreen/EditableTable.js b/addons/pos_restaurant/static/src/js/Screens/FloorScreen/EditableTable.js deleted file mode 100644 index c00bdaf842f..00000000000 --- a/addons/pos_restaurant/static/src/js/Screens/FloorScreen/EditableTable.js +++ /dev/null @@ -1,59 +0,0 @@ -/** @odoo-module */ - -import { useListener } from "@web/core/utils/hooks"; -import { LegacyComponent } from "@web/legacy/legacy_component"; - -import { Draggable } from "@point_of_sale/js/Misc/Draggable"; -import { Resizeable } from "../../Resizeable"; - -const { onMounted, onPatched } = owl; - -export class EditableTable extends LegacyComponent { - static template = "EditableTable"; - static components = { Draggable, Resizeable }; - - setup() { - super.setup(); - useListener("resize-end", this._onResizeEnd); - useListener("drag-end", this._onDragEnd); - onPatched(this._setElementStyle.bind(this)); - onMounted(this._setElementStyle.bind(this)); - } - _setElementStyle() { - const table = this.props.table; - function unit(val) { - return `${val}px`; - } - const style = { - width: unit(table.width), - height: unit(table.height), - "line-height": unit(table.height), - top: unit(table.position_v), - left: unit(table.position_h), - "border-radius": table.shape === "round" ? unit(1000) : "3px", - }; - if (table.color) { - style.background = table.color; - } - if (table.height >= 150 && table.width >= 150) { - style["font-size"] = "32px"; - } - Object.assign(this.el.style, style); - } - _onResizeEnd(event) { - const { size, loc } = event.detail; - const table = this.props.table; - table.width = size.width; - table.height = size.height; - table.position_v = loc.top; - table.position_h = loc.left; - this.props.onSaveTable(this.props.table); - } - _onDragEnd(event) { - const { loc } = event.detail; - const table = this.props.table; - table.position_v = loc.top; - table.position_h = loc.left; - this.props.onSaveTable(this.props.table); - } -} diff --git a/addons/pos_restaurant/static/src/js/Screens/ReceiptScreen/ReceiptScreen.js b/addons/pos_restaurant/static/src/js/Screens/ReceiptScreen/ReceiptScreen.js index 6707a32d020..fa3bfb13129 100644 --- a/addons/pos_restaurant/static/src/js/Screens/ReceiptScreen/ReceiptScreen.js +++ b/addons/pos_restaurant/static/src/js/Screens/ReceiptScreen/ReceiptScreen.js @@ -4,7 +4,7 @@ import { ReceiptScreen } from "@point_of_sale/js/Screens/ReceiptScreen/ReceiptSc import { usePos } from "@point_of_sale/app/pos_hook"; import { patch } from "@web/core/utils/patch"; import { onWillUnmount } from "@odoo/owl"; -import { FloorScreen } from "@pos_restaurant/js/Screens/FloorScreen/FloorScreen"; +import { FloorScreen } from "@pos_restaurant/app/floor_screen/floor_screen"; patch(ReceiptScreen, "pos_restaurant.ReceiptScreen", { showBackToFloorButton: true, diff --git a/addons/pos_restaurant/static/src/scss/restaurant.scss b/addons/pos_restaurant/static/src/scss/restaurant.scss index d1f1f4f5384..43117554882 100644 --- a/addons/pos_restaurant/static/src/scss/restaurant.scss +++ b/addons/pos_restaurant/static/src/scss/restaurant.scss @@ -77,7 +77,7 @@ border-radius: 3px; cursor: pointer; box-shadow: 0px 3px rgba(0,0,0,0.07); - transition: background, background-color 300ms ease-in-out; + transition: background-color 300ms ease-in-out; overflow: hidden; } .floor-map .table .table-cover { @@ -217,26 +217,19 @@ position: absolute; width: 48px; height: 48px; - left: 50%; - top: 50%; border-radius: 24px; background: white; box-shadow: 0px 2px 3px rgba(0,0,0,0.2); /* See o-grab-cursor mixin */ cursor: url(/web/static/img/openhand.cur), grab; - transition: all 150ms linear; + transition: width 150ms linear, height 150ms linear; z-index: 100; - transform: translate(-50%, -50%); } .floor-map .table.selected .table-handle:hover { width: 60px; height: 60px; border-radius: 30px; } -.floor-map .table .table-handle.top { top: 0; } -.floor-map .table .table-handle.bottom { top: 100%; } -.floor-map .table .table-handle.left { left: 0; } -.floor-map .table .table-handle.right { left: 100%; } .floor-map .table .order-count { position: absolute; diff --git a/addons/pos_restaurant/static/src/xml/Resizeable.xml b/addons/pos_restaurant/static/src/xml/Resizeable.xml deleted file mode 100644 index 169c888e415..00000000000 --- a/addons/pos_restaurant/static/src/xml/Resizeable.xml +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/addons/pos_restaurant/static/src/xml/Screens/FloorScreen/EditableTable.xml b/addons/pos_restaurant/static/src/xml/Screens/FloorScreen/EditableTable.xml deleted file mode 100644 index 9c3a6079a1e..00000000000 --- a/addons/pos_restaurant/static/src/xml/Screens/FloorScreen/EditableTable.xml +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - -
- - - - - - - -
-
-
-
- - - - - - - -
- - - - -