FreeDATA/gui/src/components/grid_activities.vue

<script setup lang="ts">
import { setActivePinia } from "pinia";
import pinia from "../store/index";
setActivePinia(pinia);

import { useStateStore } from "../store/stateStore.js";
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>
  <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]">
        <h6 style="text-align: start">
          {{ item[1].origin }} - {{ getDateTime(item[1].timestamp) }}
        </h6>
        <p style="text-align: start">
          {{ item[1].activity_type }} - {{ item[1].direction }}
        </p>
      </div>
    </div>
  </div>
</template>