Merge branch 'front-dargDrop' into dev

docs/docs/sprint-4/postgres_setup/postgres_setup.md

@@ -0,0 +1,68 @@
+---
+title: Setup do Postgres
+sidebar_position: 3
+---
+
+
+Essa implementação utiliza o GORM, uma biblioteca de mapeamento objeto-relacional para Go, para facilitar a interação com um banco de dados PostgreSQL. Cinco estruturas de dados são definidas: User, Sensor, Props, Elements, e Layout, cada uma representando entidades diferentes em um sistema.
+
+A estrutura User representa os usuários do sistema, com campos como nome, e-mail e senha, e associações com outras entidades como Directorate e Layout. Directorate representa as diretorias no sistema, enquanto Layout representa os layouts de interface. A estrutura Elements representa os elementos que compõem um layout, e Props armazena propriedades genéricas associadas a esses elementos.
+
+
+
+![shcema1](/img/schema1.png)
+
+1) Incorpora os campos padrão do GORM para um modelo de banco de dados
+2) ID é a chave primária autoincrementada única do usuário
+3) Name representa o nome do usuário
+4) Email é o endereço de e-mail do usuário
+5) Password é a senha do usuário
+6) Role é o papel do usuário, com um valor padrão de 1
+7) DirectorateRefer é uma referência à diretoria do usuário
+8) Directorate é a diretoria à qual o usuário pertence
+9) LayoutRefer é uma referência ao layout do usuário
+10) Layout é o layout associado ao usuário
+
+
+![schema2](/img/schema2.png)
+
+1) Incorpora os campos padrão do GORM para um modelo de banco de dados
+2) ID é a chave primária autoincrementada única 
+3) Directorate representa o nome da diretoria
+
+
+![schema3](/img/schema3.png)
+
+1) Incorpora os campos padrão do GORM para um modelo de banco de dados
+2) ID é a chave primária autoincrementada única do elemento
+3) Name é o nome do elemento
+4) PropsRefer é uma referência aos atributos (props) do elemento
+5) Props é a estrutura de atributos associada ao elemento
+
+
+
+![schema4](/img/schema4.png)
+1) Incorpora os campos padrão do GORM para um modelo de banco de dados
+2) ID é a chave primária autoincrementada única do atributo
+3) Value é o valor do atributo
+
+![schema5](/img/schema5.png)
+1) Incorpora os campos padrão do GORM para um modelo de banco de dados
+2) ID é a chave primária do layout
+3) ElementsRefer é uma referência aos elementos do layout
+4) Elements é a estrutura de elementos associada ao layout
+5) Index é a posição do layout
+
+
+![schema6](/img/schema6.png)
+
+1) Incorpora os campos padrão do GORM para um modelo de banco de dados
+2) Identifier é o identificador do sensor
+3) Name é o nome do sensor
+3) CoordX é a coordenada X do sensor
+4) CoordY é a coordenada Y do sensor
+
+
+
+
+

src/API-Collection.json

@@ -59,7 +59,7 @@
             "params": [],
             "body": {
                 "type": "json",
-                "raw": "{\n  \"name\": \"Meu Nome\",\n  \"email\":\"meu@email.com\",\n  \"password\": \"minhasenha\"\n}",
+                "raw": "{\n  \"name\": \"Meu Nome\",\n  \"email\":\"meuTimao@email.com\",\n  \"password\": \"minhasenha\"\n}",
                 "form": []
             },
             "tests": []
@@ -98,7 +98,7 @@
             "params": [],
             "body": {
                 "type": "json",
-                "raw": "{\n  \"email\": \"meu@email.com\",\n  \"password\": \"minhasenha\"\n}",
+                "raw": "{\n  \"email\": \"meuTimao@email.com\",\n  \"password\": \"minhasenha\"\n}",
                 "form": []
             },
             "tests": []

src/docker-compose.yaml

@@ -82,4 +82,10 @@ services:
       interval: 2s
       timeout: 2s
       retries: 20
-    restart: always
+    restart: always
+
+  adminer:
+    image: adminer
+    restart: always
+    ports:
+      - 8089:8080

src/frontend/package.json

@@ -27,10 +27,11 @@
     "i": "^0.3.7",
     "pinia": "^2.1.7",
     "primevue": "^3.49.1",
+    "universal-cookie": "^6.1.3",
     "vue": "^3.4.15",
-    "vue-echarts": "^6.6.9",
     "vue-router": "^4.2.5",
-    "vue3-google-map": "^0.20.0"
+    "vue3-cookies": "^1.0.6",
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",

src/frontend/src/App.vue

@@ -1,6 +1,6 @@
 <script></script>
 <template>
-  <div class="bg-neutral-700 h-screen w-screen">
+  <div class="bg-root-color h-auto w-screen">
     <router-view></router-view>
   </div>
 </template>

src/frontend/src/components/Comum/DashboardContainer.vue

@@ -0,0 +1,47 @@
+<script setup>
+
+    import SideBar from '../SideBar.vue' 
+    import MainChart from '../MainChart.vue';
+    import GrapchA from '../GrapchA.vue';
+    import GrapchB from '../GrapchB.vue';
+    import GrapchC from '../GrapchC.vue';
+
+</script>
+
+<template>
+    <div class="grid grid-cols-6  w-screen h-auto min-h-96 ">
+        <div class=" bg-slate-100  sideMenu"></div>
+        <SideBar />
+
+        <div class="xl:col-start-2 xl:col-end-9 flex-col min-h-screen col-start-1 h-fit  col-end-9 w-full">
+
+            <div class="flex flex-wrap gap-10 h-full max-w-full m-10 items-center align-items: flex-start" >
+                <div :class="`w-96 flex justify-center  items-center min-h-52 h-auto bg-white soft-shadow text-center`">
+                    <div class="flex flex-col w-auto">
+                        <h1 class="m-3">MainChart</h1>
+                        <MainChart />
+                    </div>
+                </div>
+                <div :class="`w-96 flex justify-center  items-center min-h-52 h-auto  bg-white soft-shadow text-center`">
+                    <div class="flex flex-col w-auto">
+                        <h1 class="m-3">GrapchA</h1>        
+                        <GrapchA />
+                    </div>
+                </div>
+                <div :class="`w-96 flex justify-center  items-center min-h-52 h-auto  bg-white soft-shadow text-center`">
+                    <div class="flex flex-col w-auto">
+                        <h1 class="m-3">GrapchB</h1>
+                        <GrapchB  />
+                    </div>
+                </div>
+                <div :class="`w-96 flex justify-center  items-center min-h-52 h-auto  bg-white soft-shadow text-center`">
+                    <div class="flex flex-col w-auto">
+                        <h1 class="m-3">GrapchC</h1>
+                        <GrapchC />
+                    </div>
+                </div>
+            </div> 
+        </div>
+    </div>
+</template>
+

src/frontend/src/components/Comum/HeaderBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <Disclosure as="nav" class="bg-slate-100">
+  <Disclosure as="nav" class="bg-slate-100 border-botton">
     <div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
       <div class="relative flex h-16 items-center justify-between">
         <a href="/" class="flex flex-shrink-0 items-center">

src/frontend/src/components/DashboardContainer.vue

@@ -1,25 +1,73 @@
 <script setup>
-import SideBar from './SideBar.vue'
-import MainChart from './MainChart.vue';
-import HeatMap from './HeatMap.vue'
+
+    import SideBar from './SideBar.vue' 
+    import MainChart from './MainChart.vue';
+    import GrapchA from './GrapchA.vue';
+    import GrapchB from './GrapchB.vue';
+    import GrapchC from './GrapchC.vue';
+    
+    import axios from 'axios';
+    import { useCookies } from 'vue3-cookies'
+    import { ref, onMounted } from 'vue';
+    import draggable from 'vuedraggable';
+
+    const elements = ref(null);
+
+    const authTokenKey = 'authToken';
+    
+
+    const get_elements = async () =>{
+        try {
+            const url = '/api/platform/getComponents';
+            
+            const response = await axios.post( url,  {
+            Id: Number(useCookies().cookies.get(authTokenKey)),
+            });
+
+            console.log(response.data.elements)
+            if  (response.data.elements != null){
+                return response.data.elements}
+
+        } catch (error) {
+            console.error('Ocorreu um erro:', error);
+            
+        }
+        return [{"Name": "MainChart","Index": 1,"Value": "w-96"}]
+    } 
+
+
+   async function format_data() {
+       var  raw_elements = await get_elements()
+       elements.value = raw_elements
+    }
+
+    onMounted(() => {
+    format_data();
+  });
+
 
 </script>
 
 <template>
     <div class="grid grid-cols-6  w-screen h-auto min-h-96 ">
-        <div class=" bg-slate-100 sideMenu"></div>
+        <div class=" bg-slate-100  sideMenu"></div>
         <SideBar />
 
-        <div class="bg-white xl:col-start-2 xl:col-end-9 flex-col min-h-screen col-start-1 h-fit  col-end-9 w-full">
+        <div class=" xl:col-start-2 xl:col-end-9 flex-col min-h-screen col-start-1 h-fit  col-end-9 w-full">
 
-            <div class="flex flex-col gap-10 h-full max-w-full m-10 items-center justify-center align-items: flex-start">
-                <div style="width: 100%; ">
-                    <HeatMap />
-                </div>
-                <div style="width: 100%; max-height: 300px; height: 300px;">
-                    <MainChart />
-                </div>
-            </div>
+            <draggable v-model="elements" tag="div" class="flex flex-wrap gap-10 h-full max-w-full m-10 items-center align-items: flex-start" :animation="300">
+                <template #item="{ element: element_ }">
+                    <div :class="`${element_.Value} flex justify-center cursor-grab  items-center min-h-52 h-auto bg-slate-50 soft-shadow text-center`">
+                        <div class="flex flex-col w-auto">
+                            <h1 class="m-3">{{element_.Index}}</h1>
+                            <MainChart v-if="element_.Name == 'MainChart'" />
+                            <GrapchA v-if="element_.Name == 'GrapchA'" />
+                            <GrapchB v-if="element_.Name == 'GrapchB'" />
+                            <GrapchC v-if="element_.Name == 'GrapchC'" />
+                        </div>
+                    </div>
+                </template>
+            </draggable> 
         </div>
     </div>
 </template>

src/frontend/src/components/GrapchA.vue

@@ -0,0 +1,6 @@
+<template>
+    <div class="w-full text-center bg-stone-600 m-3">
+        GrapchA
+    </div>
+</template>
+

src/frontend/src/components/GrapchB.vue

@@ -0,0 +1,6 @@
+<template>
+    <div class="w-full text-center bg-orange-300 m-3">
+        GrapchB
+    </div>
+</template>
+

src/frontend/src/components/GrapchC.vue

@@ -0,0 +1,6 @@
+<template>
+    <div class="w-full text-center bg-red-200 m-3">
+        GraphC
+    </div>
+</template>
+