Added support for "WikiUrl" on duty list items

bourgeoisor · Nov 16, 2023 · e71d655 · e71d655
1 parent 9a2d994
commit e71d655
Showing 1 changed file with 97 additions and 59 deletions.
diff --git a/frontend/src/components/DutyListItem.vue b/frontend/src/components/DutyListItem.vue
@@ -1,80 +1,95 @@
 <template>
-  <div
-    class="list-group-item align-items-center"
-    :class="{
-      'list-group-item-action':
-        this.$store.getters.hasCharacter && isHovering && (duty.cleared == -1 || duty.cleared == 2),
-      'cursor-pointer': this.$store.getters.hasCharacter && (duty.cleared == -1 || duty.cleared == 2),
-    }"
-    @click="check"
-    @mouseover="isHovering = true"
-    @mouseout="isHovering = false"
-  >
+  <div class="list-group-item align-items-center" style="padding: 0">
     <div
       class="d-flex justify-content-between align-items-center"
       :class="{
         'text-secondary': duty.cleared == -1,
         'text-success': duty.cleared >= 1,
       }"
     >
-      <span
-        class="duty-list-item"
+      <div
+        class="duty-list-item-wrapper d-flex justify-content-between align-items-center"
         :class="{
-          'duty-list-item-blur': duty.blur,
+          'list-group-item-action':
+            this.$store.getters.hasCharacter && isHovering && (duty.cleared == -1 || duty.cleared == 2),
+          'cursor-pointer': this.$store.getters.hasCharacter && (duty.cleared == -1 || duty.cleared == 2),
         }"
-        :title="title"
+        :style="{
+          'padding-right': showWikiLink ? 0 : undefined,
+        }"
+        @click="check"
+        @mouseover="isHovering = true"
+        @mouseout="isHovering = false"
       >
-        <i
-          class="me-2 fa-fw fal"
-          :class="{
-            'fa-question-circle': duty.cleared == -1 && !(duty.cleared == -1 && isHovering),
-            'fa-badge-check': duty.cleared == 1,
-            'fa-check-circle': duty.cleared == 2 || (duty.cleared == -1 && isHovering),
-            'fa-circle': duty.cleared == 0,
-          }"
-        ></i>
-        <a
-          v-if="duty.LodestoneID && !duty.blur"
-          class="text-reset lodestone-tooltip eorzeadb_link"
-          :href="getLodestoneURL() + 'playguide/db/duty/' + duty.LodestoneID"
-          target="_blank"
-          rel="noopener noreferrer"
-          :class="{
-            'blur-maybe': duty.blur && duty.cleared == -1,
-            'blur-cleared': duty.blur && duty.cleared == 1,
-            'blur-uncleared': duty.blur && duty.cleared == 0,
-            'user-select-none': duty.blur,
-          }"
-        >
-          {{ duty["Name" + $i18n.locale.toUpperCase()] || duty["NameEN"] }}
-        </a>
         <span
-          v-else
+          class="duty-list-item"
           :class="{
-            'blur-maybe': duty.blur && duty.cleared == -1,
-            'blur-cleared': duty.blur && duty.cleared == 1,
-            'blur-uncleared': duty.blur && duty.cleared == 0,
-            'user-select-none': duty.blur,
-            'text-bold': duty.Bold,
+            'duty-list-item-blur': duty.blur,
           }"
+          :title="title"
         >
-          {{ duty["Name" + $i18n.locale.toUpperCase()] || duty["NameEN"] }}
+          <i
+            class="me-2 fa-fw fal"
+            :class="{
+              'fa-question-circle': duty.cleared == -1 && !(duty.cleared == -1 && isHovering),
+              'fa-badge-check': duty.cleared == 1,
+              'fa-check-circle': duty.cleared == 2 || (duty.cleared == -1 && isHovering),
+              'fa-circle': duty.cleared == 0,
+            }"
+          ></i>
+          <a
+            v-if="duty.LodestoneID && !duty.blur"
+            class="text-reset lodestone-tooltip eorzeadb_link"
+            :href="getLodestoneURL() + 'playguide/db/duty/' + duty.LodestoneID"
+            target="_blank"
+            rel="noopener noreferrer"
+            :class="{
+              'blur-maybe': duty.blur && duty.cleared == -1,
+              'blur-cleared': duty.blur && duty.cleared == 1,
+              'blur-uncleared': duty.blur && duty.cleared == 0,
+              'user-select-none': duty.blur,
+            }"
+          >
+            {{ dutyName }}
+          </a>
+          <span
+            v-else
+            :class="{
+              'blur-maybe': duty.blur && duty.cleared == -1,
+              'blur-cleared': duty.blur && duty.cleared == 1,
+              'blur-uncleared': duty.blur && duty.cleared == 0,
+              'user-select-none': duty.blur,
+              'text-bold': duty.Bold,
+            }"
+          >
+            {{ dutyName }}
+          </span>
         </span>
-      </span>
-      <span
-        v-if="duty.IsMSQ"
-        class="icon-marker-msq"
-        data-bs-toggle="tooltip"
-        data-bs-placement="top"
-        :title="$t('encounters.msqContent')"
-      ></span>
-      <span
-        v-if="duty.Expansion && showPatchNums"
-        :class="'icon-exp-' + duty.Expansion"
+        <span
+          v-if="duty.IsMSQ"
+          class="icon-marker-msq"
+          data-bs-toggle="tooltip"
+          data-bs-placement="top"
+          :title="$t('encounters.msqContent')"
+        ></span>
+        <span
+          v-if="duty.Expansion && showPatchNums"
+          :class="'icon-exp-' + duty.Expansion"
+          data-bs-toggle="tooltip"
+          data-bs-placement="top"
+          :title="$t('encounters.unlockedInExp')"
+        ></span>
+      </div>
+      <a
+        class="duty-wiki-link cursor-pointer text-reset"
+        v-if="showWikiLink"
+        :href="duty.WikiUrl"
+        :title="`${dutyName} Wiki Information Link`"
         data-bs-toggle="tooltip"
         data-bs-placement="top"
-        :title="$t('encounters.unlockedInExp')"
-      ></span>
+      >
+        <span class="fas fa-link"></span>
+      </a>
     </div>
     <div id="rewards" v-if="filters.rewards && !duty.blur && ('Mounts' in duty || 'Minions' in duty)">
       <div v-if="'Mounts' in duty">
@@ -153,6 +168,23 @@
   text-overflow: " ";
 }
 
+.duty-wiki-link,
+.duty-list-item-wrapper {
+  padding: var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x);
+}
+
+.duty-list-item-wrapper {
+  width: 100%;
+}
+
+.duty-wiki-link {
+  text-decoration: none;
+}
+
+.duty-wiki-link:hover {
+  color: #41b883 !important;
+}
+
 .night {
   .list-group-item-action:focus,
   .list-group-item-action:hover {
@@ -206,6 +238,9 @@ export default {
     title() {
       return this.duty.LodestoneID || this.duty.blur ? "" : this.duty.Name;
     },
+    dutyName() {
+      return this.duty["Name" + this.$i18n.locale.toUpperCase()] || this.duty["NameEN"];
+    },
     showPatchNums() {
       let patchNumsSetting = this.$store.getters.settings.patchNumsOption || 0;
 
@@ -215,6 +250,9 @@ export default {
         patchNumsSetting == 2
       );
     },
+    showWikiLink() {
+      return !this.duty.blur && this.duty.WikiUrl ? true : false;
+    },
   },
   methods: {
     getLodestoneURL: getLodestoneURL,