Skip to content

Commit 0b780cb

Browse files
BrunoGGMBrunoGGM
committed
Content: feat: add notion store and index page
1 parent c20978e commit 0b780cb

File tree

6 files changed

+26444
-5
lines changed

6 files changed

+26444
-5
lines changed

‎app.vue

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
<template>
22
<div>
3-
<h1>
4-
Hacktion
5-
</h1>
3+
<NuxtLayout>
4+
<NuxtLoadingIndicator />
5+
<NuxtPage />
6+
</NuxtLayout>
67
</div>
78
</template>
9+
10+
<script setup>
11+
12+
</script>

‎nuxt.config.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,13 @@
22
export default defineNuxtConfig({
33
compatibilityDate: '2024-04-03',
44
ssr: false,
5+
app: {
6+
head: {
7+
title: 'Hacktion',
8+
charset: 'utf-8',
9+
viewport: 'width=device-width, initial-scale=1',
10+
}
11+
},
512
devtools: { enabled: true },
613
css: ['~/assets/css/main.css'],
714
postcss: {
@@ -10,4 +17,7 @@ export default defineNuxtConfig({
1017
autoprefixer: {},
1118
},
1219
},
20+
modules: [
21+
'@pinia/nuxt',
22+
],
1323
})

‎package-lock.json

Lines changed: 87 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,19 @@
1010
"postinstall": "nuxt prepare"
1111
},
1212
"dependencies": {
13+
"@pinia/nuxt": "^0.5.1",
1314
"nuxt": "^3.12.3",
14-
"vue": "latest"
15+
"pinia": "^2.1.7",
16+
"vue": "latest",
17+
"vuedraggable": "^4.1.0"
1518
},
1619
"devDependencies": {
1720
"autoprefixer": "^10.4.19",
1821
"daisyui": "^4.12.10",
1922
"postcss": "^8.4.39",
2023
"tailwindcss": "^3.4.4"
24+
},
25+
"overrides": {
26+
"vue": "latest"
2127
}
2228
}

‎pages/index.vue

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
<template>
2+
<div class="grid grid-cols-12 gap-4 p-6">
3+
<div
4+
class="card bg-base-100 col-span-12 md:col-span-4 shadow-xl min-h-screen"
5+
>
6+
<div class="card-body p-0">
7+
<span class="text-2xl font-bold">Destinos</span>
8+
9+
<draggable
10+
class="list-group"
11+
:list="places"
12+
group="places"
13+
@change="log"
14+
itemKey="id"
15+
>
16+
<template #item="{ element, index }">
17+
<div class="list-group-item">
18+
{{ element.properties.Place.title[0].text.content }}
19+
</div>
20+
</template>
21+
</draggable>
22+
</div>
23+
</div>
24+
<div
25+
class="card bg-base-100 col-span-12 md:col-span-4 shadow-xl min-h-screen"
26+
>
27+
<div class="card-body p-0">
28+
<span class="text-2xl font-bold"> Itinerario </span>
29+
<draggable
30+
class="list-group"
31+
:list="selectedPlaces"
32+
group="places"
33+
@change="log"
34+
itemKey="id"
35+
@add="addPlace"
36+
>
37+
<template #item="{ element, index }">
38+
<div class="list-group-item">
39+
{{ index + 1 }} -
40+
{{ element.properties.Place.title[0].text.content }}
41+
</div>
42+
</template>
43+
</draggable>
44+
<button
45+
v-if="selectedPlaces.length > 0"
46+
class="btn btn-primary"
47+
@click="viewRoute = true"
48+
>
49+
Calcular Costo
50+
</button>
51+
</div>
52+
</div>
53+
<div
54+
class="card bg-base-100 col-span-12 md:col-span-4 shadow-xl min-h-screen"
55+
>
56+
<div class="card-body py-2">
57+
<span class="text-2xl font-bold">Ruta</span>
58+
<div v-if="viewRoute">
59+
<ul class="steps steps-vertical">
60+
<li class="step step-primary">Inicio: Hotel</li>
61+
<li
62+
class="step step-primary"
63+
v-for="(place, index) in selectedPlaces"
64+
:key="index"
65+
>
66+
<div
67+
class="flex flex-col items-start justify-between w-full p-2 bg-base-200 rounded-lg"
68+
>
69+
<div>{{ place.properties.Place.title[0].text.content }}</div>
70+
<div class="text-xs">
71+
Costo aproximado: ${{ Math.floor(Math.random() * 100) }}
72+
</div>
73+
<div class="text-xs">
74+
Duración: {{ Math.floor(Math.random() * 10) }} minutos
75+
</div>
76+
</div>
77+
</li>
78+
<li class="step step-primary">Fin: Hotel</li>
79+
</ul>
80+
<div class="text-2xl font-bold text-center mt-4 rounded-lg p-2">
81+
Costo total: ${{ Math.floor(Math.random() * 100) }}
82+
</div>
83+
84+
<iframe
85+
class="w-full mt-4 rounded-lg"
86+
src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d25924.28262226077!2d139.74466958843215!3d35.68844201873905!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2smx!4v1720307891810!5m2!1sen!2smx"
87+
height="450"
88+
style="border: 0"
89+
allowfullscreen=""
90+
loading="lazy"
91+
referrerpolicy="no-referrer-when-downgrade"
92+
></iframe>
93+
</div>
94+
</div>
95+
</div>
96+
</div>
97+
</template>
98+
99+
<script setup>
100+
import draggable from "vuedraggable";
101+
import { useNotionStore } from "~/stores/notion";
102+
const notionStore = useNotionStore();
103+
const places = computed(() => notionStore.places.results);
104+
const selectedPlaces = ref([]);
105+
const viewRoute = ref(false);
106+
107+
const log = (event) => {
108+
console.log(event);
109+
};
110+
111+
const addPlace = (place) => {
112+
viewRoute.value = false;
113+
};
114+
function fetchPlaces() {
115+
$fetch(
116+
"https://api.notion.com/v1/databases/7c47628506f34218b7cf09e0f33715f4/query",
117+
{
118+
method: "POST",
119+
body: {},
120+
headers: {
121+
"Content-Type": "application/json",
122+
Authorization: "Bearer " + process.env.NOTION_API_KEY,
123+
"Notion-Version": "2022-06-28",
124+
},
125+
}
126+
)
127+
.then((response) => {
128+
places.value.response = response;
129+
})
130+
.catch((error) => {
131+
console.error(error);
132+
})
133+
.finally(() => {
134+
places.value.loading = false;
135+
places.value.loaded = true;
136+
});
137+
}
138+
139+
onMounted(() => {
140+
//fetchPlaces();
141+
});
142+
</script>
143+
144+
<style>
145+
.list-group {
146+
display: flex;
147+
flex-direction: column;
148+
padding: 0;
149+
margin: 0;
150+
list-style-type: none;
151+
min-height: 200px;
152+
}
153+
154+
.list-group-item {
155+
cursor: grab;
156+
min-height: 40px;
157+
border: 1px solid #2e363f;
158+
border-radius: 0.375rem;
159+
margin-bottom: 10px;
160+
padding: 8px 16px;
161+
}
162+
.list-group-item:active {
163+
cursor: grabbing;
164+
}
165+
</style>

0 commit comments

Comments
 (0)