From e9e8225b3db61649e30281a49c2905e3ff530767 Mon Sep 17 00:00:00 2001 From: fermelli Date: Wed, 12 Jan 2022 01:44:56 -0400 Subject: [PATCH] mostrar datos de las simulaciones --- index.html | 2 +- public/feather-sprite.svg | 22 ++++ public/styles.css | 218 ++++++++++++++++++++++++++++++++++ src/App.vue | 28 +++++ src/components/RightPanel.vue | 4 +- src/router.js | 6 +- src/store.js | 20 +++- src/views/Data.vue | 92 ++++++++++++++ 8 files changed, 387 insertions(+), 5 deletions(-) create mode 100644 public/feather-sprite.svg create mode 100644 src/views/Data.vue diff --git a/index.html b/index.html index a8a9c2e..a3ea3bb 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - Vite App + Simulación de Control de Temperatura diff --git a/public/feather-sprite.svg b/public/feather-sprite.svg new file mode 100644 index 0000000..b04d85c --- /dev/null +++ b/public/feather-sprite.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + diff --git a/public/styles.css b/public/styles.css index dc8e543..a153d95 100644 --- a/public/styles.css +++ b/public/styles.css @@ -468,6 +468,40 @@ Ensure the default browser behavior of the `hidden` attribute. --tw-backdrop-sepia: ; } +.container { + width: 100%; +} + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + .absolute { position: absolute; } @@ -480,6 +514,18 @@ Ensure the default browser behavior of the `hidden` attribute. bottom: 0px; } +.bottom-4 { + bottom: 1rem; +} + +.right-4 { + right: 1rem; +} + +.bottom-24 { + bottom: 6rem; +} + .row-span-full { grid-row: 1 / -1; } @@ -563,6 +609,30 @@ Ensure the default browser behavior of the `hidden` attribute. height: 2rem; } +.h-24 { + height: 6rem; +} + +.h-20 { + height: 5rem; +} + +.h-16 { + height: 4rem; +} + +.h-12 { + height: 3rem; +} + +.h-\[calc\(100vh_-_4rem\)\] { + height: calc(100vh - 4rem); +} + +.h-36 { + height: 9rem; +} + .w-full { width: 100%; } @@ -579,6 +649,18 @@ Ensure the default browser behavior of the `hidden` attribute. width: 2.5rem; } +.w-24 { + width: 6rem; +} + +.w-20 { + width: 5rem; +} + +.w-16 { + width: 4rem; +} + .transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } @@ -607,6 +689,14 @@ Ensure the default browser behavior of the `hidden` attribute. grid-template-columns: 480px 1fr 320px; } +.grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); +} + +.grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); +} + .grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); } @@ -615,6 +705,14 @@ Ensure the default browser behavior of the `hidden` attribute. grid-template-rows: 1fr 2fr; } +.grid-rows-3 { + grid-template-rows: repeat(3, minmax(0, 1fr)); +} + +.grid-rows-4 { + grid-template-rows: repeat(4, minmax(0, 1fr)); +} + .flex-wrap { flex-wrap: wrap; } @@ -631,6 +729,14 @@ Ensure the default browser behavior of the `hidden` attribute. justify-content: center; } +.justify-between { + justify-content: space-between; +} + +.gap-4 { + gap: 1rem; +} + .gap-x-8 { -moz-column-gap: 2rem; column-gap: 2rem; @@ -641,6 +747,15 @@ Ensure the default browser behavior of the `hidden` attribute. column-gap: 1rem; } +.gap-x-2 { + -moz-column-gap: 0.5rem; + column-gap: 0.5rem; +} + +.overflow-auto { + overflow: auto; +} + .whitespace-nowrap { white-space: nowrap; } @@ -653,14 +768,26 @@ Ensure the default browser behavior of the `hidden` attribute. border-radius: 9999px; } +.rounded-2xl { + border-radius: 1rem; +} + .border { border-width: 1px; } +.border-2 { + border-width: 2px; +} + .border-t-4 { border-top-width: 4px; } +.border-b { + border-bottom-width: 1px; +} + .border-slate-800 { --tw-border-opacity: 1; border-color: rgb(30 41 59 / var(--tw-border-opacity)); @@ -671,6 +798,11 @@ Ensure the default browser behavior of the `hidden` attribute. border-color: rgb(107 114 128 / var(--tw-border-opacity)); } +.border-slate-600 { + --tw-border-opacity: 1; + border-color: rgb(71 85 105 / var(--tw-border-opacity)); +} + .border-t-slate-800 { --tw-border-opacity: 1; border-top-color: rgb(30 41 59 / var(--tw-border-opacity)); @@ -711,6 +843,24 @@ Ensure the default browser behavior of the `hidden` attribute. background-color: rgb(220 38 38 / var(--tw-bg-opacity)); } +.bg-red-300 { + --tw-bg-opacity: 1; + background-color: rgb(252 165 165 / var(--tw-bg-opacity)); +} + +.bg-slate-800 { + --tw-bg-opacity: 1; + background-color: rgb(30 41 59 / var(--tw-bg-opacity)); +} + +.fill-white { + fill: #fff; +} + +.fill-slate-800 { + fill: #1e293b; +} + .p-4 { padding: 1rem; } @@ -719,6 +869,10 @@ Ensure the default browser behavior of the `hidden` attribute. padding: 2rem; } +.p-16 { + padding: 4rem; +} + .px-4 { padding-left: 1rem; padding-right: 1rem; @@ -744,6 +898,18 @@ Ensure the default browser behavior of the `hidden` attribute. padding-bottom: 0.5rem; } +.pb-2 { + padding-bottom: 0.5rem; +} + +.pt-2 { + padding-top: 0.5rem; +} + +.pt-4 { + padding-top: 1rem; +} + .text-center { text-align: center; } @@ -778,6 +944,11 @@ Ensure the default browser behavior of the `hidden` attribute. line-height: 1rem; } +.text-lg { + font-size: 1.125rem; + line-height: 1.75rem; +} + .font-bold { font-weight: 700; } @@ -836,11 +1007,40 @@ Ensure the default browser behavior of the `hidden` attribute. transition-timing-function: cubic-bezier(0.4, 0, 1, 1); } +.hover\:border-slate-200:hover { + --tw-border-opacity: 1; + border-color: rgb(226 232 240 / var(--tw-border-opacity)); +} + +.hover\:border-slate-400:hover { + --tw-border-opacity: 1; + border-color: rgb(148 163 184 / var(--tw-border-opacity)); +} + .hover\:bg-\[\#103e53\]:hover { --tw-bg-opacity: 1; background-color: rgb(16 62 83 / var(--tw-bg-opacity)); } +.hover\:bg-slate-400:hover { + --tw-bg-opacity: 1; + background-color: rgb(148 163 184 / var(--tw-bg-opacity)); +} + +.hover\:bg-slate-200:hover { + --tw-bg-opacity: 1; + background-color: rgb(226 232 240 / var(--tw-bg-opacity)); +} + +.hover\:bg-slate-800:hover { + --tw-bg-opacity: 1; + background-color: rgb(30 41 59 / var(--tw-bg-opacity)); +} + +.hover\:fill-white:hover { + fill: #fff; +} + .disabled\:cursor-not-allowed:disabled { cursor: not-allowed; } @@ -858,3 +1058,21 @@ Ensure the default browser behavior of the `hidden` attribute. --tw-text-opacity: 1; color: rgb(156 163 175 / var(--tw-text-opacity)); } + +@media (min-width: 640px) { + .sm\:grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (min-width: 768px) { + .md\:grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } +} + +@media (min-width: 1024px) { + .lg\:grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } +} diff --git a/src/App.vue b/src/App.vue index 4198469..07de2d5 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,5 +1,33 @@ + + diff --git a/src/components/RightPanel.vue b/src/components/RightPanel.vue index ca5fc20..25ddc95 100644 --- a/src/components/RightPanel.vue +++ b/src/components/RightPanel.vue @@ -34,12 +34,12 @@ const timeRed = computed(() => store.state.timeRed);

Ventilador

ON OFF diff --git a/src/router.js b/src/router.js index 6596fc0..209569c 100644 --- a/src/router.js +++ b/src/router.js @@ -1,7 +1,11 @@ import { createRouter, createWebHistory } from 'vue-router'; import Dashboard from './views/Dashboard.vue'; +import Data from './views/Data.vue'; -const routes = [{ path: '/', component: Dashboard }]; +const routes = [ + { path: '/', component: Dashboard, name: 'dashboard' }, + { path: '/data', component: Data, name: 'data' }, +]; const router = createRouter({ history: createWebHistory(), diff --git a/src/store.js b/src/store.js index 1ab2f1d..ec92dea 100644 --- a/src/store.js +++ b/src/store.js @@ -1,4 +1,4 @@ -import { push, ref, set } from 'firebase/database'; +import { child, get, push, ref, set } from 'firebase/database'; import { createStore } from 'vuex'; import db from './firebase'; import { uuid } from './utils'; @@ -20,6 +20,7 @@ const store = createStore({ timeGreen: 0, timeYellow: 0, timeRed: 0, + simulations: {}, }; }, mutations: { @@ -88,6 +89,9 @@ const store = createStore({ saveFinalData() { console.log('datos finales'); }, + getSimulations(state, simulations) { + state.simulations = simulations; + }, }, actions: { updateHeaterTemperature({ commit }, heaterTemperature) { @@ -202,6 +206,20 @@ const store = createStore({ commit('saveFinalData'); }, + getSimulations({ commit }) { + const dbRef = ref(db, 'simulations'); + get(child(dbRef, '/')) + .then((snapshot) => { + if (snapshot.exists()) { + commit('getSimulations', snapshot.val()); + } else { + console.log('No data available'); + } + }) + .catch((error) => { + console.error(error); + }); + }, }, }); diff --git a/src/views/Data.vue b/src/views/Data.vue new file mode 100644 index 0000000..5a36dbc --- /dev/null +++ b/src/views/Data.vue @@ -0,0 +1,92 @@ + + + + + \ No newline at end of file