upgrade vue templates

Faithful-Resource-Pack · Feb 6, 2024 · d992650 · d992650
1 parent 6706847
commit d992650
Show file tree

Hide file tree

Showing 9 changed files with 110 additions and 89 deletions.
diff --git a/js/mods/components/clearDatabase.js b/js/mods/components/clearDatabase.js
@@ -2,11 +2,12 @@
 /* eslint no-multi-str: 0 */
 
 Vue.component('clear-database', {
-  template:
-  '<div>\
-      <label for="clearDatabase" class="block pb-1">Database</label>\
-      <button class="btn block btn-dark" v-on:click="clearDB">Clear database</button>\
-    </div>',
+  template: `
+    <div>
+      <label for="clearDatabase" class="block pb-1">Database</label>
+      <button class="btn block btn-dark" v-on:click="clearDB">Clear database</button>
+    </div>
+  `,
   methods: {
     clearDB() {
       const dbName = this.$root.$refs.localDownload.dbName

diff --git a/js/mods/components/customModal.js b/js/mods/components/customModal.js
@@ -16,10 +16,11 @@ Vue.component('custom-modal', {
       required: true
     }
   },
-  template: '<div id="cacheClear" class="customModal" v-show="modalOpened">\
-    <div class="customModalBackground" v-on:click="closeOnClick"></div>\
-    <div :id="contentId" class="customModalContent p-3">\
-      <slot></slot>\
-    </div><span class="taille">\
-  </div>'
+  template: `
+    <div id="cacheClear" class="customModal" v-show="modalOpened">
+      <div class="customModalBackground" v-on:click="closeOnClick"></div>
+      <div :id="contentId" class="customModalContent p-3">
+        <slot></slot>
+      </div><span class="taille">
+    </div>`,
 })
diff --git a/js/mods/components/localDownload.js b/js/mods/components/localDownload.js
@@ -8,40 +8,50 @@ NAME = 'Faithful Mods' // eslint-disable-line
 
 Vue.component('local-download', {
   props: ['canpack', 'versions'],
-  template:
-    '<div>\
-      <custom-modal contentId="cacheClear" :modalOpened="confirmOpened" :closeOnClick="function() { confirmOpened = false }"> \
-        <h3>Do you want to use cached versions?</h3>\
-        <p class="mb-2">Some mod resource packs may already have been downloaded. Do you want to use the cached versions? Using the cached versions is usually faster but can cause outdated textures.</p>\
-        <div class="text-center auto-flex px-2">\
-          <button type="button" class="btn btn-dark mx-1 mt-2" v-on:click="downloadLocally(true)">No</button>\
-          <button type="button" class="btn btn-dark mx-1 mt-2" v-on:click="downloadLocally(false)">Yes</button>\
-        </div>\
-      </custom-modal>\
-      \
-      <custom-modal id="downloadModal" contentId="downloadModalContent" :modalOpened="modalOpened" :closeOnClick="closeModal">\
-        <div id="steps">\
-          <template v-for="(step, index) in steps" :key="step.name" >\
-            <div class="text-center">\
-              <button :disabled="index != currentStep" class="mx-auto px-0 btn btn-dark">{{ index+1 }}</button>\
-            </div>\
-            <div v-if="index < steps.length -1" class="line col"></div>\
-          </template>\
-        </div>\
-        <h3 class="mt-3 mb-1">{{ "Step " + (currentStep+1) + ": " + steps[currentStep].name }}</h3>\
-        <p v-if="currentStep < 2">{{ latestLog }}</p>\
-        <p v-else>{{ steps[currentStep].content }}<span v-if="isGenerating">{{ timeLeft }}</span></p>\
-        <div id="zipProgressBar" v-if="isGenerating" class="progress my-3">\
-          <div :class="{ \'progress-bar\': true, \'progress-bar-striped\': parseInt(generatedPercent) < 100, \'progress-bar-animated\': parseInt(generatedPercent) < 100 }" role="progressbar" :style="{ width: generatedPercent + \'%\' }" :aria-valuenow="generatedPercent" aria-valuemin="0" aria-valuemax="100">{{ generatedPercent + "%" }}</div>\
-        </div>\
-        <div id="logs" ref="log">\
-          <div v-for="(log, index) in logs" :key="index" :class="{ log: true, error: log.type === \'error\' }" :title="log.value">{{ log.value }}</div>\
-        </div>\
-        <div id="bottomButtons" class="text-right mt-3">\
-        <button :disabled="!finalZip" v-on:click="downloadZip" class="btn btn-dark mt-2 mr-2">Download Zip</button><button v-on:click="closeModal" :title="cancelTitle" :disabled="!canCloseModal" class="btn btn-dark mt-2">Cancel</button>\
-        </div>\
-      </custom-modal>\
-    </div>',
+  template: `
+    <div>
+      <custom-modal contentId="cacheClear" :modalOpened="confirmOpened" :closeOnClick="function() { confirmOpened = false }">
+        <h3>Do you want to use cached versions?</h3>
+        <p class="mb-2">Some mod resource packs may already have been downloaded. Do you want to use the cached versions? Using the cached versions is usually faster but can cause outdated textures.</p>
+        <div class="text-center auto-flex px-2">
+          <button type="button" class="btn btn-dark mx-1 mt-2" v-on:click="downloadLocally(true)">No</button>
+          <button type="button" class="btn btn-dark mx-1 mt-2" v-on:click="downloadLocally(false)">Yes</button>
+        </div>
+      </custom-modal>
+      <custom-modal id="downloadModal" contentId="downloadModalContent" :modalOpened="modalOpened" :closeOnClick="closeModal">
+        <div id="steps">
+          <template v-for="(step, index) in steps" :key="step.name" >
+            <div class="text-center">
+              <button :disabled="index != currentStep" class="mx-auto px-0 btn btn-dark">{{ index+1 }}</button>
+            </div>
+            <div v-if="index < steps.length -1" class="line col"></div>
+          </template>
+        </div>
+        <h3 class="mt-3 mb-1">{{ "Step " + (currentStep+1) + ": " + steps[currentStep].name }}</h3>
+        <p v-if="currentStep < 2">{{ latestLog }}</p>
+        <p v-else>{{ steps[currentStep].content }}<span v-if="isGenerating">{{ timeLeft }}</span></p>
+        <div id="zipProgressBar" v-if="isGenerating" class="progress my-3">
+          <div
+            role="progressbar"
+            :class="{ \'progress-bar\': true, \'progress-bar-striped\': parseInt(generatedPercent) < 100, \'progress-bar-animated\': parseInt(generatedPercent) < 100 }"
+            :style="{ width: generatedPercent + \'%\' }" :aria-valuenow="generatedPercent" aria-valuemin="0" aria-valuemax="100">{{ generatedPercent + "%" }}
+          </div>
+        </div>
+        <div id="logs" ref="log">
+          <div
+            v-for="(log, index) in logs"
+            :key="index"
+            :class="{ log: true, error: log.type === \'error\' }"
+            :title="log.value"
+          >
+            {{ log.value }}
+          </div>
+        </div>
+        <div id="bottomButtons" class="text-right mt-3">
+        <button :disabled="!finalZip" v-on:click="downloadZip" class="btn btn-dark mt-2 mr-2">Download Zip</button><button v-on:click="closeModal" :title="cancelTitle" :disabled="!canCloseModal" class="btn btn-dark mt-2">Cancel</button>
+        </div>
+      </custom-modal>
+    </div>`,
   data () {
     return {
       dbName: 'mods',

diff --git a/js/mods/components/modpackCard.js b/js/mods/components/modpackCard.js
@@ -3,8 +3,8 @@
 
 Vue.component('modpack-card', {
   props: ['modpack', 'cantDownload', 'onbuttonclick'],
-  template:
-    `<div class="mb-4">
+  template: `
+    <div class="mb-4">
     <div class="card">
       <div class="card-image embed-responsive embed-responsive-1by1" :style="{'background-image': 'url(' + modpack.coverSource + ')' }">
       </div>

diff --git a/js/mods/components/modpackModal.js b/js/mods/components/modpackModal.js
@@ -5,8 +5,8 @@ const _TEXT_LOADING = 'Loading...'
 
 Vue.component('modpack-modal', {
   props: ['modpackmodalopened', 'modpack', 'onclose', 'mods'],
-  template:
-    `<custom-modal v-if="modpack" :modalOpened="modpackmodalopened" :closeOnClick="onclose">
+  template: `
+    <custom-modal v-if="modpack" :modalOpened="modpackmodalopened" :closeOnClick="onclose">
       <h3 class="mt-0">{{ modpack.modpackName }}</h3>
       <p class="advice mb-0">Modpack version: <span>{{ modpack.modpackVersion }}</span></p>
       <p class="advice">Minecraft version: <span>{{ modpack.minecraftVersion }}</span></p>
@@ -22,7 +22,8 @@ Vue.component('modpack-modal', {
           <button class="btn btn-dark" v-on:click="download">Download</button>
         </div>
       </template>
-    </custom-modal>`,
+    </custom-modal>
+  `,
   data() {
     return {
       modsFound: 0,

diff --git a/js/mods/components/mods/minecraftMod.js b/js/mods/components/mods/minecraftMod.js
@@ -10,8 +10,8 @@ Vue.component('minecraft-mod', {
   props: {
     mod: Object
   },
-  template:
-    `<li class="mod-bar" :class="{ 'selected-mod': mod.selected }" v-if="!mod.blacklisted && mod.resource_pack.versions.length > 0">
+  template: `
+    <li class="mod-bar" :class="{ 'selected-mod': mod.selected }" v-if="!mod.blacklisted && mod.resource_pack.versions.length > 0">
       <label :for="modId" class="mod-label">Select this mod</label>
       <div :style="imageStyle" class="mod-img">
         <img :src="$root.apiURL + '/v2/mods/' + this.modId + '/thumbnail'" onerror="this.style.display='none'; this.nextElementSibling.style.display='block';" :alt="name" :title="name" loading="lazy" />
@@ -35,7 +35,8 @@ Vue.component('minecraft-mod', {
             ></template>
         </div>
       </div>
-    </li>`,
+    </li>
+  `,
   data() {
     return {
       searchPages: 3,

diff --git a/js/mods/components/mods/minecraftModsList.js b/js/mods/components/mods/minecraftModsList.js
@@ -2,6 +2,11 @@
 /* eslint no-multi-str: 0 */
 
 Vue.component('minecraft-mod-list', {
+  template: `
+    <ul class="mod-ul">
+      <minecraft-mod v-for="(mod, index) in mods" :key="index" :mod="mod"></minecraft-mod>
+    </ul>
+  `,
   props: {
     mods: Object
   },
@@ -18,8 +23,4 @@ Vue.component('minecraft-mod-list', {
       return mod.resource_pack.git_repository ? mod.resource_pack.git_repository.split('/').pop() : null
     }
   },
-  template:
-    '<ul class="mod-ul">\
-      <minecraft-mod v-for="(mod, index) in mods" :key="index" :mod="mod"></minecraft-mod>\
-    </ul>'
 })
diff --git a/js/mods/components/mods/minecraftVersions.js b/js/mods/components/mods/minecraftVersions.js
@@ -6,15 +6,20 @@ Vue.component('minecraft-versions', {
     versions: Array,
     breakpoints: Object
   },
-  template:
-    '<div id="minecraftVersions">\
-      <div>\
-        <div v-for="(line, index) in versionsOrganized" :key="index" class="auto-flex mt-0 mx-0 btn-group-custom">\
-          <download-minecraft-version v-for="version in line" :key="version.version" :value="version" :block="breakpoints.lg && !breakpoints.md" />\
-        </div>\
-      </div>\
-    </div>',
-
+  template: `
+    <div id="minecraftVersions">
+      <div>
+        <div v-for="(line, index) in versionsOrganized" :key="index" class="auto-flex mt-0 mx-0 btn-group-custom">
+          <download-minecraft-version
+            v-for="version in line"
+            :key="version.version"
+            :value="version"
+            :block="breakpoints.lg && !breakpoints.md"
+          />
+        </div>
+      </div>
+    </div>
+  `,
   data () {
     return {}
   },

diff --git a/js/mods/components/zipOptions.js b/js/mods/components/zipOptions.js
@@ -7,29 +7,30 @@ try {
 NAME = 'Faithful Mods' // eslint-disable-line
 
 Vue.component('zip-options', {
-  template:
-    '<div id="zipOptions">\
-      <h4 class="my-3">\
-        <label for="aoe">Advanced options </label> <input id="aoe" type="checkbox" v-model="advancedOptionsEnabled" />\
-      </h4>\
-      <div v-show="advancedOptionsEnabled" id="advancedOptions" class="card card-body auto-flex mb-4">\
-        <div class="mx-1">\
-          <label for="compressionSelect" class="block pb-1">Compression level</label>\
-          <select id="compressionSelect" class="form-control custom-select fancy-card-1x" v-model="compressionChosen">\
-            <template v-for="(ct, ctindex) in compressionTypes">\
-              <optgroup :label="ct" :key="ct">\
-                <option v-for="cl in compressionLevels.slice(!!ctindex ? 1 : 0, !ctindex ? 1 : compressionLevelsAvailable)" :key="cl.value" :value="cl.value" :selected="cl.value == compressionChosen">{{ cl.label }}</option>\
-              </optgroup>\
-            </template>\
-          </select>\
-        </div>\
-        <div class="mx-1">\
-          <label for="archiveName" class="block pb-1">Archive name</label>\
-          <input type="text" autocomplete="false" name="archiveName" :class="{ empty: !archiveName.trim() }" class="form-control fancy-card-1x" v-model="archiveName" id="archiveName" placeholder="Leave empty to generate a unique name">\
-        </div>\
-        <clear-database class="mx-1"></clear-database>\
-      </div>\
-    </div>',
+  template: `
+    <div id="zipOptions">
+      <h4 class="my-3">
+        <label for="aoe">Advanced options </label> <input id="aoe" type="checkbox" v-model="advancedOptionsEnabled" />
+      </h4>
+      <div v-show="advancedOptionsEnabled" id="advancedOptions" class="card card-body auto-flex mb-4">
+        <div class="mx-1">
+          <label for="compressionSelect" class="block pb-1">Compression level</label>
+          <select id="compressionSelect" class="form-control custom-select fancy-card-1x" v-model="compressionChosen">
+            <template v-for="(ct, ctindex) in compressionTypes">
+              <optgroup :label="ct" :key="ct">
+                <option v-for="cl in compressionLevels.slice(!!ctindex ? 1 : 0, !ctindex ? 1 : compressionLevelsAvailable)" :key="cl.value" :value="cl.value" :selected="cl.value == compressionChosen">{{ cl.label }}</option>
+              </optgroup>
+            </template>
+          </select>
+        </div>
+        <div class="mx-1">
+          <label for="archiveName" class="block pb-1">Archive name</label>
+          <input type="text" autocomplete="false" name="archiveName" :class="{ empty: !archiveName.trim() }" class="form-control fancy-card-1x" v-model="archiveName" id="archiveName" placeholder="Leave empty to generate a unique name">
+        </div>
+        <clear-database class="mx-1"></clear-database>
+      </div>
+    </div>
+  `,
   data() {
     return {
       advancedOptionsEnabled: false,