Skip to content

Commit

Permalink
Refactorizar componente App.vue para mejorar rendimiento y seguir con…
Browse files Browse the repository at this point in the history
…venciones de Vue 3
  • Loading branch information
JoaquinDecima committed Oct 23, 2024
1 parent 3bf0b62 commit 4ca5f1e
Show file tree
Hide file tree
Showing 4 changed files with 92 additions and 120 deletions.
1 change: 0 additions & 1 deletion ui/src/App.vue
Original file line number Diff line number Diff line change
@@ -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");
Expand Down
121 changes: 50 additions & 71 deletions ui/src/components/widgets/ClockWidgert.vue
Original file line number Diff line number Diff line change
@@ -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>
41 changes: 19 additions & 22 deletions ui/src/components/widgets/components/ClockDate.vue
Original file line number Diff line number Diff line change
@@ -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>
49 changes: 23 additions & 26 deletions ui/src/components/widgets/components/ClockTime.vue
Original file line number Diff line number Diff line change
@@ -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>

0 comments on commit 4ca5f1e

Please sign in to comment.