station-manager-2.0/src/components/UpdateCard.vue

<template>
  <div class="bg-dimmer" @click="closeCard"></div>
  <div class="g-card">
    <div class="card_body">
      <h1>Raport zmian</h1>

      <div class="card_content">
        <div class="changes-list">
          <p v-for="(ch, i) in changesResponseComp" :key="i" :style="{ color: ch.resolved ? 'lime' : 'crimson' }">
            {{ ch.resolved ? `✅` : `❌` }} {{ ch.message }}
          </p>
        </div>
      </div>

      <div class="card_actions">
        <button @click="closeCard">OK!</button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useSceneriesStore } from '../stores/sceneries.store';
export default defineComponent({
  data: () => ({
    sceneriesStore: useSceneriesStore(),
  }),

  computed: {
    changesResponseComp() {
      return this.sceneriesStore.changesResponse.map((ch) => ({
        resolved: ch.split(' ')[0] == 'v',
        message: ch.replace(/^[v|x] /, ''),
      }));
    },
  },

  methods: {
    closeCard() {
      this.sceneriesStore.changesResponse.length = 0;
    },
  },
});
</script>

<style lang="scss" scoped>
.bg-dimmer {
  position: fixed;
  z-index: 998;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;

  background-color: #0000004f;
}

.g-card {
  overflow: auto;
}

.card_body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 90vh;
  max-height: 550px;
  padding: 0.5em;
  gap: 1em;
}

.card_content {
  overflow: auto;
}

.changes-list {
  overflow: auto;
}

h1 {
  text-align: center;
  margin: 0;
  font-size: 2.5em;
}

.card_actions {
  display: grid;
  grid-template-columns: minmax(100px, 1fr);
}
</style>