From 4ca5f1e7ad60b506abda1407fed76c40ad8c770d Mon Sep 17 00:00:00 2001
From: "Joaquin (Pato) Decima" <jdecima@vasak.net.ar>
Date: Wed, 23 Oct 2024 10:53:56 -0300
Subject: [PATCH] Refactorizar componente App.vue para mejorar rendimiento y
 seguir convenciones de Vue 3

---
 ui/src/App.vue                                |   1 -
 ui/src/components/widgets/ClockWidgert.vue    | 121 ++++++++----------
 .../widgets/components/ClockDate.vue          |  41 +++---
 .../widgets/components/ClockTime.vue          |  49 ++++---
 4 files changed, 92 insertions(+), 120 deletions(-)

diff --git a/ui/src/App.vue b/ui/src/App.vue
index 654ae9d..a9d9cbe 100755
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { onMounted, Ref, ref } from "vue";
 import ClockWidget from "./components/widgets/ClockWidgert.vue";
-//import background from "./assets/background.mp4";
 
 const background: Ref<string> = ref("/home/pato/.backgroud.mp4");
 
diff --git a/ui/src/components/widgets/ClockWidgert.vue b/ui/src/components/widgets/ClockWidgert.vue
index a9ef8d8..f7e8708 100755
--- a/ui/src/components/widgets/ClockWidgert.vue
+++ b/ui/src/components/widgets/ClockWidgert.vue
@@ -1,85 +1,64 @@
-<script lang="ts">
-import { defineComponent } from "vue";
+<script lang="ts" setup>
+import { computed, onMounted, Ref, ref } from "vue";
 import ClockDate from "./components/ClockDate.vue";
 import ClockTime from "./components/ClockTime.vue";
 
-export default defineComponent({
-  name: "ClockWidget",
-  data() {
-    return {
-      day: 0,
-      month: 0,
-      year: 0,
-      min: "00",
-      hour: "00",
-      seconds: "00",
-      amPm: "AM",
-    };
-  },
-  methods: {
-    setTime() {
-      const date = new Date();
-      let hour = date.getHours(); // 0 - 23
-      let min = date.getMinutes(); // 0 - 59
-      let seconds = date.getSeconds(); // 0 - 59
-      this.day = date.getDate();
-      this.month = date.getMonth() + 1;
-      this.year = date.getFullYear();
+const day: Ref<number> = ref(0);
+const month: Ref<number> = ref(0);
+const year: Ref<number> = ref(0);
+const min: Ref<string> = ref("00");
+const hour: Ref<string> = ref("00");
+const seconds: Ref<string> = ref("00");
+const amPm: Ref<string> = ref("AM");
 
-      if (hour > 12) {
-        hour = hour - 12;
-        this.amPm = "PM";
-      } else {
-        this.amPm = "AM";
-      }
+const setTime = () => {
+  const date = new Date();
+  let dateHour = date.getHours(); // 0 - 23
+  let dateMin = date.getMinutes(); // 0 - 59
+  let dateSeconds = date.getSeconds(); // 0 - 59
+  day.value = date.getDate();
+  month.value = date.getMonth() + 1;
+  year.value = date.getFullYear();
 
-      if (hour == 0) {
-        hour = 12;
-      }
+  if (dateHour > 12) {
+    dateHour = dateHour - 12;
+    amPm.value = "PM";
+  } else {
+    amPm.value = "AM";
+  }
 
-      this.hour = hour < 10 ? `0${hour}` : `${hour}`;
-      this.min = min < 10 ? `0${min}` : `${min}`;
-      this.seconds = seconds < 10 ? `0${seconds}` : `${seconds}`;
-    },
-  },
-  computed:{
-    cDay(): number{
-      return this.day
-    },
-    cMonth(): number{
-      return this.month
-    },
-    cYear(): number{
-      return this.year
-    },
-    cHour(): string{
-      return this.hour
-    },
-    cMin(): string{
-      return this.min
-    },
-    cSeconds(): string{
-      return this.seconds
-    },
-    cAmPm(): string{
-      return this.amPm
-    }
-  },
-  mounted() {
-    setInterval(() => this.setTime(), 1000);
-  },
-  components: {
-    ClockDate,
-    ClockTime,
-  },
+  if (dateHour == 0) {
+    dateHour = 12;
+  }
+
+  hour.value = dateHour < 10 ? `0${dateHour}` : `${dateHour}`;
+  min.value = dateMin < 10 ? `0${dateMin}` : `${dateMin}`;
+  seconds.value = dateSeconds < 10 ? `0${dateSeconds}` : `${dateSeconds}`;
+};
+
+const cDay = computed(() => day.value);
+const cMonth = computed(() => month.value);
+const cYear = computed(() => year.value);
+const cHour = computed(() => hour.value);
+const cMin = computed(() => min.value);
+const cSeconds = computed(() => seconds.value);
+const cAmPm = computed(() => amPm.value);
+
+onMounted(() => {
+  setInterval(() => setTime(), 1000);
 });
 </script>
 
 <template>
-  <div class="clock-warp">
-    <div class="clock-widget">
+  <div class="clock-position">
+    <div class="widget-frame clock-widget">
       <ClockDate :day="cDay" :month="cMonth" :year="cYear" />
-      <ClockTime :hours="cHour" :minutes="cMin" :amPm="cAmPm" :seconds="cSeconds" />
+      <ClockTime
+        :hours="cHour"
+        :minutes="cMin"
+        :amPm="cAmPm"
+        :seconds="cSeconds"
+      />
     </div>
   </div>
 </template>
diff --git a/ui/src/components/widgets/components/ClockDate.vue b/ui/src/components/widgets/components/ClockDate.vue
index 0d35d5a..75e5e21 100755
--- a/ui/src/components/widgets/components/ClockDate.vue
+++ b/ui/src/components/widgets/components/ClockDate.vue
@@ -1,31 +1,28 @@
-<script lang="ts">
-import { defineComponent } from "vue";
+<script lang="ts" setup>
+import { defineProps } from "vue";
 
-export default defineComponent({
-  name: "ClockDate",
-  props: {
-    day: {
-      type: Number,
-      required: true,
-    },
-    month: {
-      type: Number,
-      required: true,
-    },
-    year: {
-      type: Number,
-      required: true,
-    },
+defineProps({
+  day: {
+    type: Number,
+    required: true,
   },
-});
+  month: {
+    type: Number,
+    required: true,
+  },
+  year: {
+    type: Number,
+    required: true,
+  },
+})
 </script>
 
 <template>
-  <div class="clock-date text-center">
-    <span class="clock-date-day">{{ day }}</span>
+  <div class="clock-date">
+    <span>{{ day }}</span>
     <span>/</span>
-    <span class="clock-date-month">{{ month }}</span>
+    <span>{{ month }}</span>
     <span>/</span>
-    <span class="clock-date-year">{{ year }}</span>
+    <span>{{ year }}</span>
   </div>
 </template>
diff --git a/ui/src/components/widgets/components/ClockTime.vue b/ui/src/components/widgets/components/ClockTime.vue
index 7839a59..985d115 100755
--- a/ui/src/components/widgets/components/ClockTime.vue
+++ b/ui/src/components/widgets/components/ClockTime.vue
@@ -1,38 +1,35 @@
-<script lang="ts">
-import { defineComponent } from "vue";
+<script lang="ts" setup>
+import { defineProps } from "vue";
 
-export default defineComponent({
-  name: "ClockTime",
-  props: {
-    hours: {
-      type: String,
-      required: true,
-    },
-    minutes: {
-      type: String,
-      required: true,
-    },
-    seconds: {
-      type: String,
-      required: true,
-    },
-    amPm: {
-      type: String,
-      required: true,
-    },
+defineProps({
+  hours: {
+    type: String,
+    required: true,
+  },
+  minutes: {
+    type: String,
+    required: true,
+  },
+  seconds: {
+    type: String,
+    required: true,
+  },
+  amPm: {
+    type: String,
+    required: true,
   },
 });
 </script>
 
 <template>
-  <div class="clock-time text-center">
-    <span class="clock-time-hours">{{ hours }}</span>
+  <div class="clock-time">
+    <span>{{ hours }}</span>
     <span>:</span>
-    <span class="clock-time-minutes">{{ minutes }}</span>
+    <span>{{ minutes }}</span>
     <span>:</span>
     <div class="clock-time-box">
-      <span class="clock-time-am-pm">{{ amPm }}</span>
-      <span class="clock-time-seconds">{{ seconds }}</span>
+      <span>{{ amPm }}</span>
+      <span>{{ seconds }}</span>
     </div>
   </div>
 </template>