Compare commits
23 Commits
8824070547
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 03ed1f22e8 | |||
| b0c6bf37b8 | |||
| 52199477d5 | |||
| 2798c9d759 | |||
| d27071dbd3 | |||
| 9dcebb9d88 | |||
| 08eebd400b | |||
| 2b0216488d | |||
| 16cd3989a7 | |||
| 4b5cb19bd8 | |||
| 98ff934797 | |||
| 8d363088eb | |||
| d2371c85ff | |||
| 5a3943ae46 | |||
| a2e94baadc | |||
| bdcc1d7613 | |||
| 359778be51 | |||
| 3781e9adcf | |||
| 2e57253ac0 | |||
| 9a8efb5418 | |||
| 1bdc2b1438 | |||
| 8fe33095dd | |||
| 5a8abf08bd |
121
package-lock.json
generated
121
package-lock.json
generated
@ -11,18 +11,20 @@
|
||||
"@testing-library/jest-dom": "^5.17.0",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"animate.css": "^4.1.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-keep-alive": "^2.5.2",
|
||||
"react-modal": "^3.16.1",
|
||||
"react-router-dom": "^6.22.3",
|
||||
"react-router-dom": "^6.25.1",
|
||||
"react-scripts": "^5.0.1",
|
||||
"sass": "^1.70.0",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"stylelint": "^16.3.1",
|
||||
"stylelint": "^16.5.0",
|
||||
"stylelint-config-standard-scss": "^13.0.0",
|
||||
"stylelint-scss": "^6.2.1"
|
||||
"stylelint-scss": "^6.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@aashutoshrathi/word-wrap": {
|
||||
@ -3618,9 +3620,10 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@remix-run/router": {
|
||||
"version": "1.15.3",
|
||||
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz",
|
||||
"integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==",
|
||||
"version": "1.18.0",
|
||||
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.18.0.tgz",
|
||||
"integrity": "sha512-L3jkqmqoSVBVKHfpGZmLrex0lxR5SucGA0sUfFzGctehw+S/ggL9L/0NnC5mw6P8HUWpFZ3nQw3cRApjjWx9Sw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
}
|
||||
@ -4267,6 +4270,12 @@
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
|
||||
"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
|
||||
},
|
||||
"node_modules/@types/js-md5": {
|
||||
"version": "0.4.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/js-md5/-/js-md5-0.4.3.tgz",
|
||||
"integrity": "sha512-BIga/WEqTi35ccnGysOuO4RmwVnpajv9oDB/sDQSY2b7/Ac7RyYR30bv7otZwByMvOJV9Vqq6/O1DFAnOzE4Pg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/json-schema": {
|
||||
"version": "7.0.15",
|
||||
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
|
||||
@ -4970,6 +4979,11 @@
|
||||
"ajv": "^6.9.1"
|
||||
}
|
||||
},
|
||||
"node_modules/animate.css": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
|
||||
"integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
|
||||
},
|
||||
"node_modules/ansi-escapes": {
|
||||
"version": "4.3.2",
|
||||
"resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
|
||||
@ -6329,9 +6343,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/css-functions-list": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.1.tgz",
|
||||
"integrity": "sha512-Nj5YcaGgBtuUmn1D7oHqPW0c9iui7xsTsj5lIX8ZgevdfhmjFfKB3r8moHJtNJnctnYXJyYX5I1pp90HM4TPgQ==",
|
||||
"version": "3.2.2",
|
||||
"resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.2.tgz",
|
||||
"integrity": "sha512-c+N0v6wbKVxTu5gOBBFkr9BEdBWaqqjQeiJ8QvSRIJOf+UxlJh930m8e6/WNeODIK0mYLFkoONrnj16i2EcvfQ==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=12 || >=16"
|
||||
@ -8913,6 +8927,21 @@
|
||||
"he": "bin/he"
|
||||
}
|
||||
},
|
||||
"node_modules/hoist-non-react-statics": {
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
|
||||
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
|
||||
"license": "BSD-3-Clause",
|
||||
"dependencies": {
|
||||
"react-is": "^16.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/hoist-non-react-statics/node_modules/react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/hoopy": {
|
||||
"version": "0.1.4",
|
||||
"resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
|
||||
@ -11755,6 +11784,12 @@
|
||||
"jiti": "bin/jiti.js"
|
||||
}
|
||||
},
|
||||
"node_modules/js-md5": {
|
||||
"version": "0.7.3",
|
||||
"resolved": "https://registry.npmjs.org/js-md5/-/js-md5-0.7.3.tgz",
|
||||
"integrity": "sha512-ZC41vPSTLKGwIRjqDh8DfXoCrdQIyBgspJVPXHBGu4nZlAEvG3nf+jO9avM9RmLiGakg7vz974ms99nEV0tmTQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/js-tokens": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||
@ -14705,6 +14740,22 @@
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
|
||||
},
|
||||
"node_modules/react-keep-alive": {
|
||||
"version": "2.5.2",
|
||||
"resolved": "https://registry.npmjs.org/react-keep-alive/-/react-keep-alive-2.5.2.tgz",
|
||||
"integrity": "sha512-CoEsY5xE6rT31Z4p4UGZ/Crp0nZN+CY61ZflKzBGKB3D315jQMe2l8G5OrSEJ86V4stua7lSeFDIeG3DCuY2Rg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/js-md5": "^0.4.2",
|
||||
"hoist-non-react-statics": "^3.3.0",
|
||||
"js-md5": "^0.7.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.3.0",
|
||||
"react-dom": ">=16.3.0",
|
||||
"react-router-dom": ">=5.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-lifecycles-compat": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
|
||||
@ -14737,11 +14788,12 @@
|
||||
}
|
||||
},
|
||||
"node_modules/react-router": {
|
||||
"version": "6.22.3",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz",
|
||||
"integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==",
|
||||
"version": "6.25.1",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.25.1.tgz",
|
||||
"integrity": "sha512-u8ELFr5Z6g02nUtpPAggP73Jigj1mRePSwhS/2nkTrlPU5yEkH1vYzWNyvSnSzeeE2DNqWdH+P8OhIh9wuXhTw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@remix-run/router": "1.15.3"
|
||||
"@remix-run/router": "1.18.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
@ -14751,12 +14803,13 @@
|
||||
}
|
||||
},
|
||||
"node_modules/react-router-dom": {
|
||||
"version": "6.22.3",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz",
|
||||
"integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==",
|
||||
"version": "6.25.1",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.25.1.tgz",
|
||||
"integrity": "sha512-0tUDpbFvk35iv+N89dWNrJp+afLgd+y4VtorJZuOCXK0kkCWjEvb3vTJM++SYvMEpbVwXKf3FjeVveVEb6JpDQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@remix-run/router": "1.15.3",
|
||||
"react-router": "6.22.3"
|
||||
"@remix-run/router": "1.18.0",
|
||||
"react-router": "6.25.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
@ -16175,20 +16228,20 @@
|
||||
}
|
||||
},
|
||||
"node_modules/stylelint": {
|
||||
"version": "16.3.1",
|
||||
"resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.3.1.tgz",
|
||||
"integrity": "sha512-/JOwQnBvxEKOT2RtNgGpBVXnCSMBgKOL2k7w0K52htwCyJls4+cHvc4YZgXlVoAZS9QJd2DgYAiRnja96pTgxw==",
|
||||
"version": "16.5.0",
|
||||
"resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.5.0.tgz",
|
||||
"integrity": "sha512-IlCBtVrG+qTy3v+tZTk50W8BIomjY/RUuzdrDqdnlCYwVuzXtPbiGfxYqtyYAyOMcb+195zRsuHn6tgfPmFfbw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@csstools/css-parser-algorithms": "^2.6.1",
|
||||
"@csstools/css-tokenizer": "^2.2.4",
|
||||
"@csstools/media-query-list-parser": "^2.1.9",
|
||||
"@csstools/selector-specificity": "^3.0.2",
|
||||
"@csstools/selector-specificity": "^3.0.3",
|
||||
"@dual-bundle/import-meta-resolve": "^4.0.0",
|
||||
"balanced-match": "^2.0.0",
|
||||
"colord": "^2.9.3",
|
||||
"cosmiconfig": "^9.0.0",
|
||||
"css-functions-list": "^3.2.1",
|
||||
"css-functions-list": "^3.2.2",
|
||||
"css-tree": "^2.3.1",
|
||||
"debug": "^4.3.4",
|
||||
"fast-glob": "^3.3.2",
|
||||
@ -16217,7 +16270,7 @@
|
||||
"strip-ansi": "^7.1.0",
|
||||
"supports-hyperlinks": "^3.0.0",
|
||||
"svg-tags": "^1.0.0",
|
||||
"table": "^6.8.1",
|
||||
"table": "^6.8.2",
|
||||
"write-file-atomic": "^5.0.1"
|
||||
},
|
||||
"bin": {
|
||||
@ -16304,12 +16357,12 @@
|
||||
}
|
||||
},
|
||||
"node_modules/stylelint-scss": {
|
||||
"version": "6.2.1",
|
||||
"resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-6.2.1.tgz",
|
||||
"integrity": "sha512-ZoGLbVb1keZYRVGQlhB8G6sZOoNqw61whzzzGFWp05N12ErqLFfBv3JPrXiMLZaW98sBS7K/vUQhRnvUj4vwdw==",
|
||||
"version": "6.3.0",
|
||||
"resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-6.3.0.tgz",
|
||||
"integrity": "sha512-8OSpiuf1xC7f8kllJsBOFAOYp/mR/C1FXMVeOFjtJPw+AFvEmC93FaklHt7MlOqU4poxuQ1TkYMyfI0V+1SxjA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"known-css-properties": "^0.29.0",
|
||||
"known-css-properties": "^0.30.0",
|
||||
"postcss-media-query-parser": "^0.2.3",
|
||||
"postcss-resolve-nested-selector": "^0.1.1",
|
||||
"postcss-selector-parser": "^6.0.15",
|
||||
@ -16322,16 +16375,10 @@
|
||||
"stylelint": "^16.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/stylelint-scss/node_modules/known-css-properties": {
|
||||
"version": "0.29.0",
|
||||
"resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.29.0.tgz",
|
||||
"integrity": "sha512-Ne7wqW7/9Cz54PDt4I3tcV+hAyat8ypyOGzYRJQfdxnnjeWsTxt1cy8pjvvKeI5kfXuyvULyeeAvwvvtAX3ayQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/stylelint/node_modules/@csstools/selector-specificity": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.0.2.tgz",
|
||||
"integrity": "sha512-RpHaZ1h9LE7aALeQXmXrJkRG84ZxIsctEN2biEUmFyKpzFM3zZ35eUMcIzZFsw/2olQE6v69+esEqU2f1MKycg==",
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.1.1.tgz",
|
||||
"integrity": "sha512-a7cxGcJ2wIlMFLlh8z2ONm+715QkPHiyJcxwQlKOz/03GPw1COpfhcmC9wm4xlZfp//jWHNNMwzjtqHXVWU9KA==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
|
||||
@ -6,10 +6,12 @@
|
||||
"@testing-library/jest-dom": "^5.17.0",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"animate.css": "^4.1.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-keep-alive": "^2.5.2",
|
||||
"react-modal": "^3.16.1",
|
||||
"react-router-dom": "^6.22.3",
|
||||
"react-router-dom": "^6.25.1",
|
||||
"react-scripts": "^5.0.1",
|
||||
"sass": "^1.70.0",
|
||||
"web-vitals": "^2.1.4"
|
||||
@ -40,9 +42,9 @@
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"stylelint": "^16.3.1",
|
||||
"stylelint": "^16.5.0",
|
||||
"stylelint-config-standard-scss": "^13.0.0",
|
||||
"stylelint-scss": "^6.2.1"
|
||||
"stylelint-scss": "^6.3.0"
|
||||
},
|
||||
"stylelint": {
|
||||
"extends": [
|
||||
|
||||
@ -5,39 +5,27 @@
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>Belden Jukebox</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>Belden Jukebox UI</noscript>
|
||||
<noscript>
|
||||
<p>
|
||||
<b>Belden Jukebox Error:</b><br />
|
||||
JavaScript is required to run this application.<br />
|
||||
Please enable JavaScript in your browser.<br /><br />
|
||||
|
||||
<a
|
||||
href="https://www.enable-javascript.com/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Here are the instructions how to enable JavaScript in your web
|
||||
browser!
|
||||
</a>
|
||||
</p>
|
||||
</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
BIN
src/assets/images/default_qr.png
Normal file
BIN
src/assets/images/default_qr.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
BIN
src/assets/images/pic_cole.jpg
Normal file
BIN
src/assets/images/pic_cole.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 122 KiB |
BIN
src/assets/images/pic_dustin.jpg
Normal file
BIN
src/assets/images/pic_dustin.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 236 KiB |
BIN
src/assets/images/pic_elias.jpg
Normal file
BIN
src/assets/images/pic_elias.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
BIN
src/assets/images/pic_fannie.jpeg
Normal file
BIN
src/assets/images/pic_fannie.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
BIN
src/assets/images/pic_lucas.jpg
Normal file
BIN
src/assets/images/pic_lucas.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
BIN
src/assets/images/pic_natorion.jpg
Normal file
BIN
src/assets/images/pic_natorion.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
BIN
src/assets/images/pic_scarlett.jpg
Normal file
BIN
src/assets/images/pic_scarlett.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 183 KiB |
BIN
src/assets/images/qr_cole.png
Normal file
BIN
src/assets/images/qr_cole.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
BIN
src/assets/images/qr_dustin.png
Normal file
BIN
src/assets/images/qr_dustin.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
BIN
src/assets/images/qr_elias.png
Normal file
BIN
src/assets/images/qr_elias.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
BIN
src/assets/images/qr_fannie.png
Normal file
BIN
src/assets/images/qr_fannie.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
BIN
src/assets/images/qr_lucas.png
Normal file
BIN
src/assets/images/qr_lucas.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
BIN
src/assets/images/qr_natorion.png
Normal file
BIN
src/assets/images/qr_natorion.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
BIN
src/assets/images/qr_scarlett.png
Normal file
BIN
src/assets/images/qr_scarlett.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
@ -11,7 +11,7 @@ $white: #fff;
|
||||
180deg,
|
||||
rgb(0 37 84 / 100%) 0%,
|
||||
rgb(0 124 190 / 100%) 50%,
|
||||
rgb(255, 255, 255) 100%
|
||||
rgb(255 255 255) 100%
|
||||
);
|
||||
background-color: transparent;
|
||||
overflow-y: visible;
|
||||
@ -32,7 +32,6 @@ $white: #fff;
|
||||
}
|
||||
|
||||
.browse-image img {
|
||||
margin-top: 50px;
|
||||
width: auto;
|
||||
height: 200px;
|
||||
background-color: transparent;
|
||||
@ -50,6 +49,8 @@ $white: #fff;
|
||||
overflow: hidden;
|
||||
background-color: transparent;
|
||||
margin-bottom: 50px;
|
||||
animation: fadeInUp;
|
||||
animation-duration: 0.5s;
|
||||
}
|
||||
|
||||
.browse-title {
|
||||
@ -70,8 +71,8 @@ $white: #fff;
|
||||
height: 150px;
|
||||
background: linear-gradient(
|
||||
-30deg,
|
||||
rgb(187, 208, 236) 0%,
|
||||
rgba(255, 255, 255, 1) 100%
|
||||
rgb(187 208 236) 0%,
|
||||
rgb(255 255 255 / 100%) 100%
|
||||
);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -85,7 +86,7 @@ $white: #fff;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
|
||||
filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
|
||||
}
|
||||
|
||||
.browse-cable-image {
|
||||
@ -93,14 +94,15 @@ $white: #fff;
|
||||
height: 75%;
|
||||
margin-right: 25px;
|
||||
margin-left: 20px;
|
||||
background-color: transparent;
|
||||
background-color: white;
|
||||
border: $gray solid 1px;
|
||||
border-radius: 10px;
|
||||
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
|
||||
filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
|
||||
aspect-ratio: 1/1;
|
||||
}
|
||||
|
||||
.browse-cable-label {
|
||||
width: 90%;
|
||||
width: 83%;
|
||||
height: auto;
|
||||
background-color: transparent;
|
||||
}
|
||||
@ -144,10 +146,9 @@ $white: #fff;
|
||||
font-size: 15px;
|
||||
margin-bottom: 2px;
|
||||
color: $light-blue;
|
||||
color: $light-blue;
|
||||
width: auto;
|
||||
height: auto;
|
||||
font-family: "Gotham Medium";
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.browse-search {
|
||||
@ -155,8 +156,8 @@ $white: #fff;
|
||||
height: 50px;
|
||||
background: linear-gradient(
|
||||
-30deg,
|
||||
rgb(187, 208, 236) 0%,
|
||||
rgba(255, 255, 255, 1) 100%
|
||||
rgb(187 208 236) 0%,
|
||||
rgb(255 255 255 / 100%) 100%
|
||||
);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -169,7 +170,7 @@ $white: #fff;
|
||||
transition: all 0.3s ease-in-out;
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
|
||||
filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
|
||||
}
|
||||
|
||||
.browse-search input {
|
||||
|
||||
@ -11,7 +11,7 @@ $white: #fff;
|
||||
180deg,
|
||||
rgb(0 37 84 / 100%) 0%,
|
||||
rgb(0 124 190 / 100%) 50%,
|
||||
rgb(255, 255, 255) 100%
|
||||
rgb(255 255 255) 100%
|
||||
);
|
||||
background-color: transparent;
|
||||
overflow-y: visible;
|
||||
@ -48,6 +48,8 @@ $white: #fff;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background-color: transparent;
|
||||
animation: fadeInUp;
|
||||
animation-duration: 0.5s;
|
||||
}
|
||||
|
||||
.cable-main {
|
||||
@ -55,12 +57,12 @@ $white: #fff;
|
||||
height: 200px;
|
||||
background: linear-gradient(
|
||||
-30deg,
|
||||
rgb(187, 208, 236) 0%,
|
||||
rgba(255, 255, 255, 1) 100%
|
||||
rgb(187 208 236) 0%,
|
||||
rgb(255 255 255 / 100%) 100%
|
||||
);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
border-radius: 20px;
|
||||
border: 1px solid $gray;
|
||||
@ -69,7 +71,7 @@ $white: #fff;
|
||||
margin-top: 5px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
text-decoration: none;
|
||||
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
|
||||
filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
|
||||
}
|
||||
|
||||
.cable-actions {
|
||||
@ -94,8 +96,8 @@ $white: #fff;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
-30deg,
|
||||
rgb(187, 208, 236) 0%,
|
||||
rgba(255, 255, 255, 1) 100%
|
||||
rgb(187 208 236) 0%,
|
||||
rgb(255 255 255 / 100%) 100%
|
||||
);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -105,7 +107,7 @@ $white: #fff;
|
||||
border: 1px solid $gray;
|
||||
transition: all 0.3s ease-in-out;
|
||||
text-decoration: none;
|
||||
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
|
||||
filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
|
||||
cursor: pointer;
|
||||
overflow: visible;
|
||||
}
|
||||
@ -114,8 +116,8 @@ $white: #fff;
|
||||
width: auto;
|
||||
background: linear-gradient(
|
||||
-30deg,
|
||||
rgb(187, 194, 236) 0%,
|
||||
rgba(255, 255, 255, 1) 100%
|
||||
rgb(187 194 236) 0%,
|
||||
rgb(255 255 255 / 100%) 100%
|
||||
);
|
||||
}
|
||||
|
||||
@ -132,7 +134,8 @@ $white: #fff;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.cable-main-image {
|
||||
.cable-main-image,
|
||||
.cable-main-imageqr {
|
||||
aspect-ratio: 1/1;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
@ -141,7 +144,24 @@ $white: #fff;
|
||||
margin-right: 25px;
|
||||
border: $gray solid 1px;
|
||||
border-radius: 10px;
|
||||
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
|
||||
filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
|
||||
}
|
||||
|
||||
.cable-main-imageqr {
|
||||
margin-right: 0;
|
||||
margin-left: 25px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cable-main-imageqr img {
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
object-fit: cover;
|
||||
background-color: white;
|
||||
border: $gray solid 1px;
|
||||
filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
|
||||
}
|
||||
|
||||
.cable-main-label {
|
||||
@ -181,7 +201,6 @@ $white: #fff;
|
||||
background-color: transparent;
|
||||
font-size: 16px;
|
||||
color: $light-blue;
|
||||
color: $light-blue;
|
||||
width: auto;
|
||||
height: auto;
|
||||
font-family: "Gotham Medium";
|
||||
@ -192,8 +211,7 @@ $white: #fff;
|
||||
height: auto;
|
||||
background-color: transparent;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
flex-flow: row wrap;
|
||||
align-items: stretch;
|
||||
flex-grow: 1;
|
||||
justify-content: space-between;
|
||||
@ -227,7 +245,7 @@ $white: #fff;
|
||||
border: $light-blue solid 2px;
|
||||
border-radius: 20px;
|
||||
table-layout: fixed;
|
||||
border-spacing: 0px;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
.row,
|
||||
@ -305,6 +323,18 @@ th:first-child {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.modal-datasheet {
|
||||
width: 1000px;
|
||||
height: 700px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: transparent;
|
||||
flex-direction: column;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.modal-title span {
|
||||
width: auto;
|
||||
height: auto;
|
||||
@ -337,9 +367,9 @@ th:first-child {
|
||||
|
||||
.modal-close {
|
||||
cursor: pointer;
|
||||
padding: 15px 35px 15px 35px;
|
||||
padding: 15px 35px;
|
||||
border-radius: 20px;
|
||||
background-color: $gray;
|
||||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
||||
box-shadow: 0 4px 4px rgb(0 0 0 / 25%);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
@ -11,7 +11,7 @@ $white: #fff;
|
||||
180deg,
|
||||
rgb(0 37 84 / 100%) 0%,
|
||||
rgb(0 124 190 / 100%) 50%,
|
||||
rgb(255, 255, 255) 100%
|
||||
rgb(255 255 255) 100%
|
||||
);
|
||||
background-color: transparent;
|
||||
overflow-y: visible;
|
||||
@ -48,6 +48,8 @@ $white: #fff;
|
||||
flex-direction: column;
|
||||
overflow: visible;
|
||||
background-color: transparent;
|
||||
animation: fadeInUp;
|
||||
animation-duration: 0.5s;
|
||||
}
|
||||
|
||||
.map-title {
|
||||
@ -73,12 +75,13 @@ $white: #fff;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.map-box, .map-details {
|
||||
.map-box,
|
||||
.map-details {
|
||||
height: 68vh;
|
||||
background: linear-gradient(
|
||||
-30deg,
|
||||
rgb(187, 208, 236) 0%,
|
||||
rgba(255, 255, 255, 1) 100%
|
||||
rgb(187 208 236) 0%,
|
||||
rgb(255 255 255 / 100%) 100%
|
||||
);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -88,7 +91,7 @@ $white: #fff;
|
||||
border: 1px solid $gray;
|
||||
transition: all 0.3s ease-in-out;
|
||||
text-decoration: none;
|
||||
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
|
||||
filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
@ -103,7 +106,7 @@ $white: #fff;
|
||||
|
||||
.map-box-row {
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
height: 60px;
|
||||
background-color: transparent;
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
@ -113,14 +116,16 @@ $white: #fff;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.map-box-circle, .map-box-spacer {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
.map-box-circle,
|
||||
.map-box-spacer {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
15deg,
|
||||
rgb(223, 223, 223) 0%,
|
||||
rgb(255, 255, 255) 100%
|
||||
rgb(223 223 223) 0%,
|
||||
rgb(255 255 255) 100%
|
||||
);
|
||||
margin-left: 3px;
|
||||
margin-right: 3px;
|
||||
@ -131,13 +136,13 @@ $white: #fff;
|
||||
}
|
||||
|
||||
.map-box-circle {
|
||||
filter: drop-shadow(5px 5px 2px rgba(0, 0, 0, 0.15));
|
||||
filter: drop-shadow(5px 5px 2px rgb(0 0 0 / 15%));
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.map-box-spacer {
|
||||
background-color: transparent;
|
||||
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0);
|
||||
box-shadow: 0 2px 2px rgb(0 0 0 / 0%);
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
}
|
||||
@ -171,11 +176,10 @@ $white: #fff;
|
||||
width: auto;
|
||||
height: 35%;
|
||||
aspect-ratio: 1/1;
|
||||
background-color: transparent;
|
||||
border: $gray solid 1px;
|
||||
border-radius: 20px;
|
||||
background-color: white;
|
||||
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
|
||||
filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
|
||||
margin-bottom: 30px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
@ -199,7 +203,7 @@ $white: #fff;
|
||||
text-align: left;
|
||||
height: auto;
|
||||
font-family: "Gotham Bold";
|
||||
margin-bottom: 3px;;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.map-cable-shortdescription {
|
||||
@ -232,7 +236,6 @@ $white: #fff;
|
||||
font-size: 15px;
|
||||
margin-bottom: 5px;
|
||||
color: $light-blue;
|
||||
color: $light-blue;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
height: auto;
|
||||
@ -245,8 +248,8 @@ $white: #fff;
|
||||
border-radius: 20px;
|
||||
background: linear-gradient(
|
||||
15deg,
|
||||
rgb(223, 223, 223) 0%,
|
||||
rgb(255, 255, 255) 100%
|
||||
rgb(223 223 223) 0%,
|
||||
rgb(255 255 255) 100%
|
||||
);
|
||||
margin-left: 3px;
|
||||
margin-right: 3px;
|
||||
@ -254,7 +257,7 @@ $white: #fff;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all 0.3s ease-in-out;
|
||||
filter: drop-shadow(5px 5px 2px rgba(0, 0, 0, 0.15));
|
||||
filter: drop-shadow(5px 5px 2px rgb(0 0 0 / 15%));
|
||||
cursor: pointer;
|
||||
margin-bottom: 40px;
|
||||
text-decoration: none;
|
||||
|
||||
@ -8,16 +8,17 @@ $white: #fff;
|
||||
|
||||
.navbar {
|
||||
width: 300px;
|
||||
height: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border-right: $gray solid 1px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.navbar-top {
|
||||
width: 90%;
|
||||
height: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
align-items: left;
|
||||
justify-content: flex-start;
|
||||
@ -25,6 +26,22 @@ $white: #fff;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.navbar-top-container {
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.navbar-top-secret {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.navbar-top-hamburger {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
@ -35,10 +52,9 @@ $white: #fff;
|
||||
justify-content: left;
|
||||
padding-left: 4px;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 15px;
|
||||
color: $light-blue;
|
||||
color: $medium-blue;
|
||||
background-color: transparent;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.navbar-top h1 {
|
||||
@ -63,7 +79,9 @@ $white: #fff;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.navbar-list-item {
|
||||
.navbar-list-item,
|
||||
.navbar-return,
|
||||
.navbar-settings {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
margin: 0 0 3px;
|
||||
@ -77,7 +95,9 @@ $white: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.navbar-list-item span {
|
||||
.navbar-list-item span,
|
||||
.navbar-return span,
|
||||
.navbar-settings span {
|
||||
background-color: transparent;
|
||||
width: auto;
|
||||
height: auto;
|
||||
@ -86,3 +106,124 @@ $white: #fff;
|
||||
color: $dark-blue;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.navbar-settings {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
background-color: $medium-blue;
|
||||
}
|
||||
|
||||
.navbar-settings span {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.navbar-return {
|
||||
width: 90%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: $medium-blue;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.navbar-return span {
|
||||
color: $white;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.modal-title,
|
||||
.modal-body,
|
||||
.modal-close,
|
||||
.modal-closeX,
|
||||
.modal-return {
|
||||
width: auto;
|
||||
height: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: transparent;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.modal-title span {
|
||||
width: auto;
|
||||
height: auto;
|
||||
font-family: "Gotham Bold";
|
||||
font-size: 32px;
|
||||
color: $dark-blue;
|
||||
background-color: transparent;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.modal-body span {
|
||||
width: auto;
|
||||
height: auto;
|
||||
background-color: transparent;
|
||||
font-family: "Gotham Medium";
|
||||
font-size: 18px;
|
||||
color: $medium-blue;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.modal-tray {
|
||||
width: auto;
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
margin-bottom: 20px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.modal-close,
|
||||
.modal-return,
|
||||
.modal-closeX {
|
||||
cursor: pointer;
|
||||
padding: 15px 35px;
|
||||
border-radius: 20px;
|
||||
background-color: $gray;
|
||||
box-shadow: 0 4px 4px rgb(0 0 0 / 25%);
|
||||
transition: all 0.3s ease-in-out;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.modal-close span,
|
||||
.modal-return span,
|
||||
.modal-closeX span {
|
||||
width: auto;
|
||||
height: auto;
|
||||
background-color: transparent;
|
||||
font-family: "Gotham Medium";
|
||||
font-size: 18px;
|
||||
margin-top: 3px;
|
||||
color: $dark-blue;
|
||||
}
|
||||
|
||||
.modal-closeX {
|
||||
background-color: rgb(255, 152, 152);
|
||||
box-shadow: 0 4px 4px rgba(94, 1, 1, 0.25);
|
||||
}
|
||||
|
||||
.modal-return {
|
||||
width: auto;
|
||||
height: auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
@ -11,7 +11,7 @@ $white: #fff;
|
||||
180deg,
|
||||
rgb(0 37 84 / 100%) 0%,
|
||||
rgb(0 124 190 / 100%) 50%,
|
||||
rgb(255, 255, 255) 100%
|
||||
rgb(255 255 255) 100%
|
||||
);
|
||||
background-color: transparent;
|
||||
overflow-y: visible;
|
||||
@ -49,4 +49,268 @@ $white: #fff;
|
||||
overflow: hidden;
|
||||
background-color: transparent;
|
||||
margin-bottom: 50px;
|
||||
animation: fadeInUp;
|
||||
animation-duration: 0.5s;
|
||||
}
|
||||
|
||||
.settings-title {
|
||||
width: 80%;
|
||||
height: auto;
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: $white;
|
||||
font-family: "Gotham Medium";
|
||||
margin: 10px;
|
||||
background-color: transparent;
|
||||
margin-bottom: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.settings-grid,
|
||||
.settings-creditsContainer {
|
||||
width: 80%;
|
||||
height: auto;
|
||||
background: linear-gradient(
|
||||
-30deg,
|
||||
rgb(187 208 236) 0%,
|
||||
rgb(255 255 255 / 100%) 100%
|
||||
);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
border-radius: 20px;
|
||||
border: 1px solid $gray;
|
||||
margin-bottom: 5px;
|
||||
margin-top: 5px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
|
||||
}
|
||||
|
||||
.settings-gridInner {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 15px 0px 15px 0px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.settings-grid h2 {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: $dark-blue;
|
||||
font-family: "Gotham Medium";
|
||||
text-align: left;
|
||||
padding: 20px 10px 0px 10px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.settings-creditsContainer {
|
||||
height: 500px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.settings-button {
|
||||
width: auto;
|
||||
height: 40px;
|
||||
border-radius: 15px;
|
||||
background: linear-gradient(
|
||||
15deg,
|
||||
rgb(223 223 223) 0%,
|
||||
rgb(255 255 255) 100%
|
||||
);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all 0.3s ease-in-out;
|
||||
filter: drop-shadow(5px 5px 2px rgb(0 0 0 / 15%));
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.settings-button span {
|
||||
width: auto;
|
||||
height: auto;
|
||||
font-size: 16px;
|
||||
color: $medium-blue;
|
||||
font-family: "Gotham Bold";
|
||||
background-color: transparent;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.settings-form {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
// text box
|
||||
#sendobject {
|
||||
width: 90%;
|
||||
height: 20px;
|
||||
border-radius: 15px;
|
||||
background-color: $white;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
transition: all 0.3s ease-in-out;
|
||||
filter: drop-shadow(5px 5px 2px rgb(0 0 0 / 15%));
|
||||
text-decoration: none;
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid rgb(199, 199, 199);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#sendobject:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#sendobjectButton {
|
||||
width: 10%;
|
||||
height: 40px;
|
||||
border-radius: 15px;
|
||||
background: linear-gradient(
|
||||
15deg,
|
||||
rgb(223 223 223) 0%,
|
||||
rgb(255 255 255) 100%
|
||||
);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all 0.3s ease-in-out;
|
||||
filter: drop-shadow(5px 5px 2px rgb(0 0 0 / 15%));
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#creditsgrid {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
//background-color: red;
|
||||
}
|
||||
|
||||
.entry {
|
||||
width: 48%;
|
||||
height: 150px;
|
||||
border-radius: 15px;
|
||||
background: linear-gradient(
|
||||
15deg,
|
||||
rgb(223 223 223) 0%,
|
||||
rgb(255 255 255) 100%
|
||||
);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all 0.3s ease-in-out;
|
||||
filter: drop-shadow(5px 5px 2px rgb(0 0 0 / 15%));
|
||||
text-decoration: none;
|
||||
margin: 10px 10px 10px 10px;
|
||||
}
|
||||
|
||||
.entry-image {
|
||||
width: auto;
|
||||
height: auto;
|
||||
display: flex;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.entry-img,
|
||||
.entry-qr {
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
background: linear-gradient(
|
||||
15deg,
|
||||
rgb(223 223 223) 0%,
|
||||
rgb(255 255 255) 100%
|
||||
);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 15px;
|
||||
margin: 10px;
|
||||
filter: drop-shadow(5px 5px 2px rgb(0 0 0 / 15%));
|
||||
border: 1px solid $gray;
|
||||
}
|
||||
|
||||
.entry-qr {
|
||||
margin: 0px;
|
||||
padding: 8px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50px;
|
||||
background: white;
|
||||
position: fixed;
|
||||
bottom: 5px;
|
||||
margin-left: 90px;
|
||||
}
|
||||
|
||||
.entry-qr img {
|
||||
border-radius: 0px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
background: red;
|
||||
}
|
||||
|
||||
.entry-title {
|
||||
width: 70%;
|
||||
height: 50%;
|
||||
margin-left: 30px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.entry-title h2,
|
||||
.entry-title h3 {
|
||||
width: auto;
|
||||
height: auto;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: $dark-blue;
|
||||
font-family: "Gotham Medium";
|
||||
text-align: left;
|
||||
background-color: transparent;
|
||||
text-align: start;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.entry-title h2 {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.entry-title h3 {
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
color: $light-blue;
|
||||
}
|
||||
@ -11,7 +11,7 @@ $white: #fff;
|
||||
180deg,
|
||||
rgb(0 37 84 / 100%) 0%,
|
||||
rgb(0 124 190 / 100%) 50%,
|
||||
rgb(255, 255, 255) 100%
|
||||
rgb(255 255 255) 100%
|
||||
);
|
||||
background-color: transparent;
|
||||
overflow-y: visible;
|
||||
@ -49,6 +49,8 @@ $white: #fff;
|
||||
overflow: hidden;
|
||||
background-color: transparent;
|
||||
margin-bottom: 50px;
|
||||
animation: fadeInUp;
|
||||
animation-duration: 0.5s;
|
||||
}
|
||||
|
||||
.statistics-title {
|
||||
@ -60,91 +62,51 @@ $white: #fff;
|
||||
font-family: "Gotham Medium";
|
||||
margin: 10px;
|
||||
background-color: transparent;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.statistics-grid {
|
||||
width: 80%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
flex-flow: row wrap;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
background-color: transparent;
|
||||
overflow: visible;
|
||||
// add row gap
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.statistics-grid-container {
|
||||
width: 32%;
|
||||
height: 300px;
|
||||
width: calc(((100% / 3)) - (12px));
|
||||
height: 270px;
|
||||
background: linear-gradient(
|
||||
-30deg,
|
||||
rgb(187, 208, 236) 0%,
|
||||
rgba(255, 255, 255, 1) 100%
|
||||
rgb(187 208 236) 0%,
|
||||
rgb(255 255 255 / 100%) 100%
|
||||
);
|
||||
margin-top: 5px;
|
||||
|
||||
display: flex; /* Center the content */
|
||||
align-items: center; /* Center vertically */
|
||||
justify-content: center; /* Center horizontally */
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 20px;
|
||||
border: 1px solid $gray;
|
||||
transition: all 0.3s ease-in-out;
|
||||
text-decoration: none;
|
||||
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
|
||||
filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
|
||||
cursor: pointer;
|
||||
overflow: visible;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.statistics-grid-container:nth-child(3n + 1) {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.statistics-grid-container:nth-child(3n) {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.statistics-iframe {
|
||||
width: 95%; /* Ensure iframes take up full width of their grid cell */
|
||||
height: 95%; /* Adjust the height of iframes */
|
||||
width: 95%;
|
||||
height: 95%;
|
||||
border-radius: 20px;
|
||||
|
||||
|
||||
// Debug Borders
|
||||
// border-width: 5px;
|
||||
// border-style: solid;
|
||||
}
|
||||
|
||||
// .summary-iframe {
|
||||
// width: 400px;
|
||||
// height: 400px;
|
||||
// min-height: 1px;
|
||||
// background: transparent;
|
||||
// margin: 10px;
|
||||
// display: block;
|
||||
// }
|
||||
|
||||
// .summary-fieldContainer-pp {
|
||||
// width: 25%;
|
||||
// height: 300px;
|
||||
// border-radius: 20px;
|
||||
// text-align: center;
|
||||
// padding: 10px;
|
||||
// }
|
||||
|
||||
// .summary-fieldContainer-graph {
|
||||
// width: 25%;
|
||||
// }
|
||||
|
||||
|
||||
// .summary-dashboard {
|
||||
// width: 100%;
|
||||
// height: 900px;
|
||||
// border-radius: 20px;
|
||||
// text-align: center;
|
||||
// padding: 10px;
|
||||
// }
|
||||
|
||||
// .summary-fieldContainer-dashboard {
|
||||
// width: 100%;
|
||||
// height: 300px;
|
||||
// border-radius: 20px;
|
||||
// text-align: center;
|
||||
// padding: 10px;
|
||||
// }
|
||||
@ -1,150 +0,0 @@
|
||||
$dark-blue: #002554;
|
||||
$medium-blue: #004990;
|
||||
$light-blue: #007cbe;
|
||||
$hover-blue: #25b3ff;
|
||||
$black: #000;
|
||||
$gray: #bdbdbd;
|
||||
$white: #fff;
|
||||
|
||||
.summary {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgb(0 37 84 / 100%) 0%,
|
||||
rgb(0 124 190 / 100%) 50%,
|
||||
rgb(255, 255, 255) 100%
|
||||
);
|
||||
background-color: transparent;
|
||||
overflow-y: visible;
|
||||
width: calc(100% - 300px);
|
||||
height: auto;
|
||||
display: block;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.summary-image {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
background: transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.summary-image img {
|
||||
width: auto;
|
||||
height: 200px;
|
||||
background-color: transparent;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.summary-fieldContainer {
|
||||
width: 100%;
|
||||
min-height: calc(100% - 200px);
|
||||
height: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background-color: transparent;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.summary-title {
|
||||
width: 80%;
|
||||
height: auto;
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: $white;
|
||||
font-family: "Gotham Medium";
|
||||
margin: 10px;
|
||||
background-color: transparent;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.summary-grid {
|
||||
width: 80%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
background-color: transparent;
|
||||
overflow: visible;
|
||||
// add row gap
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.summary-grid-container {
|
||||
width: 32%;
|
||||
height: 300px;
|
||||
background: linear-gradient(
|
||||
-30deg,
|
||||
rgb(187, 208, 236) 0%,
|
||||
rgba(255, 255, 255, 1) 100%
|
||||
);
|
||||
margin-top: 5px;
|
||||
|
||||
display: flex; /* Center the content */
|
||||
align-items: center; /* Center vertically */
|
||||
justify-content: center; /* Center horizontally */
|
||||
|
||||
border-radius: 20px;
|
||||
border: 1px solid $gray;
|
||||
transition: all 0.3s ease-in-out;
|
||||
text-decoration: none;
|
||||
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
|
||||
cursor: pointer;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.summary-iframe {
|
||||
width: 95%; /* Ensure iframes take up full width of their grid cell */
|
||||
height: 95%; /* Adjust the height of iframes */
|
||||
border-radius: 20px;
|
||||
|
||||
|
||||
// Debug Borders
|
||||
// border-width: 5px;
|
||||
// border-style: solid;
|
||||
}
|
||||
|
||||
// .summary-iframe {
|
||||
// width: 400px;
|
||||
// height: 400px;
|
||||
// min-height: 1px;
|
||||
// background: transparent;
|
||||
// margin: 10px;
|
||||
// display: block;
|
||||
// }
|
||||
|
||||
// .summary-fieldContainer-pp {
|
||||
// width: 25%;
|
||||
// height: 300px;
|
||||
// border-radius: 20px;
|
||||
// text-align: center;
|
||||
// padding: 10px;
|
||||
// }
|
||||
|
||||
// .summary-fieldContainer-graph {
|
||||
// width: 25%;
|
||||
// }
|
||||
|
||||
|
||||
// .summary-dashboard {
|
||||
// width: 100%;
|
||||
// height: 900px;
|
||||
// border-radius: 20px;
|
||||
// text-align: center;
|
||||
// padding: 10px;
|
||||
// }
|
||||
|
||||
// .summary-fieldContainer-dashboard {
|
||||
// width: 100%;
|
||||
// height: 300px;
|
||||
// border-radius: 20px;
|
||||
// text-align: center;
|
||||
// padding: 10px;
|
||||
// }
|
||||
@ -8,23 +8,24 @@ export default class BrowseComponent extends Component {
|
||||
super(props);
|
||||
this.state = {
|
||||
cableList: [],
|
||||
isLoading: true,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.props.socket.send('{"type":"cable_map","call":"request","data":{}}');
|
||||
this.props.socket.addEventListener("message", this.handleMessage);
|
||||
setTimeout(() => {
|
||||
this.setState({ isLoading: false });
|
||||
}, 500);
|
||||
}
|
||||
|
||||
handleMessage = (event) => {
|
||||
try {
|
||||
console.log("Message from server", event.data);
|
||||
const message = JSON.parse(event.data);
|
||||
const cableList = this.browseParse(message);
|
||||
this.setState({ cableList });
|
||||
} catch (error) {
|
||||
console.error("Error parsing message from server:", error);
|
||||
}
|
||||
} catch (error) {}
|
||||
};
|
||||
|
||||
browseParse(message) {
|
||||
@ -63,9 +64,26 @@ export default class BrowseComponent extends Component {
|
||||
|
||||
searchUpdate = () => {
|
||||
let value = document.querySelector(".browse-search input").value;
|
||||
this.props.socket.send(`{"type":"cable_search","call":"request","data":{"string":"${value}"}}`);
|
||||
this.props.socket.send(
|
||||
`{"type":"cable_search","call":"request","data":{"string":"${value}"}}`
|
||||
);
|
||||
};
|
||||
|
||||
returnPlaceholder() {
|
||||
return (
|
||||
<div className="browse-cable">
|
||||
<div className="browse-cable-image" />
|
||||
<div className="browse-cable-label">
|
||||
<div className="browse-cable-name"></div>
|
||||
<div className="browse-cable-description"></div>
|
||||
<div className="browse-cable-brand"></div>
|
||||
<div className="browse-cable-position"></div>
|
||||
</div>
|
||||
<span className="browse-cable-arrow">{">"}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="browse">
|
||||
@ -81,9 +99,22 @@ export default class BrowseComponent extends Component {
|
||||
placeholder="🔎 Start typing to search..."
|
||||
/>
|
||||
</div>
|
||||
{this.state.cableList.map((cableObj, index) => (
|
||||
<React.Fragment key={index}>{cableObj.returnDiv()}</React.Fragment>
|
||||
))}
|
||||
{this.state.isLoading ? (
|
||||
<React.Fragment>
|
||||
{this.returnPlaceholder()}
|
||||
{this.returnPlaceholder()}
|
||||
{this.returnPlaceholder()}
|
||||
{this.returnPlaceholder()}
|
||||
{this.returnPlaceholder()}
|
||||
{this.returnPlaceholder()}
|
||||
</React.Fragment>
|
||||
) : (
|
||||
this.state.cableList.map((cableObj, index) => (
|
||||
<React.Fragment key={index}>
|
||||
{cableObj.returnDiv()}
|
||||
</React.Fragment>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
import React, { Component } from "react";
|
||||
import BeldenLogo from "../assets/images/belden-white.png";
|
||||
import DefaultPartImg from "../assets/images/part.png";
|
||||
import DefaultQRImg from "../assets/images/default_qr.png";
|
||||
import { NavLink } from "react-router-dom";
|
||||
import Modal from "react-modal";
|
||||
import "../assets/stylesheets/cabledetail.scss";
|
||||
|
||||
Modal.setAppElement("#root");
|
||||
const hostname = window.location.hostname; // Get the hostname from the URL bar
|
||||
|
||||
class Cable {
|
||||
constructor(cableData) {
|
||||
@ -14,8 +16,9 @@ class Cable {
|
||||
this.brand = cableData.brand;
|
||||
this.position = cableData.position;
|
||||
this.image = cableData.image
|
||||
? `http://localhost${cableData.image}`
|
||||
? `http://${hostname}${cableData.image}`
|
||||
: DefaultPartImg;
|
||||
this.datasheet = `http://${hostname}${cableData.datasheet}`;
|
||||
this.dynamicProps = {};
|
||||
this.horizontal = [];
|
||||
this.vertical = [];
|
||||
@ -24,6 +27,9 @@ class Cable {
|
||||
this.short_description = cableData.short_description;
|
||||
this.application = cableData.application;
|
||||
this.category = cableData.category;
|
||||
this.qrcode = cableData.qrcode
|
||||
? `http://${hostname}${cableData.qrcode}`
|
||||
: DefaultQRImg;
|
||||
|
||||
if (this.description === undefined) {
|
||||
if (this.short_description !== undefined) {
|
||||
@ -57,6 +63,8 @@ class Cable {
|
||||
"description",
|
||||
"application",
|
||||
"category",
|
||||
"datasheet",
|
||||
"qrcode",
|
||||
].includes(key)
|
||||
) {
|
||||
this.dynamicProps[key] = cableData[key];
|
||||
@ -103,7 +111,6 @@ export default class CableDetailComponent extends Component {
|
||||
super(props);
|
||||
this.state = {
|
||||
cableDetails: null,
|
||||
modalOpen_dispense: false,
|
||||
modalOpen_show: false,
|
||||
modalOpen_datasheet: false,
|
||||
modalOpacity: 0,
|
||||
@ -117,10 +124,10 @@ export default class CableDetailComponent extends Component {
|
||||
setTimeout(() => this.setState({ modalOpacity: 1 }), 10);
|
||||
});
|
||||
|
||||
if (modal === "modalOpen_dispense") {
|
||||
this.props.socket.send(`{"type": "cable_get","call": "send","data": {"position": ${this.state.cableDetails.position}}}`);
|
||||
} else if (modal === "modalOpen_show") {
|
||||
this.props.socket.send(`{"type": "cable_get","call": "request","data": {"position": ${this.state.cableDetails.position}}}`);
|
||||
if (modal === "modalOpen_show") {
|
||||
this.props.socket.send(
|
||||
`{"type": "cable_get","call": "request","data": {"position": ${this.state.cableDetails.position}}}`
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
@ -130,6 +137,12 @@ export default class CableDetailComponent extends Component {
|
||||
});
|
||||
};
|
||||
|
||||
dispense() {
|
||||
this.props.socket.send(
|
||||
`{"type": "cable_get","call": "send","data": {"position": ${this.state.cableDetails.position}}}`
|
||||
);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const cablePos = window.location.href.split("/").pop();
|
||||
this.props.socket.send(
|
||||
@ -140,13 +153,10 @@ export default class CableDetailComponent extends Component {
|
||||
|
||||
handleMessage = (event) => {
|
||||
try {
|
||||
console.log("Message from server", event.data);
|
||||
const message = JSON.parse(event.data);
|
||||
const cableDetails = new Cable(message.data.cables[0]);
|
||||
this.setState({ cableDetails });
|
||||
} catch (error) {
|
||||
console.error("Error parsing message from server:", error);
|
||||
}
|
||||
} catch (error) {}
|
||||
};
|
||||
|
||||
componentWillUnmount() {
|
||||
@ -158,7 +168,6 @@ export default class CableDetailComponent extends Component {
|
||||
try {
|
||||
data = JSON.parse(object);
|
||||
} catch (error) {
|
||||
console.error("Error parsing JSON data:", error);
|
||||
return <div>Error loading data...</div>;
|
||||
}
|
||||
|
||||
@ -224,13 +233,8 @@ export default class CableDetailComponent extends Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
modalOpen_dispense,
|
||||
modalOpen_show,
|
||||
modalOpen_datasheet,
|
||||
modalOpacity,
|
||||
cableDetails,
|
||||
} = this.state;
|
||||
const { modalOpen_show, modalOpen_datasheet, modalOpacity, cableDetails } =
|
||||
this.state;
|
||||
const modalStyle = {
|
||||
content: {
|
||||
opacity: modalOpacity,
|
||||
@ -240,8 +244,8 @@ export default class CableDetailComponent extends Component {
|
||||
right: "auto",
|
||||
bottom: "auto",
|
||||
marginRight: "-50%",
|
||||
width: "30%",
|
||||
height: "30%",
|
||||
width: "auto",
|
||||
height: "auto",
|
||||
transform: "translate(-50%, -50%)",
|
||||
overflow: "hidden",
|
||||
display: "flex",
|
||||
@ -252,6 +256,8 @@ export default class CableDetailComponent extends Component {
|
||||
background:
|
||||
"linear-gradient(-30deg, rgb(187, 194, 236) 0%, rgba(255, 255, 255, 1) 100%)",
|
||||
boxShadow: "0 0 20px rgba(0, 0, 0, 0.5)",
|
||||
minWidth: "30%",
|
||||
minHeight: "30%",
|
||||
},
|
||||
overlay: {
|
||||
opacity: modalOpacity,
|
||||
@ -319,6 +325,19 @@ export default class CableDetailComponent extends Component {
|
||||
{parseInt(cableDetails.position) + 1}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{cableDetails.qrcode !== DefaultQRImg ? (
|
||||
<div className="cable-main-imageqr">
|
||||
<img src={cableDetails.qrcode} alt="" />
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="cable-main-imageqr"
|
||||
src={cableDetails.qrcode}
|
||||
alt=""
|
||||
style={{ visibility: "hidden" }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="cable-main"></div>
|
||||
@ -342,8 +361,16 @@ export default class CableDetailComponent extends Component {
|
||||
<span>✏️</span>
|
||||
<span>Datasheet</span>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<span>Datasheet coming soon...</span>
|
||||
<div className="modal-datasheet">
|
||||
{cableDetails ? (
|
||||
<iframe
|
||||
src={cableDetails.datasheet}
|
||||
height="70%"
|
||||
width="70%"
|
||||
></iframe>
|
||||
) : (
|
||||
<div className="datasheet"></div>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className="modal-close"
|
||||
@ -357,7 +384,7 @@ export default class CableDetailComponent extends Component {
|
||||
className="cable-actions-button"
|
||||
onClick={() => this.openModal("modalOpen_show")}
|
||||
>
|
||||
<span>➤ Show</span>
|
||||
<span>➤ Highlight</span>
|
||||
<span>💡</span>
|
||||
</div>
|
||||
<Modal
|
||||
@ -369,10 +396,10 @@ export default class CableDetailComponent extends Component {
|
||||
<div className="modal-container">
|
||||
<div className="modal-title">
|
||||
<span>💡</span>
|
||||
<span>Showing Item</span>
|
||||
<span>Highlighting Item</span>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<span>The item will now be illuminated.</span>
|
||||
<span>The sample will now be illuminated.</span>
|
||||
</div>
|
||||
<div
|
||||
className="modal-close"
|
||||
@ -384,33 +411,11 @@ export default class CableDetailComponent extends Component {
|
||||
</Modal>
|
||||
<div
|
||||
className="cable-actions-button"
|
||||
onClick={() => this.openModal("modalOpen_dispense")}
|
||||
onClick={() => this.dispense()}
|
||||
>
|
||||
<span>➤ Dispense</span>
|
||||
<span>🔽</span>
|
||||
</div>
|
||||
<Modal
|
||||
isOpen={modalOpen_dispense}
|
||||
onRequestClose={() => this.closeModal("modalOpen_dispense")}
|
||||
contentLabel="Dispense"
|
||||
style={modalStyle}
|
||||
>
|
||||
<div className="modal-container">
|
||||
<div className="modal-title">
|
||||
<span>🔽</span>
|
||||
<span>Dispensing Item</span>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<span>Please wait for your item to be dispensed.</span>
|
||||
</div>
|
||||
<div
|
||||
className="modal-close"
|
||||
onClick={() => this.closeModal("modalOpen_dispense")}
|
||||
>
|
||||
<span>Close</span>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
|
||||
{cableDetails ? (
|
||||
|
||||
@ -3,6 +3,7 @@ import BeldenLogo from "../assets/images/belden-white.png";
|
||||
import cable from "../utils/Cable";
|
||||
import "../assets/stylesheets/map.scss";
|
||||
import { NavLink } from "react-router-dom";
|
||||
import "animate.css";
|
||||
|
||||
export default class MapComponent extends Component {
|
||||
constructor(props) {
|
||||
@ -31,7 +32,6 @@ export default class MapComponent extends Component {
|
||||
|
||||
handleMessage = (event) => {
|
||||
try {
|
||||
console.log("Message from server", event.data);
|
||||
const message = JSON.parse(event.data);
|
||||
const list = this.browseParse(message);
|
||||
this.setState({ cableList: list });
|
||||
@ -39,9 +39,7 @@ export default class MapComponent extends Component {
|
||||
this.select("0");
|
||||
this.updateSelection();
|
||||
}, 50);
|
||||
} catch (error) {
|
||||
console.error("Error parsing message from server:", error);
|
||||
}
|
||||
} catch (error) {}
|
||||
};
|
||||
|
||||
updateSelection() {
|
||||
@ -49,9 +47,13 @@ export default class MapComponent extends Component {
|
||||
for (let i = 0; i < 54; i++) {
|
||||
let cable = cableList[i];
|
||||
if (cable === undefined) {
|
||||
try {
|
||||
document.getElementById("inner-" + i).style.border =
|
||||
"#bdbdbd 4px solid";
|
||||
document.getElementById("text-" + i).style.color = "#bdbdbd";
|
||||
} catch (error) {
|
||||
console.error("Error updating selection:", error);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -115,12 +117,16 @@ export default class MapComponent extends Component {
|
||||
}
|
||||
|
||||
let { selected } = this.state;
|
||||
try {
|
||||
document.getElementById("inner-" + selected).style.border =
|
||||
"#004990 4px solid";
|
||||
document.getElementById("text-" + selected).style.color = "#004990";
|
||||
this.setState({ selected: id });
|
||||
document.getElementById("inner-" + id).style.border = "#007cbe 4px solid";
|
||||
document.getElementById("text-" + id).style.color = "#007cbe";
|
||||
} catch (error) {
|
||||
console.error("Error selecting cable:", error);
|
||||
}
|
||||
|
||||
let cab = this.state.cableList[id];
|
||||
this.setState({ cable: cab });
|
||||
@ -257,7 +263,10 @@ export default class MapComponent extends Component {
|
||||
{parseInt(cable.position) + 1}
|
||||
</div>
|
||||
</div>
|
||||
<NavLink to={"/map/cable/" + cable.position} className="map-cable-moreinfo">
|
||||
<NavLink
|
||||
to={"/map/cable/" + cable.position}
|
||||
className="map-cable-moreinfo"
|
||||
>
|
||||
<span>More Info</span>
|
||||
</NavLink>
|
||||
</div>
|
||||
|
||||
@ -1,45 +1,141 @@
|
||||
import React, { Component } from "react";
|
||||
import { NavLink } from "react-router-dom";
|
||||
import Modal from "react-modal";
|
||||
import "../assets/stylesheets/navbar.scss";
|
||||
|
||||
Modal.setAppElement("#root");
|
||||
|
||||
export default class NavBar extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
modalOpen_activeArm: false,
|
||||
modalOpacity: 0,
|
||||
mode: "idle",
|
||||
};
|
||||
this.openModal = this.openModal.bind(this);
|
||||
this.closeModal = this.closeModal.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
let path = window.location.pathname;
|
||||
if (path.includes("browse")) {
|
||||
document.getElementById("browse").style.backgroundColor = "#007CBE";
|
||||
document.getElementById("browse-s").style.color = "white";
|
||||
if (path.includes("statistics")) {
|
||||
document.getElementById("statistics").style.backgroundColor = "#007CBE";
|
||||
document.getElementById("statistics-s").style.color = "white";
|
||||
} else if (path.includes("map")) {
|
||||
document.getElementById("map").style.backgroundColor = "#007CBE";
|
||||
document.getElementById("map-s").style.color = "white";
|
||||
} else if (path.includes("cable")) {
|
||||
document.getElementById("browse").style.backgroundColor = "#007CBE";
|
||||
document.getElementById("browse-s").style.color = "white";
|
||||
} else if (path.includes("statistics")) {
|
||||
document.getElementById("statistics").style.backgroundColor = "#007CBE";
|
||||
document.getElementById("statistics-s").style.color = "white";
|
||||
} else if (path.includes("settings")) {
|
||||
document.getElementById("settings").style.backgroundColor = "#007CBE";
|
||||
document.getElementById("settings-s").style.color = "white";
|
||||
} else {
|
||||
document.getElementById("home").style.backgroundColor = "#007CBE";
|
||||
document.getElementById("home-s").style.color = "white";
|
||||
}
|
||||
document.getElementById("browse").style.backgroundColor = "#007CBE";
|
||||
document.getElementById("browse-s").style.color = "white";
|
||||
}
|
||||
|
||||
this.props.socket.addEventListener("message", this.handleMessage);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.props.socket.removeEventListener("message", this.handleMessage);
|
||||
}
|
||||
|
||||
handleMessage = (event) => {
|
||||
try {
|
||||
const message = JSON.parse(event.data);
|
||||
if (message.type === "mode") {
|
||||
let currentMode = JSON.parse(message.data).mode.toLowerCase();
|
||||
this.setState({ mode: currentMode });
|
||||
console.log("Current Mode: " + currentMode);
|
||||
if (currentMode === "idle") {
|
||||
setTimeout(() => {
|
||||
console.log("State Mode: " + this.state.mode);
|
||||
if (this.state.mode === "idle") {
|
||||
this.closeModal("modalOpen_activeArm");
|
||||
}
|
||||
}, 1500);
|
||||
} else {
|
||||
this.openModal("modalOpen_activeArm");
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("");
|
||||
}
|
||||
};
|
||||
|
||||
openModal = (modal) => {
|
||||
this.setState({ [modal]: true }, () => {
|
||||
setTimeout(() => this.setState({ modalOpacity: 1 }), 10);
|
||||
});
|
||||
};
|
||||
|
||||
closeModal = (modal) => {
|
||||
this.setState({ modalOpacity: 0 }, () => {
|
||||
setTimeout(() => this.setState({ [modal]: false }), 300);
|
||||
});
|
||||
};
|
||||
|
||||
returnCable = () => {
|
||||
this.props.socket.send(
|
||||
`{"type": "cable_get","call": "send","data": {"tray": 0}}`
|
||||
);
|
||||
};
|
||||
|
||||
cancelAction = () => {
|
||||
this.props.socket.send(
|
||||
`{"type": "cancel_action","call": "request","data": {}}`
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { modalOpen_activeArm, modalOpacity } = this.state;
|
||||
|
||||
const modalStyle = {
|
||||
content: {
|
||||
opacity: modalOpacity,
|
||||
transition: "opacity 300ms ease-in-out",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
right: "auto",
|
||||
bottom: "auto",
|
||||
marginRight: "-50%",
|
||||
width: "auto",
|
||||
height: "auto",
|
||||
transform: "translate(-50%, -50%)",
|
||||
overflow: "hidden",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
borderRadius: "20px",
|
||||
background:
|
||||
"linear-gradient(-30deg, rgb(187, 194, 236) 0%, rgba(255, 255, 255, 1) 100%)",
|
||||
boxShadow: "0 0 20px rgba(0, 0, 0, 0.5)",
|
||||
minWidth: "30%",
|
||||
minHeight: "30%",
|
||||
},
|
||||
overlay: {
|
||||
opacity: modalOpacity,
|
||||
transition: "opacity 300ms ease-in-out",
|
||||
backgroundColor: "rgba(255, 255, 255, 0.15)",
|
||||
backdropFilter: "blur(5px)",
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="navbar">
|
||||
<div className="navbar-top">
|
||||
<div className="navbar-top-container">
|
||||
<div className="navbar-top-hamburger">≡</div>
|
||||
<NavLink className="navbar-settings" id="settings" to="/settings">
|
||||
<span id="settings-s">⚙️</span>
|
||||
</NavLink>
|
||||
</div>
|
||||
<h1>Jukebox</h1>
|
||||
<ol className="navbar-list">
|
||||
<NavLink
|
||||
style={this.upper}
|
||||
id="home"
|
||||
className="navbar-list-item"
|
||||
to="/"
|
||||
>
|
||||
<span id="home-s" style={this.lower}>
|
||||
❤️ Summary
|
||||
</span>
|
||||
</NavLink>
|
||||
<NavLink className="navbar-list-item" id="browse" to="/browse">
|
||||
<span id="browse-s">🛍️ Browse</span>
|
||||
</NavLink>
|
||||
@ -55,6 +151,28 @@ export default class NavBar extends Component {
|
||||
</NavLink>
|
||||
</ol>
|
||||
</div>
|
||||
<div className="navbar-return" onClick={() => this.returnCable()}>
|
||||
<span id="browse-s">Return Cable</span>
|
||||
</div>
|
||||
|
||||
<Modal
|
||||
isOpen={modalOpen_activeArm}
|
||||
contentLabel="show"
|
||||
style={modalStyle}
|
||||
>
|
||||
<div className="modal-container">
|
||||
<div className="modal-title">
|
||||
<span>⚠️</span>
|
||||
<span>Arm in Motion</span>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<span>Please stay clear of the arm.</span>
|
||||
</div>
|
||||
<div className="modal-closeX" onClick={() => this.cancelAction()}>
|
||||
<span>Cancel Action</span>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,15 +1,342 @@
|
||||
import React, { Component } from "react";
|
||||
import BeldenLogo from "../assets/images/belden-white.png";
|
||||
import Modal from "react-modal";
|
||||
import "../assets/stylesheets/settings.scss";
|
||||
|
||||
Modal.setAppElement("#root");
|
||||
|
||||
export default class SettingsComponent extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
modalOpen_quickAction: false,
|
||||
modalOpacity: 0,
|
||||
action: "",
|
||||
};
|
||||
this.openModal = this.openModal.bind(this);
|
||||
this.closeModal = this.closeModal.bind(this);
|
||||
}
|
||||
|
||||
quickAction = (action, requirePrompt) => {
|
||||
if (requirePrompt) {
|
||||
this.openModal("modalOpen_quickAction", action);
|
||||
} else {
|
||||
this.quickActionPerform(action);
|
||||
}
|
||||
};
|
||||
|
||||
quickActionPerform = (action) => {
|
||||
switch (action) {
|
||||
case "shutdown":
|
||||
console.log("Shutting down...");
|
||||
this.props.socket.send(
|
||||
'{"type":"shutdown","call":"request","data":{}}'
|
||||
);
|
||||
break;
|
||||
case "restart":
|
||||
console.log("Restarting...");
|
||||
this.props.socket.send('{"type":"restart","call":"request","data":{}}');
|
||||
break;
|
||||
case "home":
|
||||
console.log("Homing...");
|
||||
this.props.socket.send('{"type":"home","call":"request","data":{}}');
|
||||
break;
|
||||
default:
|
||||
console.log("Invalid action");
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
openModal = (modal, action) => {
|
||||
this.setState({ [modal]: true }, () => {
|
||||
setTimeout(() => this.setState({ modalOpacity: 1 }), 100);
|
||||
});
|
||||
this.setState({ action });
|
||||
};
|
||||
|
||||
closeModal = (modal) => {
|
||||
this.setState({ modalOpacity: 0 }, () => {
|
||||
setTimeout(() => this.setState({ [modal]: false }), 300);
|
||||
});
|
||||
};
|
||||
|
||||
performActionCloseModal = () => {
|
||||
console.log("Performing action: " + this.state.action);
|
||||
this.quickActionPerform(this.state.action);
|
||||
this.closeModal("modalOpen_quickAction");
|
||||
};
|
||||
|
||||
sendObject = () => {
|
||||
const object = document.getElementById("sendobject").value;
|
||||
console.log("Sending object: " + object);
|
||||
this.props.socket.send
|
||||
? this.props.socket.send(object)
|
||||
: console.log("No socket connection");
|
||||
};
|
||||
|
||||
render() {
|
||||
const { modalOpen_quickAction, modalOpacity } = this.state;
|
||||
|
||||
const modalStyle = {
|
||||
content: {
|
||||
opacity: modalOpacity,
|
||||
transition: "opacity 300ms ease-in-out",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
right: "auto",
|
||||
bottom: "auto",
|
||||
marginRight: "-50%",
|
||||
width: "auto",
|
||||
height: "auto",
|
||||
transform: "translate(-50%, -50%)",
|
||||
overflow: "hidden",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
borderRadius: "20px",
|
||||
background:
|
||||
"linear-gradient(-30deg, rgb(187, 194, 236) 0%, rgba(255, 255, 255, 1) 100%)",
|
||||
boxShadow: "0 0 20px rgba(0, 0, 0, 0.5)",
|
||||
minWidth: "30%",
|
||||
minHeight: "30%",
|
||||
},
|
||||
overlay: {
|
||||
opacity: modalOpacity,
|
||||
transition: "opacity 300ms ease-in-out",
|
||||
backgroundColor: "rgba(255, 255, 255, 0.15)",
|
||||
backdropFilter: "blur(5px)",
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="settings">
|
||||
<div className="settings-image">
|
||||
<img src={BeldenLogo} alt="Belden" />
|
||||
</div>
|
||||
<div className="settings-fieldContainer"></div>
|
||||
<div className="settings-fieldContainer">
|
||||
<h1 className="settings-title">⚙️ Settings</h1>
|
||||
<div className="settings-grid">
|
||||
<h2>⚡Quick Actions:</h2>
|
||||
<div className="settings-gridInner">
|
||||
<div
|
||||
className="settings-button"
|
||||
onClick={() => this.quickAction("shutdown", true)}
|
||||
>
|
||||
<span>🔴 Power Off</span>
|
||||
</div>
|
||||
<div
|
||||
className="settings-button"
|
||||
onClick={() => this.quickAction("restart", false)}
|
||||
>
|
||||
<span>🟠 Restart</span>
|
||||
</div>
|
||||
<div
|
||||
className="settings-button"
|
||||
onClick={() => this.quickAction("home", false)}
|
||||
>
|
||||
<span>🏠 Home Arm</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="settings-grid">
|
||||
<h2>💻Send Object:</h2>
|
||||
<div className="settings-gridInner">
|
||||
<form className="settings-form">
|
||||
<input
|
||||
id="sendobject"
|
||||
type="text"
|
||||
name="sendobject"
|
||||
placeholder={`{"type":"cable_map","call":"request","data":{}}`}
|
||||
/>
|
||||
<div
|
||||
className="settings-button"
|
||||
id="sendobjectButton"
|
||||
onClick={() => this.sendObject()}
|
||||
>
|
||||
<span>Send</span>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div className="settings-grid">
|
||||
<h2>⚒️Credits:</h2>
|
||||
<div id="creditsgrid" className="settings-gridInner">
|
||||
<div className="entry">
|
||||
<div className="entry-image">
|
||||
<img
|
||||
className="entry-img"
|
||||
src={require("../assets/images/pic_cole.jpg")}
|
||||
alt="Cole Deck"
|
||||
/>
|
||||
<div className="entry-qr">
|
||||
<img
|
||||
src={require("../assets/images/qr_cole.png")}
|
||||
alt="QR"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="entry-title">
|
||||
<h2>Cole Deck</h2>
|
||||
<h3>Project Lead</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="entry">
|
||||
<div className="entry-image">
|
||||
<img
|
||||
className="entry-img"
|
||||
src={require("../assets/images/pic_scarlett.jpg")}
|
||||
alt="Scarlett Kadan"
|
||||
/>
|
||||
<div className="entry-qr">
|
||||
<img
|
||||
src={require("../assets/images/qr_scarlett.png")}
|
||||
alt="QR"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="entry-title">
|
||||
<h2>Scarlett Kadan</h2>
|
||||
<h3>Lead Front-End Dev, UI/UX Designer</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="entry">
|
||||
<div className="entry-image">
|
||||
<img
|
||||
className="entry-img"
|
||||
src={require("../assets/images/pic_natorion.jpg")}
|
||||
alt="Natorion Johnson"
|
||||
/>
|
||||
<div className="entry-qr">
|
||||
<img
|
||||
src={require("../assets/images/qr_natorion.png")}
|
||||
alt="QR"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="entry-title">
|
||||
<h2>Natorion Johnson</h2>
|
||||
<h3>Lead PCB assembler</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="entry">
|
||||
<div className="entry-image">
|
||||
<img
|
||||
className="entry-img"
|
||||
src={require("../assets/images/pic_fannie.jpeg")}
|
||||
alt="Fannie Yu"
|
||||
/>
|
||||
<div className="entry-qr">
|
||||
<img
|
||||
src={require("../assets/images/qr_fannie.png")}
|
||||
alt="QR"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="entry-title">
|
||||
<h2>Fannie Yu</h2>
|
||||
<h3>CAD Design, Fabrication Planner</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="entry">
|
||||
<div className="entry-image">
|
||||
<img
|
||||
className="entry-img"
|
||||
src={require("../assets/images/pic_elias.jpg")}
|
||||
alt="Elias Reschly"
|
||||
/>
|
||||
<div className="entry-qr">
|
||||
<img
|
||||
src={require("../assets/images/qr_elias.png")}
|
||||
alt="QR"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="entry-title">
|
||||
<h2>Elias Reschly</h2>
|
||||
<h3>Mechanical Design, Fabrication</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="entry">
|
||||
<div className="entry-image">
|
||||
<img
|
||||
className="entry-img"
|
||||
src={require("../assets/images/pic_lucas.jpg")}
|
||||
alt="Lucas Ferguson"
|
||||
/>
|
||||
<div className="entry-qr">
|
||||
<img
|
||||
src={require("../assets/images/qr_lucas.png")}
|
||||
alt="QR"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="entry-title">
|
||||
<h2>Lucas Ferguson</h2>
|
||||
<h3>Front-End Dev</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="entry">
|
||||
<div className="entry-image">
|
||||
<img
|
||||
className="entry-img"
|
||||
src={require("../assets/images/pic_dustin.jpg")}
|
||||
alt=""
|
||||
/>
|
||||
<div className="entry-qr">
|
||||
<img
|
||||
src={require("../assets/images/qr_dustin.png")}
|
||||
alt="QR"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="entry-title">
|
||||
<h2>Dustin Thomas</h2>
|
||||
<h3>Back-End Dev</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Modal
|
||||
isOpen={modalOpen_quickAction}
|
||||
contentLabel="show"
|
||||
onRequestClose={() => this.closeModal("modalOpen_quickAction")}
|
||||
style={modalStyle}
|
||||
>
|
||||
<div className="modal-container">
|
||||
<div className="modal-title">
|
||||
<span>⚠️</span>
|
||||
<span>Warning</span>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<span>Are you sure you want to perform this quick action?</span>
|
||||
</div>
|
||||
<div className="modal-tray">
|
||||
<div
|
||||
className="modal-return"
|
||||
onClick={() =>
|
||||
this.performActionCloseModal("modalOpen_quickAction")
|
||||
}
|
||||
>
|
||||
<span>Continue</span>
|
||||
</div>
|
||||
<div
|
||||
className="modal-return"
|
||||
onClick={() => this.closeModal("modalOpen_quickAction")}
|
||||
>
|
||||
<span>Cancel</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -13,22 +13,46 @@ export default class StatisticsComponent extends Component {
|
||||
<h1 className="statistics-title">📊 Statistics</h1>
|
||||
<div className="statistics-grid">
|
||||
<div className="statistics-grid-container">
|
||||
<iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=8" title="Belden" className="statistics-iframe" />
|
||||
<iframe
|
||||
src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=8"
|
||||
title="Belden"
|
||||
className="statistics-iframe"
|
||||
/>
|
||||
</div>
|
||||
<div className="statistics-grid-container">
|
||||
<iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=3" title="Belden" className="statistics-iframe" />
|
||||
<iframe
|
||||
src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=3"
|
||||
title="Belden"
|
||||
className="statistics-iframe"
|
||||
/>
|
||||
</div>
|
||||
<div className="statistics-grid-container">
|
||||
<iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=7" title="Belden" className="statistics-iframe" />
|
||||
<iframe
|
||||
src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=7"
|
||||
title="Belden"
|
||||
className="statistics-iframe"
|
||||
/>
|
||||
</div>
|
||||
<div className="statistics-grid-container">
|
||||
<iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=6" title="Belden" className="statistics-iframe" />
|
||||
<iframe
|
||||
src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=6"
|
||||
title="Belden"
|
||||
className="statistics-iframe"
|
||||
/>
|
||||
</div>
|
||||
<div className="statistics-grid-container">
|
||||
<iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=4" title="Belden" className="statistics-iframe" />
|
||||
<iframe
|
||||
src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=4"
|
||||
title="Belden"
|
||||
className="statistics-iframe"
|
||||
/>
|
||||
</div>
|
||||
<div className="statistics-grid-container">
|
||||
<iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=2" title="Belden" className="statistics-iframe" />
|
||||
<iframe
|
||||
src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=2"
|
||||
title="Belden"
|
||||
className="statistics-iframe"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,38 +0,0 @@
|
||||
import React, { Component } from "react";
|
||||
import BeldenLogo from "../assets/images/belden-white.png";
|
||||
import "../assets/stylesheets/summary.scss";
|
||||
|
||||
export default class SummaryComponent extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="summary">
|
||||
<div className="summary-image">
|
||||
<img src={BeldenLogo} alt="Belden" />
|
||||
</div>
|
||||
<div className="summary-fieldContainer">
|
||||
<h1 className="summary-title">❤️ Summary</h1>
|
||||
<div className="summary-grid">
|
||||
<div className="summary-grid-container">
|
||||
<iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=8" title="Belden" className="summary-iframe" />
|
||||
</div>
|
||||
<div className="summary-grid-container">
|
||||
<iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=3" title="Belden" className="summary-iframe" />
|
||||
</div>
|
||||
<div className="summary-grid-container">
|
||||
<iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=7" title="Belden" className="summary-iframe" />
|
||||
</div>
|
||||
<div className="summary-grid-container">
|
||||
<iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=6" title="Belden" className="summary-iframe" />
|
||||
</div>
|
||||
<div className="summary-grid-container">
|
||||
<iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=4" title="Belden" className="summary-iframe" />
|
||||
</div>
|
||||
<div className="summary-grid-container">
|
||||
<iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=2" title="Belden" className="summary-iframe" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,7 +1,6 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import { createBrowserRouter, RouterProvider } from "react-router-dom";
|
||||
import SummaryRoute from "./routes/SummaryRoute";
|
||||
import BrowseRoute from "./routes/BrowseRoute";
|
||||
import SettingsRoute from "./routes/SettingsRoute";
|
||||
import MapRoute from "./routes/MapRoute";
|
||||
@ -13,20 +12,21 @@ const root = ReactDOM.createRoot(document.getElementById("root"));
|
||||
|
||||
// Socket handler
|
||||
console.log("Connecting to WebSocket server.");
|
||||
const socket = new WebSocket("ws://localhost:9000");
|
||||
const hostname = window.location.hostname; // Get the hostname from the URL bar
|
||||
const wsPort = "9000";
|
||||
const socket = new WebSocket(`ws://${hostname}:${wsPort}`);
|
||||
socket.addEventListener("open", function (event) {
|
||||
console.log("Websocket connected.");
|
||||
console.log("Welcome to Belden Jukebox!");
|
||||
init();
|
||||
});
|
||||
|
||||
|
||||
// Initialize the app
|
||||
const init = () => {
|
||||
const router = createBrowserRouter([
|
||||
{
|
||||
path: "/",
|
||||
element: <SummaryRoute socket={socket}></SummaryRoute>,
|
||||
element: <BrowseRoute socket={socket}></BrowseRoute>,
|
||||
// errorElement: <ErrorRoute></ErrorRoute>,
|
||||
},
|
||||
{
|
||||
|
||||
@ -12,7 +12,7 @@ export default class BrowseRoute extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="container">
|
||||
<NavBar />
|
||||
<NavBar socket={this.props.socket} />
|
||||
<BrowseComponent socket={this.props.socket} />
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -12,7 +12,7 @@ export default class CableDetailRoute extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="container">
|
||||
<NavBar />
|
||||
<NavBar socket={this.props.socket} />
|
||||
<CableDetailComponent socket={this.props.socket} />
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -12,7 +12,7 @@ export default class MapRoute extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="container">
|
||||
<NavBar />
|
||||
<NavBar socket={this.props.socket} />
|
||||
<MapComponent socket={this.props.socket} />
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -12,8 +12,8 @@ export default class SettingsRoute extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="container">
|
||||
<NavBar />
|
||||
<SettingsComponent socketHandler={this.props.socket} />
|
||||
<NavBar socket={this.props.socket} />
|
||||
<SettingsComponent socket={this.props.socket} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -12,8 +12,8 @@ export default class StatisticsRoute extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="container">
|
||||
<NavBar />
|
||||
<StatisticsComponent socketHandler={this.props.socket} />
|
||||
<NavBar socket={this.props.socket} />
|
||||
<StatisticsComponent socket={this.props.socket} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,20 +0,0 @@
|
||||
import React, { Component } from "react";
|
||||
import NavBar from "../components/NavBar";
|
||||
import SummaryComponent from "../components/SummaryComponent";
|
||||
import "../assets/stylesheets/app.scss";
|
||||
|
||||
export default class HomeRoute extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
document.title = "Summary";
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="container">
|
||||
<NavBar />
|
||||
<SummaryComponent socketHandler={this.props.socket} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,8 +1,11 @@
|
||||
import React from "react";
|
||||
import DefaultPartImg from "../assets/images/part.png";
|
||||
import DefaultQRImg from "../assets/images/default_qr.png";
|
||||
import { NavLink } from "react-router-dom";
|
||||
import "../assets/stylesheets/browse.scss";
|
||||
|
||||
const hostname = window.location.hostname; // Get the hostname from the URL bar
|
||||
|
||||
export default class cable {
|
||||
constructor(
|
||||
part_number,
|
||||
@ -13,19 +16,22 @@ export default class cable {
|
||||
short_description,
|
||||
image,
|
||||
category,
|
||||
application
|
||||
application,
|
||||
qrcode
|
||||
) {
|
||||
this.part_number = part_number;
|
||||
this.position = position;
|
||||
this.name = name;
|
||||
this.brand = brand;
|
||||
this.image = image ? `http://localhost${image}` : DefaultPartImg;
|
||||
this.image = image ? `http://${hostname}${image}` : DefaultPartImg;
|
||||
|
||||
this.category = category;
|
||||
this.application = application;
|
||||
this.short_description = short_description;
|
||||
this.description = description;
|
||||
|
||||
this.qrcode = qrcode ? `http://${hostname}${qrcode}` : DefaultQRImg;
|
||||
|
||||
if (short_description === undefined) {
|
||||
if (this.description !== undefined) {
|
||||
this.short_description = this.description;
|
||||
|
||||
Reference in New Issue
Block a user