Add rewards filter to Encounters page

bourgeoisor · Aug 2, 2023 · 1ba218e · 1ba218e
1 parent 948aa44
commit 1ba218e
Show file tree

Hide file tree

Showing 7 changed files with 147 additions and 74 deletions.
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -30,7 +30,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;600;800&display=swap" rel="stylesheet"> 
     <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
     <link href="/icons.css" rel="stylesheet">
     <link href="/fontawesome/css/fontawesome.css" rel="stylesheet">
     <link href="/fontawesome/css/duotone.css" rel="stylesheet">
@@ -58,6 +58,6 @@ <h1>XIV ToDo</h1>
       </div>
     </div>
     <script src="https://img.finalfantasyxiv.com/lds/pc/global/js/eorzeadb/loader.js?v2"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
   </body>
 </html>
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -142,6 +142,10 @@ main {
     color: #dbdcdd;
     background-color: #262b2f;
   }
+
+  .form-control::placeholder {
+    color: rgba(97, 108, 120, 0.75);
+  }
 }
 
 .indent-paragraphs p {
@@ -286,13 +290,13 @@ export default {
   mounted() {
     this.$nextTick(function () {
       this.setLanguage();
-      this.checkUpstreamVersion();
+      // this.checkUpstreamVersion();
       this.updateUserData();
       setTimeout(() => this.updateCharactersData(), 1000 * 10); // 10 seconds
     });
     this.intervalFunction = setInterval(() => {
       if (this.tabFocused) {
-        this.checkUpstreamVersion();
+        // this.checkUpstreamVersion();
         this.updateCharactersData();
       }
     }, 1000 * 60); // 1 minute

diff --git a/frontend/src/assets/db.json b/frontend/src/assets/db.json
diff --git a/frontend/src/components/DutyList.vue b/frontend/src/components/DutyList.vue
@@ -3,15 +3,16 @@
   <span v-if="showTotal" class="fw-lighter text-muted">
     {{ $t("shared.countTotal", { count: duties.length }) }}
   </span>
-  <ul class="list-group list-group-flush">
+  <div class="list-group list-group-flush">
     <DutyListItem
       v-for="item of injectDutyCompletion(duties)"
       :key="item.Name"
       :duty="item"
       :clearedMaybe="true"
       :blur="false"
+      :filters="this.$parent.$data.filters || {}"
     />
-  </ul>
+  </div>
   <br />
 </template>
 

diff --git a/frontend/src/components/DutyListItem.vue b/frontend/src/components/DutyListItem.vue
@@ -1,9 +1,7 @@
 <template>
-  <li
-    class="list-group-item d-flex justify-content-between align-items-center"
+  <div
+    class="list-group-item align-items-center"
     :class="{
-      'text-secondary': duty.cleared == -1,
-      'text-success': duty.cleared >= 1,
       '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),
@@ -12,65 +10,101 @@
     @mouseover="isHovering = true"
     @mouseout="isHovering = false"
   >
-    <span
-      class="duty-list-item"
+    <div
+      class="d-flex justify-content-between align-items-center"
       :class="{
-        'duty-list-item-blur': duty.blur,
+        'text-secondary': duty.cleared == -1,
+        'text-success': duty.cleared >= 1,
       }"
-      :title="title"
     >
-      <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,
+          }"
+        >
+          {{ duty["Name" + $i18n.locale.toUpperCase()] || duty["NameEN"] }}
+        </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,
+          }"
+        >
+          {{ duty["Name" + $i18n.locale.toUpperCase()] || duty["NameEN"] }}
+        </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"
-      data-bs-toggle="tooltip"
-      data-bs-placement="top"
-      :title="$t('encounters.unlockedInExp')"
-    ></span>
-  </li>
+      <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>
+    <div id="rewards" v-if="filters.rewards && !duty.blur && ('Mounts' in duty || 'Minions' in duty)">
+      <div v-if="'Mounts' in duty">
+        <div
+          v-for="mountID of duty.Mounts.split(' ')"
+          :key="mountID"
+          :class="{
+            'reward-obtained': this.$store.getters.mounts[mountID],
+          }"
+        >
+          <img v-if="mountID" :src="dbs.mounts[mountID].icon" />
+          {{ dbs.mounts[mountID].name }}
+          <i v-if="this.$store.getters.mounts[mountID]" class="fa-fw fal fa-check"></i>
+        </div>
+      </div>
+      <div v-if="'Minions' in duty">
+        <div
+          v-for="minionID of duty.Minions.split(' ')"
+          :key="minionID"
+          :class="{
+            'reward-obtained': this.$store.getters.minions[minionID],
+          }"
+        >
+          <img v-if="minionID" :src="dbs.minions[minionID].icon" />
+          {{ dbs.minions[minionID].name }}
+          <i v-if="this.$store.getters.minions[minionID]" class="fa-fw fal fa-check"></i>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style lang="scss">
@@ -111,12 +145,32 @@
     background-color: #1c2024 !important;
   }
 }
+
+#rewards {
+  font-weight: 300;
+  padding-top: 5px;
+  padding-left: 30px;
+  padding-bottom: 5px;
+
+  div {
+    margin-bottom: 5px;
+  }
+}
+
+.reward-obtained {
+  color: #666;
+  img {
+    filter: brightness(50%);
+  }
+}
 </style>
 
 <script>
 import { getLodestoneURL } from "@/utilities/shared.js";
 import { updateEncounterIDs } from "@/utilities/backend.js";
 
+import dbs from "@/utilities/dbs.js";
+
 export default {
   data() {
     return {
@@ -125,8 +179,12 @@ export default {
   },
   props: {
     duty: Object,
+    filters: Object,
   },
   computed: {
+    dbs() {
+      return dbs[this.$store.getters.language];
+    },
     title() {
       return this.duty.LodestoneID || this.duty.blur ? "" : this.duty.Name;
     },

diff --git a/frontend/src/i18n/lang-en.json b/frontend/src/i18n/lang-en.json
@@ -208,7 +208,8 @@
     "heTrials": "High-end Trials",
     "heRaids": "High-end Raids",
     "exploratory": "Exploratory Missions",
-    "guildhests": "Guildhests"
+    "guildhests": "Guildhests",
+    "viewRewards": "View rewards"
   },
   "questlines": {
     "stories": "Stories",

diff --git a/frontend/src/views/Encounters.vue b/frontend/src/views/Encounters.vue
@@ -1,17 +1,23 @@
 <template>
   <div class="container">
-    <h1>
-      {{ $t("page.encounters") }}
-      <span v-if="this.$store.getters.hasCharacter" class="fs-3 fw-lighter">
-        {{ $t("pageHeader.clearedByCharacter", { characterName: this.$store.getters.character.Name }) }}
-        <div v-if="this.$store.getters.activeCharacterOutOfDate" class="text-info fs-6">
-          <div class="spinner-border spinner-border-sm" role="status"></div>
-          {{ $t("message.updatingCharacter") }}
-        </div>
-        <div v-else-if="!this.$store.getters.achievementsPublic" class="text-warning fs-6">
-          {{ $t("message.achievementsNotPublic") }}
-        </div>
+    <h1 class="d-flex align-items-end">
+      <span class="me-auto">
+        {{ $t("page.encounters") }}
+        <span v-if="this.$store.getters.hasCharacter" class="fs-3 fw-lighter">
+          {{ $t("pageHeader.clearedByCharacter", { characterName: this.$store.getters.character.Name }) }}
+          <div v-if="this.$store.getters.activeCharacterOutOfDate" class="text-info fs-6">
+            <div class="spinner-border spinner-border-sm" role="status"></div>
+            {{ $t("message.updatingCharacter") }}
+          </div>
+          <div v-else-if="!this.$store.getters.achievementsPublic" class="text-warning fs-6">
+            {{ $t("message.achievementsNotPublic") }}
+          </div>
+        </span>
       </span>
+      <div class="btn-group" role="group" aria-label="Filter buttons">
+        <input v-model="filters.rewards" type="checkbox" class="btn-check" id="btn-rewards" autocomplete="off" />
+        <label class="btn btn-outline-success" for="btn-rewards">{{ $t("encounters.viewRewards") }}</label>
+      </div>
     </h1>
     <AlertMsg
       v-if="!this.$store.getters.isSignedIn"
@@ -117,6 +123,9 @@ export default {
   data() {
     return {
       db: dbJson,
+      filters: {
+        rewards: false,
+      },
     };
   },
   components: {