Add more cities

remove src2
updates
2026-01-02 20:29:34 -05:00 · 2025-11-30 15:39:27 -05:00 · 2025-11-29 12:10:23 -05:00
28 changed files with 570 additions and 166 deletions
--- a/index.html
+++ b/index.html
@@ -20,7 +20,7 @@
    <meta name="twitter:image" content="">

  </head>
-  <body class="">
+  <body class="z-0">
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,10 @@
 <script setup>
-import { RouterLink, RouterView } from 'vue-router'
-import { useDark, useToggle } from "@vueuse/core";
+    import { storeToRefs } from 'pinia'
+    import { RouterLink, RouterView } from 'vue-router'
+    import { useDark, useToggle } from "@vueuse/core";

-const isDark = useDark({selector: "body",});
-const toggleDark = useToggle(isDark);
+    const isDark = useDark({selector: "body",});
+    const toggleDark = useToggle(isDark);

 </script>

--- a/src/assets/boston.jpg
+++ b/src/assets/boston.jpg
--- a/src/assets/boston.png
+++ b/src/assets/boston.png
--- a/src/assets/chicago.jpg
+++ b/src/assets/chicago.jpg
--- a/src/assets/chicago.png
+++ b/src/assets/chicago.png
--- a/src/assets/houston.jpg
+++ b/src/assets/houston.jpg
--- a/src/assets/houston.png
+++ b/src/assets/houston.png
--- a/src/assets/philly.jpg
+++ b/src/assets/philly.jpg
--- a/src/assets/philly.png
+++ b/src/assets/philly.png
--- a/src/assets/portland.jpg
+++ b/src/assets/portland.jpg
--- a/src/assets/portland.png
+++ b/src/assets/portland.png
--- a/src/assets/stlouis.jpg
+++ b/src/assets/stlouis.jpg
--- a/src/assets/stlouis.png
+++ b/src/assets/stlouis.png
--- a/src/components/Sections/EventList.vue
+++ b/src/components/Sections/EventList.vue
@@ -5,10 +5,9 @@
  const MenuStore = useMenuStore();
  MenuStore.get_today();

-
  import EventListingComplete from '../listings/EventListing.vue';
-  import Promo from '../listings/BlueskyLinks.vue';
-  // import Promo from '../listings/Promo.vue';
+  // import Promo from '../listings/BlueskyLinks.vue';
+  import Promo from '../listings/Promo.vue';

  import { useEventsStore } from '../../stores/EventsStore';

@@ -26,24 +25,33 @@

  const store = useEventsStore();
  store.fetchEvents(props.cal);
-  store.fetchPromo();
+  store.fetchPromo(props.cal);
  const events = computed(() => {
+    if (store.events.length == 0){
+      store.fetchEvents(props.cal);
+    }
    return store.events;
  });
  const promo = computed(() => {
+    if (store.promo.length == 0){
+      store.fetchPromo(props.cal);
+    }
    return store.promo;
  });

-  
-
 </script>
        
 <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">
    <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"/>
      <EventListingComplete v-else-if="(index % 6 != 0)" :item = "item" :index = "index" />
      <!-- <EventListingComplete :item = "item" :index = "index" /> -->
    </span>
-  </div>
+  </div>  
 </template>
--- a/src/components/Sections/Header.vue
+++ b/src/components/Sections/Header.vue
@@ -15,7 +15,7 @@
          another <a href="https://www.dreamfreely.org" targe="_blank">DreamFreely</a> project
        </span> -->
        <span class="subtitle z-40">
-          Events done simply
+          a dreamfreely project
        </span>
      </div>
    </header>
--- a/src/components/blocks/About.vue
+++ b/src/components/blocks/About.vue
@@ -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>
--- a/src/components/blocks/Modal.vue
+++ b/src/components/blocks/Modal.vue
@@ -1,114 +1,63 @@
 <script setup>
    import { storeToRefs } from 'pinia'
    import { mainStore } from '../../stores/MainStore.vue'
-    import About from '../About.vue'
+    import About from './About.vue'
    import qrCode from '../../assets/qr.digi.png'

    const promo = mainStore().promo_display;
-    
    const { isOpen, modal} = storeToRefs(mainStore())

-</script>
+    import { useDark, useToggle } from "@vueuse/core";
+    const isDark = useDark({selector: "body",});

+</script>

 <template>
    <div
        v-show="isOpen"
+        :class="{ isDark: isDark}"
        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
            flex
-            items-start
-            justify-center
-            mx-auto
            z-40
        "
        >
-        <div class="max-w-2xl p-6 mt-10 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>
-                    <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 class="container p-6 rounded-md promo-overlay" :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>
+            <div v-if="modal === 0" class="p-2 template z-40 justify-items-center" :class="{ isDark: isDark}">
+                <About class="" />
            </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">
+
+            <div v-if="modal === 2" class="p-10 template z-40" :class="{isDark: isDark }">
                <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 }}
                    </h2>
-                    <p class="text-xs">
+                    <p class="text-xs  m-auto">
                        {{ 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 class="p-5 m-auto" v-html="promo[0].long_text" />
            </div>
            
        </div>
@@ -118,15 +67,21 @@
 </template>

 <style scoped>
-/* .template {
-    background-color: #000;
-    z-index: 4;
-} */
+.template {
+    background-color: #fff;
+}

+#qrcode {
+    width: 25em;
+    margin: auto;
+}
 .promo-overlay {
+    background-size: cover;    
+}
+
+.isDark {
    background-color: #000;
    color: #fff;
-    
 }
 div >>> p {
    padding:.5rem;
--- a/src/components/blocks/Modal2.vue
+++ b/src/components/blocks/Modal2.vue
@@ -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>
--- a/src/components/blocks/PrimaryButtonSet.vue
+++ b/src/components/blocks/PrimaryButtonSet.vue
@@ -10,8 +10,31 @@
 </script>
        
 <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">
        <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
        @click="MainStore.changeGallery(MainStore.isOpen, 0, 0, null)"
@@ -77,8 +100,9 @@ font-weight: bold;
 button {
  border-radius: 25px;
  padding: .25rem .75rem;
-  margin: .25rem;
-  background-color: orange;
+  margin: 1rem;
+  background-color: #00bd7e;
+  border: #000 1px solid;
  color: #000;
  font-weight: bold;
 }
@@ -88,7 +112,7 @@ button {
  padding: .5rem 1rem;
  margin: .5rem;
  margin-top: 10px;
-  background-color: hsla(160, 100%, 37%, 1);
+  background-color: #00bd7e;
  color: #000;
  font-weight: bold;
 }
--- a/src/components/blocks/SecondaryButtonSet.vue
+++ b/src/components/blocks/SecondaryButtonSet.vue
@@ -13,20 +13,26 @@
    <div  v-if="menuStore.showMenu">
        <div v-if="menuStore.isHidden">
            <div>
-                <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 v-if="$route.path == '/medellin'" class="text-center p-0">
+                    <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(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(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>
                <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>
-            </div>
+            </div> -->
        </div>

        <!-- <div v-if="!menuStore.isHidden">
--- a/src/components/listings/EventListing.vue
+++ b/src/components/listings/EventListing.vue
@@ -32,7 +32,12 @@
                </a> 
            </span>
        </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">
                {{ item.show_title }}
            </p>
--- a/src/components/listings/Promo.vue
+++ b/src/components/listings/Promo.vue
@@ -3,7 +3,9 @@
    import Modal from '../blocks/Modal.vue';
    import { mainStore } from '../../stores/MainStore.vue';

+    import { useDark, useToggle } from "@vueuse/core";

+    const isDark = useDark({selector: "body",});
    const MainStore = mainStore();

    defineProps({
@@ -20,17 +22,7 @@
 </script>
        
 <template>
-    <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 === ''" class="events p-5 m-2 max-w-lg" :class="item.promo_type">
+    <div class="events p-5 m-2 max-w-lg" :class="item.promo_type">
        <a href="#!"
        @click="MainStore.changeGallery(MainStore.isOpen, 0, 2, item)"
        >
@@ -42,16 +34,6 @@
            {{ 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 }}
-        </div>
-    </div>
 </template>

 <style scoped>
@@ -62,16 +44,23 @@
    max-width: 400px;
    }

+    h2 {
+        color:#000;
+    }
    .Ja, .Su, .An, .Su {
-        background-color: hsla(202, 100%, 37%, 0.1);
+        background-color: #0078bdc4;
+        color: #000;
    }

    .Sp, .Ma, .Ar {
-        background-color: hsla(160, 100%, 37%, .1);
+        background-color: #ff674cec;
+        color: #000;
    }

    .Jo, .Re, .Fo, .Ev {
-        background-color: hsla(0, 100%, 59%, 0.1);
+        /* background-color: #ff4d2e; */
+        background-color: #00bd7e;
+        color: #000;
    }


--- a/src/components/listings/Promo2.vue
+++ b/src/components/listings/Promo2.vue
@@ -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>
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -17,6 +17,21 @@ const router = createRouter({
      name: '000',
      component: DigiSnaxxView
    },
+    {
+      path: '/boston',
+      name: 'bos',
+      component: DigiSnaxxView
+    },
+    {
+      path: '/chicago',
+      name: 'chi',
+      component: DigiSnaxxView
+    }, 
+    {
+      path: '/houston',
+      name: 'hou',
+      component: DigiSnaxxView
+    },
    {
      path: '/medellin',
      name: 'mde',
@@ -27,16 +42,32 @@ const router = createRouter({
      name: 'msp',
      component: DigiSnaxxView
    },
+    {
+      path: '/philly',
+      name: 'phl',
+      component: DigiSnaxxView
+    },
+    {
+      path: '/portland',
+      name: 'pdx',
+      component: DigiSnaxxView
+    },
+    {
+      path: '/stlouis',
+      name: 'stl',
+      component: DigiSnaxxView
+    },
+    
    // {
    //   path: '/live',
    //   name: 'live',
    //   component: LiveView
    // },
-    {
-      path: '/media',
-      name: 'bluesky',
-      component: BlueskyView
-    },
+    // {
+    //   path: '/media',
+    //   name: 'bluesky',
+    //   component: BlueskyView
+    // },
  ]
 })

--- a/src/stores/EventsStore.js
+++ b/src/stores/EventsStore.js
@@ -27,6 +27,7 @@ export const useEventsStore = defineStore('Events', {
      new_msg: "",
      today: "",
      shortcode: "",
+      filter: false,
    };
  },

@@ -37,11 +38,15 @@ export const useEventsStore = defineStore('Events', {
    //   return this.shortcode;
    // },

-    async fetchPromo() {
-      // const results = await fetch(`${apiUrl}/socials/promo/`, {headers: this.headers});
-      const results = await fetch(`${apiUrl}/socials/links/`, {headers: this.headers});
+    async fetchPromo(cal) {
+      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 data = await results.json();
      this.promo = data;
+      if(this.promo.length == 0){
+        console.log("Promo Again")
+            this.fetchPromo(cal)
+          }
    },

    async fetchEvents(cal) {
@@ -60,7 +65,9 @@ export const useEventsStore = defineStore('Events', {
            };
            this.events = newArr;
            this.the_day = "";
-            if(this.events.length() == 0){
+            this.filter = false;
+            if(this.events.length == 0){
+              console.log("Events Again")
              this.fetchEvents(cal)
            }
    },
@@ -79,7 +86,8 @@ export const useEventsStore = defineStore('Events', {
      }
      axios.get(api_url, {headers: this.headers})
      .then(response => {
-        this.events = response.data
+        this.events = response.data;
+        this.filter = true;
        if(api_url==`${apiUrl}/events/events/?search=`){
          this.new_msg = ""
        }
@@ -90,16 +98,19 @@ export const useEventsStore = defineStore('Events', {
    },

    getEventByDate(which_day) {
+      console.log(which_day);
      let today = moment().format("YYYY-MM-DD");
      let the_date = moment().add(which_day, 'd').format("YYYY-MM-DD");
      this.the_day = the_date;
      let api_url = `${apiUrl}/events/events/`;
      if(the_date!==''||the_date!==null) {
        api_url = `${apiUrl}/events/events/?show_day=${the_date}&calendar__shortcode=${this.shortcode}`;
+        console.log(api_url)
      }
      axios.get(api_url, {headers: this.headers})
      .then(response => {
        this.events = response.data
+        this.filter = true;
      })
      .catch(e => {
        this.errors.push(e)
@@ -118,6 +129,7 @@ export const useEventsStore = defineStore('Events', {
      const data = await result.json();
      this.events = data;
      this.fetchPromo()
+      this.filter = true;
      return this.events;
    }
  }
--- a/src/views/DigiSnaxxView.vue
+++ b/src/views/DigiSnaxxView.vue
@@ -23,12 +23,12 @@
    <Header/>
    <SecondaryButtonSet />
    <div class="text-center pt-0 pb-3" v-if="menuStore.showMenu === false">
-      <SearchButton />
+      <!-- <SearchButton /> -->
      <PrimaryButtonSet />
-      <a href="https://airtable.com/appzQxsifc8AnD1zA/shrvhmYsAXY216C51">
-        <b v-if="$route.name == 'mde'" >Dame tus eventos, por favor</b>
-        <b v-if="$route.name != 'mde'" >Add your event!</b>
-      </a>
+      <!-- <a href="https://airtable.com/appzQxsifc8AnD1zA/shrvhmYsAXY216C51">
+        <b class="text-lg underline" v-if="$route.name == 'mde'" >¡Envíenos sus eventos!</b>
+        <b class="text-lg underline" v-if="$route.name != 'mde'" >Add your event!</b>
+      </a> -->
      <Modal />
    </div>

--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -18,24 +18,60 @@
    <!-- <ButtonSet /> -->

    <div class="flex grid text-center p-4 grid-flow-row lg:grid-cols-3">
-        <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="/beyond">
-            <img src="../assets/earth.png" style="width:15em;"/>
-            <p class="text-lg">Beyond</p>
-          </a>
-        </div>
+      <div class="text-center p-2">
+        <a class=" text-center" href="/beyond">
+          <img src="../assets/earth.png" style="width:15em;"/>
+          <p class="text-lg">Beyond</p>
+        </a>
+      </div>
+      <div class="text-center p-2">
+        <a class=" text-center" href="/boston" :click="EventsStore.shortcode = 'bos'">
+          <img src="../assets/boston.png" style="width:15em;"/>
+          <p class="text-lg">Boston</p>
+        </a>
+      </div>
+      <div class="text-center p-2">
+        <a class=" text-center" href="/chicago" :click="EventsStore.shortcode = 'chi'">
+          <img src="../assets/chicago.png" style="width:15em;"/>
+          <p class="text-lg">Chicago</p>
+        </a>
+      </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 class="p-8">
@@ -58,4 +94,9 @@ a {
  padding: 2em;
 }

+.hold {
+  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
+  filter: grayscale(100%);
+}
+
 </style>
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