From c9b747975058fa080709b6b950e326359e573765 Mon Sep 17 00:00:00 2001
From: Mathias Betancurt <mathias@betancurt.dev>
Date: Thu, 9 Jul 2020 17:52:22 +0200
Subject: [PATCH] feat: add actual operations stats to HomeScreen of Dashboard
 CU-8edqyc

Commented out placeholder until we decide what to do with it
---
 src/Ades.js                                   |   2 +-
 .../{main_screen => home}/DronesChart.js      |   0
 src/dashboard/home/HomeScreen.js              | 107 ++++++++++++++++++
 .../OpsEvolutionChart.js                      |   0
 .../{main_screen => home}/UserRow.js          |   0
 .../mainscreen.css => home/home.module.css}   |  32 +++++-
 .../{main_screen => home}/userrow.css         |   0
 src/dashboard/main_screen/HomeScreen.js       |  79 -------------
 src/dashboard/main_screen/ValueCard.js        |  20 ----
 src/dashboard/main_screen/valuecard.css       |  24 ----
 10 files changed, 137 insertions(+), 127 deletions(-)
 rename src/dashboard/{main_screen => home}/DronesChart.js (100%)
 create mode 100644 src/dashboard/home/HomeScreen.js
 rename src/dashboard/{main_screen => home}/OpsEvolutionChart.js (100%)
 rename src/dashboard/{main_screen => home}/UserRow.js (100%)
 rename src/dashboard/{main_screen/mainscreen.css => home/home.module.css} (58%)
 rename src/dashboard/{main_screen => home}/userrow.css (100%)
 delete mode 100644 src/dashboard/main_screen/HomeScreen.js
 delete mode 100644 src/dashboard/main_screen/ValueCard.js
 delete mode 100644 src/dashboard/main_screen/valuecard.css

diff --git a/src/Ades.js b/src/Ades.js
index cf5d7be..04dced0 100644
--- a/src/Ades.js
+++ b/src/Ades.js
@@ -55,7 +55,7 @@ import { fM } from './libs/SaferSanctuary';
 import Pilot from './dashboard/user/Pilot';
 import VehiclesList from './dashboard/vehicle/VehiclesList';
 import NewVehicle from './dashboard/vehicle/NewVehicle';
-import HomeScreen from './dashboard/main_screen/HomeScreen';
+import HomeScreen from './dashboard/home/HomeScreen';
 import VerificationScreen from './VerificationScreen';
 import {API} from './consts';
 import BottomArea from './layout/BottomArea';
diff --git a/src/dashboard/main_screen/DronesChart.js b/src/dashboard/home/DronesChart.js
similarity index 100%
rename from src/dashboard/main_screen/DronesChart.js
rename to src/dashboard/home/DronesChart.js
diff --git a/src/dashboard/home/HomeScreen.js b/src/dashboard/home/HomeScreen.js
new file mode 100644
index 0000000..4892b40
--- /dev/null
+++ b/src/dashboard/home/HomeScreen.js
@@ -0,0 +1,107 @@
+import React from 'react';
+import styles from './home.module.css';
+import OpsEvolutionChart from './OpsEvolutionChart';
+import DronesChart from './DronesChart';
+import UserRow from './UserRow';
+import useAdesState from '../../state/AdesState';
+import S from 'sanctuary';
+import {maybeValues} from '../../libs/SaferSanctuary';
+
+const SimpleValue = ({title, value, color}) => {
+	return (
+		<div className={styles.simpleValue} style={{backgroundColor: color}}>
+			<p className={styles.simpleValueText}>{title}</p>
+			<p className={styles.simpleValueValue}>{value}</p>
+		</div>
+	);
+};
+
+const HomeScreen = () => {
+	const [state, ] = useAdesState();
+	const operations = maybeValues(state.operations.list);
+	const operationCount = operations.length;
+	const activeCount = (S.filter ((op) => op.state === 'ACTIVE') (operations)).length;
+	const acceptedCount = (S.filter ((op) => op.state === 'ACCEPTED') (operations)).length;
+	const pendingCount = (S.filter ((op) => op.state === 'PENDING') (operations)).length;
+	const dronesCount = maybeValues(state.drones.list).length;
+
+	console.log('Ops', operations);
+
+	return (
+		<>
+			<div className={styles.homeScreen}>
+				<SimpleValue
+					title="Total of operations"
+					value={operationCount}
+				/>
+				<SimpleValue
+					title="Active operations"
+					value={activeCount}
+					color="chocolate"
+				/>
+				<SimpleValue
+					title="Accepted operations"
+					value={acceptedCount}
+					color="rgb(0,100,0)"
+				/>
+				<SimpleValue
+					title="Pending operations"
+					value={pendingCount}
+					color="orangered"
+				/>
+				<SimpleValue
+					title="Drones in the air"
+					value={dronesCount}
+					color="darkmagenta"
+				/>
+				{/*
+				<div className="div-ops-by-month">
+					Operations Evolution in the Last 12 Months
+					<OpsEvolutionChart
+						categories={['May', 'Jun', 'Jul', 'Ago', 'Set', 'Oct', 'Nov', 'Dic', 'Ene', 'Feb', 'Mar', 'Abr']}
+						data={[0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 5, 6]}
+						type="area"
+					/>
+				</div>
+				<div className="div-users">
+                    Active Users Last 30 days
+					<UserRow
+						name="Juan José Cetraro"
+						username="jjcetraro"
+						quantity="8"
+					/>
+					<UserRow
+						name="Emiliano Alonzo"
+						username="emialonzo"
+						quantity="6"
+					/>
+					<UserRow
+						name="Matt Betancurt"
+						username="mbentancurt"
+						quantity="4"
+					/>
+					<UserRow
+						name="Sebastián Macías"
+						username="smacias89"
+						quantity="4"
+					/>
+				</div>
+				<div className="div-drones">
+                    Drones By Manufacturer
+					<DronesChart/>
+				</div>
+				<div className="div-ops-last-week">
+                    Operations Last Week
+					<OpsEvolutionChart
+						categories={['Jue', 'Vie', 'Sab', 'Dom', 'Lun', 'Mar', 'Mie']}
+						data={[0, 0, 0, 0, 1, 0, 3]}
+						type="bar"
+					/>
+				</div>
+				*/ }
+			</div>
+		</>
+	);
+};
+ 
+export default HomeScreen;
\ No newline at end of file
diff --git a/src/dashboard/main_screen/OpsEvolutionChart.js b/src/dashboard/home/OpsEvolutionChart.js
similarity index 100%
rename from src/dashboard/main_screen/OpsEvolutionChart.js
rename to src/dashboard/home/OpsEvolutionChart.js
diff --git a/src/dashboard/main_screen/UserRow.js b/src/dashboard/home/UserRow.js
similarity index 100%
rename from src/dashboard/main_screen/UserRow.js
rename to src/dashboard/home/UserRow.js
diff --git a/src/dashboard/main_screen/mainscreen.css b/src/dashboard/home/home.module.css
similarity index 58%
rename from src/dashboard/main_screen/mainscreen.css
rename to src/dashboard/home/home.module.css
index a6422a9..e58eea5 100644
--- a/src/dashboard/main_screen/mainscreen.css
+++ b/src/dashboard/home/home.module.css
@@ -1,8 +1,34 @@
-.div-container{
+.homeScreen {
     display: grid;
-    grid-template-columns: repeat(12, 1fr);
-    gap: 1em;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 }
+
+.simpleValue {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    max-height: 80px;
+    margin: 2px;
+    padding: 5%;
+    border-radius: 5px;
+    color: rgb(255, 255, 255);
+    background-image: linear-gradient(0deg, rgb(51, 86, 179), rgb(42, 75, 147));
+    background-blend-mode: color-dodge;
+}
+
+.simpleValue > p {
+    margin: 7px;
+}
+
+.simpleValueText {
+    font-size: 20px;
+}
+
+.simpleValueValue {
+    font-size: 25px;
+    font-weight: bold;
+}
+
 .div-active-ops{
     background-color: #76CA9E;
     height: 120px;
diff --git a/src/dashboard/main_screen/userrow.css b/src/dashboard/home/userrow.css
similarity index 100%
rename from src/dashboard/main_screen/userrow.css
rename to src/dashboard/home/userrow.css
diff --git a/src/dashboard/main_screen/HomeScreen.js b/src/dashboard/main_screen/HomeScreen.js
deleted file mode 100644
index af22e29..0000000
--- a/src/dashboard/main_screen/HomeScreen.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import React from 'react';
-import './mainscreen.css';
-import OpsEvolutionChart from './OpsEvolutionChart';
-import DronesChart from './DronesChart';
-import UserRow from './UserRow';
-import ValueCard from './ValueCard';
-
-const HomeScreen = () => {
-	return (
-		<>
-			<h1>Main Screen</h1>
-			<div className="div-container">
-				<div className="div-active-ops">
-					<ValueCard
-						title="Active"
-						value="4"
-					/>
-				</div>
-				<div className="div-accepted-ops">
-					<ValueCard
-						title="Accepted"
-						value="5"
-					/>
-				</div>
-				<div className="div-pending-ops">
-					<ValueCard
-						title="Pending"
-						value="1"
-					/>
-				</div>
-				<div className="div-ops-by-month">
-					Operations Evolution in the Last 12 Months
-					<OpsEvolutionChart
-						categories={['May', 'Jun', 'Jul', 'Ago', 'Set', 'Oct', 'Nov', 'Dic', 'Ene', 'Feb', 'Mar', 'Abr']}
-						data={[0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 5, 6]}
-						type="area"
-					/>
-				</div>
-				<div className="div-users">
-                    Active Users Last 30 days
-					<UserRow
-						name="Juan José Cetraro"
-						username="jjcetraro"
-						quantity="8"
-					/>
-					<UserRow
-						name="Emiliano Alonzo"
-						username="emialonzo"
-						quantity="6"
-					/>
-					<UserRow
-						name="Matt Betancurt"
-						username="mbentancurt"
-						quantity="4"
-					/>
-					<UserRow
-						name="Sebastián Macías"
-						username="smacias89"
-						quantity="4"
-					/>
-				</div>
-				<div className="div-drones">
-                    Drones By Manufacturer
-					<DronesChart/>
-				</div>
-				<div className="div-ops-last-week">
-                    Operations Last Week
-					<OpsEvolutionChart
-						categories={['Jue', 'Vie', 'Sab', 'Dom', 'Lun', 'Mar', 'Mie']}
-						data={[0, 0, 0, 0, 1, 0, 3]}
-						type="bar"
-					/>
-				</div>
-			</div>
-		</>
-	);
-};
- 
-export default HomeScreen;
\ No newline at end of file
diff --git a/src/dashboard/main_screen/ValueCard.js b/src/dashboard/main_screen/ValueCard.js
deleted file mode 100644
index 2951870..0000000
--- a/src/dashboard/main_screen/ValueCard.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import './valuecard.css';
-
-const ValueCard = ({title, value}) => {
-	return (
-		<div className="div-card-container">
-			<div className="div-title">
-				<span>{title}</span>
-			</div>
-			<div className="div-value">
-				{value}
-			</div>
-			<div className="div-operations">
-				operations
-			</div>
-		</div>
-	);
-}
- 
-export default ValueCard;
\ No newline at end of file
diff --git a/src/dashboard/main_screen/valuecard.css b/src/dashboard/main_screen/valuecard.css
deleted file mode 100644
index 6681d03..0000000
--- a/src/dashboard/main_screen/valuecard.css
+++ /dev/null
@@ -1,24 +0,0 @@
-.div-card-container{
-    display: grid;
-    grid-template-columns: auto 80px;
-    height: 100%;
-}
-.div-title{
-    padding-left: 1mm;
-    display: flex;
-    align-items: flex-end;
-    font-size: 30px;
-}
-.div-operations{
-    padding-left: 1mm;
-    font-size: 18px;
-}
-.div-value{
-    padding: 1mm;
-    grid-column: 2 / 3;
-    grid-row: 1 / 3;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 50px;
-}
\ No newline at end of file