INIT
This commit is contained in:
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
||||
node_modules/
|
||||
849
package-lock.json
generated
Normal file
849
package-lock.json
generated
Normal file
@@ -0,0 +1,849 @@
|
||||
{
|
||||
"name": "magico-ws-viewer",
|
||||
"version": "1.0.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "magico-ws-viewer",
|
||||
"version": "1.0.0",
|
||||
"dependencies": {
|
||||
"express": "^4.19.2",
|
||||
"ws": "^8.18.0"
|
||||
}
|
||||
},
|
||||
"node_modules/accepts": {
|
||||
"version": "1.3.8",
|
||||
"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
|
||||
"integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"mime-types": "~2.1.34",
|
||||
"negotiator": "0.6.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/array-flatten": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
|
||||
"integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/body-parser": {
|
||||
"version": "1.20.4",
|
||||
"resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.4.tgz",
|
||||
"integrity": "sha512-ZTgYYLMOXY9qKU/57FAo8F+HA2dGX7bqGc71txDRC1rS4frdFI5R7NhluHxH6M0YItAP0sHB4uqAOcYKxO6uGA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"bytes": "~3.1.2",
|
||||
"content-type": "~1.0.5",
|
||||
"debug": "2.6.9",
|
||||
"depd": "2.0.0",
|
||||
"destroy": "~1.2.0",
|
||||
"http-errors": "~2.0.1",
|
||||
"iconv-lite": "~0.4.24",
|
||||
"on-finished": "~2.4.1",
|
||||
"qs": "~6.14.0",
|
||||
"raw-body": "~2.5.3",
|
||||
"type-is": "~1.6.18",
|
||||
"unpipe": "~1.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8",
|
||||
"npm": "1.2.8000 || >= 1.4.16"
|
||||
}
|
||||
},
|
||||
"node_modules/bytes": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
|
||||
"integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/call-bind-apply-helpers": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
|
||||
"integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"es-errors": "^1.3.0",
|
||||
"function-bind": "^1.1.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/call-bound": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
|
||||
"integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"call-bind-apply-helpers": "^1.0.2",
|
||||
"get-intrinsic": "^1.3.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/content-disposition": {
|
||||
"version": "0.5.4",
|
||||
"resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
|
||||
"integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"safe-buffer": "5.2.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/content-type": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
|
||||
"integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/cookie": {
|
||||
"version": "0.7.2",
|
||||
"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
|
||||
"integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/cookie-signature": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.7.tgz",
|
||||
"integrity": "sha512-NXdYc3dLr47pBkpUCHtKSwIOQXLVn8dZEuywboCOJY/osA0wFSLlSawr3KN8qXJEyX66FcONTH8EIlVuK0yyFA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/debug": {
|
||||
"version": "2.6.9",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
|
||||
"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"ms": "2.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/depd": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
|
||||
"integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/destroy": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
|
||||
"integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.8",
|
||||
"npm": "1.2.8000 || >= 1.4.16"
|
||||
}
|
||||
},
|
||||
"node_modules/dunder-proto": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
|
||||
"integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"call-bind-apply-helpers": "^1.0.1",
|
||||
"es-errors": "^1.3.0",
|
||||
"gopd": "^1.2.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/ee-first": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
|
||||
"integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/encodeurl": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
|
||||
"integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/es-define-property": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
|
||||
"integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/es-errors": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
|
||||
"integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/es-object-atoms": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
|
||||
"integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"es-errors": "^1.3.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/escape-html": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
|
||||
"integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/etag": {
|
||||
"version": "1.8.1",
|
||||
"resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
|
||||
"integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/express": {
|
||||
"version": "4.22.1",
|
||||
"resolved": "https://registry.npmjs.org/express/-/express-4.22.1.tgz",
|
||||
"integrity": "sha512-F2X8g9P1X7uCPZMA3MVf9wcTqlyNp7IhH5qPCI0izhaOIYXaW9L535tGA3qmjRzpH+bZczqq7hVKxTR4NWnu+g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"accepts": "~1.3.8",
|
||||
"array-flatten": "1.1.1",
|
||||
"body-parser": "~1.20.3",
|
||||
"content-disposition": "~0.5.4",
|
||||
"content-type": "~1.0.4",
|
||||
"cookie": "~0.7.1",
|
||||
"cookie-signature": "~1.0.6",
|
||||
"debug": "2.6.9",
|
||||
"depd": "2.0.0",
|
||||
"encodeurl": "~2.0.0",
|
||||
"escape-html": "~1.0.3",
|
||||
"etag": "~1.8.1",
|
||||
"finalhandler": "~1.3.1",
|
||||
"fresh": "~0.5.2",
|
||||
"http-errors": "~2.0.0",
|
||||
"merge-descriptors": "1.0.3",
|
||||
"methods": "~1.1.2",
|
||||
"on-finished": "~2.4.1",
|
||||
"parseurl": "~1.3.3",
|
||||
"path-to-regexp": "~0.1.12",
|
||||
"proxy-addr": "~2.0.7",
|
||||
"qs": "~6.14.0",
|
||||
"range-parser": "~1.2.1",
|
||||
"safe-buffer": "5.2.1",
|
||||
"send": "~0.19.0",
|
||||
"serve-static": "~1.16.2",
|
||||
"setprototypeof": "1.2.0",
|
||||
"statuses": "~2.0.1",
|
||||
"type-is": "~1.6.18",
|
||||
"utils-merge": "1.0.1",
|
||||
"vary": "~1.1.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.10.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/express"
|
||||
}
|
||||
},
|
||||
"node_modules/finalhandler": {
|
||||
"version": "1.3.2",
|
||||
"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.2.tgz",
|
||||
"integrity": "sha512-aA4RyPcd3badbdABGDuTXCMTtOneUCAYH/gxoYRTZlIJdF0YPWuGqiAsIrhNnnqdXGswYk6dGujem4w80UJFhg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"debug": "2.6.9",
|
||||
"encodeurl": "~2.0.0",
|
||||
"escape-html": "~1.0.3",
|
||||
"on-finished": "~2.4.1",
|
||||
"parseurl": "~1.3.3",
|
||||
"statuses": "~2.0.2",
|
||||
"unpipe": "~1.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/forwarded": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
|
||||
"integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/fresh": {
|
||||
"version": "0.5.2",
|
||||
"resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
|
||||
"integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/function-bind": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
|
||||
"integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/get-intrinsic": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
|
||||
"integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"call-bind-apply-helpers": "^1.0.2",
|
||||
"es-define-property": "^1.0.1",
|
||||
"es-errors": "^1.3.0",
|
||||
"es-object-atoms": "^1.1.1",
|
||||
"function-bind": "^1.1.2",
|
||||
"get-proto": "^1.0.1",
|
||||
"gopd": "^1.2.0",
|
||||
"has-symbols": "^1.1.0",
|
||||
"hasown": "^2.0.2",
|
||||
"math-intrinsics": "^1.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/get-proto": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
|
||||
"integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"dunder-proto": "^1.0.1",
|
||||
"es-object-atoms": "^1.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/gopd": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
|
||||
"integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/has-symbols": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
|
||||
"integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/hasown": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.3.tgz",
|
||||
"integrity": "sha512-ej4AhfhfL2Q2zpMmLo7U1Uv9+PyhIZpgQLGT1F9miIGmiCJIoCgSmczFdrc97mWT4kVY72KA+WnnhJ5pghSvSg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"function-bind": "^1.1.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/http-errors": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
|
||||
"integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"depd": "~2.0.0",
|
||||
"inherits": "~2.0.4",
|
||||
"setprototypeof": "~1.2.0",
|
||||
"statuses": "~2.0.2",
|
||||
"toidentifier": "~1.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/express"
|
||||
}
|
||||
},
|
||||
"node_modules/iconv-lite": {
|
||||
"version": "0.4.24",
|
||||
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
|
||||
"integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"safer-buffer": ">= 2.1.2 < 3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/inherits": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
|
||||
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/ipaddr.js": {
|
||||
"version": "1.9.1",
|
||||
"resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
|
||||
"integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/math-intrinsics": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
|
||||
"integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/media-typer": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
|
||||
"integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/merge-descriptors": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
|
||||
"integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/methods": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
|
||||
"integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/mime": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
|
||||
"integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"mime": "cli.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/mime-db": {
|
||||
"version": "1.52.0",
|
||||
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
|
||||
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/mime-types": {
|
||||
"version": "2.1.35",
|
||||
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
|
||||
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"mime-db": "1.52.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/ms": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
|
||||
"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/negotiator": {
|
||||
"version": "0.6.3",
|
||||
"resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
|
||||
"integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/object-inspect": {
|
||||
"version": "1.13.4",
|
||||
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
|
||||
"integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/on-finished": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
|
||||
"integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"ee-first": "1.1.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/parseurl": {
|
||||
"version": "1.3.3",
|
||||
"resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
|
||||
"integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/path-to-regexp": {
|
||||
"version": "0.1.13",
|
||||
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.13.tgz",
|
||||
"integrity": "sha512-A/AGNMFN3c8bOlvV9RreMdrv7jsmF9XIfDeCd87+I8RNg6s78BhJxMu69NEMHBSJFxKidViTEdruRwEk/WIKqA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/proxy-addr": {
|
||||
"version": "2.0.7",
|
||||
"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
|
||||
"integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"forwarded": "0.2.0",
|
||||
"ipaddr.js": "1.9.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/qs": {
|
||||
"version": "6.14.2",
|
||||
"resolved": "https://registry.npmjs.org/qs/-/qs-6.14.2.tgz",
|
||||
"integrity": "sha512-V/yCWTTF7VJ9hIh18Ugr2zhJMP01MY7c5kh4J870L7imm6/DIzBsNLTXzMwUA3yZ5b/KBqLx8Kp3uRvd7xSe3Q==",
|
||||
"license": "BSD-3-Clause",
|
||||
"dependencies": {
|
||||
"side-channel": "^1.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.6"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/range-parser": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
|
||||
"integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/raw-body": {
|
||||
"version": "2.5.3",
|
||||
"resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.3.tgz",
|
||||
"integrity": "sha512-s4VSOf6yN0rvbRZGxs8Om5CWj6seneMwK3oDb4lWDH0UPhWcxwOWw5+qk24bxq87szX1ydrwylIOp2uG1ojUpA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"bytes": "~3.1.2",
|
||||
"http-errors": "~2.0.1",
|
||||
"iconv-lite": "~0.4.24",
|
||||
"unpipe": "~1.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/safe-buffer": {
|
||||
"version": "5.2.1",
|
||||
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
|
||||
"integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/feross"
|
||||
},
|
||||
{
|
||||
"type": "patreon",
|
||||
"url": "https://www.patreon.com/feross"
|
||||
},
|
||||
{
|
||||
"type": "consulting",
|
||||
"url": "https://feross.org/support"
|
||||
}
|
||||
],
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/safer-buffer": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
|
||||
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/send": {
|
||||
"version": "0.19.2",
|
||||
"resolved": "https://registry.npmjs.org/send/-/send-0.19.2.tgz",
|
||||
"integrity": "sha512-VMbMxbDeehAxpOtWJXlcUS5E8iXh6QmN+BkRX1GARS3wRaXEEgzCcB10gTQazO42tpNIya8xIyNx8fll1OFPrg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"debug": "2.6.9",
|
||||
"depd": "2.0.0",
|
||||
"destroy": "1.2.0",
|
||||
"encodeurl": "~2.0.0",
|
||||
"escape-html": "~1.0.3",
|
||||
"etag": "~1.8.1",
|
||||
"fresh": "~0.5.2",
|
||||
"http-errors": "~2.0.1",
|
||||
"mime": "1.6.0",
|
||||
"ms": "2.1.3",
|
||||
"on-finished": "~2.4.1",
|
||||
"range-parser": "~1.2.1",
|
||||
"statuses": "~2.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/send/node_modules/ms": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
||||
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/serve-static": {
|
||||
"version": "1.16.3",
|
||||
"resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.3.tgz",
|
||||
"integrity": "sha512-x0RTqQel6g5SY7Lg6ZreMmsOzncHFU7nhnRWkKgWuMTu5NN0DR5oruckMqRvacAN9d5w6ARnRBXl9xhDCgfMeA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"encodeurl": "~2.0.0",
|
||||
"escape-html": "~1.0.3",
|
||||
"parseurl": "~1.3.3",
|
||||
"send": "~0.19.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/setprototypeof": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
|
||||
"integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/side-channel": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
|
||||
"integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"es-errors": "^1.3.0",
|
||||
"object-inspect": "^1.13.3",
|
||||
"side-channel-list": "^1.0.0",
|
||||
"side-channel-map": "^1.0.1",
|
||||
"side-channel-weakmap": "^1.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/side-channel-list": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.1.tgz",
|
||||
"integrity": "sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"es-errors": "^1.3.0",
|
||||
"object-inspect": "^1.13.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/side-channel-map": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
|
||||
"integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"call-bound": "^1.0.2",
|
||||
"es-errors": "^1.3.0",
|
||||
"get-intrinsic": "^1.2.5",
|
||||
"object-inspect": "^1.13.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/side-channel-weakmap": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
|
||||
"integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"call-bound": "^1.0.2",
|
||||
"es-errors": "^1.3.0",
|
||||
"get-intrinsic": "^1.2.5",
|
||||
"object-inspect": "^1.13.3",
|
||||
"side-channel-map": "^1.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/statuses": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
|
||||
"integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/toidentifier": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
|
||||
"integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/type-is": {
|
||||
"version": "1.6.18",
|
||||
"resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
|
||||
"integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"media-typer": "0.3.0",
|
||||
"mime-types": "~2.1.24"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/unpipe": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
|
||||
"integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/utils-merge": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
|
||||
"integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vary": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
|
||||
"integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/ws": {
|
||||
"version": "8.20.0",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.20.0.tgz",
|
||||
"integrity": "sha512-sAt8BhgNbzCtgGbt2OxmpuryO63ZoDk/sqaB/znQm94T4fCEsy/yV+7CdC1kJhOU9lboAEU7R3kquuycDoibVA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=10.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"bufferutil": "^4.0.1",
|
||||
"utf-8-validate": ">=5.0.2"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"bufferutil": {
|
||||
"optional": true
|
||||
},
|
||||
"utf-8-validate": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
14
package.json
Normal file
14
package.json
Normal file
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"name": "magico-ws-viewer",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"description": "Prosty podgląd danych z WebSocket wss://api.serwer.magico.pl/gastro_serwer",
|
||||
"main": "server.js",
|
||||
"scripts": {
|
||||
"start": "node server.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"express": "^4.19.2",
|
||||
"ws": "^8.18.0"
|
||||
}
|
||||
}
|
||||
190
public/index.html
Normal file
190
public/index.html
Normal file
@@ -0,0 +1,190 @@
|
||||
<!doctype html>
|
||||
<html lang="pl">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Podgląd WebSocket - gastro_serwer</title>
|
||||
<style>
|
||||
body { font-family: Arial, sans-serif; margin: 20px; background:#f6f7fb; color:#222; }
|
||||
h1 { margin: 0 0 8px; }
|
||||
.muted { color:#666; font-size: 14px; }
|
||||
.card { background:#fff; border:1px solid #ddd; border-radius:10px; padding:14px; margin-top:14px; }
|
||||
.ok { color: #0a7a2f; font-weight: bold; }
|
||||
.bad { color: #a11; font-weight: bold; }
|
||||
table { width: 100%; border-collapse: collapse; margin-top: 8px; }
|
||||
th, td { border: 1px solid #ddd; padding: 6px; font-size: 13px; text-align: left; }
|
||||
th { background:#f1f4ff; }
|
||||
pre { background:#111; color:#d7ffd7; border-radius:8px; padding:10px; max-height:280px; overflow:auto; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Podgląd danych z <code>gastro_serwer</code></h1>
|
||||
<div class="muted">Strona łączy się z lokalnym serwerem (<code>/ws</code>), który pobiera dane z <code>wss://api.serwer.magico.pl/gastro_serwer</code>.</div>
|
||||
|
||||
<div class="card">
|
||||
<div>Status połączenia: <span id="status" class="bad">rozłączono</span></div>
|
||||
<div class="muted" id="lastEvent">Brak danych.</div>
|
||||
<button id="refreshBtn" style="margin-top:10px;">Pobierz current bills (ręcznie)</button>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3>Ostatnia paczka <code>Type = "bills"</code></h3>
|
||||
<div id="billsInfo" class="muted">Jeszcze nie odebrano danych.</div>
|
||||
<table id="billsTable" style="display:none;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Description</th>
|
||||
<th>kierunek</th>
|
||||
<th>type</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3>Ostatnia surowa wiadomość</h3>
|
||||
<pre id="raw">(czekam...)</pre>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3>Debug: wyślij własny JSON do upstream</h3>
|
||||
<div class="muted">Wklej dokładnie ramkę wysyłaną przez oryginalną aplikację (Network → WS → Messages).</div>
|
||||
<textarea id="customPayload" style="width:100%;min-height:90px;margin-top:8px;">{"Type":"bills","kierunek":"all","type":"current"}</textarea>
|
||||
<div style="margin-top:8px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
|
||||
<button id="sendCustomBtn">Wyślij JSON</button>
|
||||
<label><input type="checkbox" id="autoRefresh" /> auto co 5s</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3>Historia in/out (ostatnie 20)</h3>
|
||||
<pre id="history">(brak)</pre>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const statusEl = document.getElementById("status");
|
||||
const lastEventEl = document.getElementById("lastEvent");
|
||||
const billsInfoEl = document.getElementById("billsInfo");
|
||||
const billsTable = document.getElementById("billsTable");
|
||||
const tbody = billsTable.querySelector("tbody");
|
||||
const rawEl = document.getElementById("raw");
|
||||
const refreshBtn = document.getElementById("refreshBtn");
|
||||
const customPayloadEl = document.getElementById("customPayload");
|
||||
const sendCustomBtn = document.getElementById("sendCustomBtn");
|
||||
const autoRefreshEl = document.getElementById("autoRefresh");
|
||||
const historyEl = document.getElementById("history");
|
||||
|
||||
const history = [];
|
||||
let autoTimer = null;
|
||||
|
||||
function pushHistory(direction, payload) {
|
||||
const line = `[${new Date().toLocaleTimeString()}] ${direction}: ${typeof payload === "string" ? payload : JSON.stringify(payload)}`;
|
||||
history.unshift(line);
|
||||
if (history.length > 20) history.length = 20;
|
||||
historyEl.textContent = history.join("\n");
|
||||
}
|
||||
|
||||
function sendToUpstream(payload) {
|
||||
if (ws.readyState !== WebSocket.OPEN) return;
|
||||
ws.send(JSON.stringify({
|
||||
action: "sendUpstream",
|
||||
payload
|
||||
}));
|
||||
pushHistory("OUT", payload);
|
||||
}
|
||||
|
||||
const proto = location.protocol === "https:" ? "wss" : "ws";
|
||||
const ws = new WebSocket(`${proto}://${location.host}/ws`);
|
||||
|
||||
ws.onopen = () => {
|
||||
statusEl.textContent = "połączono z lokalnym podglądem";
|
||||
statusEl.className = "ok";
|
||||
};
|
||||
|
||||
ws.onclose = () => {
|
||||
statusEl.textContent = "rozłączono";
|
||||
statusEl.className = "bad";
|
||||
};
|
||||
|
||||
ws.onerror = () => {
|
||||
statusEl.textContent = "błąd połączenia";
|
||||
statusEl.className = "bad";
|
||||
};
|
||||
|
||||
ws.onmessage = (evt) => {
|
||||
let data;
|
||||
try {
|
||||
data = JSON.parse(evt.data);
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
|
||||
lastEventEl.textContent = `Zdarzenie: ${data.event || "?"} | ${new Date(data.ts || Date.now()).toLocaleTimeString()}`;
|
||||
|
||||
if (data.event === "status") {
|
||||
const connected = !!data.connected;
|
||||
statusEl.textContent = connected ? "upstream: połączono" : "upstream: rozłączono";
|
||||
statusEl.className = connected ? "ok" : "bad";
|
||||
return;
|
||||
}
|
||||
|
||||
if (data.event === "sent") {
|
||||
lastEventEl.textContent = `Wysłano do upstream: ${JSON.stringify(data.payload)} | ${new Date(data.ts || Date.now()).toLocaleTimeString()}`;
|
||||
return;
|
||||
}
|
||||
|
||||
if (data.event !== "message") return;
|
||||
|
||||
rawEl.textContent = data.raw || "(pusto)";
|
||||
if (data.raw) pushHistory("IN", data.raw);
|
||||
|
||||
const msg = data.parsed;
|
||||
if (!msg || msg.Type !== "bills" || !Array.isArray(msg.Bills)) {
|
||||
return;
|
||||
}
|
||||
|
||||
billsInfoEl.textContent = `Odebrano ${msg.Bills.length} rekordów bills.`;
|
||||
billsTable.style.display = "table";
|
||||
tbody.innerHTML = "";
|
||||
|
||||
for (const bill of msg.Bills) {
|
||||
const tr = document.createElement("tr");
|
||||
tr.innerHTML = `
|
||||
<td>${bill.ID || ""}</td>
|
||||
<td>${bill.Description || ""}</td>
|
||||
<td>${msg.kierunek || ""}</td>
|
||||
<td>${msg.type || ""}</td>
|
||||
`;
|
||||
tbody.appendChild(tr);
|
||||
}
|
||||
};
|
||||
|
||||
refreshBtn.addEventListener("click", () => {
|
||||
sendToUpstream({ Type: "bills", kierunek: "all", type: "current" });
|
||||
});
|
||||
|
||||
sendCustomBtn.addEventListener("click", () => {
|
||||
const text = customPayloadEl.value.trim();
|
||||
if (!text) return;
|
||||
|
||||
try {
|
||||
const parsed = JSON.parse(text);
|
||||
sendToUpstream(parsed);
|
||||
} catch {
|
||||
alert("Niepoprawny JSON.");
|
||||
}
|
||||
});
|
||||
|
||||
autoRefreshEl.addEventListener("change", () => {
|
||||
clearInterval(autoTimer);
|
||||
autoTimer = null;
|
||||
if (!autoRefreshEl.checked) return;
|
||||
autoTimer = setInterval(() => {
|
||||
sendToUpstream({ Type: "bills", kierunek: "all", type: "current" });
|
||||
}, 5000);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
222
public/qr.html
Normal file
222
public/qr.html
Normal file
@@ -0,0 +1,222 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Generator QR - Stoliki</title>
|
||||
<style>
|
||||
/* Ustawienia strony A4 i druku */
|
||||
@page {
|
||||
size: A4;
|
||||
margin: 10mm;
|
||||
}
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
background: white;
|
||||
width: 210mm; /* Szerokość A4 */
|
||||
margin: 0 auto;
|
||||
min-height: 297mm;
|
||||
}
|
||||
/* Styl pojedynczego kafelka ze stolikiem */
|
||||
.qr-card {
|
||||
width: 48mm; /* ok. 4 kody w rzędzie */
|
||||
height: 60mm;
|
||||
border: 1px solid #eee;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
.label {
|
||||
font-weight: bold;
|
||||
font-size: 14pt;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
img {
|
||||
width: 35mm;
|
||||
height: 35mm;
|
||||
}
|
||||
.footer-text {
|
||||
font-size: 8pt;
|
||||
color: #666;
|
||||
margin-top: 5px;
|
||||
}
|
||||
/* Ukryj menu podczas drukowania */
|
||||
@media print {
|
||||
.no-print { display: none !important; }
|
||||
body { background: white; }
|
||||
.container { box-shadow: none; margin: 0; width: 100%; min-height: auto; }
|
||||
.qr-card { page-break-inside: avoid; }
|
||||
}
|
||||
.no-print {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
background: #222;
|
||||
color: white;
|
||||
}
|
||||
.no-print .controls-panel {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.control-box {
|
||||
background: #333;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
.control-box p {
|
||||
margin: 0;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
.no-print input {
|
||||
padding: 8px 12px;
|
||||
font-size: 15px;
|
||||
border: 1px solid #555;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
}
|
||||
.no-print button {
|
||||
padding: 8px 16px;
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
background: #4a5568;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
transition: 0.2s;
|
||||
}
|
||||
.no-print button:hover {
|
||||
background: #2d3748;
|
||||
}
|
||||
.btn-print {
|
||||
background: #e2b07e !important;
|
||||
color: #000 !important;
|
||||
}
|
||||
.btn-print:hover {
|
||||
background: #cc9f70 !important;
|
||||
}
|
||||
.btn-danger {
|
||||
background: #e53e3e !important;
|
||||
}
|
||||
.btn-danger:hover {
|
||||
background: #c53030 !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="no-print">
|
||||
<h1 style="margin-top:0;">Generator kodów QR dla stolików</h1>
|
||||
|
||||
<div class="controls-panel">
|
||||
<div class="control-box">
|
||||
<p>Dodaj pojedynczy stolik</p>
|
||||
<div style="display:flex; gap:8px;">
|
||||
<input type="text" id="customTableInput" placeholder="Np. 12A, VIP, 5..." style="width: 140px;">
|
||||
<button onclick="addCustomTable()">Dodaj</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-box">
|
||||
<p>Wygeneruj zakres od 1 do...</p>
|
||||
<div style="display:flex; gap:8px;">
|
||||
<input type="number" id="bulkCountInput" value="20" style="width: 80px;">
|
||||
<button onclick="generateBulk()">Generuj</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-box">
|
||||
<p>Adres bazowy URL aplikacji</p>
|
||||
<div style="display:flex; gap:8px;">
|
||||
<input type="text" id="baseUrlInput" value="http://192.168.20.84:3000/stolik2.html?table=" style="width: 320px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button class="btn-print" onclick="window.print()">🖨️ Drukuj arkusz (Ctrl + P)</button>
|
||||
<button class="btn-danger" onclick="clearGrid()" style="margin-left:10px;">🗑️ Wyczyść grid</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" id="target">
|
||||
<!-- Kody QR będą tutaj generowane -->
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const target = document.getElementById('target');
|
||||
|
||||
function createQrCard(tableId) {
|
||||
// Pobierz aktualny baseURL z inputa
|
||||
const baseUrl = document.getElementById('baseUrlInput').value.trim();
|
||||
const fullUrl = baseUrl + encodeURIComponent(tableId);
|
||||
|
||||
// Generowanie kodu przez zewnętrzne api
|
||||
const qrApiUrl = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(fullUrl)}`;
|
||||
|
||||
const card = document.createElement('div');
|
||||
card.className = 'qr-card';
|
||||
card.innerHTML = `
|
||||
<div class="label">STOLIK ${tableId}</div>
|
||||
<img src="${qrApiUrl}" alt="QR ${tableId}">
|
||||
<div class="footer-text">Zeskanuj, aby zamówić</div>
|
||||
`;
|
||||
target.appendChild(card);
|
||||
}
|
||||
|
||||
function addCustomTable() {
|
||||
const input = document.getElementById('customTableInput');
|
||||
const val = input.value.trim();
|
||||
if(!val) return;
|
||||
createQrCard(val);
|
||||
input.value = '';
|
||||
input.focus();
|
||||
}
|
||||
|
||||
function generateBulk() {
|
||||
const count = parseInt(document.getElementById('bulkCountInput').value) || 0;
|
||||
if (count > 0) {
|
||||
// Jeśli chcesz przed każdą masówką wyczyścić: target.innerHTML = '';
|
||||
for (let i = 1; i <= count; i++) {
|
||||
createQrCard(i);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function clearGrid() {
|
||||
target.innerHTML = '';
|
||||
}
|
||||
|
||||
// Dodaj obsługę Entera na polu dodawania stolika
|
||||
document.getElementById('customTableInput').addEventListener('keypress', function(e) {
|
||||
if (e.key === 'Enter') {
|
||||
addCustomTable();
|
||||
}
|
||||
});
|
||||
|
||||
// Przy starcie wygeneruj kody tak jak było wcześniej
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
generateBulk();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
350
public/stolik.html
Normal file
350
public/stolik.html
Normal file
@@ -0,0 +1,350 @@
|
||||
<!doctype html>
|
||||
<html lang="pl">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Karczma Biesiada – status zamówienia</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg1: #0c1222;
|
||||
--bg2: #141b31;
|
||||
--card: #1f2a44;
|
||||
--card-soft: #243252;
|
||||
--muted: #aab4c9;
|
||||
--ok: #10b981;
|
||||
--warn: #f59e0b;
|
||||
--accent: #7c3aed;
|
||||
--accent2: #22d3ee;
|
||||
--text: #f8fafc;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: "Segoe UI", Arial, sans-serif;
|
||||
background: radial-gradient(circle at top, #1d2a4a 0%, var(--bg1) 45%, var(--bg2) 100%);
|
||||
color: var(--text);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.wrap { width: 100%; max-width: 700px; }
|
||||
|
||||
.card {
|
||||
background: linear-gradient(180deg, var(--card), var(--card-soft));
|
||||
border: 1px solid rgba(255,255,255,.09);
|
||||
border-radius: 18px;
|
||||
padding: 16px;
|
||||
margin-bottom: 14px;
|
||||
box-shadow: 0 12px 28px rgba(0,0,0,.28);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
h1 { margin: 0 0 6px; font-size: 26px; }
|
||||
.muted { color: var(--muted); font-size: 14px; line-height: 1.35; }
|
||||
|
||||
.pill {
|
||||
display: inline-block;
|
||||
padding: 6px 10px;
|
||||
border-radius: 999px;
|
||||
background: rgba(124,58,237,.22);
|
||||
border: 1px solid rgba(124,58,237,.45);
|
||||
font-size: 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.status {
|
||||
font-size: 21px;
|
||||
font-weight: bold;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.status.prep { color: var(--warn); }
|
||||
.status.done { color: var(--ok); }
|
||||
|
||||
.progress-wrap {
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
background: rgba(255,255,255,.12);
|
||||
border-radius: 999px;
|
||||
height: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress {
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
background: linear-gradient(90deg, var(--accent2), var(--accent));
|
||||
transition: width .45s ease;
|
||||
}
|
||||
|
||||
.loader-row {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
margin-top: 8px;
|
||||
padding: 10px;
|
||||
border-radius: 12px;
|
||||
background: rgba(255,255,255,.06);
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid rgba(255,255,255,.2);
|
||||
border-top-color: #fff;
|
||||
animation: spin .8s linear infinite;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
font-size: 18px;
|
||||
animation: bob 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes bob {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-3px); }
|
||||
}
|
||||
|
||||
ul { list-style: none; padding: 0; margin: 12px 0 0; }
|
||||
li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 11px 10px;
|
||||
border-bottom: 1px solid rgba(255,255,255,.1);
|
||||
}
|
||||
|
||||
li:last-child { border-bottom: none; }
|
||||
|
||||
.item-name {
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.qty {
|
||||
min-width: 54px;
|
||||
text-align: right;
|
||||
color: #dbe5ff;
|
||||
font-weight: bold;
|
||||
background: rgba(34,211,238,.18);
|
||||
border: 1px solid rgba(34,211,238,.35);
|
||||
border-radius: 10px;
|
||||
padding: 5px 8px;
|
||||
}
|
||||
|
||||
.hidden { display: none !important; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
<div class="card">
|
||||
<div class="pill">🍽️ Twoje zamówienie</div>
|
||||
<h1>Karczma Biesiada</h1>
|
||||
<div class="muted" id="tableLabel">Status zamówienia stolika</div>
|
||||
<div class="status prep" id="prepStatus">Łączenie z serwerem…</div>
|
||||
<div class="muted" id="meta">-</div>
|
||||
<div class="progress-wrap"><div class="progress" id="progress"></div></div>
|
||||
|
||||
<div id="loadingBox" class="loader-row">
|
||||
<div class="spinner"></div>
|
||||
<div>
|
||||
<div style="font-weight:600;display:flex;align-items:center;gap:6px;">
|
||||
<span class="search-icon">🔎</span>
|
||||
Szukamy Twojego zamówienia…
|
||||
</div>
|
||||
<div class="muted">Jesteśmy w trakcie wyszukiwania. Daj nam chwilkę ✨</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3 style="margin:0 0 6px;">Co już jest na Twoim rachunku</h3>
|
||||
<div class="muted" id="empty">Czekam na dane…</div>
|
||||
<ul id="items" style="display:none;"></ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const params = new URLSearchParams(location.search);
|
||||
const tableParam = (params.get("table") || "").trim();
|
||||
|
||||
const tableLabelEl = document.getElementById("tableLabel");
|
||||
const prepStatusEl = document.getElementById("prepStatus");
|
||||
const metaEl = document.getElementById("meta");
|
||||
const emptyEl = document.getElementById("empty");
|
||||
const itemsEl = document.getElementById("items");
|
||||
const loadingBoxEl = document.getElementById("loadingBox");
|
||||
const progressEl = document.getElementById("progress");
|
||||
|
||||
tableLabelEl.textContent = tableParam
|
||||
? `Status zamówienia – stolik ${tableParam}`
|
||||
: "Brak numeru stolika w adresie";
|
||||
|
||||
function parseNumber(value) {
|
||||
const n = parseFloat(String(value || "0").replace(",", "."));
|
||||
return Number.isFinite(n) ? n : 0;
|
||||
}
|
||||
|
||||
function detectTableNumber(bill) {
|
||||
const text = `${bill?.Remark || ""} ${bill?.Description || ""}`;
|
||||
const m = text.match(/STOLIK\s*([0-9A-Z]+)/i);
|
||||
return m ? m[1] : "";
|
||||
}
|
||||
|
||||
function byLatestDate(a, b) {
|
||||
return new Date(b?.Date || 0).getTime() - new Date(a?.Date || 0).getTime();
|
||||
}
|
||||
|
||||
function minutesAgoText(dateIso) {
|
||||
const ts = new Date(dateIso || Date.now()).getTime();
|
||||
if (!ts) return "chwilę temu";
|
||||
const diffMin = Math.max(0, Math.floor((Date.now() - ts) / 60000));
|
||||
if (diffMin < 1) return "przed chwilą";
|
||||
if (diffMin === 1) return "1 minutę temu";
|
||||
if (diffMin < 5) return `${diffMin} minuty temu`;
|
||||
return `${diffMin} minut temu`;
|
||||
}
|
||||
|
||||
function setProgress(percent) {
|
||||
const p = Math.max(0, Math.min(100, percent || 0));
|
||||
progressEl.style.width = `${p}%`;
|
||||
}
|
||||
|
||||
function renderBills(bills) {
|
||||
loadingBoxEl.classList.add("hidden");
|
||||
|
||||
const allArticles = bills.flatMap((b) => Array.isArray(b?.Articles) ? b.Articles : []);
|
||||
|
||||
if (!allArticles.length) {
|
||||
emptyEl.style.display = "block";
|
||||
itemsEl.style.display = "none";
|
||||
emptyEl.textContent = "Brak pozycji do wyświetlenia dla tego stolika.";
|
||||
prepStatusEl.textContent = "W trakcie przygotowywania 🍳";
|
||||
prepStatusEl.className = "status prep";
|
||||
setProgress(0);
|
||||
return;
|
||||
}
|
||||
|
||||
const grouped = new Map();
|
||||
let sumTodo = 0;
|
||||
let sumDone = 0;
|
||||
|
||||
for (const a of allArticles) {
|
||||
const name = (a.Name || "Pozycja").trim();
|
||||
const qty = parseNumber(a.QuantityToDo || a.QuantitySet || "1");
|
||||
const done = parseNumber(a.QuantityDone || "0");
|
||||
|
||||
sumTodo += qty;
|
||||
sumDone += done;
|
||||
|
||||
grouped.set(name, (grouped.get(name) || 0) + qty);
|
||||
}
|
||||
|
||||
const entries = [...grouped.entries()];
|
||||
itemsEl.innerHTML = "";
|
||||
|
||||
for (const [name, qty] of entries) {
|
||||
const li = document.createElement("li");
|
||||
li.innerHTML = `<span class="item-name">${name}</span><span class="qty">x ${qty % 1 === 0 ? qty.toFixed(0) : qty.toFixed(2)}</span>`;
|
||||
itemsEl.appendChild(li);
|
||||
}
|
||||
|
||||
emptyEl.style.display = "none";
|
||||
itemsEl.style.display = "block";
|
||||
|
||||
const progress = sumTodo > 0 ? (sumDone / sumTodo) * 100 : 0;
|
||||
setProgress(progress);
|
||||
|
||||
if (sumTodo > 0 && sumDone >= sumTodo) {
|
||||
prepStatusEl.textContent = "Gotowe do odbioru ✅";
|
||||
prepStatusEl.className = "status done";
|
||||
} else if (sumDone > 0) {
|
||||
prepStatusEl.textContent = "Część zamówienia już gotowa ⏳";
|
||||
prepStatusEl.className = "status prep";
|
||||
} else {
|
||||
prepStatusEl.textContent = "W trakcie przygotowywania 🍳";
|
||||
prepStatusEl.className = "status prep";
|
||||
}
|
||||
|
||||
const byDateAsc = [...bills].sort((a, b) => new Date(a?.Date || 0) - new Date(b?.Date || 0));
|
||||
const firstOrder = byDateAsc[0];
|
||||
const billNumbers = bills.map((b) => b?.Description).filter(Boolean).join(", ");
|
||||
const billsLabel = bills.length === 1 ? "1 rachunek" : `${bills.length} rachunki`;
|
||||
|
||||
metaEl.textContent = `${billsLabel} • Nr: ${billNumbers || "-"} • Pierwsze zamówienie: ${minutesAgoText(firstOrder?.Date)} • Godzina: ${new Date(firstOrder?.Date || Date.now()).toLocaleTimeString()}`;
|
||||
}
|
||||
|
||||
function handleBillsMessage(parsed) {
|
||||
if (!parsed || parsed.Type !== "bills" || !Array.isArray(parsed.Bills)) return;
|
||||
if (!tableParam) {
|
||||
loadingBoxEl.classList.add("hidden");
|
||||
prepStatusEl.textContent = "Brak numeru stolika w URL";
|
||||
prepStatusEl.className = "status prep";
|
||||
emptyEl.style.display = "block";
|
||||
emptyEl.textContent = "Użyj adresu np. /stolik.html?table=9";
|
||||
itemsEl.style.display = "none";
|
||||
setProgress(0);
|
||||
return;
|
||||
}
|
||||
|
||||
const norm = tableParam.toLowerCase();
|
||||
const matches = parsed.Bills.filter((bill) => {
|
||||
const t = detectTableNumber(bill).toLowerCase();
|
||||
return t === norm;
|
||||
}).sort(byLatestDate);
|
||||
|
||||
if (!matches.length) {
|
||||
loadingBoxEl.classList.remove("hidden");
|
||||
prepStatusEl.textContent = "Oczekujemy na zamówienie";
|
||||
prepStatusEl.className = "status prep";
|
||||
metaEl.textContent = `Stolik ${tableParam}`;
|
||||
emptyEl.style.display = "block";
|
||||
emptyEl.textContent = `Jeszcze nie widzimy aktywnego zamówienia dla stolika ${tableParam}.`;
|
||||
itemsEl.style.display = "none";
|
||||
setProgress(0);
|
||||
return;
|
||||
}
|
||||
|
||||
renderBills(matches);
|
||||
}
|
||||
|
||||
const proto = location.protocol === "https:" ? "wss" : "ws";
|
||||
const ws = new WebSocket(`${proto}://${location.host}/ws`);
|
||||
|
||||
ws.onmessage = (evt) => {
|
||||
let data;
|
||||
try {
|
||||
data = JSON.parse(evt.data);
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
|
||||
if (data.event === "snapshot") {
|
||||
handleBillsMessage(data.parsed);
|
||||
return;
|
||||
}
|
||||
|
||||
if (data.event === "message") {
|
||||
handleBillsMessage(data.parsed);
|
||||
}
|
||||
};
|
||||
|
||||
ws.onerror = () => {
|
||||
loadingBoxEl.classList.add("hidden");
|
||||
prepStatusEl.textContent = "Błąd połączenia";
|
||||
prepStatusEl.className = "status prep";
|
||||
setProgress(0);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
629
public/stolik2 copy 2.html
Normal file
629
public/stolik2 copy 2.html
Normal file
@@ -0,0 +1,629 @@
|
||||
<!doctype html>
|
||||
<html lang="pl">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Karczma Biesiada – Twoje Zamówienie</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--primary: #e2b07e; /* Ciepłe złoto/miedź */
|
||||
--bg: #0f0f11;
|
||||
--surface: #1c1c1f;
|
||||
--surface-light: #2c2c2e;
|
||||
--text-main: #ffffff;
|
||||
--text-muted: #9a9a9e;
|
||||
--success: #4ade80;
|
||||
--accent: #f59e0b;
|
||||
--radius: 20px;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||
background-color: var(--bg);
|
||||
color: var(--text-main);
|
||||
line-height: 1.6;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* --- LOADER SCREEN --- */
|
||||
#loadingScreen {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 100;
|
||||
background: var(--bg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px;
|
||||
text-align: center;
|
||||
transition: opacity 0.5s ease, visibility 0.5s;
|
||||
}
|
||||
|
||||
.loader-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border: 3px solid var(--surface-light);
|
||||
border-top: 3px solid var(--primary);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.loader-text h2 {
|
||||
font-family: 'Playfair Display', serif;
|
||||
margin: 0 0 8px;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.loader-msg { color: var(--text-muted); font-size: 14px; min-height: 20px; }
|
||||
|
||||
/* --- MAIN LAYOUT --- */
|
||||
.container {
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
padding: 24px 16px 100px;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 28px;
|
||||
margin: 0;
|
||||
background: linear-gradient(to right, #fff, var(--primary));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.table-badge {
|
||||
display: inline-block;
|
||||
background: var(--surface-light);
|
||||
padding: 6px 16px;
|
||||
border-radius: 99px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
margin-top: 8px;
|
||||
color: var(--primary);
|
||||
border: 1px solid rgba(226, 176, 126, 0.2);
|
||||
}
|
||||
|
||||
/* --- STATUS CARD --- */
|
||||
.status-card {
|
||||
background: var(--surface);
|
||||
border-radius: var(--radius);
|
||||
padding: 24px;
|
||||
margin-bottom: 24px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 20px 40px rgba(0,0,0,0.4);
|
||||
border: 1px solid rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
.status-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.status-title {
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
color: var(--text-muted);
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.status-value {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
height: 8px;
|
||||
background: var(--surface-light);
|
||||
border-radius: 10px;
|
||||
margin: 15px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
background: linear-gradient(90deg, var(--primary), var(--accent));
|
||||
box-shadow: 0 0 15px rgba(226, 176, 126, 0.4);
|
||||
transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* --- ITEMS LIST --- */
|
||||
.items-container h3 {
|
||||
font-size: 18px;
|
||||
margin: 0 0 16px 8px;
|
||||
}
|
||||
|
||||
.item-card {
|
||||
background: var(--surface);
|
||||
margin-bottom: 12px;
|
||||
padding: 16px;
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
transition: transform 0.2s;
|
||||
border-left: 4px solid var(--surface-light);
|
||||
}
|
||||
|
||||
.item-card.ready { border-left-color: var(--success); }
|
||||
.item-card.archived { opacity: 0.82; }
|
||||
|
||||
.history-section { margin-top: 26px; }
|
||||
.history-note {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
margin: 0 0 12px 8px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.item-info { display: flex; flex-direction: column; }
|
||||
.item-name { font-weight: 600; font-size: 16px; }
|
||||
.item-meta { font-size: 12px; color: var(--text-muted); }
|
||||
|
||||
.item-qty {
|
||||
background: var(--surface-light);
|
||||
padding: 6px 12px;
|
||||
border-radius: 10px;
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
/* --- EMPTY STATE --- */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.empty-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.5; }
|
||||
|
||||
/* --- ANIMATIONS --- */
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
|
||||
.hidden { opacity: 0; visibility: hidden; pointer-events: none; display: none; }
|
||||
|
||||
.meta-footer {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="loadingScreen">
|
||||
<div class="loader-icon"></div>
|
||||
<div class="loader-text">
|
||||
<h2>Karczma Biesiada</h2>
|
||||
<div class="loader-msg" id="loaderMsg">Łączenie z kuchnią...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1 class="logo-text">Karczma Biesiada</h1>
|
||||
<div id="tableLabel" class="table-badge">Wybierz stolik</div>
|
||||
</header>
|
||||
|
||||
<main id="mainContent">
|
||||
<section class="status-card">
|
||||
<div class="status-header">
|
||||
<div>
|
||||
<span class="status-title">Aktualny status</span>
|
||||
<div id="prepStatus" class="status-value">Oczekiwanie...</div>
|
||||
</div>
|
||||
<div id="statusIcon" style="font-size: 28px;">⏳</div>
|
||||
</div>
|
||||
|
||||
<div class="progress-container">
|
||||
<div id="progressBar" class="progress-bar"></div>
|
||||
</div>
|
||||
|
||||
<div id="statusMeta" style="font-size: 12px; color: var(--text-muted);">
|
||||
Sprawdzamy co pysznego się przygotowuje...
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="items-container">
|
||||
<h3>Twoje zamówione dania</h3>
|
||||
<div id="emptyState" class="empty-state hidden">
|
||||
<div class="empty-icon">🍽️</div>
|
||||
<p style="color: var(--text-muted)">Aktualnie nie przygotowujemy niczego dla tego stolika.</p>
|
||||
<p style="font-size: 14px">Jeśli właśnie złożyłeś zamówienie, daj nam chwilkę na jego przetworzenie.</p>
|
||||
</div>
|
||||
<div id="itemsList"></div>
|
||||
</section>
|
||||
|
||||
<section id="historySection" class="items-container history-section hidden">
|
||||
<h3>Twoje poprzednie zamówienia</h3>
|
||||
<p class="history-note">To są pozycje z innych wizyt, które były widoczne na tym telefonie po zeskanowaniu kodów QR. Jeśli kiedyś byłeś w restauracji bez skanowania kodu, tych pozycji tu nie będzie 🙂</p>
|
||||
<div id="historyList"></div>
|
||||
</section>
|
||||
|
||||
<div id="metaFooter" class="meta-footer"></div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const params = new URLSearchParams(location.search);
|
||||
const tableParam = (params.get("table") || "").trim();
|
||||
|
||||
// UI Elements
|
||||
const loadingScreen = document.getElementById("loadingScreen");
|
||||
const loaderMsg = document.getElementById("loaderMsg");
|
||||
const tableLabel = document.getElementById("tableLabel");
|
||||
const prepStatus = document.getElementById("prepStatus");
|
||||
const progressBar = document.getElementById("progressBar");
|
||||
const statusMeta = document.getElementById("statusMeta");
|
||||
const itemsList = document.getElementById("itemsList");
|
||||
const emptyState = document.getElementById("emptyState");
|
||||
const metaFooter = document.getElementById("metaFooter");
|
||||
const statusIcon = document.getElementById("statusIcon");
|
||||
const storageKey = `stolik2_state_${(tableParam || "unknown").toLowerCase()}`;
|
||||
const historyKey = "stolik2_global_history";
|
||||
const historySection = document.getElementById("historySection");
|
||||
const historyList = document.getElementById("historyList");
|
||||
const SIX_MONTHS_MS = 180 * 24 * 60 * 60 * 1000;
|
||||
const HOT_WINDOW_MS = 5 * 60 * 60 * 1000;
|
||||
|
||||
// Dynamic Loader Messages
|
||||
const msgs = ["Rozgrzewamy piece...", "Szef kuchni sprawdza składniki...", "Łączenie z sercem restauracji...", "Prawie gotowe..."];
|
||||
let msgIdx = 0;
|
||||
const msgInterval = setInterval(() => {
|
||||
msgIdx = (msgIdx + 1) % msgs.length;
|
||||
loaderMsg.textContent = msgs[msgIdx];
|
||||
}, 4000);
|
||||
|
||||
// Initial State
|
||||
if (tableParam) {
|
||||
tableLabel.textContent = `Stolik ${tableParam}`;
|
||||
}
|
||||
|
||||
function updateUI(bills) {
|
||||
// Hide loader on first data
|
||||
loadingScreen.classList.add("hidden");
|
||||
clearInterval(msgInterval);
|
||||
|
||||
const allArticles = bills.flatMap(b => Array.isArray(b?.Articles) ? b.Articles : []);
|
||||
const items = mergeWithPersistedItems(allArticles);
|
||||
|
||||
if (items.length === 0) {
|
||||
showEmptyState();
|
||||
return;
|
||||
}
|
||||
|
||||
renderItems(items);
|
||||
updateStatus(bills, items);
|
||||
}
|
||||
|
||||
function detectTableCandidates(bill) {
|
||||
const remark = String(bill?.Remark || "");
|
||||
const description = String(bill?.Description || "").trim();
|
||||
|
||||
// 1) klasyczny format: "STOLIK 9", "STOLIK 11A"
|
||||
const stolikMatch = remark.match(/STOLIK\s*([0-9A-Z]+)/i);
|
||||
const fromRemark = stolikMatch ? stolikMatch[1].toLowerCase() : "";
|
||||
|
||||
// 2) czasem numer bywa w samym Description
|
||||
const fromDescription = description.toLowerCase();
|
||||
|
||||
return { fromRemark, fromDescription, remark: remark.toLowerCase() };
|
||||
}
|
||||
|
||||
function showEmptyState() {
|
||||
emptyState.classList.remove("hidden");
|
||||
itemsList.innerHTML = "";
|
||||
prepStatus.textContent = "Brak aktywnych zamówień";
|
||||
statusIcon.textContent = "🍃";
|
||||
progressBar.style.width = "0%";
|
||||
statusMeta.textContent = "Zapraszamy do złożenia zamówienia u kelnera.";
|
||||
}
|
||||
|
||||
function normalizeArticleName(rawName) {
|
||||
const name = String(rawName || "Pozycja");
|
||||
|
||||
// Usuwa gramatury typu: "300G", "250 G", "500/200/150G".
|
||||
const withoutWeight = name.replace(
|
||||
/\b\d+(?:[.,]\d+)?(?:\s*\/\s*\d+(?:[.,]\d+)?)*\s*[gG]\b/g,
|
||||
""
|
||||
);
|
||||
|
||||
return withoutWeight
|
||||
.replace(/\s{2,}/g, " ")
|
||||
.replace(/\s+([,.;:!?])/g, "$1")
|
||||
.trim() || "Pozycja";
|
||||
}
|
||||
|
||||
function loadPersistedItems() {
|
||||
try {
|
||||
const raw = localStorage.getItem(storageKey);
|
||||
if (!raw) return [];
|
||||
const parsed = JSON.parse(raw);
|
||||
return Array.isArray(parsed) ? parsed : [];
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
function savePersistedItems(items) {
|
||||
try {
|
||||
localStorage.setItem(storageKey, JSON.stringify(items));
|
||||
} catch {
|
||||
// brak miejsca/tryb prywatny
|
||||
}
|
||||
}
|
||||
|
||||
function loadGlobalHistory() {
|
||||
try {
|
||||
const raw = localStorage.getItem(historyKey);
|
||||
if (!raw) return [];
|
||||
const parsed = JSON.parse(raw);
|
||||
return Array.isArray(parsed) ? parsed : [];
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
function saveGlobalHistory(entries) {
|
||||
const now = Date.now();
|
||||
const cleaned = entries
|
||||
.filter((e) => e && e.name && Number.isFinite(e.archivedAt))
|
||||
.filter((e) => (now - e.archivedAt) <= SIX_MONTHS_MS);
|
||||
|
||||
try {
|
||||
localStorage.setItem(historyKey, JSON.stringify(cleaned));
|
||||
} catch {
|
||||
// ignore storage errors
|
||||
}
|
||||
}
|
||||
|
||||
function addItemsToGlobalHistory(items, sourceTable) {
|
||||
if (!items.length) return;
|
||||
const now = Date.now();
|
||||
const existing = loadGlobalHistory();
|
||||
|
||||
// zapobiegamy dokładnym duplikatom (ta sama nazwa + qty + stół blisko czasu)
|
||||
const dedupWindowMs = 2 * 60 * 1000;
|
||||
const toAdd = items.filter((item) => {
|
||||
return !existing.some((h) =>
|
||||
h.name === item.name &&
|
||||
Number(h.qty) === Number(item.qty) &&
|
||||
String(h.sourceTable || "") === String(sourceTable || "") &&
|
||||
Math.abs((h.archivedAt || 0) - now) <= dedupWindowMs
|
||||
);
|
||||
}).map((item) => ({
|
||||
name: item.name,
|
||||
qty: item.qty,
|
||||
sourceTable: sourceTable || "?",
|
||||
archivedAt: now
|
||||
}));
|
||||
|
||||
if (!toAdd.length) return;
|
||||
saveGlobalHistory([...existing, ...toAdd]);
|
||||
}
|
||||
|
||||
function renderGlobalHistory() {
|
||||
const now = Date.now();
|
||||
const history = loadGlobalHistory()
|
||||
.filter((e) => (now - (e.archivedAt || 0)) <= SIX_MONTHS_MS)
|
||||
.sort((a, b) => (b.archivedAt || 0) - (a.archivedAt || 0));
|
||||
|
||||
saveGlobalHistory(history);
|
||||
|
||||
if (!history.length) {
|
||||
historySection.classList.add("hidden");
|
||||
historyList.innerHTML = "";
|
||||
return;
|
||||
}
|
||||
|
||||
historySection.classList.remove("hidden");
|
||||
historyList.innerHTML = "";
|
||||
|
||||
history.forEach((entry) => {
|
||||
const dt = new Date(entry.archivedAt || Date.now());
|
||||
const div = document.createElement("div");
|
||||
div.className = "item-card archived ready";
|
||||
div.innerHTML = `
|
||||
<div class="item-info">
|
||||
<span class="item-name">${entry.name}</span>
|
||||
<span class="item-meta">Stolik ${entry.sourceTable || "?"} • ${dt.toLocaleDateString("pl-PL")} ${dt.toLocaleTimeString([], {hour:'2-digit', minute:'2-digit'})}</span>
|
||||
</div>
|
||||
<div class="item-qty">x${entry.qty}</div>
|
||||
`;
|
||||
historyList.appendChild(div);
|
||||
});
|
||||
}
|
||||
|
||||
function mergeWithPersistedItems(articles) {
|
||||
const current = new Map();
|
||||
|
||||
articles.forEach(a => {
|
||||
const name = normalizeArticleName(a.Name);
|
||||
const todo = parseFloat(String(a.QuantityToDo || a.QuantitySet || "0").replace(",","."));
|
||||
const done = parseFloat(String(a.QuantityDone || "0").replace(",","."));
|
||||
|
||||
if (!current.has(name)) {
|
||||
current.set(name, { name, qty: 0, done: 0, present: true, completedByDisappear: false });
|
||||
}
|
||||
const curr = current.get(name);
|
||||
curr.qty += Number.isFinite(todo) ? todo : 0;
|
||||
curr.done += Number.isFinite(done) ? done : 0;
|
||||
});
|
||||
|
||||
const persisted = loadPersistedItems();
|
||||
const persistedMap = new Map(persisted.map(i => [i.name, i]));
|
||||
const merged = [];
|
||||
|
||||
// Aktualnie obecne pozycje z WS
|
||||
current.forEach((item) => {
|
||||
merged.push({
|
||||
...item,
|
||||
present: true,
|
||||
completedByDisappear: false,
|
||||
updatedAt: Date.now()
|
||||
});
|
||||
});
|
||||
|
||||
// Pozycje, które były wcześniej, ale zniknęły z WS -> zostają jako gotowe
|
||||
persistedMap.forEach((oldItem, name) => {
|
||||
if (current.has(name)) return;
|
||||
const qty = Number.isFinite(oldItem?.qty) ? oldItem.qty : 0;
|
||||
const archivedAt = Number.isFinite(oldItem?.archivedAt) ? oldItem.archivedAt : Date.now();
|
||||
const shouldMoveToGlobal = (Date.now() - archivedAt) > HOT_WINDOW_MS;
|
||||
|
||||
if (shouldMoveToGlobal) {
|
||||
addItemsToGlobalHistory([{ name, qty }], tableParam);
|
||||
return;
|
||||
}
|
||||
|
||||
merged.push({
|
||||
name,
|
||||
qty,
|
||||
done: qty,
|
||||
present: false,
|
||||
completedByDisappear: true,
|
||||
archivedAt,
|
||||
updatedAt: Date.now()
|
||||
});
|
||||
});
|
||||
|
||||
// Aktywne na górze, gotowe (zniknięte) na dole
|
||||
merged.sort((a, b) => {
|
||||
if (a.present !== b.present) return a.present ? -1 : 1;
|
||||
return a.name.localeCompare(b.name, "pl");
|
||||
});
|
||||
|
||||
savePersistedItems(merged);
|
||||
return merged;
|
||||
}
|
||||
|
||||
function renderItems(items) {
|
||||
emptyState.classList.add("hidden");
|
||||
itemsList.innerHTML = "";
|
||||
|
||||
items.forEach((item) => {
|
||||
const isReady = item.done >= item.qty && item.qty > 0;
|
||||
const div = document.createElement("div");
|
||||
div.className = `item-card ${isReady ? 'ready' : ''} ${item.present ? '' : 'archived'}`;
|
||||
|
||||
let meta = "🔥 W przygotowaniu";
|
||||
if (isReady && item.completedByDisappear) {
|
||||
meta = "✅ Gotowe (zrealizowane)";
|
||||
} else if (isReady) {
|
||||
meta = "✅ Gotowe";
|
||||
}
|
||||
|
||||
div.innerHTML = `
|
||||
<div class="item-info">
|
||||
<span class="item-name">${item.name}</span>
|
||||
<span class="item-meta">${meta}</span>
|
||||
</div>
|
||||
<div class="item-qty">x${item.qty}</div>
|
||||
`;
|
||||
itemsList.appendChild(div);
|
||||
});
|
||||
|
||||
renderGlobalHistory();
|
||||
}
|
||||
|
||||
function updateStatus(bills, items) {
|
||||
let total = 0;
|
||||
let done = 0;
|
||||
items.forEach(i => {
|
||||
total += Number.isFinite(i.qty) ? i.qty : 0;
|
||||
done += Number.isFinite(i.done) ? i.done : 0;
|
||||
});
|
||||
|
||||
const pct = total > 0 ? (done / total) * 100 : 0;
|
||||
progressBar.style.width = `${pct}%`;
|
||||
|
||||
if (pct >= 100) {
|
||||
prepStatus.textContent = "Gotowe do podania!";
|
||||
statusIcon.textContent = "😋";
|
||||
statusMeta.textContent = "Wszystkie Twoje dania opuściły już kuchnię.";
|
||||
} else if (pct > 0) {
|
||||
prepStatus.textContent = "Częściowo gotowe";
|
||||
statusIcon.textContent = "🍳";
|
||||
statusMeta.textContent = "Pierwsze pyszności już na Ciebie czekają!";
|
||||
} else {
|
||||
prepStatus.textContent = "W przygotowaniu";
|
||||
statusIcon.textContent = "👨🍳";
|
||||
statusMeta.textContent = "Twoje zamówienie jest właśnie tworzone przez naszych kucharzy.";
|
||||
}
|
||||
|
||||
// Footer meta
|
||||
const newest = [...bills].sort((a,b) => new Date(b?.Date || 0) - new Date(a?.Date || 0))[0];
|
||||
const time = newest?.Date
|
||||
? new Date(newest.Date).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})
|
||||
: "--:--";
|
||||
metaFooter.textContent = `Zamówienie złożone o godzinie ${time} • Stolik ${tableParam}`;
|
||||
}
|
||||
|
||||
// WebSocket Logic
|
||||
function connect() {
|
||||
const proto = location.protocol === "https:" ? "wss" : "ws";
|
||||
const ws = new WebSocket(`${proto}://${location.host}/ws`);
|
||||
|
||||
ws.onmessage = (evt) => {
|
||||
try {
|
||||
const data = JSON.parse(evt.data);
|
||||
const parsed = data?.parsed;
|
||||
if (!parsed || !Array.isArray(parsed.Bills)) return;
|
||||
|
||||
if (!tableParam) {
|
||||
updateUI([]);
|
||||
return;
|
||||
}
|
||||
|
||||
const myTable = tableParam.toLowerCase();
|
||||
const matches = parsed.Bills.filter(b => {
|
||||
const c = detectTableCandidates(b);
|
||||
return (
|
||||
c.fromRemark === myTable ||
|
||||
c.fromDescription === myTable ||
|
||||
c.remark.includes(`stolik ${myTable}`)
|
||||
);
|
||||
});
|
||||
|
||||
updateUI(matches);
|
||||
} catch (e) { console.error("Data error", e); }
|
||||
};
|
||||
|
||||
ws.onclose = () => setTimeout(connect, 3000); // Auto-reconnect
|
||||
ws.onerror = () => {
|
||||
loaderMsg.textContent = "Problem z połączeniem. Próbujemy ponownie...";
|
||||
};
|
||||
}
|
||||
|
||||
connect();
|
||||
|
||||
// Fallback: If no data after 25s, show empty state anyway
|
||||
setTimeout(() => {
|
||||
if (!loadingScreen.classList.contains("hidden")) {
|
||||
updateUI([]);
|
||||
}
|
||||
}, 25000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
518
public/stolik2 copy.html
Normal file
518
public/stolik2 copy.html
Normal file
@@ -0,0 +1,518 @@
|
||||
<!doctype html>
|
||||
<html lang="pl">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Karczma Biesiada – Twoje Zamówienie</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--primary: #e2b07e; /* Ciepłe złoto/miedź */
|
||||
--bg: #0f0f11;
|
||||
--surface: #1c1c1f;
|
||||
--surface-light: #2c2c2e;
|
||||
--text-main: #ffffff;
|
||||
--text-muted: #9a9a9e;
|
||||
--success: #4ade80;
|
||||
--accent: #f59e0b;
|
||||
--radius: 20px;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||
background-color: var(--bg);
|
||||
color: var(--text-main);
|
||||
line-height: 1.6;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* --- LOADER SCREEN --- */
|
||||
#loadingScreen {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 100;
|
||||
background: var(--bg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px;
|
||||
text-align: center;
|
||||
transition: opacity 0.5s ease, visibility 0.5s;
|
||||
}
|
||||
|
||||
.loader-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border: 3px solid var(--surface-light);
|
||||
border-top: 3px solid var(--primary);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.loader-text h2 {
|
||||
font-family: 'Playfair Display', serif;
|
||||
margin: 0 0 8px;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.loader-msg { color: var(--text-muted); font-size: 14px; min-height: 20px; }
|
||||
|
||||
/* --- MAIN LAYOUT --- */
|
||||
.container {
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
padding: 24px 16px 100px;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 28px;
|
||||
margin: 0;
|
||||
background: linear-gradient(to right, #fff, var(--primary));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.table-badge {
|
||||
display: inline-block;
|
||||
background: var(--surface-light);
|
||||
padding: 6px 16px;
|
||||
border-radius: 99px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
margin-top: 8px;
|
||||
color: var(--primary);
|
||||
border: 1px solid rgba(226, 176, 126, 0.2);
|
||||
}
|
||||
|
||||
/* --- STATUS CARD --- */
|
||||
.status-card {
|
||||
background: var(--surface);
|
||||
border-radius: var(--radius);
|
||||
padding: 24px;
|
||||
margin-bottom: 24px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 20px 40px rgba(0,0,0,0.4);
|
||||
border: 1px solid rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
.status-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.status-title {
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
color: var(--text-muted);
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.status-value {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
height: 8px;
|
||||
background: var(--surface-light);
|
||||
border-radius: 10px;
|
||||
margin: 15px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
background: linear-gradient(90deg, var(--primary), var(--accent));
|
||||
box-shadow: 0 0 15px rgba(226, 176, 126, 0.4);
|
||||
transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* --- ITEMS LIST --- */
|
||||
.items-container h3 {
|
||||
font-size: 18px;
|
||||
margin: 0 0 16px 8px;
|
||||
}
|
||||
|
||||
.item-card {
|
||||
background: var(--surface);
|
||||
margin-bottom: 12px;
|
||||
padding: 16px;
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
transition: transform 0.2s;
|
||||
border-left: 4px solid var(--surface-light);
|
||||
}
|
||||
|
||||
.item-card.ready { border-left-color: var(--success); }
|
||||
.item-card.archived { opacity: 0.82; }
|
||||
|
||||
.item-info { display: flex; flex-direction: column; }
|
||||
.item-name { font-weight: 600; font-size: 16px; }
|
||||
.item-meta { font-size: 12px; color: var(--text-muted); }
|
||||
|
||||
.item-qty {
|
||||
background: var(--surface-light);
|
||||
padding: 6px 12px;
|
||||
border-radius: 10px;
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
/* --- EMPTY STATE --- */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.empty-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.5; }
|
||||
|
||||
/* --- ANIMATIONS --- */
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
|
||||
.hidden { opacity: 0; visibility: hidden; pointer-events: none; display: none; }
|
||||
|
||||
.meta-footer {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="loadingScreen">
|
||||
<div class="loader-icon"></div>
|
||||
<div class="loader-text">
|
||||
<h2>Karczma Biesiada</h2>
|
||||
<div class="loader-msg" id="loaderMsg">Łączenie z kuchnią...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1 class="logo-text">Karczma Biesiada</h1>
|
||||
<div id="tableLabel" class="table-badge">Wybierz stolik</div>
|
||||
</header>
|
||||
|
||||
<main id="mainContent">
|
||||
<section class="status-card">
|
||||
<div class="status-header">
|
||||
<div>
|
||||
<span class="status-title">Aktualny status</span>
|
||||
<div id="prepStatus" class="status-value">Oczekiwanie...</div>
|
||||
</div>
|
||||
<div id="statusIcon" style="font-size: 28px;">⏳</div>
|
||||
</div>
|
||||
|
||||
<div class="progress-container">
|
||||
<div id="progressBar" class="progress-bar"></div>
|
||||
</div>
|
||||
|
||||
<div id="statusMeta" style="font-size: 12px; color: var(--text-muted);">
|
||||
Sprawdzamy co pysznego się przygotowuje...
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="items-container">
|
||||
<h3>Twoje zamówione dania</h3>
|
||||
<div id="emptyState" class="empty-state hidden">
|
||||
<div class="empty-icon">🍽️</div>
|
||||
<p style="color: var(--text-muted)">Aktualnie nie przygotowujemy niczego dla tego stolika.</p>
|
||||
<p style="font-size: 14px">Jeśli właśnie złożyłeś zamówienie, daj nam chwilkę na jego przetworzenie.</p>
|
||||
</div>
|
||||
<div id="itemsList"></div>
|
||||
</section>
|
||||
|
||||
<div id="metaFooter" class="meta-footer"></div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const params = new URLSearchParams(location.search);
|
||||
const tableParam = (params.get("table") || "").trim();
|
||||
|
||||
// UI Elements
|
||||
const loadingScreen = document.getElementById("loadingScreen");
|
||||
const loaderMsg = document.getElementById("loaderMsg");
|
||||
const tableLabel = document.getElementById("tableLabel");
|
||||
const prepStatus = document.getElementById("prepStatus");
|
||||
const progressBar = document.getElementById("progressBar");
|
||||
const statusMeta = document.getElementById("statusMeta");
|
||||
const itemsList = document.getElementById("itemsList");
|
||||
const emptyState = document.getElementById("emptyState");
|
||||
const metaFooter = document.getElementById("metaFooter");
|
||||
const statusIcon = document.getElementById("statusIcon");
|
||||
const storageKey = `stolik2_state_${(tableParam || "unknown").toLowerCase()}`;
|
||||
|
||||
// Dynamic Loader Messages
|
||||
const msgs = ["Rozgrzewamy piece...", "Szef kuchni sprawdza składniki...", "Łączenie z sercem restauracji...", "Prawie gotowe..."];
|
||||
let msgIdx = 0;
|
||||
const msgInterval = setInterval(() => {
|
||||
msgIdx = (msgIdx + 1) % msgs.length;
|
||||
loaderMsg.textContent = msgs[msgIdx];
|
||||
}, 4000);
|
||||
|
||||
// Initial State
|
||||
if (tableParam) {
|
||||
tableLabel.textContent = `Stolik ${tableParam}`;
|
||||
}
|
||||
|
||||
function updateUI(bills) {
|
||||
// Hide loader on first data
|
||||
loadingScreen.classList.add("hidden");
|
||||
clearInterval(msgInterval);
|
||||
|
||||
const allArticles = bills.flatMap(b => Array.isArray(b?.Articles) ? b.Articles : []);
|
||||
const items = mergeWithPersistedItems(allArticles);
|
||||
|
||||
if (items.length === 0) {
|
||||
showEmptyState();
|
||||
return;
|
||||
}
|
||||
|
||||
renderItems(items);
|
||||
updateStatus(bills, items);
|
||||
}
|
||||
|
||||
function detectTableCandidates(bill) {
|
||||
const remark = String(bill?.Remark || "");
|
||||
const description = String(bill?.Description || "").trim();
|
||||
|
||||
// 1) klasyczny format: "STOLIK 9", "STOLIK 11A"
|
||||
const stolikMatch = remark.match(/STOLIK\s*([0-9A-Z]+)/i);
|
||||
const fromRemark = stolikMatch ? stolikMatch[1].toLowerCase() : "";
|
||||
|
||||
// 2) czasem numer bywa w samym Description
|
||||
const fromDescription = description.toLowerCase();
|
||||
|
||||
return { fromRemark, fromDescription, remark: remark.toLowerCase() };
|
||||
}
|
||||
|
||||
function showEmptyState() {
|
||||
emptyState.classList.remove("hidden");
|
||||
itemsList.innerHTML = "";
|
||||
prepStatus.textContent = "Brak aktywnych zamówień";
|
||||
statusIcon.textContent = "🍃";
|
||||
progressBar.style.width = "0%";
|
||||
statusMeta.textContent = "Zapraszamy do złożenia zamówienia u kelnera.";
|
||||
}
|
||||
|
||||
function normalizeArticleName(rawName) {
|
||||
const name = String(rawName || "Pozycja");
|
||||
|
||||
// Usuwa gramatury typu: "300G", "250 G", "500/200/150G".
|
||||
const withoutWeight = name.replace(
|
||||
/\b\d+(?:[.,]\d+)?(?:\s*\/\s*\d+(?:[.,]\d+)?)*\s*[gG]\b/g,
|
||||
""
|
||||
);
|
||||
|
||||
return withoutWeight
|
||||
.replace(/\s{2,}/g, " ")
|
||||
.replace(/\s+([,.;:!?])/g, "$1")
|
||||
.trim() || "Pozycja";
|
||||
}
|
||||
|
||||
function loadPersistedItems() {
|
||||
try {
|
||||
const raw = localStorage.getItem(storageKey);
|
||||
if (!raw) return [];
|
||||
const parsed = JSON.parse(raw);
|
||||
return Array.isArray(parsed) ? parsed : [];
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
function savePersistedItems(items) {
|
||||
try {
|
||||
localStorage.setItem(storageKey, JSON.stringify(items));
|
||||
} catch {
|
||||
// brak miejsca/tryb prywatny
|
||||
}
|
||||
}
|
||||
|
||||
function mergeWithPersistedItems(articles) {
|
||||
const current = new Map();
|
||||
|
||||
articles.forEach(a => {
|
||||
const name = normalizeArticleName(a.Name);
|
||||
const todo = parseFloat(String(a.QuantityToDo || a.QuantitySet || "0").replace(",","."));
|
||||
const done = parseFloat(String(a.QuantityDone || "0").replace(",","."));
|
||||
|
||||
if (!current.has(name)) {
|
||||
current.set(name, { name, qty: 0, done: 0, present: true, completedByDisappear: false });
|
||||
}
|
||||
const curr = current.get(name);
|
||||
curr.qty += Number.isFinite(todo) ? todo : 0;
|
||||
curr.done += Number.isFinite(done) ? done : 0;
|
||||
});
|
||||
|
||||
const persisted = loadPersistedItems();
|
||||
const persistedMap = new Map(persisted.map(i => [i.name, i]));
|
||||
const merged = [];
|
||||
|
||||
// Aktualnie obecne pozycje z WS
|
||||
current.forEach((item) => {
|
||||
merged.push({
|
||||
...item,
|
||||
present: true,
|
||||
completedByDisappear: false,
|
||||
updatedAt: Date.now()
|
||||
});
|
||||
});
|
||||
|
||||
// Pozycje, które były wcześniej, ale zniknęły z WS -> zostają jako gotowe
|
||||
persistedMap.forEach((oldItem, name) => {
|
||||
if (current.has(name)) return;
|
||||
const qty = Number.isFinite(oldItem?.qty) ? oldItem.qty : 0;
|
||||
merged.push({
|
||||
name,
|
||||
qty,
|
||||
done: qty,
|
||||
present: false,
|
||||
completedByDisappear: true,
|
||||
updatedAt: Date.now()
|
||||
});
|
||||
});
|
||||
|
||||
// Aktywne na górze, gotowe (zniknięte) na dole
|
||||
merged.sort((a, b) => {
|
||||
if (a.present !== b.present) return a.present ? -1 : 1;
|
||||
return a.name.localeCompare(b.name, "pl");
|
||||
});
|
||||
|
||||
savePersistedItems(merged);
|
||||
return merged;
|
||||
}
|
||||
|
||||
function renderItems(items) {
|
||||
emptyState.classList.add("hidden");
|
||||
itemsList.innerHTML = "";
|
||||
|
||||
items.forEach((item) => {
|
||||
const isReady = item.done >= item.qty && item.qty > 0;
|
||||
const div = document.createElement("div");
|
||||
div.className = `item-card ${isReady ? 'ready' : ''} ${item.present ? '' : 'archived'}`;
|
||||
|
||||
let meta = "🔥 W przygotowaniu";
|
||||
if (isReady && item.completedByDisappear) {
|
||||
meta = "✅ Gotowe (zrealizowane)";
|
||||
} else if (isReady) {
|
||||
meta = "✅ Gotowe";
|
||||
}
|
||||
|
||||
div.innerHTML = `
|
||||
<div class="item-info">
|
||||
<span class="item-name">${item.name}</span>
|
||||
<span class="item-meta">${meta}</span>
|
||||
</div>
|
||||
<div class="item-qty">x${item.qty}</div>
|
||||
`;
|
||||
itemsList.appendChild(div);
|
||||
});
|
||||
}
|
||||
|
||||
function updateStatus(bills, items) {
|
||||
let total = 0;
|
||||
let done = 0;
|
||||
items.forEach(i => {
|
||||
total += Number.isFinite(i.qty) ? i.qty : 0;
|
||||
done += Number.isFinite(i.done) ? i.done : 0;
|
||||
});
|
||||
|
||||
const pct = total > 0 ? (done / total) * 100 : 0;
|
||||
progressBar.style.width = `${pct}%`;
|
||||
|
||||
if (pct >= 100) {
|
||||
prepStatus.textContent = "Gotowe do podania!";
|
||||
statusIcon.textContent = "😋";
|
||||
statusMeta.textContent = "Wszystkie Twoje dania opuściły już kuchnię.";
|
||||
} else if (pct > 0) {
|
||||
prepStatus.textContent = "Częściowo gotowe";
|
||||
statusIcon.textContent = "🍳";
|
||||
statusMeta.textContent = "Pierwsze pyszności już na Ciebie czekają!";
|
||||
} else {
|
||||
prepStatus.textContent = "W przygotowaniu";
|
||||
statusIcon.textContent = "👨🍳";
|
||||
statusMeta.textContent = "Twoje zamówienie jest właśnie tworzone przez naszych kucharzy.";
|
||||
}
|
||||
|
||||
// Footer meta
|
||||
const newest = [...bills].sort((a,b) => new Date(b?.Date || 0) - new Date(a?.Date || 0))[0];
|
||||
const time = newest?.Date
|
||||
? new Date(newest.Date).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})
|
||||
: "--:--";
|
||||
metaFooter.textContent = `Zamówienie złożone o godzinie ${time} • Stolik ${tableParam}`;
|
||||
}
|
||||
|
||||
// WebSocket Logic
|
||||
function connect() {
|
||||
const proto = location.protocol === "https:" ? "wss" : "ws";
|
||||
const ws = new WebSocket(`${proto}://${location.host}/ws`);
|
||||
|
||||
ws.onmessage = (evt) => {
|
||||
try {
|
||||
const data = JSON.parse(evt.data);
|
||||
const parsed = data?.parsed;
|
||||
if (!parsed || !Array.isArray(parsed.Bills)) return;
|
||||
|
||||
if (!tableParam) {
|
||||
updateUI([]);
|
||||
return;
|
||||
}
|
||||
|
||||
const myTable = tableParam.toLowerCase();
|
||||
const matches = parsed.Bills.filter(b => {
|
||||
const c = detectTableCandidates(b);
|
||||
return (
|
||||
c.fromRemark === myTable ||
|
||||
c.fromDescription === myTable ||
|
||||
c.remark.includes(`stolik ${myTable}`)
|
||||
);
|
||||
});
|
||||
|
||||
updateUI(matches);
|
||||
} catch (e) { console.error("Data error", e); }
|
||||
};
|
||||
|
||||
ws.onclose = () => setTimeout(connect, 3000); // Auto-reconnect
|
||||
ws.onerror = () => {
|
||||
loaderMsg.textContent = "Problem z połączeniem. Próbujemy ponownie...";
|
||||
};
|
||||
}
|
||||
|
||||
connect();
|
||||
|
||||
// Fallback: If no data after 25s, show empty state anyway
|
||||
setTimeout(() => {
|
||||
if (!loadingScreen.classList.contains("hidden")) {
|
||||
updateUI([]);
|
||||
}
|
||||
}, 25000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
1144
public/stolik2.html
Normal file
1144
public/stolik2.html
Normal file
File diff suppressed because it is too large
Load Diff
731
public/stolik3.html
Normal file
731
public/stolik3.html
Normal file
@@ -0,0 +1,731 @@
|
||||
<!doctype html>
|
||||
<html lang="pl">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
||||
<title>Karczma Biesiada</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--ink: #1a1410;
|
||||
--ink-2: #3d342b;
|
||||
--ink-3: #7a6d63;
|
||||
--cream: #faf7f2;
|
||||
--cream-2: #f2ede4;
|
||||
--cream-3: #e8e0d4;
|
||||
--gold: #c9a84c;
|
||||
--gold-lt: #f0d89a;
|
||||
--gold-dk: #8c6b22;
|
||||
--green: #2d5a3d;
|
||||
--green-lt: #e8f2eb;
|
||||
--amber: #b85c1a;
|
||||
--amber-lt: #faeee5;
|
||||
--r: 16px;
|
||||
}
|
||||
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
html {
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
font-size: 16px;
|
||||
color: var(--ink);
|
||||
background: var(--cream);
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100dvh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background:
|
||||
radial-gradient(ellipse 80% 40% at 50% 0%, rgba(201,168,76,.10) 0%, transparent 70%),
|
||||
var(--cream);
|
||||
}
|
||||
|
||||
/* ── HEADER ── */
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px 20px 0;
|
||||
animation: fadeDown .5s ease both;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
.brand-name {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
color: var(--ink);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.brand-tagline {
|
||||
font-size: 11px;
|
||||
font-weight: 300;
|
||||
color: var(--ink-3);
|
||||
letter-spacing: .06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.table-pill {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
background: var(--ink);
|
||||
color: var(--cream);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
padding: 6px 13px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.table-pill svg { opacity: .65; }
|
||||
|
||||
/* ── HERO ── */
|
||||
|
||||
.hero {
|
||||
padding: 36px 20px 28px;
|
||||
text-align: center;
|
||||
animation: fadeUp .55s .1s ease both;
|
||||
}
|
||||
|
||||
.hero-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
background: var(--cream-2);
|
||||
border: 1px solid var(--cream-3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 18px;
|
||||
transition: background .4s, border-color .4s;
|
||||
}
|
||||
|
||||
.hero-icon svg {
|
||||
width: 26px; height: 26px;
|
||||
transition: opacity .3s;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 26px;
|
||||
font-weight: 400;
|
||||
color: var(--ink);
|
||||
margin-bottom: 8px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.hero-sub {
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
color: var(--ink-3);
|
||||
line-height: 1.6;
|
||||
max-width: 280px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* ── STATUS BADGE ── */
|
||||
|
||||
.status-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 7px 15px;
|
||||
border-radius: 999px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
border: 1px solid transparent;
|
||||
transition: all .35s ease;
|
||||
}
|
||||
|
||||
.status-badge.s-idle {
|
||||
background: var(--cream-2);
|
||||
border-color: var(--cream-3);
|
||||
color: var(--ink-3);
|
||||
}
|
||||
.status-badge.s-cooking {
|
||||
background: var(--amber-lt);
|
||||
border-color: rgba(184,92,26,.25);
|
||||
color: var(--amber);
|
||||
}
|
||||
.status-badge.s-partial {
|
||||
background: #e8f0fa;
|
||||
border-color: rgba(59,100,180,.22);
|
||||
color: #2a5cb8;
|
||||
}
|
||||
.status-badge.s-done {
|
||||
background: var(--green-lt);
|
||||
border-color: rgba(45,90,61,.22);
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 7px; height: 7px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
.status-dot.pulse { animation: dotpulse 1.6s ease-in-out infinite; }
|
||||
|
||||
@keyframes dotpulse {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: .4; transform: scale(.65); }
|
||||
}
|
||||
|
||||
/* ── PROGRESS ── */
|
||||
|
||||
.progress-section {
|
||||
padding: 0 20px;
|
||||
margin-bottom: 8px;
|
||||
animation: fadeUp .5s .15s ease both;
|
||||
}
|
||||
|
||||
.progress-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: var(--ink-3);
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
.progress-track {
|
||||
height: 4px;
|
||||
background: var(--cream-3);
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: var(--green);
|
||||
border-radius: 999px;
|
||||
transition: width .6s cubic-bezier(.4, 0, .2, 1);
|
||||
}
|
||||
|
||||
/* ── LOADER ── */
|
||||
|
||||
.loader-section {
|
||||
margin: 8px 20px 0;
|
||||
padding: 28px 20px;
|
||||
border-radius: var(--r);
|
||||
border: 1px solid var(--cream-3);
|
||||
background: var(--cream-2);
|
||||
text-align: center;
|
||||
animation: fadeUp .5s .2s ease both;
|
||||
}
|
||||
|
||||
.loader-ring {
|
||||
width: 36px; height: 36px;
|
||||
margin: 0 auto 14px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--cream-3);
|
||||
border-top-color: var(--gold);
|
||||
animation: spin .85s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
|
||||
.loader-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--ink-2);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.loader-sub {
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
color: var(--ink-3);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* ── ITEMS CARD ── */
|
||||
|
||||
.items-card {
|
||||
margin: 14px 20px 0;
|
||||
border-radius: var(--r);
|
||||
border: 1px solid var(--cream-3);
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
animation: fadeUp .5s .2s ease both;
|
||||
}
|
||||
|
||||
.items-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14px 16px 12px;
|
||||
border-bottom: 1px solid var(--cream-3);
|
||||
}
|
||||
|
||||
.items-label {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: var(--ink-3);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .07em;
|
||||
}
|
||||
|
||||
.items-count {
|
||||
font-size: 12px;
|
||||
color: var(--ink-3);
|
||||
background: var(--cream-2);
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--cream-3);
|
||||
}
|
||||
|
||||
.order-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 13px 16px;
|
||||
border-bottom: 1px solid var(--cream-3);
|
||||
transition: background .15s;
|
||||
}
|
||||
|
||||
.order-row:last-child { border-bottom: none; }
|
||||
.order-row:active { background: var(--cream-2); }
|
||||
|
||||
.row-dot {
|
||||
width: 6px; height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--gold);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.row-name {
|
||||
flex: 1;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
color: var(--ink);
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.row-qty {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--ink-3);
|
||||
background: var(--cream-2);
|
||||
border: 1px solid var(--cream-3);
|
||||
border-radius: 6px;
|
||||
padding: 3px 9px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ── META TAGS ── */
|
||||
|
||||
.meta-row {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
padding: 14px 20px 0;
|
||||
animation: fadeUp .5s .3s ease both;
|
||||
}
|
||||
|
||||
.meta-tag {
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
color: var(--ink-3);
|
||||
background: var(--cream-2);
|
||||
border: 1px solid var(--cream-3);
|
||||
border-radius: 6px;
|
||||
padding: 3px 9px;
|
||||
}
|
||||
|
||||
/* ── FOOTER ── */
|
||||
|
||||
footer {
|
||||
margin-top: auto;
|
||||
padding: 28px 20px 24px;
|
||||
text-align: center;
|
||||
animation: fadeUp .5s .35s ease both;
|
||||
}
|
||||
|
||||
.footer-line {
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
color: var(--cream-3);
|
||||
}
|
||||
|
||||
.footer-divider {
|
||||
width: 32px;
|
||||
height: 1px;
|
||||
background: var(--cream-3);
|
||||
margin: 14px auto;
|
||||
}
|
||||
|
||||
.ws-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 11px;
|
||||
color: var(--ink-3);
|
||||
}
|
||||
|
||||
.ws-dot {
|
||||
width: 6px; height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--ink-3);
|
||||
}
|
||||
|
||||
.ws-dot.connected { background: var(--green); }
|
||||
.ws-dot.error { background: var(--amber); }
|
||||
|
||||
/* ── HELPERS ── */
|
||||
|
||||
.hidden { display: none !important; }
|
||||
|
||||
@keyframes fadeUp {
|
||||
from { opacity: 0; transform: translateY(14px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes fadeDown {
|
||||
from { opacity: 0; transform: translateY(-8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes itemIn {
|
||||
from { opacity: 0; transform: translateX(-10px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
|
||||
.order-row { animation: itemIn .35s ease both; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<div class="brand">
|
||||
<span class="brand-name">Karczma Biesiada</span>
|
||||
<span class="brand-tagline">Status zamówienia</span>
|
||||
</div>
|
||||
<div class="table-pill" id="tablePill">
|
||||
<svg width="12" height="12" viewBox="0 0 16 16" fill="none">
|
||||
<rect x="1" y="7" width="14" height="2" rx="1" fill="currentColor"/>
|
||||
<rect x="3" y="9" width="2" height="5" rx="1" fill="currentColor"/>
|
||||
<rect x="11" y="9" width="2" height="5" rx="1" fill="currentColor"/>
|
||||
</svg>
|
||||
<span id="tableLabel">Stolik —</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- HERO -->
|
||||
<div class="hero">
|
||||
<div class="hero-icon" id="heroIcon">
|
||||
<!-- icon swapped by JS -->
|
||||
<svg id="iconIdle" viewBox="0 0 24 24" fill="none" stroke="var(--ink-3)" stroke-width="1.5">
|
||||
<circle cx="12" cy="12" r="9"/>
|
||||
<path d="M12 7v5l3 2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<svg id="iconCooking" class="hidden" viewBox="0 0 24 24" fill="none" stroke="var(--amber)" stroke-width="1.5">
|
||||
<path d="M3 12c0-5 2-8 9-8s9 3 9 8" stroke-linecap="round"/>
|
||||
<path d="M3 12h18M12 12v6" stroke-linecap="round"/>
|
||||
<path d="M9 18h6" stroke-linecap="round"/>
|
||||
<path d="M8 5.5c0-1 .5-2 1-2.5M12 5c0-1 .5-2 1-2.5M16 5.5c0-1-.5-2-1-2.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<svg id="iconDone" class="hidden" viewBox="0 0 24 24" fill="none" stroke="var(--green)" stroke-width="1.5">
|
||||
<circle cx="12" cy="12" r="9"/>
|
||||
<path d="M8 12l3 3 5-5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h1 class="hero-title" id="heroTitle">Sprawdzamy…</h1>
|
||||
<p class="hero-sub" id="heroSub">Łączymy się z kuchnią. Chwileczkę.</p>
|
||||
<div class="status-wrap">
|
||||
<span class="status-badge s-idle" id="statusBadge">
|
||||
<span class="status-dot pulse" id="statusDot"></span>
|
||||
<span id="statusText">Łączenie</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PROGRESS -->
|
||||
<div class="progress-section hidden" id="progressSection">
|
||||
<div class="progress-meta">
|
||||
<span>Postęp przygotowania</span>
|
||||
<span id="progressPct">0%</span>
|
||||
</div>
|
||||
<div class="progress-track">
|
||||
<div class="progress-fill" id="progressFill" style="width:0%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- LOADER -->
|
||||
<div class="loader-section" id="loaderSection">
|
||||
<div class="loader-ring"></div>
|
||||
<div class="loader-title">Szukamy Twojego zamówienia</div>
|
||||
<div class="loader-sub">Łączymy się z kuchnią.<br>Może chwilkę potrwać.</div>
|
||||
</div>
|
||||
|
||||
<!-- ITEMS -->
|
||||
<div class="items-card hidden" id="itemsCard">
|
||||
<div class="items-header">
|
||||
<span class="items-label">Na rachunku</span>
|
||||
<span class="items-count" id="itemsCount">0 pozycji</span>
|
||||
</div>
|
||||
<div id="itemsList"></div>
|
||||
</div>
|
||||
|
||||
<!-- META -->
|
||||
<div class="meta-row hidden" id="metaRow"></div>
|
||||
|
||||
<footer>
|
||||
<div class="footer-divider"></div>
|
||||
<div class="ws-status">
|
||||
<span class="ws-dot" id="wsDot"></span>
|
||||
<span id="wsLabel">Rozłączono</span>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
/* ── HELPERS ── */
|
||||
|
||||
const $ = id => document.getElementById(id);
|
||||
const params = new URLSearchParams(location.search);
|
||||
const tableParam = (params.get("table") || "").trim();
|
||||
|
||||
// Set table label
|
||||
$("tableLabel").textContent = tableParam ? `Stolik\u00a0${tableParam}` : "Brak stolika";
|
||||
|
||||
function parseNum(v) {
|
||||
const n = parseFloat(String(v || "0").replace(",", "."));
|
||||
return Number.isFinite(n) ? n : 0;
|
||||
}
|
||||
|
||||
function detectTable(bill) {
|
||||
const t = `${bill?.Remark || ""} ${bill?.Description || ""}`;
|
||||
const m = t.match(/STOLIK\s*([0-9A-Z]+)/i);
|
||||
return m ? m[1] : "";
|
||||
}
|
||||
|
||||
function minutesAgo(iso) {
|
||||
const diff = Math.max(0, Math.floor((Date.now() - new Date(iso || Date.now())) / 60000));
|
||||
if (diff < 1) return "przed chwilą";
|
||||
if (diff === 1) return "1 min temu";
|
||||
if (diff < 5) return `${diff} min temu`;
|
||||
return `${diff} min temu`;
|
||||
}
|
||||
|
||||
/* ── RENDER STATES ── */
|
||||
|
||||
function setIcon(name) {
|
||||
["Idle","Cooking","Done"].forEach(n => $("icon"+n).classList.add("hidden"));
|
||||
$("icon"+name).classList.remove("hidden");
|
||||
}
|
||||
|
||||
function setHeroIcon(state) {
|
||||
const icon = $("heroIcon");
|
||||
icon.style.background = state === "done" ? "var(--green-lt)"
|
||||
: state === "cooking" || state === "partial" ? "var(--amber-lt)"
|
||||
: "var(--cream-2)";
|
||||
icon.style.borderColor = state === "done" ? "rgba(45,90,61,.2)"
|
||||
: state === "cooking" || state === "partial" ? "rgba(184,92,26,.2)"
|
||||
: "var(--cream-3)";
|
||||
if (state === "done") setIcon("Done");
|
||||
else if (state === "cooking" || state === "partial") setIcon("Cooking");
|
||||
else setIcon("Idle");
|
||||
}
|
||||
|
||||
function setStatus(state, text) {
|
||||
const badge = $("statusBadge");
|
||||
const dot = $("statusDot");
|
||||
badge.className = "status-badge";
|
||||
dot.className = "status-dot";
|
||||
if (state === "cooking") { badge.classList.add("s-cooking"); dot.classList.add("pulse"); }
|
||||
else if (state === "partial") { badge.classList.add("s-partial"); dot.classList.add("pulse"); }
|
||||
else if (state === "done") badge.classList.add("s-done");
|
||||
else badge.classList.add("s-idle");
|
||||
$("statusText").textContent = text;
|
||||
}
|
||||
|
||||
function setProgress(pct) {
|
||||
const p = Math.max(0, Math.min(100, pct));
|
||||
$("progressFill").style.width = p + "%";
|
||||
$("progressPct").textContent = Math.round(p) + "%";
|
||||
}
|
||||
|
||||
function showEl(id, show) {
|
||||
$(id).classList.toggle("hidden", !show);
|
||||
}
|
||||
|
||||
/* ── RENDER BILLS ── */
|
||||
|
||||
function renderBills(bills) {
|
||||
// Hide loader
|
||||
showEl("loaderSection", false);
|
||||
|
||||
if (!bills.length) {
|
||||
setHeroIcon("idle");
|
||||
$("heroTitle").textContent = "Cisza w kuchni";
|
||||
$("heroSub").textContent = "Aktualnie nie mamy aktywnego zamówienia dla tego stolika.";
|
||||
setStatus("idle", "Brak zamówienia");
|
||||
showEl("progressSection", false);
|
||||
showEl("itemsCard", false);
|
||||
showEl("metaRow", false);
|
||||
return;
|
||||
}
|
||||
|
||||
const allArticles = bills.flatMap(b => Array.isArray(b?.Articles) ? b.Articles : []);
|
||||
|
||||
if (!allArticles.length) {
|
||||
setHeroIcon("cooking");
|
||||
$("heroTitle").textContent = "Gotujemy dla Ciebie";
|
||||
$("heroSub").textContent = "Zamówienie przyjęte — kuchnia właśnie zaczyna.";
|
||||
setStatus("cooking", "W trakcie przygotowywania");
|
||||
showEl("progressSection", true);
|
||||
setProgress(0);
|
||||
showEl("itemsCard", false);
|
||||
showEl("metaRow", false);
|
||||
return;
|
||||
}
|
||||
|
||||
// Group items
|
||||
const grouped = new Map();
|
||||
let sumTodo = 0, sumDone = 0;
|
||||
|
||||
for (const a of allArticles) {
|
||||
const name = (a.Name || "Pozycja").trim();
|
||||
const qty = parseNum(a.QuantityToDo || a.QuantitySet || "1");
|
||||
const done = parseNum(a.QuantityDone || "0");
|
||||
sumTodo += qty;
|
||||
sumDone += done;
|
||||
grouped.set(name, (grouped.get(name) || 0) + qty);
|
||||
}
|
||||
|
||||
const progress = sumTodo > 0 ? (sumDone / sumTodo) * 100 : 0;
|
||||
|
||||
// Render list
|
||||
const list = $("itemsList");
|
||||
list.innerHTML = "";
|
||||
[...grouped.entries()].forEach(([name, qty], i) => {
|
||||
const row = document.createElement("div");
|
||||
row.className = "order-row";
|
||||
row.style.animationDelay = (i * 0.05) + "s";
|
||||
row.innerHTML = `
|
||||
<span class="row-dot"></span>
|
||||
<span class="row-name">${name}</span>
|
||||
<span class="row-qty">× ${qty % 1 === 0 ? qty.toFixed(0) : qty.toFixed(2)}</span>
|
||||
`;
|
||||
list.appendChild(row);
|
||||
});
|
||||
|
||||
const count = grouped.size;
|
||||
$("itemsCount").textContent = count + (count === 1 ? " pozycja" : count < 5 ? " pozycje" : " pozycji");
|
||||
|
||||
// Status
|
||||
if (sumDone >= sumTodo && sumTodo > 0) {
|
||||
setHeroIcon("done");
|
||||
$("heroTitle").textContent = "Smacznego!";
|
||||
$("heroSub").textContent = "Wszystko gotowe. Kelner zaraz do Was dotrze.";
|
||||
setStatus("done", "Gotowe do podania");
|
||||
} else if (sumDone > 0) {
|
||||
setHeroIcon("partial");
|
||||
$("heroTitle").textContent = "Część już jedzie!";
|
||||
$("heroSub").textContent = "Kilka pozycji gotowych — reszta zaraz będzie.";
|
||||
setStatus("partial", "Część gotowa do podania");
|
||||
} else {
|
||||
setHeroIcon("cooking");
|
||||
$("heroTitle").textContent = "Gotujemy dla Ciebie";
|
||||
$("heroSub").textContent = "Kuchnia pracuje nad Twoim zamówieniem.";
|
||||
setStatus("cooking", "W trakcie przygotowywania");
|
||||
}
|
||||
|
||||
showEl("progressSection", true);
|
||||
setProgress(progress);
|
||||
showEl("itemsCard", true);
|
||||
|
||||
// Meta
|
||||
const sorted = [...bills].sort((a, b) => new Date(a?.Date || 0) - new Date(b?.Date || 0));
|
||||
const first = sorted[0];
|
||||
const nums = bills.map(b => b?.Description).filter(Boolean).join(", ");
|
||||
const metaRow = $("metaRow");
|
||||
metaRow.innerHTML = [
|
||||
`Stolik ${tableParam}`,
|
||||
nums ? `Nr: ${nums}` : null,
|
||||
first?.Date ? `Zamówiono ${minutesAgo(first.Date)}` : null,
|
||||
first?.Date ? `Godz. ${new Date(first.Date).toLocaleTimeString("pl-PL", {hour:"2-digit", minute:"2-digit"})}` : null,
|
||||
].filter(Boolean).map(t => `<span class="meta-tag">${t}</span>`).join("");
|
||||
showEl("metaRow", true);
|
||||
}
|
||||
|
||||
/* ── WEBSOCKET ── */
|
||||
|
||||
function setWS(state) {
|
||||
const dot = $("wsDot");
|
||||
const lbl = $("wsLabel");
|
||||
dot.className = "ws-dot";
|
||||
if (state === "connected") { dot.classList.add("connected"); lbl.textContent = "Połączono z kuchnią"; }
|
||||
else if (state === "error") { dot.classList.add("error"); lbl.textContent = "Błąd połączenia"; }
|
||||
else { lbl.textContent = "Rozłączono"; }
|
||||
}
|
||||
|
||||
function handleMessage(parsed) {
|
||||
if (!parsed || parsed.Type !== "bills" || !Array.isArray(parsed.Bills)) return;
|
||||
|
||||
if (!tableParam) {
|
||||
showEl("loaderSection", false);
|
||||
$("heroTitle").textContent = "Brak numeru stolika";
|
||||
$("heroSub").textContent = "Użyj adresu z parametrem ?table=9";
|
||||
setStatus("idle", "Brak stolika");
|
||||
return;
|
||||
}
|
||||
|
||||
const norm = tableParam.toLowerCase();
|
||||
const matches = parsed.Bills.filter(b => detectTable(b).toLowerCase() === norm)
|
||||
.sort((a, b) => new Date(b?.Date || 0) - new Date(a?.Date || 0));
|
||||
|
||||
renderBills(matches);
|
||||
}
|
||||
|
||||
if (tableParam) {
|
||||
const proto = location.protocol === "https:" ? "wss" : "ws";
|
||||
const ws = new WebSocket(`${proto}://${location.host}/ws`);
|
||||
|
||||
ws.onopen = () => setWS("connected");
|
||||
|
||||
ws.onmessage = evt => {
|
||||
let data;
|
||||
try { data = JSON.parse(evt.data); } catch { return; }
|
||||
if (data.event === "snapshot" || data.event === "message") handleMessage(data.parsed);
|
||||
};
|
||||
|
||||
ws.onerror = () => {
|
||||
setWS("error");
|
||||
showEl("loaderSection", false);
|
||||
$("heroTitle").textContent = "Błąd połączenia";
|
||||
$("heroSub").textContent = "Nie udało się połączyć z kuchnią. Odśwież stronę.";
|
||||
setStatus("idle", "Błąd");
|
||||
};
|
||||
|
||||
ws.onclose = () => setWS("disconnected");
|
||||
|
||||
} else {
|
||||
// No table param
|
||||
showEl("loaderSection", false);
|
||||
$("heroTitle").textContent = "Brak numeru stolika";
|
||||
$("heroSub").textContent = "Zeskanuj kod QR przy swoim stoliku, aby zobaczyć zamówienie.";
|
||||
setStatus("idle", "Brak stolika");
|
||||
$("tableLabel").textContent = "Brak stolika";
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
174
server.js
Normal file
174
server.js
Normal file
@@ -0,0 +1,174 @@
|
||||
const path = require("path");
|
||||
const express = require("express");
|
||||
const WebSocket = require("ws");
|
||||
|
||||
const PORT = process.env.PORT || 3000;
|
||||
const UPSTREAM_URL = "wss://api.serwer.magico.pl/gastro_serwer";
|
||||
const WS_ORIGIN = process.env.WS_ORIGIN || "https://serwer.magico.pl";
|
||||
const WS_COOKIE = process.env.WS_COOKIE || "";
|
||||
const WS_ACCESS_TOKEN = process.env.WS_ACCESS_TOKEN || "d55323bbe5fe56e5a7b9ecf657979a6d5ac49d00";
|
||||
|
||||
const app = express();
|
||||
app.use(express.static(path.join(__dirname, "public")));
|
||||
|
||||
const browserClients = new Set();
|
||||
let upstream = null;
|
||||
let reconnectTimer = null;
|
||||
let lastBillsSnapshot = null;
|
||||
|
||||
function getDefaultInitMessages() {
|
||||
const list = [];
|
||||
|
||||
// Z obserwacji aplikacji źródłowej: najpierw token, potem ustawienie kierunku.
|
||||
if (WS_ACCESS_TOKEN) {
|
||||
list.push({ cmd: "token", access_token: WS_ACCESS_TOKEN });
|
||||
}
|
||||
|
||||
list.push({ cmd: "kierunek", kierunek: "all" });
|
||||
|
||||
// Dodatkowe żądania pobrania aktualnych rachunków.
|
||||
list.push(
|
||||
{ Type: "bills", kierunek: "all", type: "current" },
|
||||
{ type: "current", kierunek: "all" },
|
||||
{ action: "current" }
|
||||
);
|
||||
|
||||
return list;
|
||||
}
|
||||
|
||||
function getInitMessages() {
|
||||
const raw = process.env.INIT_MESSAGES;
|
||||
if (!raw) return getDefaultInitMessages();
|
||||
|
||||
try {
|
||||
const parsed = JSON.parse(raw);
|
||||
if (Array.isArray(parsed)) return parsed;
|
||||
} catch (err) {
|
||||
console.warn("[CONFIG] INIT_MESSAGES is invalid JSON, using defaults:", err.message);
|
||||
}
|
||||
|
||||
return getDefaultInitMessages();
|
||||
}
|
||||
|
||||
function broadcast(payload) {
|
||||
const text = JSON.stringify(payload);
|
||||
for (const client of browserClients) {
|
||||
if (client.readyState === WebSocket.OPEN) {
|
||||
client.send(text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function connectUpstream() {
|
||||
if (upstream && (upstream.readyState === WebSocket.OPEN || upstream.readyState === WebSocket.CONNECTING)) {
|
||||
return;
|
||||
}
|
||||
|
||||
console.log("[UPSTREAM] Connecting:", UPSTREAM_URL);
|
||||
|
||||
upstream = new WebSocket(UPSTREAM_URL, {
|
||||
headers: {
|
||||
Origin: WS_ORIGIN,
|
||||
"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/147.0.0.0 Safari/537.36",
|
||||
Pragma: "no-cache",
|
||||
"Cache-Control": "no-cache",
|
||||
...(WS_COOKIE ? { Cookie: WS_COOKIE } : {})
|
||||
}
|
||||
});
|
||||
|
||||
upstream.on("open", () => {
|
||||
console.log("[UPSTREAM] Connected");
|
||||
broadcast({ event: "status", connected: true, ts: Date.now() });
|
||||
|
||||
// W wielu implementacjach połączenie zwraca dane dopiero po żądaniu inicjalnym.
|
||||
for (const msg of getInitMessages()) {
|
||||
try {
|
||||
upstream.send(JSON.stringify(msg));
|
||||
console.log("[UPSTREAM] Sent init message:", msg);
|
||||
broadcast({ event: "sent", payload: msg, ts: Date.now() });
|
||||
} catch (err) {
|
||||
console.warn("[UPSTREAM] Failed to send init message:", err.message);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
upstream.on("message", (data) => {
|
||||
const raw = data.toString();
|
||||
let parsed = null;
|
||||
|
||||
try {
|
||||
parsed = JSON.parse(raw);
|
||||
} catch {
|
||||
// wiadomość może być nie-JSON
|
||||
}
|
||||
|
||||
if (parsed && parsed.Type === "bills" && Array.isArray(parsed.Bills)) {
|
||||
lastBillsSnapshot = {
|
||||
event: "snapshot",
|
||||
ts: Date.now(),
|
||||
parsed
|
||||
};
|
||||
}
|
||||
|
||||
broadcast({
|
||||
event: "message",
|
||||
ts: Date.now(),
|
||||
raw,
|
||||
parsed
|
||||
});
|
||||
});
|
||||
|
||||
upstream.on("close", (code, reasonBuffer) => {
|
||||
const reason = reasonBuffer ? reasonBuffer.toString() : "";
|
||||
console.log(`[UPSTREAM] Closed (${code}) ${reason}`);
|
||||
broadcast({ event: "status", connected: false, code, reason, ts: Date.now() });
|
||||
|
||||
clearTimeout(reconnectTimer);
|
||||
reconnectTimer = setTimeout(connectUpstream, 3000);
|
||||
});
|
||||
|
||||
upstream.on("error", (err) => {
|
||||
console.error("[UPSTREAM] Error:", err.message);
|
||||
broadcast({ event: "error", message: err.message, ts: Date.now() });
|
||||
});
|
||||
}
|
||||
|
||||
const server = app.listen(PORT, () => {
|
||||
console.log(`Viewer running at http://localhost:${PORT}`);
|
||||
connectUpstream();
|
||||
});
|
||||
|
||||
const wss = new WebSocket.Server({ server, path: "/ws" });
|
||||
|
||||
wss.on("connection", (socket) => {
|
||||
browserClients.add(socket);
|
||||
socket.send(JSON.stringify({ event: "status", connected: upstream?.readyState === WebSocket.OPEN, ts: Date.now() }));
|
||||
|
||||
if (lastBillsSnapshot) {
|
||||
socket.send(JSON.stringify(lastBillsSnapshot));
|
||||
}
|
||||
|
||||
socket.on("message", (raw) => {
|
||||
let data;
|
||||
try {
|
||||
data = JSON.parse(raw.toString());
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
|
||||
if (data.action === "sendUpstream" && data.payload && upstream?.readyState === WebSocket.OPEN) {
|
||||
try {
|
||||
const text = JSON.stringify(data.payload);
|
||||
upstream.send(text);
|
||||
console.log("[BROWSER->UPSTREAM]", text);
|
||||
broadcast({ event: "sent", payload: data.payload, ts: Date.now() });
|
||||
} catch (err) {
|
||||
socket.send(JSON.stringify({ event: "error", message: err.message, ts: Date.now() }));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
socket.on("close", () => {
|
||||
browserClients.delete(socket);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user