Merge pull request #25 from fga-eps-mds/feature/Area_Externa

[WIP] Area externa
fga-eps-mds · Sep 2, 2022 · 9476526 · 9476526
2 parents f980664 + 7a2aa91
commit 9476526
Show file tree

Hide file tree

Showing 39 changed files with 1,238 additions and 4 deletions.
diff --git a/puma/.eslintrc.json b/puma/.eslintrc.json
@@ -14,5 +14,6 @@
     "plugins": [
         "vue"
     ],
-    "rules": {}
+    "rules": {
+    }
 }
diff --git a/puma/src/components/AreaExterna/AreaExternaHeader/AreaExternaHeader.css b/puma/src/components/AreaExterna/AreaExternaHeader/AreaExternaHeader.css
@@ -0,0 +1,115 @@
+header {
+    height: auto;
+    padding: 20px 0px;
+    background-color: #15355e;
+    font-size: 16px;
+}
+
+nav {
+    flex: 1;
+    margin: 0px 10px;
+}
+
+ul {
+    width: min-content;
+    margin: 0 auto;
+    display: flex;
+    list-style: none;
+    padding: 0px;
+    align-items: center;
+}
+
+li {
+    margin: 0px 10px 0px 0px;
+    width: max-content;
+}
+
+.ultimoLi {
+    margin-right: 0px !important;
+}
+
+li > a {
+    text-decoration: none;
+}
+
+li > a > div {
+    height: 100%;
+    color: #ffffff;
+    padding: 10px 20px;
+    cursor: pointer;
+    transition: 0.5s;
+    border-radius: 5px;
+}
+
+li > a > div:hover {
+    background-color: #09172a;
+    color: #ffffff;
+}
+
+li > a > div > span{
+    display: block;
+}
+
+.currentPage {
+    background-color: #09172a;
+}
+
+.divLogo {
+    height: 50px;
+    width: 125px;
+}
+
+.divLogo > img {
+    height: 100%;
+    cursor: pointer;
+}
+
+.authentication {
+    width: min-content;
+    display: flex;
+    flex-wrap: nowrap;
+    height: min-content;
+}
+
+button {
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: 0.5s;
+}
+
+.register {
+    background-color: #15355e;
+    color: #ffffff;
+    padding: 10px 30px;
+    margin-right: 20px;
+}
+
+.register:hover {
+    background-color: #09172a;
+    color: #ffffff;
+}
+
+.login {
+    background-color: #f7db36;
+    color: #15355e;
+    width: 130px;
+    height: 45px;
+}
+
+.headerCorpo {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    margin: 0px 10%;
+    display: flex;
+    align-items: center;
+}
+
+@media (max-width: 1000px) {
+    nav {
+        display: none;
+    }
+
+    .authentication {
+        display: none;
+    }
+}
diff --git a/puma/src/components/AreaExterna/AreaExternaHeader/AreaExternaHeader.html b/puma/src/components/AreaExterna/AreaExternaHeader/AreaExternaHeader.html
@@ -0,0 +1,30 @@
+<header>
+    <div class="headerCorpo">
+        <div class="divLogo">
+            <img src="../../../assets/logo-unb.png" onclick="window.location='/'">
+        </div>
+        <nav>
+            <ul>
+                <li><a href="/home/sobre"><div v-bind:class="{ currentPage: '/home/sobre' === pagina}">
+                    <span>Sobre</span>
+                    <span>a Puma</span>
+                </div></a></li>
+                <li><a href="/home/disciplinas"><div v-bind:class="{ currentPage: '/home/disciplinas' === pagina}">
+                    <span>Disciplinas</span>
+                    <span>de Projeto</span>
+                </div></a></li>
+                <li><a href="/home/parceiros"><div v-bind:class="{ currentPage: '/home/parceiros' === pagina}">
+                    <span>Parceiros</span>
+                    <span>e Projetos</span>
+                </div></a></li>
+                <li class="ultimoLi"><a href="/Contato"><div v-bind:class="{ currentPage: '/Contato' === pagina}">
+                    <span>Contato</span>
+                </div></a></li>
+            </ul>
+        </nav>
+
+        <div class="authentication">
+            <button class="login" onclick="window.location='/usuario/login'">Entrar</button>
+        </div>
+    </div>
+</header>
diff --git a/puma/src/components/AreaExterna/AreaExternaHeader/AreaExternaHeader.js b/puma/src/components/AreaExterna/AreaExternaHeader/AreaExternaHeader.js
@@ -0,0 +1,5 @@
+export default {
+  props: {
+    pagina: String,
+  },
+};
diff --git a/puma/src/components/AreaExterna/AreaExternaHeader/AreaExternaHeader.vue b/puma/src/components/AreaExterna/AreaExternaHeader/AreaExternaHeader.vue
@@ -0,0 +1,5 @@
+<template src="./AreaExternaHeader.html"></template>
+
+<style src="./AreaExternaHeader.css"></style>
+
+<script src="./AreaExternaHeader.js"></script>
diff --git a/puma/src/components/AreaExterna/Contato/Contato.css b/puma/src/components/AreaExterna/Contato/Contato.css
@@ -0,0 +1,43 @@
+.corpo {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    margin: 3% 10%;
+    color: rgba(2, 16, 33, 0.8);
+}
+
+h1 {
+    font-size: 48px;
+    font-weight: 400;
+    letter-spacing: -0.02em;
+    margin: 0px;
+    color: rgba(2, 16, 33, 0.8);
+}
+
+.contato-titulo {
+    font-weight: 700;
+    font-size: 32px;
+    letter-spacing: -0.02em;
+    margin-bottom: 15px;
+}
+
+.div-contato {
+    margin-top: 40px;
+}
+
+.contato-email {
+    margin-bottom: 10px;
+}
+
+.contato-topico {
+    font-weight: bold;
+}
+
+.email-puma{
+    color: #15355E;
+    opacity: .7;
+}
+
+.email-puma:hover{
+    opacity: 1;
+    text-decoration: underline;
+    cursor: pointer;
+}
diff --git a/puma/src/components/AreaExterna/Contato/Contato.html b/puma/src/components/AreaExterna/Contato/Contato.html
@@ -0,0 +1,19 @@
+<section>
+    <AreaExternaHeader :pagina="Contato"/>
+    <div class="corpo">
+        <h1>Contatos</h1>
+
+        <div v-for="contato in contatos" :key="contato.nome" class="contato">
+            <div class="div-contato">
+                <h3 class="contato-titulo">{{contato.nome}}</h3>
+
+                <div v-if="contato.endereco" class="contato-email">
+                    <span class="contato-topico">Endereço: </span><span>{{contato.endereco}}</span>
+                </div>
+                <div v-if="contato.email">
+                    <span class="contato-topico">Email: </span><span class="email-puma">{{contato.email}}</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
diff --git a/puma/src/components/AreaExterna/Contato/Contato.js b/puma/src/components/AreaExterna/Contato/Contato.js
@@ -0,0 +1,30 @@
+import AreaExternaHeader from '../AreaExternaHeader/AreaExternaHeader.vue';
+
+export default {
+  components: {
+    AreaExternaHeader,
+  },
+
+  data() {
+    return {
+      pagina: '/Contato',
+      contatos: [
+        {
+          nome: 'Departamento de Engenharia de Produção',
+          endereco: 'Sala DT-77/15, prédio da FT, bloco D UnB - Campus Universitário Darcy Ribeiro, Brasília - DF',
+          email: '[email protected]',
+        },
+        {
+          nome: 'Administrador da plataforma 1',
+          endereco: '',
+          email: '[email protected]',
+        },
+        {
+          nome: 'Professor responsavel 1',
+          endereco: '',
+          email: '[email protected]',
+        },
+      ],
+    };
+  },
+};
diff --git a/puma/src/components/AreaExterna/Contato/Contato.vue b/puma/src/components/AreaExterna/Contato/Contato.vue
@@ -0,0 +1,5 @@
+<template src="./Contato.html"></template>
+
+<script src="./Contato.js"></script>
+
+<style src="./Contato.css" ></style>
diff --git a/puma/src/components/AreaExterna/Disciplinas/Disciplina.css b/puma/src/components/AreaExterna/Disciplinas/Disciplina.css
@@ -0,0 +1,21 @@
+.corpo {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    margin: 3% 10%;
+    color: rgba(2, 16, 33, 0.8);
+}
+
+h1 {
+    font-size: 48px;
+    font-weight: 400;
+    letter-spacing: -0.02em;
+    margin: 0px;
+    color: rgba(2, 16, 33, 0.8);
+}
+
+.paragrafo-sobre {
+    text-align: justify;
+    letter-spacing: 0.08em;
+    font-size: 24px;
+    font-weight: 400;
+    margin: 40px 0px 80px 0px;
+}
diff --git a/puma/src/components/AreaExterna/Disciplinas/Disciplina.html b/puma/src/components/AreaExterna/Disciplinas/Disciplina.html
@@ -0,0 +1,12 @@
+<section>
+    <AreaExternaHeader :pagina="pagina"/>
+    <div class="corpo">
+        <h1>Disciplinas de Projetos</h1>
+
+        <p class="paragrafo-sobre">
+            A PUMA conecta empresas e empresarios com os alunos e professores da Engenharia de Produção da Universidade de Brasília, de forma que problemas reais vivenciados pelas empresas possam ser trabalhados dentro de sala de aula.
+        </p>
+
+        <ListaDisciplina/>
+    </div>
+</section>
diff --git a/puma/src/components/AreaExterna/Disciplinas/Disciplina.js b/puma/src/components/AreaExterna/Disciplinas/Disciplina.js
@@ -0,0 +1,15 @@
+import AreaExternaHeader from '../AreaExternaHeader/AreaExternaHeader.vue';
+import ListaDisciplina from './ListaDisciplina/ListaDisciplina.vue';
+
+export default {
+  components: {
+    AreaExternaHeader,
+    ListaDisciplina,
+  },
+
+  data() {
+    return {
+      paginaAtual: '/home/disciplinas',
+    };
+  },
+};
diff --git a/puma/src/components/AreaExterna/Disciplinas/Disciplina.vue b/puma/src/components/AreaExterna/Disciplinas/Disciplina.vue
@@ -0,0 +1,5 @@
+<template src="./Disciplina.html"></template>
+
+<script src="./Disciplina.js"></script>
+
+<style src="./Disciplina.css" scoped></style>
diff --git a/puma/src/components/AreaExterna/Disciplinas/ListaDisciplina/ListaDisciplina.css b/puma/src/components/AreaExterna/Disciplinas/ListaDisciplina/ListaDisciplina.css
@@ -0,0 +1,52 @@
+.tabela {
+    width: 100%;
+    display: flex;
+    max-width: 1000px;
+    margin-bottom: 40px;
+    align-items: unset;
+}
+
+.loading {
+    animation: is-rotating 0.5s infinite;
+    border: 6px solid #e5e5e5;
+    border-radius: 50%;
+    border-top-color: #15355e;
+    height: 50px;
+    width: 50px;
+    margin: auto;
+}
+
+.item-tabela {
+    flex: 1;
+    margin: 0;
+    text-align: center;
+    cursor: pointer;
+    padding: 10px;
+    border: 1px solid #15355e;
+}
+
+.item-tabela:first-child { 
+    background-color: #15355e;
+    color: #ffffff;
+}
+
+.erro-lista-disciplina {
+    color: red;
+    font-size: 20px;
+}
+
+@media (max-width: 700px) {
+    .tabela {
+        flex-direction: column;
+    }
+
+    .item-tabela {
+        width: 100%;
+    }
+}
+
+@keyframes is-rotating {
+    to {
+        transform: rotate(1turn);
+    }
+}
diff --git a/puma/src/components/AreaExterna/Disciplinas/ListaDisciplina/ListaDisciplina.html b/puma/src/components/AreaExterna/Disciplinas/ListaDisciplina/ListaDisciplina.html
@@ -0,0 +1,13 @@
+<section>
+    <ul id="tabela-listagem-disciplina" class="tabela">
+        <div v-if="loading" class="loading"></div>
+
+        <li class="item-tabela" @click="alterarShowSelectDisciplina($event, disciplina)" v-for="disciplina in listaDisciplinas" :key="disciplina.subjectid">
+            {{ disciplina.name }}
+        </li>
+    </ul>
+
+    <div class="erro-lista-disciplina" v-if="error">Erro na busca das disciplinas da PUMA, Tente novamente mais tarde.</div>
+
+    <ObjetoDisciplina v-if="!loading && !error" :idDisciplina="disciplinaAtual.subjectid"/>
+</section>