evening_detective_frontend/src/components/ScenariosPage.vue

<script setup lang="ts">
import { useMessage } from 'naive-ui'
import { NButton, NCard, NInput, NModal, NTag, NFlex } from 'naive-ui'
import { ref } from 'vue'
import { useRouter } from 'vue-router'

import { getAuthClient } from '@/api/auth_client'
import type { Scenario } from '@/api/generated/crabs/evening_detective_server'
import HeaderMenu from '@/components/HeaderMenu.vue'

const client = getAuthClient()

const scenarios = ref<Scenario[]>([])

const router = useRouter()

const message = useMessage()

const showAddScenarioModal = ref(false)
const newScenarioName = ref('')

async function getScenarios() {
  scenarios.value = []
  const res = await client.GetMyScenarios({})
  scenarios.value = res.scenarios!
}

async function addScenario(name: string) {
  const res = await client.AddScenario({ name: name })
  if (res.error != '') {
    message.error(res.error!)
    return
  }
  await toScenarioEditor(res.id!)
}

async function toScenarioEditor(id: number) {
  router.push('/scenarios/' + id + '/editor')
}

getScenarios()
</script>

<template>
  <div class="center-block-custom">
    <div class="width1200 display-table">
      <div class="scenario-block" @click="showAddScenarioModal = true">
        <div class="scenario-image-block scenario-image-plus">+</div>
        <div class="scenario-content-block">
          <p class="scenario-title">Создать новый сценарий</p>
        </div>
      </div>

      <div class="scenario-block" v-for="scenario in scenarios" @click="toScenarioEditor(scenario.id!)"
        v-bind:key="scenario.id">
        <div class="scenario-image-block scenario-image" :style="{ backgroundImage: `url(${scenario.image})` }"></div>

        <div class="scenario-content-block">
          <p class="scenario-title">{{ scenario.name }}</p>
          <p class="scenario-label">
            <n-tag v-if="scenario.status == 'public'" :bordered="false" type="success"
              class="status-block">Опубликовано</n-tag>
            <n-tag v-if="scenario.status == 'draft'" :bordered="false" type="warning" class="status-block">В
              разработке</n-tag>
          </p>
        </div>
      </div>
    </div>
  </div>

  <!-- Окно создания сценария -->
  <n-modal v-model:show="showAddScenarioModal">
    <n-card style="width: 600px" title="Создание сценария" :bordered="false" size="huge" role="dialog"
      aria-modal="true">
      <template #header-extra>
        <n-button @click="showAddScenarioModal = false"> x </n-button>
      </template>
      <n-input v-model:value="newScenarioName" type="text" placeholder='Дело №0 "Следствие ведут овечки"' />
      <template #footer>
        <n-flex justify="end">
          <n-button @click="addScenario(newScenarioName)" :disabled="newScenarioName.length == 0">
            Создать
          </n-button>
        </n-flex>
      </template>
    </n-card>
  </n-modal>

  <HeaderMenu active="scenarios" />
</template>

<style scoped>
.scenario-block {
  position: relative;
  margin: 10px;
  width: 160px;
  height: 300px;
  cursor: pointer;
  border-radius: 12px;

  /* background-color: #553333; */
  background-color: #222;

  border: 2px solid #222;
}

.scenario-content-block {
  padding: 2px 10px;
}

.scenario-block:hover {
  color: #63e2b7;
  border: 2px solid #63e2b7;
}

.scenario-image-block {
  background-color: #111;
  height: 160px;
  border-radius: 10px;
}

.scenario-image-plus {
  font-size: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #111;
}

.scenario-image {
  background-size: cover;
  background-position: center;
}

.scenario-title {
  padding: 5px 0;
}

.status-block {
  position: absolute;
  bottom: 15px;
  right: 15px;
}

@media (width >=1024px) {
  .scenario-block {
    width: 250px;
    height: 400px;
  }

  .scenario-image-block {
    height: 250px;
  }

  .scenario-content-block {
    padding: 4px 10px;
  }
}
</style>