Adicionando Vue Router | Adicionando novas funcionalidades: Calendário, feriados e views | Modificando resposta da API

Author: swshadows

README.md

@@ -25,5 +25,5 @@
   ```
 
 - Baixe as requisições do projeto com o comando `npm install`
-- Configure a requisição `fetch` no componente `Months.vue` para o endereço da API Holid (`localhost:3000`)
+- Altere os endpoints da API web para a API local em `@/views/MonthView.vue` e `@/components/Months.vue`
 - Inicialize o projeto com o comando `npm run serve`

package-lock.json

@@ -8,10 +8,12 @@
   },
   "dependencies": {
     "core-js": "^3.8.3",
-    "vue": "^3.2.13"
+    "vue": "^3.2.13",
+    "vue-router": "^4.0.3"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-router": "~5.0.0",
     "@vue/cli-service": "~5.0.0"
   }
 }

package.json

@@ -1,33 +1,30 @@
 <template>
   <h1 class="main-title">Calend</h1>
-  <Today />
-  <Months />
-  <Footer />
+  <Clock />
+  <router-view />
 </template>
 
 <script>
-import Today from "@/components/Today.vue";
-import Months from "@/components/Months.vue";
-import Footer from "@/components/Footer.vue";
+import Clock from "@/components/Clock.vue";
 export default {
-  name: "App",
-  components: { Today, Months, Footer },
+  components: { Clock },
 };
 </script>
 
 <style>
-@import url("https://fonts.googleapis.com/css2?family=Uchen&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Mukta&display=swap");
 
 * {
-  font-family: "Uchen", serif;
+  font-family: "Mukta", sans-serif;
 }
 
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
-  max-width: 1200px;
+  color: #2c3e50;
+  max-width: 1000px;
   color: #4d4d4d;
   margin: 0 auto;
 }

src/App.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="calendar">
+    <span class="day" :class="{ 'holiday-color': day.name && !day.changes }" v-for="day in daysWithHolidays" :key="day">
+      {{ day.day || day }}
+      <p class="holiday-desc" v-if="day.name && !day.changes">
+        <span>{{ day.name }}</span>
+      </p>
+    </span>
+  </div>
+</template>
+
+<script>
+import { computed } from "@vue/runtime-core";
+export default {
+  props: ["month"],
+  setup(props) {
+    console.log(props);
+    const daysWithHolidays = computed(() => {
+      const days = [];
+
+      for (let i = 1; i <= props.month.days; i++) days.push(i);
+
+      props.month.holidays.map((item) => {
+        for (let i in days) {
+          if (item.day == days[i]) days[i] = item;
+        }
+      });
+      return days;
+    });
+
+    return { daysWithHolidays };
+  },
+};
+</script>
+
+<style scoped>
+.calendar {
+  display: grid;
+  grid-template: 1fr / 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+.day {
+  display: grid;
+  place-items: center;
+  border: 3px solid #eee;
+  padding: 10px;
+  width: 100px;
+  height: 100px;
+  transition: 0.1s all;
+  position: relative;
+}
+.day:hover {
+  transform: translate(-10px, -10px);
+  box-shadow: 10px 10px 0 0 #dddddd;
+}
+.holiday-color {
+  color: #ff0000;
+}
+.holiday-desc {
+  opacity: 0;
+  background: #fff;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 100%;
+  transition: 0.1s all;
+  margin: 0;
+}
+.day:hover .holiday-desc {
+  opacity: 1;
+}
+</style>

src/components/Calendar.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="clock">
+    <span>Hoje é {{ clock.day }}/{{ clock.month }}/{{ clock.year }}</span>
+    <span> às {{ clock.hours }}:{{ clock.minutes }}:{{ clock.seconds }}</span>
+  </div>
+</template>
+
+<script>
+import { onMounted, ref } from "@vue/runtime-core";
+import runClock from "@/functions/runClock";
+export default {
+  setup() {
+    const clock = ref({});
+    onMounted(() => {
+      runClock(clock);
+      setInterval(() => {
+        runClock(clock);
+      }, 1000);
+    });
+
+    return { clock };
+  },
+};
+</script>
+
+<style scoped>
+.clock {
+  margin: 20px;
+}
+</style>

src/components/Clock.vue

@@ -1,16 +1,11 @@
 <template>
   <div class="grid" v-if="months">
-    <div v-for="month in months" :key="month.id">
-      <h2>{{ month.name }}, {{ month.id }}</h2>
-      <p>Total de dias: {{ month.days }}</p>
-      <h4>Feriados</h4>
-      <ul v-if="month.holidays.length > 0">
-        <li v-for="holiday in month.holidays" :key="holiday.name">{{ holiday.name }}, {{ holiday.duration }} dia(s)</li>
-      </ul>
-      <ul v-else>
-        <li style="color: #fc5a5a">Sem feriados definidos</li>
-      </ul>
-    </div>
+    <router-link v-for="month in months" :key="month.id" :to="{ name: 'month', params: { id: month.id } }">
+      <div>
+        <h2>{{ month.name }}</h2>
+        <p>Total de dias: {{ month.days }}</p>
+      </div>
+    </router-link>
   </div>
   <Spinner v-else />
 </template>
@@ -35,11 +30,18 @@ export default {
 </script>
 
 <style scoped>
+a {
+  color: #2c3e50;
+  text-decoration: none;
+}
 .grid {
   display: grid;
   grid-template: 1fr / 1fr 1fr 1fr;
   gap: 20px;
 }
+.grid h2 {
+  color: #5189c0;
+}
 .grid div {
   border: 3px solid #eee;
   border-radius: 10px;

src/components/Months.vue

@@ -0,0 +1,15 @@
+import format from "./format";
+
+const runClock = (c) => {
+  const d = new Date();
+  c.value = {
+    hours: format(d.getHours()),
+    minutes: format(d.getMinutes()),
+    seconds: format(d.getSeconds()),
+    day: format(d.getDay()),
+    month: format(d.getMonth() + 1),
+    year: d.getFullYear(),
+  };
+};
+
+export default runClock;

src/components/Today.vue

@@ -1,4 +1,5 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import router from './router'
 
-createApp(App).mount('#app')
+createApp(App).use(router).mount('#app')