From 2e57253ac0c92bb38b5970a97eee947ea15a57aa Mon Sep 17 00:00:00 2001 From: Scarlett Date: Tue, 14 May 2024 17:50:06 -0400 Subject: [PATCH] v1 --- package-lock.json | 42 +++++----- package.json | 4 +- src/components/CableDetailComponent.js | 10 ++- src/components/MapComponent.js | 7 +- src/components/NavBar.js | 105 ++++++++++++++++++++++++- src/components/SettingsComponent.js | 47 ++++++++--- src/components/StatisticsComponent.js | 38 +++++++-- src/index.js | 3 +- src/routes/BrowseRoute.js | 2 +- src/routes/CableDetailRoute.js | 2 +- src/routes/MapRoute.js | 2 +- src/routes/SettingsRoute.js | 2 +- src/routes/StatisticsRoute.js | 2 +- 13 files changed, 208 insertions(+), 58 deletions(-) diff --git a/package-lock.json b/package-lock.json index e66610b..ba3d343 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,9 +21,9 @@ "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": { @@ -6335,9 +6335,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" @@ -16181,20 +16181,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", @@ -16223,7 +16223,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": { @@ -16310,12 +16310,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", @@ -16328,16 +16328,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": [ { diff --git a/package.json b/package.json index 70fbb22..594e7fb 100644 --- a/package.json +++ b/package.json @@ -41,9 +41,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": [ diff --git a/src/components/CableDetailComponent.js b/src/components/CableDetailComponent.js index 4818cf5..f2eb5e6 100644 --- a/src/components/CableDetailComponent.js +++ b/src/components/CableDetailComponent.js @@ -57,7 +57,7 @@ class Cable { "description", "application", "category", - "datasheet" + "datasheet", ].includes(key) ) { this.dynamicProps[key] = cableData[key]; @@ -119,9 +119,13 @@ export default class CableDetailComponent extends Component { }); if (modal === "modalOpen_dispense") { - this.props.socket.send(`{"type": "cable_get","call": "send","data": {"position": ${this.state.cableDetails.position}}}`); + 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}}}`); + this.props.socket.send( + `{"type": "cable_get","call": "request","data": {"position": ${this.state.cableDetails.position}}}` + ); } }; diff --git a/src/components/MapComponent.js b/src/components/MapComponent.js index a97bce6..e49777e 100644 --- a/src/components/MapComponent.js +++ b/src/components/MapComponent.js @@ -3,7 +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" +import "animate.css"; export default class MapComponent extends Component { constructor(props) { @@ -258,7 +258,10 @@ export default class MapComponent extends Component { {parseInt(cable.position) + 1} - + More Info diff --git a/src/components/NavBar.js b/src/components/NavBar.js index fc5a542..d29addc 100644 --- a/src/components/NavBar.js +++ b/src/components/NavBar.js @@ -1,14 +1,20 @@ 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 = { clicks: 0, - timer: null, + modalOpen_return: false, + modalOpacity: 0, }; + this.openModal = this.openModal.bind(this); + this.closeModal = this.closeModal.bind(this); } componentDidMount() { @@ -41,8 +47,7 @@ export default class NavBar extends Component { this.setState({ clicks: clicks + 1 }); if (clicks + 1 === 3) { - - window.location.replace("/settings") + window.location.replace("/settings"); clearTimeout(timer); this.setState({ clicks: 0, timer: null }); @@ -55,7 +60,59 @@ export default class NavBar extends Component { } } + 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 = (tray) => { + this.props.socket.send( + `{"type": "cable_get","call": "send","data": {"tray": ${tray}}}` + ); + console.log("Cable returned from tray " + tray); + this.closeModal("modalOpen_return"); + }; + render() { + const { modalOpen_return, 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: "30%", + height: "30%", + 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)", + }, + overlay: { + opacity: modalOpacity, + transition: "opacity 300ms ease-in-out", + backgroundColor: "rgba(255, 255, 255, 0.15)", + backdropFilter: "blur(5px)", + }, + }; + return (
@@ -80,6 +137,48 @@ export default class NavBar extends Component {
+
this.openModal("modalOpen_return")} + > + Return Cable +
+ this.closeModal("modalOpen_return")} + contentLabel="show" + style={modalStyle} + > +
+
+ ♻️ + Return Cable +
+
+ Select the tray you would like to return from. +
+
+
this.returnCable(0)}> + 1 +
+
this.returnCable(1)}> + 2 +
+
this.returnCable(2)}> + 3 +
+
this.returnCable(3)}> + 4 +
+
+
this.closeModal("modalOpen_return")} + > + Cancel +
+
+
); } diff --git a/src/components/SettingsComponent.js b/src/components/SettingsComponent.js index 75a9ad2..28a7aa4 100644 --- a/src/components/SettingsComponent.js +++ b/src/components/SettingsComponent.js @@ -41,37 +41,64 @@ export default class SettingsComponent extends Component {
Cole Deck, Project Lead, - https://deck.sh + + https://deck.sh +
Natorion Johnson, Lead PCB assembler, - https://linkedin.com/in/NatorionJ + + https://linkedin.com/in/NatorionJ +
Fannie, - CAD Design, Fabrication Planner - https://linkedin.com/in/fannieyu + + CAD Design, Fabrication Planner + + + https://linkedin.com/in/fannieyu +
Elias Frey Reschly, - Mechanical Design, Fabrication - + + Mechanical Design, Fabrication + +
Scarlett Deck, - Front-End Dev, UI/UX Designer, - https://kadan.live + + Front-End Dev, UI/UX Designer, + + + https://kadan.live +
Lucas Ferguson, Front-End Dev, - https://lucasferguson.webflow.io + + https://lucasferguson.webflow.io +
Dustin Thomas, Back-End Dev, - https://cptlobster.dev + + https://cptlobster.dev +
diff --git a/src/components/StatisticsComponent.js b/src/components/StatisticsComponent.js index 9192f03..fc86c14 100644 --- a/src/components/StatisticsComponent.js +++ b/src/components/StatisticsComponent.js @@ -13,26 +13,50 @@ export default class StatisticsComponent extends Component {

📊 Statistics

-