change timeline

nekobato · Aug 27, 2024 · 25795ec · 25795ec
1 parent 18be381
commit 25795ec
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 5 deletions.
diff --git a/src/components/Header.vue b/src/components/Header.vue
@@ -16,7 +16,7 @@ const appLogoImagePathMap = {
 };
 
 const store = useStore();
-const { currentInstance, currentUser, current } = useTimelineStore();
+const { currentInstance, currentUser, current, changeActiveTimeline } = useTimelineStore();
 const { findUser } = useUsersStore();
 const { findInstanceByUserId } = useInstanceStore();
 
@@ -44,7 +44,6 @@ const currentTimelineImages = computed(() => {
 });
 
 const timelineWithImages = computed(() => {
-  console.log("### timelines", store.$state.timelines);
   return store.$state.timelines.map((timeline) => {
     const instance = findInstanceByUserId(timeline.userId);
     return {
@@ -79,15 +78,22 @@ const settings = () => {
   router.push("/main/settings");
 };
 
-const changeTimeline = (_: any) => {
+const changeTimeline = async (index: number) => {
+  await changeActiveTimeline(index);
   isDetailVisible.value = false;
+  location.reload();
 };
 </script>
 
 <template>
   <div class="header">
     <div class="summary" :class="{ detailed: isDetailVisible }">
-      <div class="timeline-images open-button" @click="toggleMenu" ref="toggleButtonRef">
+      <div
+        class="timeline-images open-button"
+        :class="{ open: isDetailVisible }"
+        @click="toggleMenu"
+        ref="toggleButtonRef"
+      >
         <img class="image app" :src="currentTimelineImages.app" alt="app" />
         <img class="image instance" :src="currentTimelineImages.instance" alt="instance" />
         <img class="image user" :src="currentTimelineImages.account" alt="account" />
@@ -110,7 +116,7 @@ const changeTimeline = (_: any) => {
         </button>
       </div>
       <div class="timeline-list">
-        <div class="timeline-item" v-for="timeline in timelineWithImages" @click="changeTimeline">
+        <div class="timeline-item" v-for="(timeline, index) in timelineWithImages" @click="changeTimeline(index)">
           <div
             class="timeline-images"
             :class="{
@@ -161,6 +167,10 @@ const changeTimeline = (_: any) => {
 
   &.open-button {
     cursor: pointer;
+
+    &.open * {
+      visibility: hidden;
+    }
   }
 
   .image {

diff --git a/src/store/timeline.ts b/src/store/timeline.ts
@@ -154,6 +154,24 @@ export const useTimelineStore = defineStore("timeline", () => {
     await store.initTimelines();
   };
 
+  const changeActiveTimeline = async (index: number) => {
+    if (store.timelines[index].available) return;
+    store.timelines.forEach(async (timeline, i) => {
+      if (i === index) {
+        await updateTimeline({
+          ...timeline,
+          available: true,
+        });
+      } else {
+        await updateTimeline({
+          ...timeline,
+          available: false,
+        });
+      }
+    });
+    await store.initTimelines();
+  };
+
   const addNewPost = (post: DotEPost) => {
     // abort if no posts
     if (!store.timelines[currentIndex.value]?.posts) return;
@@ -408,6 +426,7 @@ export const useTimelineStore = defineStore("timeline", () => {
     fetchDiffPosts,
     updateTimeline,
     createTimeline,
+    changeActiveTimeline,
     addNewPost,
     updatePost,
     removePost,