morsellif · morsellif · Mar 4, 2024 · Mar 4, 2024 · Mar 4, 2024 · Mar 4, 2024
diff --git a/bun.lockb b/bun.lockb
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -1,5 +1,6 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
+  modules: ['@vueuse/nuxt', '@pinia/nuxt'],
   srcDir: './src/',
   css: ['~/assets/css/main.css'],
   postcss: {

diff --git a/package.json b/package.json
@@ -20,9 +20,12 @@
   },
   "devDependencies": {
     "@nuxtjs/eslint-config-typescript": "^12.1.0",
+    "@pinia/nuxt": "^0.5.1",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.10",
     "@typescript-eslint/eslint-plugin": "^7.1.0",
+    "@vueuse/core": "^10.9.0",
+    "@vueuse/nuxt": "^10.9.0",
     "autoprefixer": "^10.4.18",
     "cssnano": "^6.0.5",
     "eslint": "^8.57.0",
@@ -31,6 +34,7 @@
     "eslint-plugin-vue": "^9.22.0",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
+    "pinia": "^2.1.7",
     "postcss": "^8.4.35",
     "prettier": "^3.2.5",
     "prettier-plugin-tailwindcss": "^0.5.11",

diff --git a/src/components/icons/Bookmark.vue b/src/components/icons/Bookmark.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts"></script>
+
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M6.19 21.854a.75.75 0 0 1-1.188-.61V6.25a3.25 3.25 0 0 1 3.25-3.25h7.499A3.25 3.25 0 0 1 19 6.249v14.996a.75.75 0 0 1-1.188.609l-5.811-4.181-5.812 4.18ZM17.5 6.249a1.75 1.75 0 0 0-1.75-1.75H8.253a1.75 1.75 0 0 0-1.75 1.75v13.532l5.062-3.64a.75.75 0 0 1 .876 0l5.06 3.64V6.25Z"
+    />
+  </svg>
+</template>
diff --git a/src/components/icons/BookmarkAdd.vue b/src/components/icons/BookmarkAdd.vue
@@ -0,0 +1,14 @@
+<script stup lang="ts"></script>
+
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M23 6.5a5.5 5.5 0 1 0-11 0 5.5 5.5 0 0 0 11 0ZM18 7l.001 2.504a.5.5 0 1 1-1 0V7h-2.505a.5.5 0 0 1 0-1H17V3.5a.5.5 0 0 1 1 0V6h2.497a.5.5 0 0 1 0 1H18Zm-.5 12.782V13a6.52 6.52 0 0 0 1.5-.174v8.42a.75.75 0 0 1-1.187.608l-5.811-4.181-5.812 4.18a.75.75 0 0 1-1.188-.608V6.25A3.25 3.25 0 0 1 8.252 3h3.77a6.468 6.468 0 0 0-.708 1.5H8.252a1.75 1.75 0 0 0-1.75 1.75v13.533l5.062-3.642a.75.75 0 0 1 .876 0l5.06 3.642Z"
+    />
+  </svg>
+</template>
diff --git a/src/components/icons/BookmarkAddFilled.vue b/src/components/icons/BookmarkAddFilled.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts"></script>
+
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M23 6.5a5.5 5.5 0 1 0-11 0 5.5 5.5 0 0 0 11 0ZM18 7l.001 2.504a.5.5 0 1 1-1 0V7h-2.505a.5.5 0 0 1 0-1H17V3.5a.5.5 0 0 1 1 0V6h2.497a.5.5 0 0 1 0 1H18Zm-.5 6c.517 0 1.02-.06 1.5-.174v8.42a.75.75 0 0 1-1.187.608l-5.811-4.181-5.812 4.18a.75.75 0 0 1-1.188-.608V6.25A3.25 3.25 0 0 1 8.252 3h3.77A6.5 6.5 0 0 0 17.5 13Z"
+    />
+  </svg>
+</template>
diff --git a/src/components/icons/BookmarkFilled.vue b/src/components/icons/BookmarkFilled.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts"></script>
+
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M6.19 21.854a.75.75 0 0 1-1.188-.61V6.25a3.25 3.25 0 0 1 3.25-3.25h7.499A3.25 3.25 0 0 1 19 6.249v14.996a.75.75 0 0 1-1.188.609l-5.811-4.181-5.812 4.18Z"
+    />
+  </svg>
+</template>
diff --git a/src/components/icons/BookmarkOff.vue b/src/components/icons/BookmarkOff.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts"></script>
+
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M3.28 2.22a.75.75 0 1 0-1.06 1.06l2.788 2.788a3.3 3.3 0 0 0-.005.181v14.996a.75.75 0 0 0 1.188.609L12 17.673l5.812 4.18A.75.75 0 0 0 19 21.246v-1.183l1.718 1.718a.75.75 0 0 0 1.061-1.06L3.28 2.22Zm14.221 16.342v1.22L12.44 16.14a.75.75 0 0 0-.876 0l-5.061 3.642V7.563L17.5 18.562ZM17.501 6.25v8.07l1.5 1.5V6.25A3.25 3.25 0 0 0 15.751 3H8.253c-.595 0-1.153.16-1.633.438l1.133 1.133a1.75 1.75 0 0 1 .5-.072h7.498c.967 0 1.75.784 1.75 1.75Z"
+    />
+  </svg>
+</template>
diff --git a/src/components/icons/BookmarkOffFilled.vue b/src/components/icons/BookmarkOffFilled.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts"></script>
+
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M3.28 2.22a.75.75 0 1 0-1.06 1.06l2.788 2.788a3.3 3.3 0 0 0-.005.181v14.996a.75.75 0 0 0 1.188.609L12 17.673l5.812 4.18A.75.75 0 0 0 19 21.246v-1.183l1.718 1.718a.75.75 0 0 0 1.061-1.06L3.28 2.22ZM19.001 6.25v9.57L6.621 3.437C7.1 3.16 7.657 3 8.252 3h7.498a3.25 3.25 0 0 1 3.25 3.25Z"
+    />
+  </svg>
+</template>
diff --git a/src/components/ui/Bookmark.vue b/src/components/ui/Bookmark.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+defineProps<{
+  idstazione: string;
+}>();
+
+const easyRiverStore = useEasyRiverStore();
+const { isBookmarked } = storeToRefs(easyRiverStore);
+</script>
+
+<template>
+  <div class="group cursor-pointer flex-row p-3">
+    <div
+      class="group/add"
+      @click="easyRiverStore.addBookmark(idstazione)"
+    >
+      <IconsBookmarkAdd
+        v-if="!isBookmarked(idstazione)"
+        class="block fill-blue-600 group-hover/add:hidden"
+      />
+      <IconsBookmarkAddFilled
+        v-if="!isBookmarked(idstazione)"
+        class="hidden fill-blue-600 group-hover/add:block"
+      />
+    </div>
+    <div
+      class="group/remove"
+      @click="easyRiverStore.removeBookmark(idstazione)"
+    >
+      <IconsBookmarkFilled
+        v-if="isBookmarked(idstazione)"
+        class="block fill-blue-600 group-hover/remove:hidden"
+      />
+      <IconsBookmarkOffFilled
+        class="hidden fill-blue-600 group-hover/remove:block"
+        @click="isBookmarked(idstazione)"
+      />
+    </div>
+  </div>
+</template>
diff --git a/src/components/ui/Station.vue b/src/components/ui/Station.vue
@@ -98,6 +98,7 @@ const cursorPercentage = (station: Station) => {
 <template>
   <div class="flex flex-col space-y-2 pb-4 pt-4">
     <div class="flex flex-row">
+      <UiBookmark :idstazione="station.idstazione" />
       <div class="flex-1 flex-row">
         <div class="text-sm">NOME</div>
         <div class="text-xl font-bold">{{ station.nomestaz }}</div>

diff --git a/src/stores/easyRiver.store.ts b/src/stores/easyRiver.store.ts
@@ -0,0 +1,32 @@
+import { defineStore } from 'pinia';
+
+interface State {
+  bookmarks: Ref<Bookmark[]>;
+}
+
+export const useEasyRiverStore = defineStore('easyRiver', {
+  state: (): State => {
+    return {
+      bookmarks: useLocalStorage<Bookmark[]>('easyRiver/bookmarks', []),
+    };
+  },
+  getters: {
+    isBookmarked: (state) => {
+      return (idstazione: string) =>
+        state.bookmarks.find((bookmark) => bookmark.idstazione === idstazione);
+    },
+    bookmarkCount: (state) => state.bookmarks.length,
+  },
+  actions: {
+    addBookmark(idstazione: string) {
+      this.bookmarks.push({ idstazione, createdAt: new Date() });
+    },
+    removeBookmark(idstazione: string) {
+      const indexToDelete = this.bookmarks.findIndex(
+        (bookmark) => bookmark.idstazione === idstazione,
+      );
+
+      this.bookmarks.splice(indexToDelete, 1);
+    },
+  },
+});
diff --git a/types/Bookmarks.d.ts b/types/Bookmarks.d.ts
@@ -0,0 +1,8 @@
+export { Bookmark };
+
+declare global {
+  interface Bookmark {
+    idstazione: string;
+    createdAt: Date;
+  }
+}