61 lines
1.1 KiB
Vue
61 lines
1.1 KiB
Vue
<template>
|
|
<div class="voyage-view flex1">
|
|
<section class="voyage-content">
|
|
<h1 class="voyage-title">{{ voyage?.title }}</h1>
|
|
<event-list :events="voyageData.events"></event-list>
|
|
</section>
|
|
<voyage-map
|
|
:locations="voyageData.locations"
|
|
class="flex1 voyage-map"
|
|
></voyage-map>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
voyage: {
|
|
type: Object,
|
|
required: false,
|
|
},
|
|
voyageData: {
|
|
type: Object,
|
|
required: false,
|
|
},
|
|
})
|
|
|
|
onMounted(() => {
|
|
console.log("Voyage mounted", props.voyage)
|
|
})
|
|
|
|
watch(
|
|
() => props.voyage,
|
|
(newVoyage) => {
|
|
console.log("Voyage changed", newVoyage)
|
|
},
|
|
)
|
|
</script>
|
|
|
|
<style lang="css" scoped>
|
|
.voyage-view {
|
|
display: flex;
|
|
margin-top: 0px;
|
|
}
|
|
|
|
.voyage-content {
|
|
background-color: var(--app-background);
|
|
height: 100%;
|
|
width: 406px;
|
|
border-right: 1px solid var(--neutral-30);
|
|
}
|
|
|
|
.voyage-map {
|
|
background-color: var(--app-background);
|
|
border: 1px solid var(--neutral-30);
|
|
margin: 1rem;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.voyage-title {
|
|
text-align: center;
|
|
}
|
|
</style>
|