Merge pull request #2 from PromptExecution/feature/pinia

feature/pinia

Author: elasticdotventures

.gitignore

@@ -18,3 +18,4 @@ dist/*
 **/*.pyc
 
 bun.lockb
+*.mjs

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "path": "^0.12.7",
+    "pinia": "^2.1.7",
     "vue": "^3.3.8",
     "vue-command": "^35.2.1",
     "vue-cookie-law": "github:elasticdotventures/vue-cookie-law",

src/App.vue

@@ -6,6 +6,9 @@ import CookieBanner from './components/CookieBanner.vue';
 import CommandLineInterface from './components/CommandLineInterface.vue';
 import PromptExecutionLogo from './components/PromptExecutionLogo.vue';
 
+import { useMainStore } from './store';
+const mainStore = useMainStore();
+
 const showBanner = ref(true); // Or whatever logic you need to show/hide the banner
 
 // Example of how you might control the visibility of the banner
@@ -26,7 +29,7 @@ import TheFooter from './components/TheFooter.vue';
   <CommandLineInterface  />
   <TheFooter />
 
-<CookieBanner v-if="showBanner" />
+  <CookieBanner v-if="!mainStore.isCookieConsentSet" />
 </template>
 
 <style scoped>

src/components/CommandLineInterface.vue

@@ -1,6 +1,29 @@
+<script setup lang="ts">
+import VueCommand, { createStdout } from "vue-command";
+import "vue-command/dist/vue-command.css";
+import { useMainStore } from '../store';
+import LoginPanel from './LoginPanel.vue';
+import DebugPanel from './DebugPanel.vue';
+
+const mainStore = useMainStore();
+
+const commands = {
+  "help": () => createStdout("Available commands: hello, login, debug"),
+  "login": () => {
+    mainStore.toggleLogin();
+    return createStdout("Login interface activated.");
+  },
+  "hello": () => createStdout("Hello world! #wip"),
+  "debug": () => {
+    mainStore.toggleDebugPanel();
+    return createStdout("Debug panel activated.");
+  },
+};
+</script>
+
 <template>
   <div class="cli-container">
-  <vue-command :commands="commands" :hide-buttons="true" :show-help="true" :cursor-position="0" :is-fullscreen="true">
+    <vue-command :commands="commands" :hide-buttons="true" :show-help="true" :cursor-position="0" :is-fullscreen="true">
     <template #title>Command Line Interface v0.1 -- type "help" for instructions</template>
     <template #prompt>
       <span class="prompt">
@@ -13,31 +36,12 @@
     <template #help-text>asdfasdf</template>
     <template #invert>true</template>
     <template #font></template>
-
   </vue-command>
+    <LoginPanel v-if="mainStore.showLogin" />
+    <DebugPanel v-if="mainStore.showDebugPanel" />
   </div>
 </template>
 
-<script lang="ts">
-// https://github.com/ndabAP/vue-command
-import VueCommand, { createStdout } from "vue-command";
-import "vue-command/dist/vue-command.css";
-
-export default {
-  components: {
-    VueCommand,
-  },
-
-  data: () => ({
-    commands: {
-      "help": () => createStdout("Available commands: hello, login"),
-      "login": () => createStdout("Login not available (coming soon!)"),
-      "hello": () => createStdout("Hello world! #wip"),
-    },
-  }),
-};
-</script>
-
 <style scoped>
 .cli-container {
   /* Adjust the border-radius as needed */

src/components/CookieBanner.vue

@@ -12,23 +12,27 @@
 <script lang="ts">
 import useCookies from '../useCookies'; 
 import { defineComponent, getCurrentInstance } from 'vue';
+import { useMainStore } from '../store';
 
 export default defineComponent({
   setup() {
     const instance = getCurrentInstance();
     const gtag = instance?.appContext.config.globalProperties.$gtag;
+    const mainStore = useMainStore();
 
     const { allowCookies } = useCookies(gtag);
 
     const handleConsent = () => {
       allowCookies.value = true;
+      mainStore.setCookieConsent('accepted');
       if (gtag) {
         gtag.optIn();
       }
     };
 
     const handleReject = () => {
       allowCookies.value = false;
+      mainStore.setCookieConsent('rejected');
       if (gtag) {
         gtag.optOut();
       }

src/components/DebugPanel.vue

@@ -0,0 +1,25 @@
+<!-- src/components/DebugPanel.vue -->
+<template>
+  <div class="debug-panel">
+    <pre>{{ state }}</pre>
+    <button @click="resetCookieConsent">Reset Cookie Consent</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useMainStore } from '../store';
+
+const mainStore = useMainStore();
+const state = mainStore.$state;
+
+const resetCookieConsent = () => {
+  mainStore.resetCookieConsent();
+};
+</script>
+
+<style scoped>
+.debug-panel {
+  /* Add your styles for the debug panel here */
+}
+</style>
+

src/components/LoginPanel.vue

@@ -0,0 +1,19 @@
+<!-- src/components/LoginPanel.vue -->
+<template>
+  <div class="login-buttons">
+    <button>Sign in with Google</button>
+    <button>Sign in with Facebook</button>
+    <!-- More buttons as needed -->
+  </div>
+</template>
+
+<script setup lang="ts">
+// Add any script logic if needed
+</script>
+
+<style scoped>
+.login-buttons {
+  /* Add your styles for the login buttons here */
+}
+</style>
+

src/main.ts

@@ -6,12 +6,14 @@ import App from './App.vue'
 // https://matteo-gabriele.gitbook.io/vue-gtag/
 import VueGtag from "vue-gtag";
 import { VueCookieNext } from 'vue-cookie-next';
-import { useCookies } from './useCookies'
+import { createPinia } from 'pinia'
 
 // An application instance won't render anything until its .mount() method is called
 const app = createApp(App);
+const pinia = createPinia()
 
 app
+.use(pinia)
 .use(VueCookieNext)
 .use(VueGtag, {
     config: { 
@@ -24,3 +26,4 @@ app
   })
 .provide('gtag', app.config.globalProperties.$gtag)
 .mount('#app')
+  

src/store.ts

@@ -0,0 +1,35 @@
+// src/store.js
+import { defineStore } from 'pinia'
+
+export const useMainStore = defineStore('main', {
+  state: () => ({
+    count: 0,
+    // cookieConsent: null // null, 'accepted', or 'rejected'
+    cookieConsent: localStorage.getItem('cookieConsent'), 
+    showLogin: false,
+    showDebugPanel: false,
+  }),
+  actions: {
+    increment() {
+      this.count++
+    },
+    setCookieConsent(value) {
+      this.cookieConsent = value
+      localStorage.setItem('cookieConsent', value)
+    },
+    resetCookieConsent() {
+      this.cookieConsent = null;
+      localStorage.removeItem('cookieConsent');
+    },
+    toggleLogin(show) {
+      this.showLogin = !this.showLogin;
+      },
+    toggleDebugPanel(show) {
+      this.showDebugPanel = !this.showDebugPanel;
+    }
+  },
+  getters: {
+    isCookieConsentSet: (state) => state.cookieConsent !== null
+  }
+})
+