DigiSnaxx/client.digisnaxx
3
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

merge into: DigiSnaxx:main
Branches Tags
DigiSnaxx:feature-advert-popup DigiSnaxx:main
...
pull from: DigiSnaxx:feature-advert-popup
Branches Tags
DigiSnaxx:feature-advert-popup DigiSnaxx:main

3 Commits
main ... feature-ad

Author SHA1 Message Date
canin carlos
4c6430d406 Add more cities 2026-01-02 20:29:34 -05:00
canin carlos
9a5273bb76 remove src2 2025-11-30 15:39:27 -05:00
canin carlos
1349158dcb updates 2025-11-29 12:10:23 -05:00
28 changed files with 570 additions and 166 deletions
Expand all files Collapse all files

2
index.html
View File

@@ -20,7 +20,7 @@
<meta name="twitter:image" content=""> <meta name="twitter:image" content="">
</head> </head>
<body class=""> <body class="z-0">
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.js"></script> <script type="module" src="/src/main.js"></script>
</body> </body>

9
src/App.vue
View File

@@ -1,9 +1,10 @@
<script setup> <script setup>
import { RouterLink, RouterView } from 'vue-router' import { storeToRefs } from 'pinia'
import { useDark, useToggle } from "@vueuse/core"; import { RouterLink, RouterView } from 'vue-router'
import { useDark, useToggle } from "@vueuse/core";
const isDark = useDark({selector: "body",}); const isDark = useDark({selector: "body",});
const toggleDark = useToggle(isDark); const toggleDark = useToggle(isDark);
</script> </script>

BIN
src/assets/boston.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 734 KiB

BIN
src/assets/boston.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 MiB

BIN
src/assets/chicago.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 284 KiB

BIN
src/assets/chicago.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 985 KiB

BIN
src/assets/houston.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 230 KiB

BIN
src/assets/houston.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 847 KiB

BIN
src/assets/philly.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 164 KiB

BIN
src/assets/philly.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 379 KiB

BIN
src/assets/portland.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 227 KiB

BIN
src/assets/portland.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 648 KiB

BIN
src/assets/stlouis.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 129 KiB

BIN
src/assets/stlouis.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 473 KiB

20
src/components/Sections/EventList.vue
View File

@@ -5,10 +5,9 @@
const MenuStore = useMenuStore(); const MenuStore = useMenuStore();
MenuStore.get_today(); MenuStore.get_today();
import EventListingComplete from '../listings/EventListing.vue'; import EventListingComplete from '../listings/EventListing.vue';
import Promo from '../listings/BlueskyLinks.vue'; // import Promo from '../listings/BlueskyLinks.vue';
// import Promo from '../listings/Promo.vue'; import Promo from '../listings/Promo.vue';
import { useEventsStore } from '../../stores/EventsStore'; import { useEventsStore } from '../../stores/EventsStore';
@@ -26,19 +25,28 @@
const store = useEventsStore(); const store = useEventsStore();
store.fetchEvents(props.cal); store.fetchEvents(props.cal);
store.fetchPromo(); store.fetchPromo(props.cal);
const events = computed(() => { const events = computed(() => {
if (store.events.length == 0){
store.fetchEvents(props.cal);
}
return store.events; return store.events;
}); });
const promo = computed(() => { const promo = computed(() => {
if (store.promo.length == 0){
store.fetchPromo(props.cal);
}
return store.promo; return store.promo;
}); });
</script> </script>
<template> <template>
<div v-if="events.length == 0" class="p-8">
<p class="p-2">Wait for it ...</p>
<p class="p-2">Or try refreshing, still workin' out a few bugs in the code.</p>
<p class="p-2">Though give it a moment ... please ...</p>
</div>
<div class="md:flex md:flex-wrap lg:flex lg:flex-wrap md:flex md:justify-center lg:flex lg:justify-center z-0"> <div class="md:flex md:flex-wrap lg:flex lg:flex-wrap md:flex md:justify-center lg:flex lg:justify-center z-0">
<span class="self-stretch" v-for="(item, index) in events"> <span class="self-stretch" v-for="(item, index) in events">
<Promo v-if="(index % 6 == 0) && index != 0 && events.length > 12" :item = promo[(index/6)-1] :index = "(index/6)-1"/> <Promo v-if="(index % 6 == 0) && index != 0 && events.length > 12" :item = promo[(index/6)-1] :index = "(index/6)-1"/>

2
src/components/Sections/Header.vue
View File

@@ -15,7 +15,7 @@
another <a href="https://www.dreamfreely.org" targe="_blank">DreamFreely</a> project another <a href="https://www.dreamfreely.org" targe="_blank">DreamFreely</a> project
</span> --> </span> -->
<span class="subtitle z-40"> <span class="subtitle z-40">
Events done simply a dreamfreely project
</span> </span>
</div> </div>
</header> </header>

56
src/components/blocks/About.vue Normal file
View File

@@ -0,0 +1,56 @@
<script setup>
import { storeToRefs } from 'pinia'
import { mainStore } from '../../stores/MainStore.vue'
import { useDark, useToggle } from "@vueuse/core";
import qrCode from '../../assets/qr.digi.png'
const isDark = useDark({selector: "body",});
</script>
<template>
<div class="max-w-2xl p-6 mt-0 rounded-md promo-overlay" :class="{ isDark: isDark }">
<div class="mt-3 pb-5">
<h2 class="text-2xl"><a href="//www.dreamfreely.org">DreamFreely</a></h2>
<!-- <div v-if="$route.path != '/medellin'"> -->
<div>
<!-- <p class="p-10">A creation of <a href="//canin.dreamfreely.org">Canin Carlos</a>.</p> -->
<p>The idea is to have a website that just has event details, and redirects you to the primary source; that's it.</p>
<p>You can <a href="https://airtable.com/appzQxsifc8AnD1zA/shrfUvOiFdaHI8xoz">submit a calendar here</a>, or <a href="https://airtable.com/appzQxsifc8AnD1zA/shrvhmYsAXY216C51">submit an event here</a>.</p>
<p>If you represent a business and would like to be added to the directory, or seek ad space, <a>follow this link</a>.</p>
<hr/>
<p>La idea es tener un sitio web que solo contenga detalles del evento y te redirija a la fuente principal; eso es todo.</p>
<p>Puedes <a href="https://airtable.com/appzQxsifc8AnD1zA/shrfUvOiFdaHI8xoz">enviar un calendario aquí</a>, o <a href="https://airtable.com/appzQxsifc8AnD1zA/shrvhmYsAXY216C51">enviar un evento aquí</a>.</p>
<p>Si representas a una empresa y deseas que te incluyan en el directorio, o si buscas espacio publicitario, <a>sigue este enlace</a>.</p>
<!-- <p>
<img id="qrcode" :src="qrCode"/>
<h2 class="text-xl green p-5">Shareable QR Code</h2>
</p> -->
</div>
</div>
</div>
</template>
<style scoped>
/* .template {
background-color: #000;
z-index: 4;
} */
#qrcode {
width: 25em;
margin: auto;
}
.promo-overlay {
background-size: cover;
}
.isDark {
background-color: #000;
color: #fff;
}
div >>> p {
padding:.5rem;
}
</style>

127
src/components/blocks/Modal.vue
View File

@@ -1,114 +1,63 @@
<script setup> <script setup>
import { storeToRefs } from 'pinia' import { storeToRefs } from 'pinia'
import { mainStore } from '../../stores/MainStore.vue' import { mainStore } from '../../stores/MainStore.vue'
import About from '../About.vue' import About from './About.vue'
import qrCode from '../../assets/qr.digi.png' import qrCode from '../../assets/qr.digi.png'
const promo = mainStore().promo_display; const promo = mainStore().promo_display;
const { isOpen, modal} = storeToRefs(mainStore()) const { isOpen, modal} = storeToRefs(mainStore())
</script> import { useDark, useToggle } from "@vueuse/core";
const isDark = useDark({selector: "body",});
</script>
<template> <template>
<div <div
v-show="isOpen" v-show="isOpen"
:class="{ isDark: isDark}"
class=" class="
overflow-auto scrolling-touch left-0 top-0 bottom-100 right-0 w-full h-full fixed overflow-auto scrolling-touch left-0 top-0 bottom-0 right-0 w-full h-full fixed
overscroll-auto overscroll-auto
flex flex
items-start
justify-center
mx-auto
z-40 z-40
" "
> >
<div class="max-w-2xl p-6 mt-10 rounded-md shadow-xl promo-overlay"> <div class="container p-6 rounded-md promo-overlay" :class="{ isDark: isDark}">
<!-- <div class="flex items-center justify-between"> <svg
<h3 v-show="modal" class="text-2xl">QR Code to DigiSnaxx</h3> @click="isOpen = false"
<h3 v-show="!modal" class="text-2xl">About DigiSnaxx</h3> xmlns="http://www.w3.org/2000/svg"
<svg class="w-8 h-8 text-red-900 cursor-pointer"
@click="isOpen = false" fill="none"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
class="w-8 h-8 text-red-900 cursor-pointer" stroke="currentColor"
fill="none" >
viewBox="0 0 24 24" <path
stroke="currentColor" stroke-linecap="round"
> stroke-linejoin="round"
<path stroke-width="2"
stroke-linecap="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
stroke-linejoin="round" />
stroke-width="2" </svg>
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" <div v-if="modal === 0" class="p-2 template z-40 justify-items-center" :class="{ isDark: isDark}">
/> <About class="" />
</svg>
</div> -->
<!-- <About v-if="modal === 0" class="z-40"/> -->
<div v-if="modal === 0" class="p-2 template z-40">
<svg
@click="isOpen = false"
xmlns="http://www.w3.org/2000/svg"
class="w-8 h-8 text-red-900 cursor-pointer"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<div>
<h2 class="text-2xl"><a href="">DreamFreely</a></h2>
<p class="p-10">DigiSnaxx is the creation of <a href="//canin.dreamfreely.org">Canin Carlos</a>.</p>
<p>You can <a href="https://airtable.com/appzQxsifc8AnD1zA/shrfUvOiFdaHI8xoz">submit a calendar here</a>, or <a href="https://airtable.com/appzQxsifc8AnD1zA/shrvhmYsAXY216C51">submit an event here</a>.</p>
<p>
<img :src="qrCode"/>
<h2 class="text-xl green p-5">Shareable QR Code</h2>
</p>
</div>
</div> </div>
<div v-if="modal === 1" class="p-2 template z-40"> <div v-if="modal === 2" class="p-10 template z-40" :class="{isDark: isDark }">
<svg
@click="isOpen = false"
xmlns="http://www.w3.org/2000/svg"
class="w-8 h-8 text-red-900 cursor-pointer"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<img :src="qrCode"/>
<h2 class="text-xl green p-5">Shareable QR Code</h2>
</div>
<div v-if="modal === 2" class="p-10 template z-40 green">
<a class="text-lg underline font-bold" :href="promo[0].target_link"> <a class="text-lg underline font-bold" :href="promo[0].target_link">
<h2 class="text-xl"> <img class="rounded-full max-w-full m-auto p-5" :src="promo[0].overlay_image"/>
<br/>
<h2 class="text-xl m-auto">
{{ promo[0].title }} {{ promo[0].title }}
</h2> </h2>
<p class="text-xs"> <p class="text-xs m-auto">
{{ promo[0].target_link }} {{ promo[0].target_link }}
</p> </p>
<img class="rounded-full" :src="promo[0].image"/>
</a> </a>
<!-- <p> <!-- <p>
{{ promo[0].promo_type }} {{ promo[0].promo_type }}
</p> --> </p> -->
<div class="p-5" v-html="promo[0].long_text" /> <div class="p-5 m-auto" v-html="promo[0].long_text" />
</div> </div>
</div> </div>
@@ -118,15 +67,21 @@
</template> </template>
<style scoped> <style scoped>
/* .template { .template {
background-color: #000; background-color: #fff;
z-index: 4; }
} */
#qrcode {
width: 25em;
margin: auto;
}
.promo-overlay { .promo-overlay {
background-size: cover;
}
.isDark {
background-color: #000; background-color: #000;
color: #fff; color: #fff;
} }
div >>> p { div >>> p {
padding:.5rem; padding:.5rem;

163
src/components/blocks/Modal2.vue Normal file
View File

@@ -0,0 +1,163 @@
<script setup>
import { storeToRefs } from 'pinia'
import { mainStore } from '../../stores/MainStore.vue'
import About from '../About.vue'
import qrCode from '../../assets/qr.digi.png'
const promo = mainStore().promo_display;
const { isOpen, modal} = storeToRefs(mainStore())
</script>
<template>
<div
v-show="isOpen"
class="
overflow-auto scrolling-touch left-0 top-0 bottom-0 right-0 w-full h-full fixed
overscroll-auto
flex
items-start
justify-center
m-0
z-40
"
>
<div class="max-w-2xl p-6 mt-0 rounded-md shadow-xl promo-overlay">
<!-- <div class="flex items-center justify-between">
<h3 v-show="modal" class="text-2xl">QR Code to DigiSnaxx</h3>
<h3 v-show="!modal" class="text-2xl">About DigiSnaxx</h3>
<svg
@click="isOpen = false"
xmlns="http://www.w3.org/2000/svg"
class="w-8 h-8 text-red-900 cursor-pointer"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div> -->
<!-- <About v-if="modal === 0" class="z-40"/> -->
<div v-if="modal === 0" class="p-2 template z-40">
<svg
@click="isOpen = false"
xmlns="http://www.w3.org/2000/svg"
class="w-8 h-8 text-red-900 cursor-pointer"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<div class="mt-3 pb-5">
<h2 class="text-2xl"><a href="//www.dreamfreely.org">DreamFreely</a></h2>
<!-- <div v-if="$route.path != '/medellin'"> -->
<div>
<!-- <p class="p-10">A creation of <a href="//canin.dreamfreely.org">Canin Carlos</a>.</p> -->
<p>The idea is to have a website that just has event details, and redirects you to the primary source; that's it.</p>
<p>You can <a href="https://airtable.com/appzQxsifc8AnD1zA/shrfUvOiFdaHI8xoz">submit a calendar here</a>, or <a href="https://airtable.com/appzQxsifc8AnD1zA/shrvhmYsAXY216C51">submit an event here</a>.</p>
<p>If you represent a business and would like to be added to the directory, or seek ad space, <a>follow this link</a>.</p>
<hr/>
<p>La idea es tener un sitio web que solo contenga detalles del evento y te redirija a la fuente principal; eso es todo.</p>
<p>Puedes <a href="https://airtable.com/appzQxsifc8AnD1zA/shrfUvOiFdaHI8xoz">enviar un calendario aquí</a>, o <a href="https://airtable.com/appzQxsifc8AnD1zA/shrvhmYsAXY216C51">enviar un evento aquí</a>.</p>
<p>Si representas a una empresa y deseas que te incluyan en el directorio, o si buscas espacio publicitario, <a>sigue este enlace</a>.</p>
<!-- <p>
<img id="qrcode" :src="qrCode"/>
<h2 class="text-xl green p-5">Shareable QR Code</h2>
</p> -->
</div>
</div>
</div>
<!-- <div v-if="modal === 1" class="p-2 template z-40">
<svg
@click="isOpen = false"
xmlns="http://www.w3.org/2000/svg"
class="w-8 h-8 text-red-900 cursor-pointer"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<img :src="qrCode"/>
<h2 class="text-xl green p-5">Shareable QR Code</h2>
</div> -->
<div v-if="modal === 2" class="p-10 template z-40 green">
<svg
@click="isOpen = false"
xmlns="http://www.w3.org/2000/svg"
class="w-8 h-8 text-red-900 cursor-pointer"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<a class="text-lg underline font-bold" :href="promo[0].target_link">
<h2 class="text-xl">
{{ promo[0].title }}
</h2>
<p class="text-xs">
{{ promo[0].target_link }}
</p>
<img class="rounded-full" :src="promo[0].image"/>
</a>
<!-- <p>
{{ promo[0].promo_type }}
</p> -->
<div class="p-5" v-html="promo[0].long_text" />
</div>
</div>
</div>
</template>
<style scoped>
/* .template {
background-color: #000;
z-index: 4;
} */
#qrcode {
width: 25em;
margin: auto;
}
.promo-overlay {
background-size: cover;
}
div >>> p {
padding:.5rem;
}
</style>

30
src/components/blocks/PrimaryButtonSet.vue
View File

@@ -10,8 +10,31 @@
</script> </script>
<template> <template>
<!-- <div v-if="$route.path == '/medellin'" class="text-center p-0">
<button class="" v-on:click="menuStore.showMenu = !menuStore.showMenu">Filtros</button>
<span v-if="EventsStore.filter">
<span >
<button id="filter-btn" v-on:click.prevent="EventsStore.fetchEvents('mde')">Borra Filtros</button>
</span>
</span>
<button
@click="MainStore.changeGallery(MainStore.isOpen, 0, 0, null)"
class="about"
type="button"
>
Sobre
</button>
</div> -->
<!-- <div v-if="$route.path == '/mpls-msp'" class="text-center p-0"> -->
<div class="text-center p-0"> <div class="text-center p-0">
<button class="" v-on:click="menuStore.showMenu = !menuStore.showMenu">Filters</button> <button class="" v-on:click="menuStore.showMenu = !menuStore.showMenu">Filters</button>
<span v-if="EventsStore.filter">
<button id="filter-btn" v-on:click.prevent="EventsStore.fetchEvents('msp')">Clear Filters</button>
<!-- <span v-if="$route.path == 'beyond'">
<button id="filter-btn" v-on:click.prevent="EventsStore.fetchEvents()">Clear Filters</button>
</span> -->
</span>
<button <button
@click="MainStore.changeGallery(MainStore.isOpen, 0, 0, null)" @click="MainStore.changeGallery(MainStore.isOpen, 0, 0, null)"
@@ -77,8 +100,9 @@ font-weight: bold;
button { button {
border-radius: 25px; border-radius: 25px;
padding: .25rem .75rem; padding: .25rem .75rem;
margin: .25rem; margin: 1rem;
background-color: orange; background-color: #00bd7e;
border: #000 1px solid;
color: #000; color: #000;
font-weight: bold; font-weight: bold;
} }
@@ -88,7 +112,7 @@ button {
padding: .5rem 1rem; padding: .5rem 1rem;
margin: .5rem; margin: .5rem;
margin-top: 10px; margin-top: 10px;
background-color: hsla(160, 100%, 37%, 1); background-color: #00bd7e;
color: #000; color: #000;
font-weight: bold; font-weight: bold;
} }

16
src/components/blocks/SecondaryButtonSet.vue
View File

@@ -13,20 +13,26 @@
<div v-if="menuStore.showMenu"> <div v-if="menuStore.showMenu">
<div v-if="menuStore.isHidden"> <div v-if="menuStore.isHidden">
<div> <div>
<button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(0)">Today</button> <!-- <span v-if="$route.path == '/medellin'" class="text-center p-0">
<button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(1)">Tomorrow</button> <button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(0)">Hoy</button>
<button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(1)">Mañana</button>
</span> -->
<span class="text-center p-0">
<button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(0)">Today</button>
<button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(1)">Tomorrow</button>
</span>
<button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(2)">+ 2</button> <button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(2)">+ 2</button>
<button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(3)">+ 3</button> <button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(3)">+ 3</button>
<button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(4)">+ 4</button> <button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(4)">+ 4</button>
<button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(5)">+ 5</button> <button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(5)">+ 5</button>
<button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(6)">+ 6</button> <!-- <button class="btn days" v-on:click.prevent="EventsStore.getEventByDate(6)">+ 6</button> -->
</div> </div>
<!--
<div> <div>
<button class="btn category" v-on:click.prevent="EventsStore.getEventsByType('Mu')">Entertainment</button> <button class="btn category" v-on:click.prevent="EventsStore.getEventsByType('Mu')">Entertainment</button>
<button class="btn category" v-on:click.prevent="EventsStore.getEventsByType('Ed')">Education</button> <button class="btn category" v-on:click.prevent="EventsStore.getEventsByType('Ed')">Education</button>
</div> </div> -->
</div> </div>
<!-- <div v-if="!menuStore.isHidden"> <!-- <div v-if="!menuStore.isHidden">

7
src/components/listings/EventListing.vue
View File

@@ -32,7 +32,12 @@
</a> </a>
</span> </span>
</div> </div>
<a :href="item.show_link" target="_blank"> <a v-if="item.show_link" :href="item.show_link" target="_blank">
<p class="text-2xl p-5">
{{ item.show_title }}
</p>
</a>
<a v-if="!item.show_link" :href="item.venue.website" target="_blank">
<p class="text-2xl p-5"> <p class="text-2xl p-5">
{{ item.show_title }} {{ item.show_title }}
</p> </p>

37
src/components/listings/Promo.vue
View File

@@ -3,7 +3,9 @@
import Modal from '../blocks/Modal.vue'; import Modal from '../blocks/Modal.vue';
import { mainStore } from '../../stores/MainStore.vue'; import { mainStore } from '../../stores/MainStore.vue';
import { useDark, useToggle } from "@vueuse/core";
const isDark = useDark({selector: "body",});
const MainStore = mainStore(); const MainStore = mainStore();
defineProps({ defineProps({
@@ -20,17 +22,7 @@
</script> </script>
<template> <template>
<div v-if="item.promo_type === 'Ja'" class="events p-5 m-2 max-w-lg art-text" :class="item.promo_type"> <div class="events p-5 m-2 max-w-lg" :class="item.promo_type">
<a :href="item.target_link">
<h2 class="text-lg pb-2">
{{ item.title }}
</h2>
</a>
<div class="p-5 font-bold underline">
<a :href="item.target_link">{{ item.organization.name }}</a>
</div>
</div>
<div v-else-if="item.promo_type === ''" class="events p-5 m-2 max-w-lg" :class="item.promo_type">
<a href="#!" <a href="#!"
@click="MainStore.changeGallery(MainStore.isOpen, 0, 2, item)" @click="MainStore.changeGallery(MainStore.isOpen, 0, 2, item)"
> >
@@ -42,16 +34,6 @@
{{ item.short_text }} {{ item.short_text }}
</div> </div>
</div> </div>
<div v-else class="events p-5 m-2 max-w-lg" :class="item.promo_type">
<a :href="item.target_link">
<h2 class="text-2xl pb-2 underline ad-headline">
{{ item.title }}
</h2>
</a>
<div class="p-5">
{{ item.short_text }}
</div>
</div>
</template> </template>
<style scoped> <style scoped>
@@ -62,16 +44,23 @@
max-width: 400px; max-width: 400px;
} }
h2 {
color:#000;
}
.Ja, .Su, .An, .Su { .Ja, .Su, .An, .Su {
background-color: hsla(202, 100%, 37%, 0.1); background-color: #0078bdc4;
color: #000;
} }
.Sp, .Ma, .Ar { .Sp, .Ma, .Ar {
background-color: hsla(160, 100%, 37%, .1); background-color: #ff674cec;
color: #000;
} }
.Jo, .Re, .Fo, .Ev { .Jo, .Re, .Fo, .Ev {
background-color: hsla(0, 100%, 59%, 0.1); /* background-color: #ff4d2e; */
background-color: #00bd7e;
color: #000;
} }

113
src/components/listings/Promo2.vue Normal file
View File

@@ -0,0 +1,113 @@
<script setup>
import moment from 'moment-timezone';
import Modal from '../blocks/Modal.vue';
import { mainStore } from '../../stores/MainStore.vue';
const MainStore = mainStore();
defineProps({
item: {
type: Object,
required: true
},
index: {
type: Number,
require: true
},
})
</script>
<template>
<div class="events p-5 m-2 max-w-lg" :class="item.promo_type">
<a href="#!"
@click="MainStore.changeGallery(MainStore.isOpen, 0, 2, item)"
>
<h2 class="text-2xl pb-2 underline ad-headline">
{{ item.title }}
</h2>
</a>
<div class="p-5">
{{ item.short_text }}
</div>
</div>
<!-- <div v-if="item.promo_type === 'Ja'" class="events p-5 m-2 max-w-lg art-text" :class="item.promo_type">
<a :href="item.target_link">
<h2 class="text-lg pb-2">
{{ item.title }}
</h2>
</a>
<div class="p-5 font-bold underline">
<a :href="item.target_link">{{ item.organization.name }}</a>
</div>
</div>
<div v-else-if="item.promo_type === 'Ev'" class="events p-5 m-2 max-w-lg" :class="item.promo_type">
<a href="#!"
@click="MainStore.changeGallery(MainStore.isOpen, 0, 2, item)"
>
<h2 class="text-2xl pb-2 underline ad-headline">
{{ item.title }}
</h2>
</a>
<div class="p-5">
{{ item.short_text }}
</div>
</div>
<div v-else class="events p-5 m-2 max-w-lg" :class="item.promo_type">
<a :href="item.target_link">
<h2 class="text-2xl pb-2 underline ad-headline">
{{ item.title }}
</h2>
</a>
<div class="p-5">
{{ item.short_text }}
<p>{{ item.promo_type }}</p>
</div>
</div> -->
</template>
<style scoped>
.events {
border: .1em solid #666;
border-radius: 25px;
min-width: 325px;
max-width: 400px;
}
.Ja, .Su, .An, .Su {
background-color: hsla(202, 100%, 37%, 0.1);
}
.Sp, .Ma, .Ar {
background-color: hsla(160, 100%, 37%, .1);
}
.Jo, .Re, .Fo, .Ev {
background-color: hsla(0, 100%, 59%, 0.1);
}
@media (min-width: 800px) and (max-width:1023px) {
.events {
min-width: 300px;
max-width: 300px;
}
}
@media (min-width: 1024px) and (max-width: 1249) {
.events {
min-width: 300px;
max-width: 400px;
}
}
@media (min-width: 1250px) {
.events {
min-width: 325px;
max-width: 475px;
}
}
</style>

41
src/router/index.js
View File

@@ -17,6 +17,21 @@ const router = createRouter({
name: '000', name: '000',
component: DigiSnaxxView component: DigiSnaxxView
}, },
{
path: '/boston',
name: 'bos',
component: DigiSnaxxView
},
{
path: '/chicago',
name: 'chi',
component: DigiSnaxxView
},
{
path: '/houston',
name: 'hou',
component: DigiSnaxxView
},
{ {
path: '/medellin', path: '/medellin',
name: 'mde', name: 'mde',
@@ -27,16 +42,32 @@ const router = createRouter({
name: 'msp', name: 'msp',
component: DigiSnaxxView component: DigiSnaxxView
}, },
{
path: '/philly',
name: 'phl',
component: DigiSnaxxView
},
{
path: '/portland',
name: 'pdx',
component: DigiSnaxxView
},
{
path: '/stlouis',
name: 'stl',
component: DigiSnaxxView
},
// { // {
// path: '/live', // path: '/live',
// name: 'live', // name: 'live',
// component: LiveView // component: LiveView
// }, // },
{ // {
path: '/media', // path: '/media',
name: 'bluesky', // name: 'bluesky',
component: BlueskyView // component: BlueskyView
}, // },
] ]
}) })

22
src/stores/EventsStore.js
View File

@@ -27,6 +27,7 @@ export const useEventsStore = defineStore('Events', {
new_msg: "", new_msg: "",
today: "", today: "",
shortcode: "", shortcode: "",
filter: false,
}; };
}, },
@@ -37,11 +38,15 @@ export const useEventsStore = defineStore('Events', {
// return this.shortcode; // return this.shortcode;
// }, // },
async fetchPromo() { async fetchPromo(cal) {
// const results = await fetch(`${apiUrl}/socials/promo/`, {headers: this.headers}); const results = await fetch(`${apiUrl}/events/promo/?calendar__shortcode=${this.shortcode}`, {headers: this.headers});
const results = await fetch(`${apiUrl}/socials/links/`, {headers: this.headers}); // const results = await fetch(`${apiUrl}/socials/links/`, {headers: this.headers});
const data = await results.json(); const data = await results.json();
this.promo = data; this.promo = data;
if(this.promo.length == 0){
console.log("Promo Again")
this.fetchPromo(cal)
}
}, },
async fetchEvents(cal) { async fetchEvents(cal) {
@@ -60,7 +65,9 @@ export const useEventsStore = defineStore('Events', {
}; };
this.events = newArr; this.events = newArr;
this.the_day = ""; this.the_day = "";
if(this.events.length() == 0){ this.filter = false;
if(this.events.length == 0){
console.log("Events Again")
this.fetchEvents(cal) this.fetchEvents(cal)
} }
}, },
@@ -79,7 +86,8 @@ export const useEventsStore = defineStore('Events', {
} }
axios.get(api_url, {headers: this.headers}) axios.get(api_url, {headers: this.headers})
.then(response => { .then(response => {
this.events = response.data this.events = response.data;
this.filter = true;
if(api_url==`${apiUrl}/events/events/?search=`){ if(api_url==`${apiUrl}/events/events/?search=`){
this.new_msg = "" this.new_msg = ""
} }
@@ -90,16 +98,19 @@ export const useEventsStore = defineStore('Events', {
}, },
getEventByDate(which_day) { getEventByDate(which_day) {
console.log(which_day);
let today = moment().format("YYYY-MM-DD"); let today = moment().format("YYYY-MM-DD");
let the_date = moment().add(which_day, 'd').format("YYYY-MM-DD"); let the_date = moment().add(which_day, 'd').format("YYYY-MM-DD");
this.the_day = the_date; this.the_day = the_date;
let api_url = `${apiUrl}/events/events/`; let api_url = `${apiUrl}/events/events/`;
if(the_date!==''||the_date!==null) { if(the_date!==''||the_date!==null) {
api_url = `${apiUrl}/events/events/?show_day=${the_date}&calendar__shortcode=${this.shortcode}`; api_url = `${apiUrl}/events/events/?show_day=${the_date}&calendar__shortcode=${this.shortcode}`;
console.log(api_url)
} }
axios.get(api_url, {headers: this.headers}) axios.get(api_url, {headers: this.headers})
.then(response => { .then(response => {
this.events = response.data this.events = response.data
this.filter = true;
}) })
.catch(e => { .catch(e => {
this.errors.push(e) this.errors.push(e)
@@ -118,6 +129,7 @@ export const useEventsStore = defineStore('Events', {
const data = await result.json(); const data = await result.json();
this.events = data; this.events = data;
this.fetchPromo() this.fetchPromo()
this.filter = true;
return this.events; return this.events;
} }
} }

10
src/views/DigiSnaxxView.vue
View File

@@ -23,12 +23,12 @@
<Header/> <Header/>
<SecondaryButtonSet /> <SecondaryButtonSet />
<div class="text-center pt-0 pb-3" v-if="menuStore.showMenu === false"> <div class="text-center pt-0 pb-3" v-if="menuStore.showMenu === false">
<SearchButton /> <!-- <SearchButton /> -->
<PrimaryButtonSet /> <PrimaryButtonSet />
<a href="https://airtable.com/appzQxsifc8AnD1zA/shrvhmYsAXY216C51"> <!-- <a href="https://airtable.com/appzQxsifc8AnD1zA/shrvhmYsAXY216C51">
<b v-if="$route.name == 'mde'" >Dame tus eventos, por favor</b> <b class="text-lg underline" v-if="$route.name == 'mde'" >¡Envíenos sus eventos!</b>
<b v-if="$route.name != 'mde'" >Add your event!</b> <b class="text-lg underline" v-if="$route.name != 'mde'" >Add your event!</b>
</a> </a> -->
<Modal /> <Modal />
</div> </div>

77
src/views/HomeView.vue
View File

@@ -18,24 +18,60 @@
<!-- <ButtonSet /> --> <!-- <ButtonSet /> -->
<div class="flex grid text-center p-4 grid-flow-row lg:grid-cols-3"> <div class="flex grid text-center p-4 grid-flow-row lg:grid-cols-3">
<div class="text-center p-2"> <div class="text-center p-2">
<a class=" text-center" href="/medellin" :click="EventsStore.shortcode = 'mde'"> <a class=" text-center" href="/beyond">
<img src="../assets/Medellin.png" style="width:15em;"/> <img src="../assets/earth.png" style="width:15em;"/>
<p class="text-lg">Medellin</p> <p class="text-lg">Beyond</p>
</a> </a>
</div> </div>
<div class="text-center p-2"> <div class="text-center p-2">
<a class=" text-center" href="/mpls-stp"> <a class=" text-center" href="/boston" :click="EventsStore.shortcode = 'bos'">
<img src="../assets/Mpls.png" style="width:15em;"/> <img src="../assets/boston.png" style="width:15em;"/>
<p class="text-lg">Mpls/StPaul</p> <p class="text-lg">Boston</p>
</a> </a>
</div> </div>
<div class="text-center p-2"> <div class="text-center p-2">
<a class=" text-center" href="/beyond"> <a class=" text-center" href="/chicago" :click="EventsStore.shortcode = 'chi'">
<img src="../assets/earth.png" style="width:15em;"/> <img src="../assets/chicago.png" style="width:15em;"/>
<p class="text-lg">Beyond</p> <p class="text-lg">Chicago</p>
</a> </a>
</div> </div>
<div class="text-center p-2">
<a class=" text-center" href="/" :click="EventsStore.shortcode = 'hou'">
<img src="../assets/houston.png" style="width:15em;" class="hold"/>
<p class="text-lg">Houston</p>
</a>
</div>
<div class="text-center p-2">
<a class=" text-center" href="/medellin" :click="EventsStore.shortcode = 'mde'">
<img src="../assets/Medellin.png" style="width:15em;"/>
<p class="text-lg">Medellin</p>
</a>
</div>
<div class="text-center p-2">
<a class=" text-center" href="/mpls-stp">
<img src="../assets/Mpls.png" style="width:15em;"/>
<p class="text-lg">Mpls/StPaul</p>
</a>
</div>
<div class="text-center p-2">
<a class=" text-center" href="/philly" :click="EventsStore.shortcode = 'phl'">
<img src="../assets/philly.png" style="width:15em;"/>
<p class="text-lg">Philadelphia</p>
</a>
</div>
<div class="text-center p-2">
<a class=" text-center" href="/portland" :click="EventsStore.shortcode = 'pdx'">
<img src="../assets/portland.png" style="width:15em;"/>
<p class="text-lg">Portland</p>
</a>
</div>
<div class="text-center p-2">
<a class=" text-center" href="/" :click="EventsStore.shortcode = 'stl'">
<img src="../assets/stlouis.png" style="width:15em;" class="hold"/>
<p class="text-lg">St. Louis</p>
</a>
</div>
</div> </div>
<div class="p-8"> <div class="p-8">
@@ -58,4 +94,9 @@ a {
padding: 2em; padding: 2em;
} }
.hold {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
</style> </style>