From 7ae68f079ddfb74c9a1b17c4f30dfe4c258d4a9f Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Fri, 20 Dec 2019 17:47:04 +0100
Subject: Viewer project foundations

---
 viewer/src/views/LdGallery.vue | 82 ++++++++++++++++++++++++++++++++++++++++++
 viewer/src/views/Root.vue      | 18 ++++++++++
 2 files changed, 100 insertions(+)
 create mode 100644 viewer/src/views/LdGallery.vue
 create mode 100644 viewer/src/views/Root.vue

(limited to 'viewer/src/views')

diff --git a/viewer/src/views/LdGallery.vue b/viewer/src/views/LdGallery.vue
new file mode 100644
index 0000000..a77dc24
--- /dev/null
+++ b/viewer/src/views/LdGallery.vue
@@ -0,0 +1,82 @@
+<template>
+  <div :class="{fullscreen}">
+    <div class="layout top">header</div>
+    <div class="layout left">panel</div>
+    <router-view class="layout content" />
+    <fa-icon
+      icon="expand-arrows-alt"
+      class="layout button-fullscreen"
+      @click="fullscreen=!fullscreen"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+
+@Component
+export default class LdGallery extends Vue {
+  fullscreen: boolean = false;
+}
+</script>
+
+<style lang="scss">
+body,
+html {
+  height: 100%;
+  overflow: hidden;
+  --layout-left: 250px;
+  --layout-top: 30px;
+}
+.layout {
+  position: fixed;
+  transition: all 0.1s linear;
+  &.top {
+    top: 0;
+    left: 0;
+    right: 0;
+    height: var(--layout-top);
+  }
+  &.left {
+    top: var(--layout-top);
+    bottom: 0;
+    left: 0;
+    width: var(--layout-left);
+  }
+  &.content {
+    top: var(--layout-top);
+    left: var(--layout-left);
+    right: 0;
+    bottom: 0;
+  }
+  &.button-fullscreen {
+    top: 0;
+    right: 0;
+    margin: 3px 10px;
+    opacity: 50%;
+    font-size: 1.5em;
+    color: white;
+    mix-blend-mode: difference;
+    cursor: pointer;
+  }
+}
+.fullscreen {
+  --layout-left: 0px;
+  --layout-top: 0px;
+}
+
+// temp colors
+.layout {
+  &.top {
+    background-color: darkslategray;
+    color: white;
+  }
+  &.left {
+    background-color: darkblue;
+    color: white;
+  }
+  &.content {
+    background-color: lightcyan;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/viewer/src/views/Root.vue b/viewer/src/views/Root.vue
new file mode 100644
index 0000000..384dcbe
--- /dev/null
+++ b/viewer/src/views/Root.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>Hello World!</div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+
+@Component
+export default class Root extends Vue {}
+</script>
+
+<style scoped lang="scss">
+div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>
-- 
cgit v1.2.3


From bdce958eddc527912a57afa5b8151e1a90e38355 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Fri, 20 Dec 2019 23:54:56 +0100
Subject: Updated EsLint Removed logic from the view

---
 viewer/src/views/LdGallery.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

(limited to 'viewer/src/views')

diff --git a/viewer/src/views/LdGallery.vue b/viewer/src/views/LdGallery.vue
index a77dc24..98f083f 100644
--- a/viewer/src/views/LdGallery.vue
+++ b/viewer/src/views/LdGallery.vue
@@ -3,11 +3,7 @@
     <div class="layout top">header</div>
     <div class="layout left">panel</div>
     <router-view class="layout content" />
-    <fa-icon
-      icon="expand-arrows-alt"
-      class="layout button-fullscreen"
-      @click="fullscreen=!fullscreen"
-    />
+    <fa-icon icon="expand-arrows-alt" class="layout button-fullscreen" @click="toggleFullscreen" />
   </div>
 </template>
 
@@ -17,6 +13,10 @@ import { Component, Vue } from "vue-property-decorator";
 @Component
 export default class LdGallery extends Vue {
   fullscreen: boolean = false;
+
+  toggleFullscreen() {
+    this.fullscreen = !this.fullscreen;
+  }
 }
 </script>
 
-- 
cgit v1.2.3


From 62005141132da1e9761598fa3e4b35b4dab38a89 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Sat, 21 Dec 2019 02:06:02 +0100
Subject: Implemented VueX and a basic UIStore with the fullscreen mutation
 Some renaming

---
 viewer/src/views/LdGallery.vue | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

(limited to 'viewer/src/views')

diff --git a/viewer/src/views/LdGallery.vue b/viewer/src/views/LdGallery.vue
index 98f083f..d22bfa6 100644
--- a/viewer/src/views/LdGallery.vue
+++ b/viewer/src/views/LdGallery.vue
@@ -1,9 +1,13 @@
 <template>
-  <div :class="{fullscreen}">
+  <div :class="{fullscreen: $uiStore.fullscreen}">
     <div class="layout top">header</div>
     <div class="layout left">panel</div>
     <router-view class="layout content" />
-    <fa-icon icon="expand-arrows-alt" class="layout button-fullscreen" @click="toggleFullscreen" />
+    <fa-icon
+      icon="expand-arrows-alt"
+      class="layout button-fullscreen"
+      @click="$uiStore.toggleFullscreen()"
+    />
   </div>
 </template>
 
@@ -11,13 +15,7 @@
 import { Component, Vue } from "vue-property-decorator";
 
 @Component
-export default class LdGallery extends Vue {
-  fullscreen: boolean = false;
-
-  toggleFullscreen() {
-    this.fullscreen = !this.fullscreen;
-  }
-}
+export default class LdGallery extends Vue {}
 </script>
 
 <style lang="scss">
-- 
cgit v1.2.3


From 6e7ee4d38fb3630a13d31592f0f6ae9bbe8e1bd6 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Sat, 21 Dec 2019 03:32:20 +0100
Subject: Implemented global components registration Moved the fullscreen
 button as a global component (as demonstration) Improved the layout CSS

---
 viewer/src/views/LdGallery.vue | 66 +++++++++++++++++++-----------------------
 1 file changed, 30 insertions(+), 36 deletions(-)

(limited to 'viewer/src/views')

diff --git a/viewer/src/views/LdGallery.vue b/viewer/src/views/LdGallery.vue
index d22bfa6..ecdfa1b 100644
--- a/viewer/src/views/LdGallery.vue
+++ b/viewer/src/views/LdGallery.vue
@@ -1,13 +1,9 @@
 <template>
   <div :class="{fullscreen: $uiStore.fullscreen}">
-    <div class="layout top">header</div>
-    <div class="layout left">panel</div>
-    <router-view class="layout content" />
-    <fa-icon
-      icon="expand-arrows-alt"
-      class="layout button-fullscreen"
-      @click="$uiStore.toggleFullscreen()"
-    />
+    <div class="layout layout-top">header</div>
+    <div class="layout layout-left">panel</div>
+    <router-view class="layout layout-content" />
+    <ld-button-fullscreen />
   </div>
 </template>
 
@@ -19,61 +15,59 @@ export default class LdGallery extends Vue {}
 </script>
 
 <style lang="scss">
+$layout-top: 30px;
+$layout-left: 250px;
+
 body,
 html {
   height: 100%;
   overflow: hidden;
-  --layout-left: 250px;
-  --layout-top: 30px;
+  --layout-top: #{$layout-top};
+  --layout-left: #{$layout-left};
 }
 .layout {
   position: fixed;
   transition: all 0.1s linear;
-  &.top {
-    top: 0;
-    left: 0;
-    right: 0;
-    height: var(--layout-top);
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  &.layout-top {
+    height: $layout-top;
+    z-index: 1;
   }
-  &.left {
-    top: var(--layout-top);
-    bottom: 0;
-    left: 0;
-    width: var(--layout-left);
+  &.layout-left {
+    top: $layout-top;
+    width: $layout-left;
+    z-index: 2;
   }
-  &.content {
+  &.layout-content {
     top: var(--layout-top);
     left: var(--layout-left);
-    right: 0;
-    bottom: 0;
-  }
-  &.button-fullscreen {
-    top: 0;
-    right: 0;
-    margin: 3px 10px;
-    opacity: 50%;
-    font-size: 1.5em;
-    color: white;
-    mix-blend-mode: difference;
-    cursor: pointer;
+    z-index: 3;
   }
 }
 .fullscreen {
   --layout-left: 0px;
   --layout-top: 0px;
+  .layout {
+    &.layout-left {
+      transform: translate(-$layout-left, 0);
+    }
+  }
 }
 
 // temp colors
 .layout {
-  &.top {
+  &.layout-top {
     background-color: darkslategray;
     color: white;
   }
-  &.left {
+  &.layout-left {
     background-color: darkblue;
     color: white;
   }
-  &.content {
+  &.layout-content {
     background-color: lightcyan;
   }
 }
-- 
cgit v1.2.3


From 9e4fdd6f38853d8a4a959901ab7902569de75484 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Sat, 21 Dec 2019 08:08:54 +0100
Subject: viewer: Implemented the "example" project in devServer Display loader
 and error messages (not translated yet) Created a "GalleryStore" to fetch the
 JSon data from the gallery (currently from example)

---
 viewer/src/views/LdGallery.vue | 28 +++++++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

(limited to 'viewer/src/views')

diff --git a/viewer/src/views/LdGallery.vue b/viewer/src/views/LdGallery.vue
index ecdfa1b..04474c3 100644
--- a/viewer/src/views/LdGallery.vue
+++ b/viewer/src/views/LdGallery.vue
@@ -4,6 +4,7 @@
     <div class="layout layout-left">panel</div>
     <router-view class="layout layout-content" />
     <ld-button-fullscreen />
+    <b-loading :active="isLoading" is-full-page />
   </div>
 </template>
 
@@ -11,7 +12,32 @@
 import { Component, Vue } from "vue-property-decorator";
 
 @Component
-export default class LdGallery extends Vue {}
+export default class LdGallery extends Vue {
+  isLoading: boolean = false;
+
+  mounted() {
+    this.fetchGalleryItems();
+  }
+
+  fetchGalleryItems() {
+    this.isLoading = true;
+    this.$galleryStore
+      .fetchGalleryItems("/gallery/index.json")
+      .finally(() => (this.isLoading = false))
+      .catch(this.displayError);
+  }
+
+  displayError(reason: any) {
+    this.$buefy.snackbar.open({
+      message: `Error ${reason}`,
+      actionText: "Retry",
+      position: "is-top",
+      type: "is-danger",
+      indefinite: true,
+      onAction: this.fetchGalleryItems,
+    });
+  }
+}
 </script>
 
 <style lang="scss">
-- 
cgit v1.2.3


From 3f21d10338afe8eab699aaaea060556579e4b3c3 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Sat, 21 Dec 2019 10:33:21 +0100
Subject: viewer: Some renaming for better clarity Implemented a basic display
 of filenames with basic navigation

---
 viewer/src/views/Gallery.vue    |  60 ++++++++++++++++++++++++
 viewer/src/views/LdGallery.vue  | 100 ----------------------------------------
 viewer/src/views/MainLayout.vue | 100 ++++++++++++++++++++++++++++++++++++++++
 viewer/src/views/Root.vue       |  18 --------
 4 files changed, 160 insertions(+), 118 deletions(-)
 create mode 100644 viewer/src/views/Gallery.vue
 delete mode 100644 viewer/src/views/LdGallery.vue
 create mode 100644 viewer/src/views/MainLayout.vue
 delete mode 100644 viewer/src/views/Root.vue

(limited to 'viewer/src/views')

diff --git a/viewer/src/views/Gallery.vue b/viewer/src/views/Gallery.vue
new file mode 100644
index 0000000..3625838
--- /dev/null
+++ b/viewer/src/views/Gallery.vue
@@ -0,0 +1,60 @@
+<template>
+  <div id="test-flex-col">
+    <div v-if="isDirectory">
+      <strong>Directory: {{currentItem.path}}</strong>
+      <div v-for="(item, index) in currentItem.properties.items" :key="item.path">
+        <router-link :to="item.path">Thumbnail: {{index}}-{{item.path}}</router-link>
+      </div>
+    </div>
+    <div v-if="isImage">Image: {{currentItem.path}}</div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+
+@Component
+export default class Root extends Vue {
+  @Prop(String) readonly pathMatch!: string;
+
+  get isDirectory(): boolean {
+    return this.checkType("directory");
+  }
+
+  get isImage(): boolean {
+    return this.checkType("image");
+  }
+
+  get currentItem(): Gallery.Item | null {
+    const galleryItems = this.$galleryStore.galleryItems;
+    if (galleryItems) return this.searchCurrentItem(galleryItems, this.pathMatch);
+    return null;
+  }
+
+  // ---
+
+  private searchCurrentItem(item: Gallery.Item, currentPath: string): Gallery.Item | null {
+    if (currentPath === item.path) return item;
+    if (item.properties.type === "directory" && currentPath.startsWith(item.path)) {
+      const itemFound = item.properties.items
+        .map(item => this.searchCurrentItem(item, currentPath))
+        .find(item => Boolean(item));
+      return itemFound || null;
+    }
+    return null;
+  }
+
+  private checkType(type: string) {
+    return (this.currentItem && this.currentItem.properties.type === type) || false;
+  }
+}
+</script>
+
+<style lang="scss">
+#test-flex-col {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+</style>
diff --git a/viewer/src/views/LdGallery.vue b/viewer/src/views/LdGallery.vue
deleted file mode 100644
index 04474c3..0000000
--- a/viewer/src/views/LdGallery.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<template>
-  <div :class="{fullscreen: $uiStore.fullscreen}">
-    <div class="layout layout-top">header</div>
-    <div class="layout layout-left">panel</div>
-    <router-view class="layout layout-content" />
-    <ld-button-fullscreen />
-    <b-loading :active="isLoading" is-full-page />
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-
-@Component
-export default class LdGallery extends Vue {
-  isLoading: boolean = false;
-
-  mounted() {
-    this.fetchGalleryItems();
-  }
-
-  fetchGalleryItems() {
-    this.isLoading = true;
-    this.$galleryStore
-      .fetchGalleryItems("/gallery/index.json")
-      .finally(() => (this.isLoading = false))
-      .catch(this.displayError);
-  }
-
-  displayError(reason: any) {
-    this.$buefy.snackbar.open({
-      message: `Error ${reason}`,
-      actionText: "Retry",
-      position: "is-top",
-      type: "is-danger",
-      indefinite: true,
-      onAction: this.fetchGalleryItems,
-    });
-  }
-}
-</script>
-
-<style lang="scss">
-$layout-top: 30px;
-$layout-left: 250px;
-
-body,
-html {
-  height: 100%;
-  overflow: hidden;
-  --layout-top: #{$layout-top};
-  --layout-left: #{$layout-left};
-}
-.layout {
-  position: fixed;
-  transition: all 0.1s linear;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  &.layout-top {
-    height: $layout-top;
-    z-index: 1;
-  }
-  &.layout-left {
-    top: $layout-top;
-    width: $layout-left;
-    z-index: 2;
-  }
-  &.layout-content {
-    top: var(--layout-top);
-    left: var(--layout-left);
-    z-index: 3;
-  }
-}
-.fullscreen {
-  --layout-left: 0px;
-  --layout-top: 0px;
-  .layout {
-    &.layout-left {
-      transform: translate(-$layout-left, 0);
-    }
-  }
-}
-
-// temp colors
-.layout {
-  &.layout-top {
-    background-color: darkslategray;
-    color: white;
-  }
-  &.layout-left {
-    background-color: darkblue;
-    color: white;
-  }
-  &.layout-content {
-    background-color: lightcyan;
-  }
-}
-</style>
\ No newline at end of file
diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
new file mode 100644
index 0000000..9f3a17b
--- /dev/null
+++ b/viewer/src/views/MainLayout.vue
@@ -0,0 +1,100 @@
+<template>
+  <div :class="{fullscreen: $uiStore.fullscreen}">
+    <div class="layout layout-top">header</div>
+    <div class="layout layout-left">panel</div>
+    <router-view class="layout layout-content" />
+    <ld-button-fullscreen />
+    <b-loading :active="isLoading" is-full-page />
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+
+@Component
+export default class MainLayout extends Vue {
+  isLoading: boolean = false;
+
+  mounted() {
+    this.fetchGalleryItems();
+  }
+
+  fetchGalleryItems() {
+    this.isLoading = true;
+    this.$galleryStore
+      .fetchGalleryItems("/gallery/index.json")
+      .finally(() => (this.isLoading = false))
+      .catch(this.displayError);
+  }
+
+  displayError(reason: any) {
+    this.$buefy.snackbar.open({
+      message: `Error ${reason}`,
+      actionText: "Retry",
+      position: "is-top",
+      type: "is-danger",
+      indefinite: true,
+      onAction: this.fetchGalleryItems,
+    });
+  }
+}
+</script>
+
+<style lang="scss">
+$layout-top: 30px;
+$layout-left: 250px;
+
+body,
+html {
+  height: 100%;
+  overflow: hidden;
+  --layout-top: #{$layout-top};
+  --layout-left: #{$layout-left};
+}
+.layout {
+  position: fixed;
+  transition: all 0.1s linear;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  &.layout-top {
+    height: $layout-top;
+    z-index: 1;
+  }
+  &.layout-left {
+    top: $layout-top;
+    width: $layout-left;
+    z-index: 2;
+  }
+  &.layout-content {
+    top: var(--layout-top);
+    left: var(--layout-left);
+    z-index: 3;
+  }
+}
+.fullscreen {
+  --layout-left: 0px;
+  --layout-top: 0px;
+  .layout {
+    &.layout-left {
+      transform: translate(-$layout-left, 0);
+    }
+  }
+}
+
+// temp colors
+.layout {
+  &.layout-top {
+    background-color: darkslategray;
+    color: white;
+  }
+  &.layout-left {
+    background-color: darkblue;
+    color: white;
+  }
+  &.layout-content {
+    background-color: lightcyan;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/viewer/src/views/Root.vue b/viewer/src/views/Root.vue
deleted file mode 100644
index 384dcbe..0000000
--- a/viewer/src/views/Root.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <div>Hello World!</div>
-</template>
-
-<script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-
-@Component
-export default class Root extends Vue {}
-</script>
-
-<style scoped lang="scss">
-div {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-</style>
-- 
cgit v1.2.3


From 91d3148f97ca59769648f9307f3d7e65b1bd7e95 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Sat, 21 Dec 2019 11:04:14 +0100
Subject: viewer: ESLint rules

---
 viewer/src/views/Gallery.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'viewer/src/views')

diff --git a/viewer/src/views/Gallery.vue b/viewer/src/views/Gallery.vue
index 3625838..55b93db 100644
--- a/viewer/src/views/Gallery.vue
+++ b/viewer/src/views/Gallery.vue
@@ -44,7 +44,7 @@ export default class Root extends Vue {
     return null;
   }
 
-  private checkType(type: string) {
+  private checkType(type: string): boolean {
     return (this.currentItem && this.currentItem.properties.type === type) || false;
   }
 }
-- 
cgit v1.2.3


From 57d1b89d314970bf56d3d398c393f6a67a4ed0b5 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Sat, 21 Dec 2019 20:14:33 +0100
Subject: viewer: Isolated the Directory and Image views in their own
 components

---
 viewer/src/views/Gallery.vue          | 15 +++++++--------
 viewer/src/views/GalleryDirectory.vue | 20 ++++++++++++++++++++
 viewer/src/views/GalleryImage.vue     | 17 +++++++++++++++++
 3 files changed, 44 insertions(+), 8 deletions(-)
 create mode 100644 viewer/src/views/GalleryDirectory.vue
 create mode 100644 viewer/src/views/GalleryImage.vue

(limited to 'viewer/src/views')

diff --git a/viewer/src/views/Gallery.vue b/viewer/src/views/Gallery.vue
index 55b93db..10ff323 100644
--- a/viewer/src/views/Gallery.vue
+++ b/viewer/src/views/Gallery.vue
@@ -1,19 +1,18 @@
 <template>
   <div id="test-flex-col">
-    <div v-if="isDirectory">
-      <strong>Directory: {{currentItem.path}}</strong>
-      <div v-for="(item, index) in currentItem.properties.items" :key="item.path">
-        <router-link :to="item.path">Thumbnail: {{index}}-{{item.path}}</router-link>
-      </div>
-    </div>
-    <div v-if="isImage">Image: {{currentItem.path}}</div>
+    <gallery-directory v-if="isDirectory" :directory="currentItem" />
+    <gallery-image v-if="isImage" :image="currentItem" />
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue, Prop } from "vue-property-decorator";
+import GalleryDirectory from "./GalleryDirectory.vue";
+import GalleryImage from "./GalleryImage.vue";
 
-@Component
+@Component({
+  components: { GalleryDirectory, GalleryImage },
+})
 export default class Root extends Vue {
   @Prop(String) readonly pathMatch!: string;
 
diff --git a/viewer/src/views/GalleryDirectory.vue b/viewer/src/views/GalleryDirectory.vue
new file mode 100644
index 0000000..bed1664
--- /dev/null
+++ b/viewer/src/views/GalleryDirectory.vue
@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <strong>Directory: {{directory.path}}</strong>
+    <div v-for="(item, index) in directory.properties.items" :key="item.path">
+      <router-link :to="item.path">Thumbnail: {{index}}-{{item.path}}</router-link>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+
+@Component
+export default class GalleryDirectory extends Vue {
+  @Prop({ type: Array, required: true }) readonly directory!: Gallery.Directory;
+}
+</script>
+
+<style lang="scss">
+</style>
diff --git a/viewer/src/views/GalleryImage.vue b/viewer/src/views/GalleryImage.vue
new file mode 100644
index 0000000..daaa504
--- /dev/null
+++ b/viewer/src/views/GalleryImage.vue
@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <strong>Image: {{image.path}}</strong>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+
+@Component
+export default class GalleryDirectory extends Vue {
+  @Prop({ required: true }) readonly image!: Gallery.Image;
+}
+</script>
+
+<style lang="scss">
+</style>
-- 
cgit v1.2.3


From c2b4c5d144db17ebf2dc9de32ba25cc836831ae2 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Sat, 21 Dec 2019 21:15:59 +0100
Subject: viewer: Improved the Gallery type definitions. Basic display of the
 images and thumbnails example: "thumbnails" instead of "thumbs"

---
 viewer/src/views/Gallery.vue          |  8 +-------
 viewer/src/views/GalleryDirectory.vue | 18 ++++++++++++++----
 viewer/src/views/GalleryImage.vue     |  7 ++++++-
 viewer/src/views/GalleryThumbnail.vue | 23 +++++++++++++++++++++++
 4 files changed, 44 insertions(+), 12 deletions(-)
 create mode 100644 viewer/src/views/GalleryThumbnail.vue

(limited to 'viewer/src/views')

diff --git a/viewer/src/views/Gallery.vue b/viewer/src/views/Gallery.vue
index 10ff323..954903a 100644
--- a/viewer/src/views/Gallery.vue
+++ b/viewer/src/views/Gallery.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="test-flex-col">
+  <div>
     <gallery-directory v-if="isDirectory" :directory="currentItem" />
     <gallery-image v-if="isImage" :image="currentItem" />
   </div>
@@ -50,10 +50,4 @@ export default class Root extends Vue {
 </script>
 
 <style lang="scss">
-#test-flex-col {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
 </style>
diff --git a/viewer/src/views/GalleryDirectory.vue b/viewer/src/views/GalleryDirectory.vue
index bed1664..1dda027 100644
--- a/viewer/src/views/GalleryDirectory.vue
+++ b/viewer/src/views/GalleryDirectory.vue
@@ -1,20 +1,30 @@
 <template>
   <div>
     <strong>Directory: {{directory.path}}</strong>
-    <div v-for="(item, index) in directory.properties.items" :key="item.path">
-      <router-link :to="item.path">Thumbnail: {{index}}-{{item.path}}</router-link>
+    <div class="flex-thumbnails">
+      <div v-for="(item) in directory.properties.items" :key="item.path">
+        <router-link :to="item.path">
+          <gallery-thumbnail :item="item" />
+        </router-link>
+      </div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue, Prop } from "vue-property-decorator";
+import GalleryThumbnail from "./GalleryThumbnail.vue";
 
-@Component
+@Component({
+  components: { GalleryThumbnail },
+})
 export default class GalleryDirectory extends Vue {
-  @Prop({ type: Array, required: true }) readonly directory!: Gallery.Directory;
+  @Prop({ required: true }) readonly directory!: Gallery.Directory;
 }
 </script>
 
 <style lang="scss">
+.flex-thumbnails {
+  display: flex;
+}
 </style>
diff --git a/viewer/src/views/GalleryImage.vue b/viewer/src/views/GalleryImage.vue
index daaa504..07f8cc8 100644
--- a/viewer/src/views/GalleryImage.vue
+++ b/viewer/src/views/GalleryImage.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <strong>Image: {{image.path}}</strong>
+    <img :src="imageSrc" />
   </div>
 </template>
 
@@ -8,8 +9,12 @@
 import { Component, Vue, Prop } from "vue-property-decorator";
 
 @Component
-export default class GalleryDirectory extends Vue {
+export default class GalleryImage extends Vue {
   @Prop({ required: true }) readonly image!: Gallery.Image;
+
+  get imageSrc() {
+    return `/gallery${this.image.path}`;
+  }
 }
 </script>
 
diff --git a/viewer/src/views/GalleryThumbnail.vue b/viewer/src/views/GalleryThumbnail.vue
new file mode 100644
index 0000000..8e3e826
--- /dev/null
+++ b/viewer/src/views/GalleryThumbnail.vue
@@ -0,0 +1,23 @@
+<template>
+  <img class="thumbnail" :src="imageSrc" :title="item.path" />
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+
+@Component
+export default class GalleryThumbnail extends Vue {
+  @Prop({ required: true }) readonly item!: Gallery.Item;
+
+  get imageSrc() {
+    return `/gallery${this.item.thumbnail.path}`;
+  }
+}
+</script>
+
+<style lang="scss">
+.thumbnail {
+  max-width: 250px;
+  max-height: 250px;
+}
+</style>
-- 
cgit v1.2.3


From e34be1261d9219e5b2b92ebe271f609f11d55f63 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Sun, 22 Dec 2019 03:50:40 +0100
Subject: vewer: Tags indexing and search input

---
 viewer/src/views/Gallery.vue    |  6 +++---
 viewer/src/views/MainLayout.vue |  7 +++++--
 viewer/src/views/PanelLeft.vue  | 20 ++++++++++++++++++++
 3 files changed, 28 insertions(+), 5 deletions(-)
 create mode 100644 viewer/src/views/PanelLeft.vue

(limited to 'viewer/src/views')

diff --git a/viewer/src/views/Gallery.vue b/viewer/src/views/Gallery.vue
index 954903a..2020280 100644
--- a/viewer/src/views/Gallery.vue
+++ b/viewer/src/views/Gallery.vue
@@ -13,7 +13,7 @@ import GalleryImage from "./GalleryImage.vue";
 @Component({
   components: { GalleryDirectory, GalleryImage },
 })
-export default class Root extends Vue {
+export default class Gallery extends Vue {
   @Prop(String) readonly pathMatch!: string;
 
   get isDirectory(): boolean {
@@ -25,8 +25,8 @@ export default class Root extends Vue {
   }
 
   get currentItem(): Gallery.Item | null {
-    const galleryItems = this.$galleryStore.galleryItems;
-    if (galleryItems) return this.searchCurrentItem(galleryItems, this.pathMatch);
+    const galleryItemsRoot = this.$galleryStore.galleryItemsRoot;
+    if (galleryItemsRoot) return this.searchCurrentItem(galleryItemsRoot, this.pathMatch);
     return null;
   }
 
diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index 9f3a17b..2afd4b9 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -1,7 +1,7 @@
 <template>
   <div :class="{fullscreen: $uiStore.fullscreen}">
     <div class="layout layout-top">header</div>
-    <div class="layout layout-left">panel</div>
+    <panel-left class="layout layout-left" />
     <router-view class="layout layout-content" />
     <ld-button-fullscreen />
     <b-loading :active="isLoading" is-full-page />
@@ -10,8 +10,11 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
+import PanelLeft from "./PanelLeft.vue";
 
-@Component
+@Component({
+  components: { PanelLeft },
+})
 export default class MainLayout extends Vue {
   isLoading: boolean = false;
 
diff --git a/viewer/src/views/PanelLeft.vue b/viewer/src/views/PanelLeft.vue
new file mode 100644
index 0000000..4b5bce0
--- /dev/null
+++ b/viewer/src/views/PanelLeft.vue
@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <b-field :label="$t('panelLeft.title')">
+      <ld-tag-input />
+    </b-field>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+
+@Component
+export default class PanelLeft extends Vue {}
+</script>
+
+<style lang="scss">
+.label {
+  color: white;
+}
+</style>
-- 
cgit v1.2.3


From dc251fffc2998f1cf4f8e9631928c4b92ac0d90e Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Sun, 22 Dec 2019 07:40:55 +0100
Subject: viewer: Implemented the search by tags. Pushed the special urls to
 ENV.

---
 viewer/src/views/Gallery.vue          | 31 ++++++++++++++++---------------
 viewer/src/views/GalleryDirectory.vue |  5 +----
 viewer/src/views/GalleryImage.vue     |  2 +-
 viewer/src/views/GallerySearch.vue    | 25 +++++++++++++++++++++++++
 viewer/src/views/GalleryThumbnail.vue | 10 ++++++++--
 viewer/src/views/MainLayout.vue       |  2 +-
 viewer/src/views/PanelLeft.vue        |  9 +++++----
 7 files changed, 57 insertions(+), 27 deletions(-)
 create mode 100644 viewer/src/views/GallerySearch.vue

(limited to 'viewer/src/views')

diff --git a/viewer/src/views/Gallery.vue b/viewer/src/views/Gallery.vue
index 2020280..38199b9 100644
--- a/viewer/src/views/Gallery.vue
+++ b/viewer/src/views/Gallery.vue
@@ -1,17 +1,20 @@
 <template>
   <div>
-    <gallery-directory v-if="isDirectory" :directory="currentItem" />
-    <gallery-image v-if="isImage" :image="currentItem" />
+    <gallery-search v-if="$uiStore.isModeSearch" :items="currentSearch" />
+    <gallery-directory v-else-if="isDirectory" :directory="currentItem" />
+    <gallery-image v-else-if="isImage" :image="currentItem" />
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue, Prop } from "vue-property-decorator";
+import GallerySearch from "./GallerySearch.vue";
 import GalleryDirectory from "./GalleryDirectory.vue";
 import GalleryImage from "./GalleryImage.vue";
+import GalleryStore from "../store/galleryStore";
 
 @Component({
-  components: { GalleryDirectory, GalleryImage },
+  components: { GallerySearch, GalleryDirectory, GalleryImage },
 })
 export default class Gallery extends Vue {
   @Prop(String) readonly pathMatch!: string;
@@ -24,25 +27,23 @@ export default class Gallery extends Vue {
     return this.checkType("image");
   }
 
+  // Results of the search (by tags)
+  get currentSearch(): Gallery.Item[] {
+    const currentTags = this.$uiStore.currentTags;
+    let items = new Set<Gallery.Item>();
+    currentTags.flatMap(tag => tag.items).forEach(item => items.add(item));
+    return [...items];
+  }
+
+  // Item pointed by the URL (navigation)
   get currentItem(): Gallery.Item | null {
     const galleryItemsRoot = this.$galleryStore.galleryItemsRoot;
-    if (galleryItemsRoot) return this.searchCurrentItem(galleryItemsRoot, this.pathMatch);
+    if (galleryItemsRoot) return GalleryStore.searchCurrentItem(galleryItemsRoot, this.pathMatch);
     return null;
   }
 
   // ---
 
-  private searchCurrentItem(item: Gallery.Item, currentPath: string): Gallery.Item | null {
-    if (currentPath === item.path) return item;
-    if (item.properties.type === "directory" && currentPath.startsWith(item.path)) {
-      const itemFound = item.properties.items
-        .map(item => this.searchCurrentItem(item, currentPath))
-        .find(item => Boolean(item));
-      return itemFound || null;
-    }
-    return null;
-  }
-
   private checkType(type: string): boolean {
     return (this.currentItem && this.currentItem.properties.type === type) || false;
   }
diff --git a/viewer/src/views/GalleryDirectory.vue b/viewer/src/views/GalleryDirectory.vue
index 1dda027..d464a07 100644
--- a/viewer/src/views/GalleryDirectory.vue
+++ b/viewer/src/views/GalleryDirectory.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <strong>Directory: {{directory.path}}</strong>
-    <div class="flex-thumbnails">
+    <div class="flex">
       <div v-for="(item) in directory.properties.items" :key="item.path">
         <router-link :to="item.path">
           <gallery-thumbnail :item="item" />
@@ -24,7 +24,4 @@ export default class GalleryDirectory extends Vue {
 </script>
 
 <style lang="scss">
-.flex-thumbnails {
-  display: flex;
-}
 </style>
diff --git a/viewer/src/views/GalleryImage.vue b/viewer/src/views/GalleryImage.vue
index 07f8cc8..04d29d9 100644
--- a/viewer/src/views/GalleryImage.vue
+++ b/viewer/src/views/GalleryImage.vue
@@ -13,7 +13,7 @@ export default class GalleryImage extends Vue {
   @Prop({ required: true }) readonly image!: Gallery.Image;
 
   get imageSrc() {
-    return `/gallery${this.image.path}`;
+    return `${process.env.VUE_APP_DATA_URL}${this.image.path}`;
   }
 }
 </script>
diff --git a/viewer/src/views/GallerySearch.vue b/viewer/src/views/GallerySearch.vue
new file mode 100644
index 0000000..887c1a3
--- /dev/null
+++ b/viewer/src/views/GallerySearch.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="flex">
+    <div v-for="(item) in items" :key="item.path">
+      <router-link :to="item.path" @click.native="$uiStore.setModeNavigation()">
+        <gallery-thumbnail :item="item" />
+      </router-link>
+    </div>
+    <div v-if="items.length===0">{{$t('search.no-results')}}</div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+import GalleryThumbnail from "./GalleryThumbnail.vue";
+
+@Component({
+  components: { GalleryThumbnail },
+})
+export default class GalleryImage extends Vue {
+  @Prop({ required: true }) readonly items!: Gallery.Item[];
+}
+</script>
+
+<style lang="scss">
+</style>
diff --git a/viewer/src/views/GalleryThumbnail.vue b/viewer/src/views/GalleryThumbnail.vue
index 8e3e826..fdfd9d3 100644
--- a/viewer/src/views/GalleryThumbnail.vue
+++ b/viewer/src/views/GalleryThumbnail.vue
@@ -1,5 +1,11 @@
 <template>
-  <img class="thumbnail" :src="imageSrc" :title="item.path" />
+  <div>
+    <img v-if="item.thumbnail" class="thumbnail" :src="imageSrc" :title="item.path" />
+    <div v-else class="flex-column flex-center">
+      <fa-icon icon="folder" class="fa-4x" />
+      {{item.path}}
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -10,7 +16,7 @@ export default class GalleryThumbnail extends Vue {
   @Prop({ required: true }) readonly item!: Gallery.Item;
 
   get imageSrc() {
-    return `/gallery${this.item.thumbnail.path}`;
+    return `${process.env.VUE_APP_DATA_URL}${this.item.thumbnail}`;
   }
 }
 </script>
diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index 2afd4b9..2a87ff1 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -25,7 +25,7 @@ export default class MainLayout extends Vue {
   fetchGalleryItems() {
     this.isLoading = true;
     this.$galleryStore
-      .fetchGalleryItems("/gallery/index.json")
+      .fetchGalleryItems(`${process.env.VUE_APP_DATA_URL}/index.json`)
       .finally(() => (this.isLoading = false))
       .catch(this.displayError);
   }
diff --git a/viewer/src/views/PanelLeft.vue b/viewer/src/views/PanelLeft.vue
index 4b5bce0..c187ce6 100644
--- a/viewer/src/views/PanelLeft.vue
+++ b/viewer/src/views/PanelLeft.vue
@@ -1,8 +1,9 @@
 <template>
-  <div>
-    <b-field :label="$t('panelLeft.title')">
-      <ld-tag-input />
-    </b-field>
+  <div class="flex-column">
+    <h1>{{$t('panelLeft.mode')}}</h1>
+    <ld-mode-radio />
+    <h1>{{$t('panelLeft.filters')}}</h1>
+    <ld-tag-input />
   </div>
 </template>
 
-- 
cgit v1.2.3


From 7c2576b0cfb0a15b2a14f6f5ea96de16f0c23b44 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Tue, 24 Dec 2019 02:22:56 +0100
Subject: viewer: Plugin for Optional chaining and Coalesce. Implemented tag
 operations (intersection, addition, substraction). Unified Tag.Search

---
 viewer/src/views/Gallery.vue | 46 +++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 41 insertions(+), 5 deletions(-)

(limited to 'viewer/src/views')

diff --git a/viewer/src/views/Gallery.vue b/viewer/src/views/Gallery.vue
index 38199b9..f04b276 100644
--- a/viewer/src/views/Gallery.vue
+++ b/viewer/src/views/Gallery.vue
@@ -8,6 +8,7 @@
 
 <script lang="ts">
 import { Component, Vue, Prop } from "vue-property-decorator";
+import { Operation } from '@/@types/tag/Operation';
 import GallerySearch from "./GallerySearch.vue";
 import GalleryDirectory from "./GalleryDirectory.vue";
 import GalleryImage from "./GalleryImage.vue";
@@ -29,10 +30,10 @@ export default class Gallery extends Vue {
 
   // Results of the search (by tags)
   get currentSearch(): Gallery.Item[] {
-    const currentTags = this.$uiStore.currentTags;
-    let items = new Set<Gallery.Item>();
-    currentTags.flatMap(tag => tag.items).forEach(item => items.add(item));
-    return [...items];
+    const byOperation = this.extractTagsByOperation(this.$uiStore.currentTags);
+    const intersection = this.extractIntersection(byOperation);
+    const substraction = this.extractSubstraction(byOperation);
+    return this.aggregateAll(byOperation, intersection, substraction);
   }
 
   // Item pointed by the URL (navigation)
@@ -45,7 +46,42 @@ export default class Gallery extends Vue {
   // ---
 
   private checkType(type: string): boolean {
-    return (this.currentItem && this.currentItem.properties.type === type) || false;
+    return this.currentItem?.properties.type === type ?? false;
+  }
+
+  private extractTagsByOperation(currentTags: Tag.Search[]): Tag.SearchByOperation {
+    let byOperation: Tag.SearchByOperation = {};
+    Object.values(Operation)
+      .forEach(operation => byOperation[operation] = currentTags.filter(tag => tag.operation === operation));
+    return byOperation;
+  }
+
+  private extractIntersection(byOperation: Tag.SearchByOperation): Set<Gallery.Item> {
+    let intersection = new Set<Gallery.Item>();
+    if (byOperation[Operation.INTERSECTION].length > 0) {
+      byOperation[Operation.INTERSECTION]
+        .map(tag => tag.items)
+        .reduce((a,b) => a.filter(c => b.includes(c)))
+        .flatMap(items=>items)
+        .forEach(item => intersection.add(item));
+    }
+    return intersection;
+  }
+
+  private extractSubstraction(byOperation: Tag.SearchByOperation): Set<Gallery.Item> {
+    let substraction = new Set<Gallery.Item>();
+    if (byOperation[Operation.SUBSTRACTION].length > 0) {
+      byOperation[Operation.SUBSTRACTION]
+        .flatMap(tag => tag.items)
+        .forEach(item => substraction.add(item));
+    }
+    return substraction;
+  }
+
+  private aggregateAll(byOperation: Tag.SearchByOperation, intersection: Set<Gallery.Item>, substraction: Set<Gallery.Item>): Gallery.Item[] {
+    byOperation[Operation.ADDITION].flatMap(tag => tag.items).forEach(item => intersection.add(item));
+    substraction.forEach(item => intersection.delete(item));
+    return [...intersection];
   }
 }
 </script>
-- 
cgit v1.2.3


From a681accaa7617892bb7c53248aa9030a4eb47f50 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Sat, 28 Dec 2019 04:52:30 +0100
Subject: viewer: Tag propositions. Disabled directory indexation. Note: The
 propositions are not based on the current search results, but on the searched
 tags, which doesn't seem to be the correct way. We'll probably have to move
 the search results to a store for global visibility.

---
 viewer/src/views/PanelLeft.vue | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'viewer/src/views')

diff --git a/viewer/src/views/PanelLeft.vue b/viewer/src/views/PanelLeft.vue
index c187ce6..df1fe54 100644
--- a/viewer/src/views/PanelLeft.vue
+++ b/viewer/src/views/PanelLeft.vue
@@ -4,6 +4,8 @@
     <ld-mode-radio />
     <h1>{{$t('panelLeft.filters')}}</h1>
     <ld-tag-input />
+    <h1>{{$t('panelLeft.propositions')}}</h1>
+    <ld-proposition />
   </div>
 </template>
 
-- 
cgit v1.2.3


From c7153c8d6d3879566b49af0f7b23593d46477eb9 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Tue, 7 Jan 2020 19:46:41 +0100
Subject: viewer: relative gallery path (NOT STABLE with current compiler)
 compiler: commands for compilation on Windows

---
 viewer/src/views/Gallery.vue | 1 +
 1 file changed, 1 insertion(+)

(limited to 'viewer/src/views')

diff --git a/viewer/src/views/Gallery.vue b/viewer/src/views/Gallery.vue
index f04b276..4deb937 100644
--- a/viewer/src/views/Gallery.vue
+++ b/viewer/src/views/Gallery.vue
@@ -3,6 +3,7 @@
     <gallery-search v-if="$uiStore.isModeSearch" :items="currentSearch" />
     <gallery-directory v-else-if="isDirectory" :directory="currentItem" />
     <gallery-image v-else-if="isImage" :image="currentItem" />
+    <div v-else>Unknown type</div>
   </div>
 </template>
 
-- 
cgit v1.2.3


From 89bcb2dbe5b5e6eb8e8ba13ceecee2770dfe4cd4 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Thu, 9 Jan 2020 02:10:35 +0100
Subject: viewer: Changed "image" type to "picture". Adapted the code to the
 current compiler output format. The currentItem and currentPath are
 calculated in the store for easier multi-component access. Breadcrumb for
 current's position and navigation.

---
 viewer/src/views/Gallery.vue          | 36 ++++++++++---------
 viewer/src/views/GalleryDirectory.vue |  1 -
 viewer/src/views/GalleryImage.vue     | 22 ------------
 viewer/src/views/GalleryPicture.vue   | 21 +++++++++++
 viewer/src/views/GallerySearch.vue    |  2 +-
 viewer/src/views/GalleryThumbnail.vue |  4 +--
 viewer/src/views/MainLayout.vue       | 19 +++++-----
 viewer/src/views/PanelTop.vue         | 67 +++++++++++++++++++++++++++++++++++
 8 files changed, 119 insertions(+), 53 deletions(-)
 delete mode 100644 viewer/src/views/GalleryImage.vue
 create mode 100644 viewer/src/views/GalleryPicture.vue
 create mode 100644 viewer/src/views/PanelTop.vue

(limited to 'viewer/src/views')

diff --git a/viewer/src/views/Gallery.vue b/viewer/src/views/Gallery.vue
index 4deb937..a53df3d 100644
--- a/viewer/src/views/Gallery.vue
+++ b/viewer/src/views/Gallery.vue
@@ -1,32 +1,41 @@
 <template>
   <div>
     <gallery-search v-if="$uiStore.isModeSearch" :items="currentSearch" />
-    <gallery-directory v-else-if="isDirectory" :directory="currentItem" />
-    <gallery-image v-else-if="isImage" :image="currentItem" />
-    <div v-else>Unknown type</div>
+    <gallery-directory v-else-if="isDirectory" :directory="$galleryStore.currentItem" />
+    <gallery-picture v-else-if="isPicture" :picture="$galleryStore.currentItem" />
+    <div v-else>{{$t("gallery.unknowntype")}}</div>
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop } from "vue-property-decorator";
+import { Component, Vue, Prop, Watch } from "vue-property-decorator";
 import { Operation } from '@/@types/tag/Operation';
 import GallerySearch from "./GallerySearch.vue";
 import GalleryDirectory from "./GalleryDirectory.vue";
-import GalleryImage from "./GalleryImage.vue";
-import GalleryStore from "../store/galleryStore";
+import GalleryPicture from "./GalleryPicture.vue";
 
 @Component({
-  components: { GallerySearch, GalleryDirectory, GalleryImage },
+  components: { GallerySearch, GalleryDirectory, GalleryPicture },
 })
 export default class Gallery extends Vue {
   @Prop(String) readonly pathMatch!: string;
 
+  mounted() {
+    this.pathChanged()
+  }
+
+  @Watch("pathMatch")
+  pathChanged() {
+    console.log("Path: ", this.pathMatch);
+    this.$galleryStore.setCurrentPath(this.pathMatch);
+  }
+
   get isDirectory(): boolean {
     return this.checkType("directory");
   }
 
-  get isImage(): boolean {
-    return this.checkType("image");
+  get isPicture(): boolean {
+    return this.checkType("picture");
   }
 
   // Results of the search (by tags)
@@ -37,17 +46,10 @@ export default class Gallery extends Vue {
     return this.aggregateAll(byOperation, intersection, substraction);
   }
 
-  // Item pointed by the URL (navigation)
-  get currentItem(): Gallery.Item | null {
-    const galleryItemsRoot = this.$galleryStore.galleryItemsRoot;
-    if (galleryItemsRoot) return GalleryStore.searchCurrentItem(galleryItemsRoot, this.pathMatch);
-    return null;
-  }
-
   // ---
 
   private checkType(type: string): boolean {
-    return this.currentItem?.properties.type === type ?? false;
+    return this.$galleryStore.currentItem?.properties.type === type ?? false;
   }
 
   private extractTagsByOperation(currentTags: Tag.Search[]): Tag.SearchByOperation {
diff --git a/viewer/src/views/GalleryDirectory.vue b/viewer/src/views/GalleryDirectory.vue
index d464a07..ada22c0 100644
--- a/viewer/src/views/GalleryDirectory.vue
+++ b/viewer/src/views/GalleryDirectory.vue
@@ -1,6 +1,5 @@
 <template>
   <div>
-    <strong>Directory: {{directory.path}}</strong>
     <div class="flex">
       <div v-for="(item) in directory.properties.items" :key="item.path">
         <router-link :to="item.path">
diff --git a/viewer/src/views/GalleryImage.vue b/viewer/src/views/GalleryImage.vue
deleted file mode 100644
index 04d29d9..0000000
--- a/viewer/src/views/GalleryImage.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-  <div>
-    <strong>Image: {{image.path}}</strong>
-    <img :src="imageSrc" />
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue, Prop } from "vue-property-decorator";
-
-@Component
-export default class GalleryImage extends Vue {
-  @Prop({ required: true }) readonly image!: Gallery.Image;
-
-  get imageSrc() {
-    return `${process.env.VUE_APP_DATA_URL}${this.image.path}`;
-  }
-}
-</script>
-
-<style lang="scss">
-</style>
diff --git a/viewer/src/views/GalleryPicture.vue b/viewer/src/views/GalleryPicture.vue
new file mode 100644
index 0000000..b655162
--- /dev/null
+++ b/viewer/src/views/GalleryPicture.vue
@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <img :src="pictureSrc" />
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+
+@Component
+export default class GalleryPicture extends Vue {
+  @Prop({ required: true }) readonly picture!: Gallery.Picture;
+
+  get pictureSrc() {
+    return `${process.env.VUE_APP_DATA_URL}${this.picture.properties.resource}`;
+  }
+}
+</script>
+
+<style lang="scss">
+</style>
diff --git a/viewer/src/views/GallerySearch.vue b/viewer/src/views/GallerySearch.vue
index 887c1a3..44f312b 100644
--- a/viewer/src/views/GallerySearch.vue
+++ b/viewer/src/views/GallerySearch.vue
@@ -16,7 +16,7 @@ import GalleryThumbnail from "./GalleryThumbnail.vue";
 @Component({
   components: { GalleryThumbnail },
 })
-export default class GalleryImage extends Vue {
+export default class GalleryPicture extends Vue {
   @Prop({ required: true }) readonly items!: Gallery.Item[];
 }
 </script>
diff --git a/viewer/src/views/GalleryThumbnail.vue b/viewer/src/views/GalleryThumbnail.vue
index fdfd9d3..d7ef44c 100644
--- a/viewer/src/views/GalleryThumbnail.vue
+++ b/viewer/src/views/GalleryThumbnail.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <img v-if="item.thumbnail" class="thumbnail" :src="imageSrc" :title="item.path" />
+    <img v-if="item.thumbnail" class="thumbnail" :src="pictureSrc" :title="item.path" />
     <div v-else class="flex-column flex-center">
       <fa-icon icon="folder" class="fa-4x" />
       {{item.path}}
@@ -15,7 +15,7 @@ import { Component, Vue, Prop } from "vue-property-decorator";
 export default class GalleryThumbnail extends Vue {
   @Prop({ required: true }) readonly item!: Gallery.Item;
 
-  get imageSrc() {
+  get pictureSrc() {
     return `${process.env.VUE_APP_DATA_URL}${this.item.thumbnail}`;
   }
 }
diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index 2a87ff1..d643e66 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -1,6 +1,6 @@
 <template>
   <div :class="{fullscreen: $uiStore.fullscreen}">
-    <div class="layout layout-top">header</div>
+    <panel-top class="layout layout-top" />
     <panel-left class="layout layout-left" />
     <router-view class="layout layout-content" />
     <ld-button-fullscreen />
@@ -11,9 +11,10 @@
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import PanelLeft from "./PanelLeft.vue";
+import PanelTop from "./PanelTop.vue";
 
 @Component({
-  components: { PanelLeft },
+  components: { PanelLeft, PanelTop },
 })
 export default class MainLayout extends Vue {
   isLoading: boolean = false;
@@ -44,8 +45,7 @@ export default class MainLayout extends Vue {
 </script>
 
 <style lang="scss">
-$layout-top: 30px;
-$layout-left: 250px;
+@import "@/assets/scss/theme.scss";
 
 body,
 html {
@@ -86,18 +86,17 @@ html {
   }
 }
 
-// temp colors
 .layout {
   &.layout-top {
-    background-color: darkslategray;
-    color: white;
+    background-color: $panel-top-bgcolor;
+    color: $panel-top-txtcolor;
   }
   &.layout-left {
-    background-color: darkblue;
-    color: white;
+    background-color: $panel-left-bgcolor;
+    color: $panel-left-txtcolor;
   }
   &.layout-content {
-    background-color: lightcyan;
+    background-color: $content-bgcolor;
   }
 }
 </style>
\ No newline at end of file
diff --git a/viewer/src/views/PanelTop.vue b/viewer/src/views/PanelTop.vue
new file mode 100644
index 0000000..eb8e6ed
--- /dev/null
+++ b/viewer/src/views/PanelTop.vue
@@ -0,0 +1,67 @@
+<template>
+  <div v-if="isReady">
+    <b-steps
+      v-model="activeStep"
+      class="pathBreadcrumb"
+      type="is-info"
+      :has-navigation="false"
+      :animated="false"
+      @input="onStepClick"
+    >
+      <b-step-item
+        v-for="item in $galleryStore.currentItemPath"
+        :key="item.path"
+        :label="item.title"
+        :icon="getIcon(item)"
+        :to="item.path"
+      />
+    </b-steps>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Watch } from "vue-property-decorator";
+import Gallery from "./Gallery.vue";
+
+@Component
+export default class PanelTop extends Vue {
+  activeStep: number = -1;
+
+  mounted() {
+    this.currentItemPathChanged();
+  }
+
+  get isReady() {
+    return this.activeStep >= 0;
+  }
+
+  @Watch("$galleryStore.currentItemPath")
+  currentItemPathChanged() {
+    this.activeStep = -1;
+    this.$nextTick(() => (this.activeStep = this.$galleryStore.currentItemPath.length - 1));
+  }
+
+  getIcon(item: Gallery.Item) {
+    switch (item.properties.type) {
+      case "picture":
+        return "image";
+      case "directory":
+        return "folder";
+    }
+  }
+
+  onStepClick(index: number) {
+    const item = this.$galleryStore.currentItemPath[index];
+    if (item) this.$router.push(item.path);
+  }
+}
+</script>
+
+<style lang="scss">
+.pathBreadcrumb {
+  margin: 3px;
+}
+.step-title {
+  color: white;
+}
+</style>
-- 
cgit v1.2.3


From d25b5a87668bba43e81342f7385a1097653c5311 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Fri, 10 Jan 2020 22:03:30 +0100
Subject: Code review code improvements

---
 viewer/src/views/Gallery.vue | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

(limited to 'viewer/src/views')

diff --git a/viewer/src/views/Gallery.vue b/viewer/src/views/Gallery.vue
index a53df3d..1c98877 100644
--- a/viewer/src/views/Gallery.vue
+++ b/viewer/src/views/Gallery.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
     <gallery-search v-if="$uiStore.isModeSearch" :items="currentSearch" />
-    <gallery-directory v-else-if="isDirectory" :directory="$galleryStore.currentItem" />
-    <gallery-picture v-else-if="isPicture" :picture="$galleryStore.currentItem" />
+    <gallery-directory v-else-if="checkType('directory')" :directory="$galleryStore.currentItem" />
+    <gallery-picture v-else-if="checkType('picture')" :picture="$galleryStore.currentItem" />
     <div v-else>{{$t("gallery.unknowntype")}}</div>
   </div>
 </template>
@@ -30,14 +30,6 @@ export default class Gallery extends Vue {
     this.$galleryStore.setCurrentPath(this.pathMatch);
   }
 
-  get isDirectory(): boolean {
-    return this.checkType("directory");
-  }
-
-  get isPicture(): boolean {
-    return this.checkType("picture");
-  }
-
   // Results of the search (by tags)
   get currentSearch(): Gallery.Item[] {
     const byOperation = this.extractTagsByOperation(this.$uiStore.currentTags);
-- 
cgit v1.2.3


From 27b51018525dbb7a6edb3073819d82245387ddd3 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Fri, 10 Jan 2020 22:22:22 +0100
Subject: viewer: license headers

---
 viewer/src/views/Gallery.vue          | 19 +++++++++++++++++++
 viewer/src/views/GalleryDirectory.vue | 19 +++++++++++++++++++
 viewer/src/views/GalleryPicture.vue   | 19 +++++++++++++++++++
 viewer/src/views/GallerySearch.vue    | 19 +++++++++++++++++++
 viewer/src/views/GalleryThumbnail.vue | 19 +++++++++++++++++++
 viewer/src/views/MainLayout.vue       | 19 +++++++++++++++++++
 viewer/src/views/PanelLeft.vue        | 19 +++++++++++++++++++
 viewer/src/views/PanelTop.vue         | 19 +++++++++++++++++++
 8 files changed, 152 insertions(+)

(limited to 'viewer/src/views')

diff --git a/viewer/src/views/Gallery.vue b/viewer/src/views/Gallery.vue
index 1c98877..fad7cc3 100644
--- a/viewer/src/views/Gallery.vue
+++ b/viewer/src/views/Gallery.vue
@@ -1,3 +1,22 @@
+<!-- ldgallery - A static generator which turns a collection of tagged
+--             pictures into a searchable web gallery.
+--
+-- Copyright (C) 2019-2020  Guillaume FOUET
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU Affero General Public License as
+-- published by the Free Software Foundation, either version 3 of the
+-- License, or (at your option) any later version.
+--
+-- This program is distributed in the hope that it will be useful,
+-- but WITHOUT ANY WARRANTY; without even the implied warranty of
+-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+-- GNU Affero General Public License for more details.
+--
+-- You should have received a copy of the GNU Affero General Public License
+-- along with this program.  If not, see <https://www.gnu.org/licenses/>.
+-->
+
 <template>
   <div>
     <gallery-search v-if="$uiStore.isModeSearch" :items="currentSearch" />
diff --git a/viewer/src/views/GalleryDirectory.vue b/viewer/src/views/GalleryDirectory.vue
index ada22c0..eb98595 100644
--- a/viewer/src/views/GalleryDirectory.vue
+++ b/viewer/src/views/GalleryDirectory.vue
@@ -1,3 +1,22 @@
+<!-- ldgallery - A static generator which turns a collection of tagged
+--             pictures into a searchable web gallery.
+--
+-- Copyright (C) 2019-2020  Guillaume FOUET
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU Affero General Public License as
+-- published by the Free Software Foundation, either version 3 of the
+-- License, or (at your option) any later version.
+--
+-- This program is distributed in the hope that it will be useful,
+-- but WITHOUT ANY WARRANTY; without even the implied warranty of
+-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+-- GNU Affero General Public License for more details.
+--
+-- You should have received a copy of the GNU Affero General Public License
+-- along with this program.  If not, see <https://www.gnu.org/licenses/>.
+-->
+
 <template>
   <div>
     <div class="flex">
diff --git a/viewer/src/views/GalleryPicture.vue b/viewer/src/views/GalleryPicture.vue
index b655162..3689cb3 100644
--- a/viewer/src/views/GalleryPicture.vue
+++ b/viewer/src/views/GalleryPicture.vue
@@ -1,3 +1,22 @@
+<!-- ldgallery - A static generator which turns a collection of tagged
+--             pictures into a searchable web gallery.
+--
+-- Copyright (C) 2019-2020  Guillaume FOUET
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU Affero General Public License as
+-- published by the Free Software Foundation, either version 3 of the
+-- License, or (at your option) any later version.
+--
+-- This program is distributed in the hope that it will be useful,
+-- but WITHOUT ANY WARRANTY; without even the implied warranty of
+-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+-- GNU Affero General Public License for more details.
+--
+-- You should have received a copy of the GNU Affero General Public License
+-- along with this program.  If not, see <https://www.gnu.org/licenses/>.
+-->
+
 <template>
   <div>
     <img :src="pictureSrc" />
diff --git a/viewer/src/views/GallerySearch.vue b/viewer/src/views/GallerySearch.vue
index 44f312b..7e61f89 100644
--- a/viewer/src/views/GallerySearch.vue
+++ b/viewer/src/views/GallerySearch.vue
@@ -1,3 +1,22 @@
+<!-- ldgallery - A static generator which turns a collection of tagged
+--             pictures into a searchable web gallery.
+--
+-- Copyright (C) 2019-2020  Guillaume FOUET
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU Affero General Public License as
+-- published by the Free Software Foundation, either version 3 of the
+-- License, or (at your option) any later version.
+--
+-- This program is distributed in the hope that it will be useful,
+-- but WITHOUT ANY WARRANTY; without even the implied warranty of
+-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+-- GNU Affero General Public License for more details.
+--
+-- You should have received a copy of the GNU Affero General Public License
+-- along with this program.  If not, see <https://www.gnu.org/licenses/>.
+-->
+
 <template>
   <div class="flex">
     <div v-for="(item) in items" :key="item.path">
diff --git a/viewer/src/views/GalleryThumbnail.vue b/viewer/src/views/GalleryThumbnail.vue
index d7ef44c..4d8f604 100644
--- a/viewer/src/views/GalleryThumbnail.vue
+++ b/viewer/src/views/GalleryThumbnail.vue
@@ -1,3 +1,22 @@
+<!-- ldgallery - A static generator which turns a collection of tagged
+--             pictures into a searchable web gallery.
+--
+-- Copyright (C) 2019-2020  Guillaume FOUET
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU Affero General Public License as
+-- published by the Free Software Foundation, either version 3 of the
+-- License, or (at your option) any later version.
+--
+-- This program is distributed in the hope that it will be useful,
+-- but WITHOUT ANY WARRANTY; without even the implied warranty of
+-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+-- GNU Affero General Public License for more details.
+--
+-- You should have received a copy of the GNU Affero General Public License
+-- along with this program.  If not, see <https://www.gnu.org/licenses/>.
+-->
+
 <template>
   <div>
     <img v-if="item.thumbnail" class="thumbnail" :src="pictureSrc" :title="item.path" />
diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index d643e66..5308205 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -1,3 +1,22 @@
+<!-- ldgallery - A static generator which turns a collection of tagged
+--             pictures into a searchable web gallery.
+--
+-- Copyright (C) 2019-2020  Guillaume FOUET
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU Affero General Public License as
+-- published by the Free Software Foundation, either version 3 of the
+-- License, or (at your option) any later version.
+--
+-- This program is distributed in the hope that it will be useful,
+-- but WITHOUT ANY WARRANTY; without even the implied warranty of
+-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+-- GNU Affero General Public License for more details.
+--
+-- You should have received a copy of the GNU Affero General Public License
+-- along with this program.  If not, see <https://www.gnu.org/licenses/>.
+-->
+
 <template>
   <div :class="{fullscreen: $uiStore.fullscreen}">
     <panel-top class="layout layout-top" />
diff --git a/viewer/src/views/PanelLeft.vue b/viewer/src/views/PanelLeft.vue
index df1fe54..16be249 100644
--- a/viewer/src/views/PanelLeft.vue
+++ b/viewer/src/views/PanelLeft.vue
@@ -1,3 +1,22 @@
+<!-- ldgallery - A static generator which turns a collection of tagged
+--             pictures into a searchable web gallery.
+--
+-- Copyright (C) 2019-2020  Guillaume FOUET
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU Affero General Public License as
+-- published by the Free Software Foundation, either version 3 of the
+-- License, or (at your option) any later version.
+--
+-- This program is distributed in the hope that it will be useful,
+-- but WITHOUT ANY WARRANTY; without even the implied warranty of
+-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+-- GNU Affero General Public License for more details.
+--
+-- You should have received a copy of the GNU Affero General Public License
+-- along with this program.  If not, see <https://www.gnu.org/licenses/>.
+-->
+
 <template>
   <div class="flex-column">
     <h1>{{$t('panelLeft.mode')}}</h1>
diff --git a/viewer/src/views/PanelTop.vue b/viewer/src/views/PanelTop.vue
index eb8e6ed..0efc9b6 100644
--- a/viewer/src/views/PanelTop.vue
+++ b/viewer/src/views/PanelTop.vue
@@ -1,3 +1,22 @@
+<!-- ldgallery - A static generator which turns a collection of tagged
+--             pictures into a searchable web gallery.
+--
+-- Copyright (C) 2019-2020  Guillaume FOUET
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU Affero General Public License as
+-- published by the Free Software Foundation, either version 3 of the
+-- License, or (at your option) any later version.
+--
+-- This program is distributed in the hope that it will be useful,
+-- but WITHOUT ANY WARRANTY; without even the implied warranty of
+-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+-- GNU Affero General Public License for more details.
+--
+-- You should have received a copy of the GNU Affero General Public License
+-- along with this program.  If not, see <https://www.gnu.org/licenses/>.
+-->
+
 <template>
   <div v-if="isReady">
     <b-steps
-- 
cgit v1.2.3