2023-12-05 03:23:06 +00:00
|
|
|
<script setup lang="ts">
|
|
|
|
import { setActivePinia } from "pinia";
|
2023-12-09 06:18:16 +00:00
|
|
|
import pinia from "../../store/index";
|
2023-12-05 03:23:06 +00:00
|
|
|
setActivePinia(pinia);
|
|
|
|
|
2023-12-09 06:18:16 +00:00
|
|
|
import { useStateStore } from "../../store/stateStore.js";
|
2023-12-05 03:23:06 +00:00
|
|
|
const state = useStateStore(pinia);
|
|
|
|
|
|
|
|
function getDateTime(timestampRaw) {
|
|
|
|
var datetime = new Date(timestampRaw * 1000).toLocaleString(
|
|
|
|
navigator.language,
|
|
|
|
{
|
|
|
|
hourCycle: "h23",
|
|
|
|
|
|
|
|
month: "2-digit",
|
|
|
|
day: "2-digit",
|
|
|
|
hour: "2-digit",
|
|
|
|
minute: "2-digit",
|
|
|
|
second: "2-digit",
|
|
|
|
},
|
|
|
|
);
|
|
|
|
return datetime;
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
2023-12-05 03:27:35 +00:00
|
|
|
<div class="card h-100">
|
|
|
|
<div class="card-header">
|
|
|
|
<strong>Activity</strong>
|
|
|
|
</div>
|
|
|
|
<div class="card-body overflow-auto" style="align-items: start">
|
|
|
|
<div v-for="item in state.activities" :key="item[0]">
|
2023-12-06 03:10:04 +00:00
|
|
|
<h6 style="text-align: start" class="mb-0">
|
2023-12-06 03:11:59 +00:00
|
|
|
{{ item[1].origin }} -
|
|
|
|
<span>{{ getDateTime(item[1].timestamp) }}</span>
|
2023-12-05 03:27:35 +00:00
|
|
|
</h6>
|
2023-12-06 03:11:59 +00:00
|
|
|
<p class="mb-2" style="text-align: start; font-size: smaller">
|
2023-12-05 03:27:35 +00:00
|
|
|
{{ item[1].activity_type }} - {{ item[1].direction }}
|
|
|
|
</p>
|
|
|
|
</div>
|
2023-12-05 03:23:06 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|