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

<template>
  <div class="bg-dimmer"></div>
  <div class="g-card popup-card">
    <div class="card_content">
      <p>{{ store.alertMessage || store.confirmMessage }}</p>
    </div>

    <div class="card_actions">
      <span v-if="store.alertMessage">
        <button @click="closeCard">OK!</button>
      </span>

      <span v-else-if="store.confirmMessage">
        <button @click="confirm">OK!</button>
        <button @click="closeCard">Anuluj</button>
      </span>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useStore } from '../store';

export default defineComponent({
  emits: ['confirm'],

  setup() {
    return {
      store: useStore(),
    };
  },

  methods: {
    closeCard() {
      this.store.alertMessage = '';
      this.store.confirmMessage = '';
    },

    confirm() {
      this.$emit('confirm');
      this.closeCard();
    },
  },
});
</script>

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

  background-color: #0000004f;
}

.card_content {
  text-align: center;
}

.card_actions {
  display: flex;
  justify-content: center;
}
</style>