Merge pull request #151 from fhstp/new_slider

New slider
fhstp · Aug 28, 2024 · 2830416 · 2830416
2 parents 29d6829 + 82a5806
commit 2830416
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 50 deletions.
diff --git a/src/components/ComparisonOptionsPanel.vue b/src/components/ComparisonOptionsPanel.vue
@@ -70,13 +70,6 @@
                   <span>{{ t("duplicateversion") }}</span>
                 </button>
 
-                <button class="button" @click.stop="toggleChange">
-                  <span class="icon">
-                    <font-awesome-icon icon="exchange-alt" />
-                  </span>
-                  <span>{{ t("changeversion") }}</span>
-                </button>
-
                 <!-- TODO hide comparison button in the production code in main branch
                 <button class="button" @click.stop="toggleComparison" disabled>
                   <span class="icon">
@@ -245,10 +238,6 @@ export default defineComponent({
     };
 
     return {
-      nwkcomparison: computed(() => store.state.session.nwkcomparison),
-      nwkchange: computed(() => store.state.session.nwkchange),
-      toggleComparison: () => store.commit("session/toggle", "nwkcomparison"),
-      toggleChange: () => store.commit("session/toggle", "nwkchange"),
       editText: editText,
       isOpen: isOpen,
       newVersion: newVersion,

diff --git a/src/components/ComparisonSlider.vue b/src/components/ComparisonSlider.vue
@@ -12,27 +12,15 @@
       @click="() => handleCircleClick(mark.d.id)"
     >
       <circle
-        v-if="changeNWK"
         :cx="mark.x"
         cy="-113"
-        r="2"
+        r="1.5"
         :class="{
           comparisonCircle: !mark.selected,
           'comparisonCircle-selected': mark.selected,
         }"
       />
-      <!-- TODO check if different template elements necessary-->
-      <circle
-        v-if="showComparison"
-        :cx="mark.x"
-        cy="-113"
-        r="2"
-        :class="{
-          comparisonCircle: !mark.selected,
-          'comparisonCircle-selected': mark.selected,
-        }"
-        @click="() => handleComparisonClick(mark.d.id)"
-      />
+      <!-- TODO optionally a different shape/style if in juxtaposed version mode -->
       <text :x="mark.x" y="-108" text-anchor="middle" class="versionText">
         {{ mark.label }}
       </text>
@@ -99,9 +87,9 @@ export default defineComponent({
           versionId !== store.state.record.currentVersion
       );
       if (clickedVersion) {
-        console.log(`Clicked version: ${clickedVersion.title}`);
+        // console.log(`Clicked version: ${clickedVersion.title}`);
         store.commit("switchNWK", versionId);
-        console.log("Changed Version");
+        // console.log("Changed Version");
       }
     }
 
@@ -121,8 +109,6 @@ export default defineComponent({
       versionMarks,
       handleCircleClick,
       handleComparisonClick,
-      showComparison: computed(() => store.state.session.nwkcomparison),
-      changeNWK: computed(() => store.state.session.nwkchange),
     };
   },
 });
@@ -141,10 +127,12 @@ line {
 }
 
 .comparisonCircle {
-  fill: #d6dae9;
+  stroke: #d6dae9;
+  fill: white;
 }
 
 .comparisonCircle-selected {
+  stroke: $color-primary-1;
   fill: $color-primary-1;
 }
 </style>
diff --git a/src/components/NetworkMap.vue b/src/components/NetworkMap.vue
@@ -2,7 +2,7 @@
   <svg
     id="nwkmap"
     :viewBox="
-      showComparisonSlider && !isEditMode
+      showVersionSlider && !isEditMode
         ? '-110 -117 220 220'
         : '-106 -106 212 212'
     "
@@ -167,7 +167,7 @@
     <text :x="0" y="-102" text-anchor="middle" class="ego">
       {{ egoLabel }}
     </text>
-    <ComparisonSlider v-if="showComparisonSlider && !isEditMode" />
+    <ComparisonSlider v-if="showVersionSlider && !isEditMode" />
   </svg>
   <div id="zoomBtns">
     <button
@@ -774,9 +774,7 @@ export default defineComponent({
             /Apple Computer/.test(navigator.vendor)
           )
       ),
-      showComparisonSlider: computed(
-        () => store.state.session.nwkchange || store.state.session.nwkcomparison
-      ),
+      showVersionSlider: computed(() => store.state.record.versions.length > 1),
     };
   },
 });

diff --git a/src/store/sessionModule.ts b/src/store/sessionModule.ts
@@ -1,22 +1,19 @@
 export const TAB_BASE = "base";
 export const TAB_CONNECTIONS = "connections";
 
-export interface SessionFlags {
-  nwkchange: boolean;
-  nwkcomparison: boolean;
-}
+// export interface SessionFlags {
+//   versionComparison: boolean;
+// }
 
-export interface SessionState extends SessionFlags {
+export interface SessionState {
   selected: Set<number>;
   editIndex: number | null;
   editTab: string;
 }
 
 export function initSessionState(): SessionState {
   return {
-    nwkcomparison: false,
-    nwkchange: false,
-
+    // versionComparison: false,
     selected: new Set<number>(),
     editIndex: null,
     editTab: "",
@@ -33,7 +30,7 @@ const getters = {
 };
 
 const mutations = {
-  updateFlag(
+  /* updateFlag(
     state: SessionState,
     payload: { flag: keyof SessionFlags; value: boolean }
   ) {
@@ -50,7 +47,7 @@ const mutations = {
 
   toggle(state: SessionState, flag: keyof SessionFlags): void {
     state[flag] = !state[flag];
-  },
+  }, */
 
   toggleAlterSelected(state: SessionState, alterId: number): void {
     if (state.selected.has(alterId)) {

diff --git a/src/views/PdfView.vue b/src/views/PdfView.vue
@@ -157,11 +157,7 @@ export default defineComponent({
         " " +
         visibleNWKVersion.value?.title +
         " " +
-        visibleNWKVersion.value?.date?.substring(8, 10) +
-        "." +
-        visibleNWKVersion.value?.date?.substring(5, 7) +
-        "." +
-        visibleNWKVersion.value?.date?.substring(0, 4) +
+        new Date(visibleNWKVersion.value!.date).toLocaleDateString("en-CA") +
         ".pdf"),
         window.print();
     };