Aran Roig
94e2b8bd47
All checks were successful
Build and Deploy Nuxt / build (push) Successful in 59s
132 lines
2.9 KiB
Vue
132 lines
2.9 KiB
Vue
<script setup>
|
|
import TopSearchBar from './topbar/TopSearchBar.vue';
|
|
import { useCampaignService } from '~/services/Campaign';
|
|
import { CreateWindow } from '~/services/Windows';
|
|
import { SetShowContent } from '~/services/Content';
|
|
|
|
const { Campaign, SetCampaign } = useCampaignService();
|
|
|
|
const campaignName = computed(() => {
|
|
return Campaign.value?.name ?? 'Campaign';
|
|
});
|
|
|
|
async function createNote() {
|
|
if (!Campaign.value) {
|
|
return;
|
|
}
|
|
|
|
const campaignId = Campaign.value?._id
|
|
|
|
try {
|
|
const response = await Server().post('/note/create', {
|
|
title: 'New note',
|
|
content: content.value,
|
|
campaign: campaignId
|
|
});
|
|
|
|
if (response.data.status !== 'ok') {
|
|
return;
|
|
}
|
|
|
|
emitter.emit('note-created', response.data.note);
|
|
} catch (err) {
|
|
error.value = 'Unable to create note.';
|
|
} finally {
|
|
isSaving.value = false;
|
|
}
|
|
}
|
|
|
|
function exitToMainMenu() {
|
|
SetCampaign(null);
|
|
SetShowContent(false);
|
|
CreateWindow('main_menu');
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="top-bar">
|
|
<div class="left">
|
|
<span class="top-bar-title">
|
|
<img src="/img/logo.png" alt="Dragonroll Logo" class="logo">
|
|
<span>{{ campaignName }}</span>
|
|
</span>
|
|
</div>
|
|
<div class="center">
|
|
<TopSearchBar></TopSearchBar>
|
|
</div>
|
|
<div class="right">
|
|
<button class="top-bar-button sound-click" type="button" @click="exitToMainMenu">
|
|
<img class="top-bar-button-icon" src="/icons/iconoir/regular/nav-arrow-left.svg" alt="" aria-hidden="true">
|
|
<span>Main Menu</span>
|
|
</button>
|
|
<button class="note-button sound-click" type="button" @click="createNote" :disabled="!Campaign">
|
|
<img class="note-button-icon" src="/icons/iconoir/regular/plus.svg" alt="" aria-hidden="true">
|
|
<span>New Note</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.top-bar {
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
min-height: 40px;
|
|
width: 100%;
|
|
background-color: var(--color-background-light);
|
|
display: flex;
|
|
}
|
|
|
|
.logo {
|
|
height: 32px;
|
|
width: 32px;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 6px;
|
|
}
|
|
|
|
.left, .right {
|
|
flex: 1;
|
|
}
|
|
|
|
.right {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.top-bar-title {
|
|
padding: 10px;
|
|
display: flex;
|
|
margin-left: 48px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.top-bar-button,
|
|
.note-button {
|
|
height: 30px;
|
|
padding: 0 12px;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 8px;
|
|
background: var(--color-background-soft);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.note-button:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.top-bar-button-icon,
|
|
.note-button-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
</style>
|