From c3c5348370684cfa08dc56408d8e5768d946fb40 Mon Sep 17 00:00:00 2001
From: Scarlett <kadansk8@gmail.com>
Date: Sun, 12 May 2024 19:16:57 -0400
Subject: [PATCH] search added
---
src/assets/stylesheets/browse.scss | 40 +++++++++++++++++++++++++
src/assets/stylesheets/cabledetail.scss | 1 +
src/assets/stylesheets/map.scss | 2 ++
src/assets/stylesheets/navbar.scss | 39 +-----------------------
src/assets/stylesheets/settings.scss | 1 +
src/assets/stylesheets/statistics.scss | 1 +
src/assets/stylesheets/summary.scss | 1 +
src/components/BrowseComponent.js | 14 ++++++++-
src/components/CableDetailComponent.js | 4 +--
src/components/MapComponent.js | 2 +-
src/components/NavBar.js | 16 ++++------
src/components/StatisticsComponent.js | 2 +-
src/components/SummaryComponent.js | 2 +-
src/utils/Cable.js | 2 +-
14 files changed, 71 insertions(+), 56 deletions(-)
diff --git a/src/assets/stylesheets/browse.scss b/src/assets/stylesheets/browse.scss
index 2b0313e..af131f4 100644
--- a/src/assets/stylesheets/browse.scss
+++ b/src/assets/stylesheets/browse.scss
@@ -32,9 +32,11 @@ $white: #fff;
}
.browse-image img {
+ margin-top: 50px;
width: auto;
height: 200px;
background-color: transparent;
+ margin-top: 50px;
}
.browse-fieldContainer {
@@ -150,4 +152,42 @@ $white: #fff;
width: auto;
height: auto;
font-family: "Gotham Medium";
+}
+
+.browse-search {
+ width: 80%;
+ height: 50px;
+ background: linear-gradient(
+ -30deg,
+ rgb(187, 208, 236) 0%,
+ rgba(255, 255, 255, 1) 100%
+ );
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ flex-direction: row;
+ 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(0px 4px 4px rgba(0, 0, 0, 0.25));
+}
+
+.browse-search input {
+ width: 100%;
+ height: 50px;
+ border-radius: 20px 0 0 20px;
+ background-color: transparent;
+ outline: none;
+ box-shadow: none;
+ font-size: 18px;
+ font-family: "Gotham Medium";
+ color: $dark-blue;
+ border: none;
+ border-right: none;
+ padding-left: 20px;
+ padding-top: 2px;
}
\ No newline at end of file
diff --git a/src/assets/stylesheets/cabledetail.scss b/src/assets/stylesheets/cabledetail.scss
index 8caf110..ca6d60a 100644
--- a/src/assets/stylesheets/cabledetail.scss
+++ b/src/assets/stylesheets/cabledetail.scss
@@ -35,6 +35,7 @@ $white: #fff;
width: auto;
height: 200px;
background-color: transparent;
+ margin-top: 50px;
}
.cable-fieldContainer {
diff --git a/src/assets/stylesheets/map.scss b/src/assets/stylesheets/map.scss
index 7b13cce..839cc4f 100644
--- a/src/assets/stylesheets/map.scss
+++ b/src/assets/stylesheets/map.scss
@@ -35,6 +35,7 @@ $white: #fff;
width: auto;
height: 200px;
background-color: transparent;
+ margin-top: 50px;
}
.map-fieldContainer {
@@ -271,6 +272,7 @@ $white: #fff;
width: auto;
height: auto;
font-size: 20px;
+ margin-top: 2px;
color: $medium-blue;
font-family: "Gotham Bold";
background-color: transparent;
diff --git a/src/assets/stylesheets/navbar.scss b/src/assets/stylesheets/navbar.scss
index 9de83dd..733e468 100644
--- a/src/assets/stylesheets/navbar.scss
+++ b/src/assets/stylesheets/navbar.scss
@@ -57,45 +57,8 @@ $white: #fff;
color: $light-blue;
}
-.navbar-search {
- width: 100%;
- height: auto;
- display: flex;
- border-radius: 15px;
- padding: 0;
- margin: 0;
-}
-
-.navbar-search input {
- width: 80%;
- height: auto;
- padding: 10px;
- border-radius: 15px 0 0 15px;
- background-color: $white;
- outline: none;
- box-shadow: none;
- font-size: 16px;
- font-family: "Gotham Medium";
- color: $dark-blue;
- border: solid $light-blue 2px;
- border-right: none;
-}
-
-.navbar-search button {
- width: 20%;
- height: auto;
- border-radius: 0 15px 15px 0;
- background-color: $white;
- outline: none;
- box-shadow: none;
- font-size: 16px;
- font-family: "Gotham Medium";
- border: solid $light-blue 2px;
- cursor: pointer;
-}
-
.navbar-list {
- margin-top: 20px;
+ margin-top: 10px;
width: 100%;
height: auto;
display: flex;
diff --git a/src/assets/stylesheets/settings.scss b/src/assets/stylesheets/settings.scss
index 6a93986..764cdd4 100644
--- a/src/assets/stylesheets/settings.scss
+++ b/src/assets/stylesheets/settings.scss
@@ -35,6 +35,7 @@ $white: #fff;
width: auto;
height: 200px;
background-color: transparent;
+ margin-top: 50px;
}
.settings-fieldContainer {
diff --git a/src/assets/stylesheets/statistics.scss b/src/assets/stylesheets/statistics.scss
index bce2376..f93f20e 100644
--- a/src/assets/stylesheets/statistics.scss
+++ b/src/assets/stylesheets/statistics.scss
@@ -35,6 +35,7 @@ $white: #fff;
width: auto;
height: 200px;
background-color: transparent;
+ margin-top: 50px;
}
.statistics-fieldContainer {
diff --git a/src/assets/stylesheets/summary.scss b/src/assets/stylesheets/summary.scss
index 7ece692..23ca153 100644
--- a/src/assets/stylesheets/summary.scss
+++ b/src/assets/stylesheets/summary.scss
@@ -35,6 +35,7 @@ $white: #fff;
width: auto;
height: 200px;
background-color: transparent;
+ margin-top: 50px;
}
.summary-fieldContainer {
diff --git a/src/components/BrowseComponent.js b/src/components/BrowseComponent.js
index 69bfa07..8608829 100644
--- a/src/components/BrowseComponent.js
+++ b/src/components/BrowseComponent.js
@@ -61,6 +61,11 @@ export default class BrowseComponent extends Component {
this.props.socket.removeEventListener("message", this.handleMessage);
}
+ searchUpdate = () => {
+ let value = document.querySelector(".browse-search input").value;
+ this.props.socket.send(`{"type":"cable_search","call":"request","data":{"string":"${value}"}}`);
+ };
+
render() {
return (
<div className="browse">
@@ -68,7 +73,14 @@ export default class BrowseComponent extends Component {
<img src={BeldenLogo} alt="Belden" />
</div>
<div className="browse-fieldContainer">
- <h1 className="browse-title">Browse</h1>
+ <h1 className="browse-title">ποΈ Browse</h1>
+ <div className="browse-search">
+ <input
+ type="text"
+ onChange={() => this.searchUpdate()}
+ placeholder="π Start typing to search..."
+ />
+ </div>
{this.state.cableList.map((cableObj, index) => (
<React.Fragment key={index}>{cableObj.returnDiv()}</React.Fragment>
))}
diff --git a/src/components/CableDetailComponent.js b/src/components/CableDetailComponent.js
index a9a9ff1..25205b0 100644
--- a/src/components/CableDetailComponent.js
+++ b/src/components/CableDetailComponent.js
@@ -387,7 +387,7 @@ export default class CableDetailComponent extends Component {
onClick={() => this.openModal("modalOpen_dispense")}
>
<span>β€ Dispense</span>
- <span>π€</span>
+ <span>π«΄</span>
</div>
<Modal
isOpen={modalOpen_dispense}
@@ -397,7 +397,7 @@ export default class CableDetailComponent extends Component {
>
<div className="modal-container">
<div className="modal-title">
- <span>π€</span>
+ <span>π«΄</span>
<span>Dispensing Item</span>
</div>
<div className="modal-body">
diff --git a/src/components/MapComponent.js b/src/components/MapComponent.js
index 74a403c..91e8feb 100644
--- a/src/components/MapComponent.js
+++ b/src/components/MapComponent.js
@@ -134,7 +134,7 @@ export default class MapComponent extends Component {
<img src={BeldenLogo} alt="Belden" />
</div>
<div className="map-fieldContainer">
- <h1 className="map-title">Map</h1>
+ <h1 className="map-title">πΊοΈ Map</h1>
<div className="map-boxContainer">
<div className="map-box">
<div className="map-box-row" id="row-1">
diff --git a/src/components/NavBar.js b/src/components/NavBar.js
index 7bfea32..b79a1a1 100644
--- a/src/components/NavBar.js
+++ b/src/components/NavBar.js
@@ -8,9 +8,6 @@ export default class NavBar extends Component {
if (path.includes("browse")) {
document.getElementById("browse").style.backgroundColor = "#007CBE";
document.getElementById("browse-s").style.color = "white";
- } else if (path.includes("settings")) {
- document.getElementById("settings").style.backgroundColor = "#007CBE";
- document.getElementById("settings-s").style.color = "white";
} else if (path.includes("map")) {
document.getElementById("map").style.backgroundColor = "#007CBE";
document.getElementById("map-s").style.color = "white";
@@ -32,10 +29,6 @@ export default class NavBar extends Component {
<div className="navbar-top">
<div className="navbar-top-hamburger">β‘</div>
<h1>Jukebox</h1>
- <div className="navbar-search">
- <input type="text" placeholder="Search" />
- <button>π</button>
- </div>
<ol className="navbar-list">
<NavLink
style={this.upper}
@@ -53,12 +46,13 @@ export default class NavBar extends Component {
<NavLink className="navbar-list-item" id="map" to="/map">
<span id="map-s">πΊοΈ Map</span>
</NavLink>
- <NavLink className="navbar-list-item" id="statistics" to="/statistics">
+ <NavLink
+ className="navbar-list-item"
+ id="statistics"
+ to="/statistics"
+ >
<span id="statistics-s">π Statistics</span>
</NavLink>
- <NavLink className="navbar-list-item" id="settings" to="/settings">
- <span id="settings-s">βοΈ Settings</span>
- </NavLink>
</ol>
</div>
</div>
diff --git a/src/components/StatisticsComponent.js b/src/components/StatisticsComponent.js
index cb9997e..9192f03 100644
--- a/src/components/StatisticsComponent.js
+++ b/src/components/StatisticsComponent.js
@@ -10,7 +10,7 @@ export default class StatisticsComponent extends Component {
<img src={BeldenLogo} alt="Belden" />
</div>
<div className="statistics-fieldContainer">
- <h1 className="statistics-title">Statistics</h1>
+ <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" />
diff --git a/src/components/SummaryComponent.js b/src/components/SummaryComponent.js
index 401048c..04fd5b0 100644
--- a/src/components/SummaryComponent.js
+++ b/src/components/SummaryComponent.js
@@ -10,7 +10,7 @@ export default class SummaryComponent extends Component {
<img src={BeldenLogo} alt="Belden" />
</div>
<div className="summary-fieldContainer">
- <h1 className="summary-title">Summary</h1>
+ <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" />
diff --git a/src/utils/Cable.js b/src/utils/Cable.js
index 8c1cc15..49bfce7 100644
--- a/src/utils/Cable.js
+++ b/src/utils/Cable.js
@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React from "react";
import DefaultPartImg from "../assets/images/part.png";
import { NavLink } from "react-router-dom";
import "../assets/stylesheets/browse.scss";