refactor: lnbits-wallet-ads, ads on wallet page (#3534)

lnbits/core/templates/core/wallet.html

@@ -536,35 +536,8 @@
               </q-list>
             </q-card-section>
           </q-card>
-          {% endif %} {% if AD_SPACE_ENABLED and AD_SPACE %}
-          <q-card>
-            <q-card-section>
-              <h6 class="text-subtitle1 q-mt-none q-mb-sm">
-                {{ AD_SPACE_TITLE }}
-              </h6>
-            </q-card-section>
-            {% for ADS in AD_SPACE %} {% set AD = ADS.split(";") %}
-
-            <q-card-section class="q-pa-none">
-              <a
-                style="display: inline-block"
-                href="{{ AD[0] }}"
-                class="q-ml-md q-mb-xs q-mr-md"
-              >
-                <img
-                  style="max-width: 100%; height: auto"
-                  v-if="($q.dark.isActive)"
-                  src="{{ AD[1] }}"
-                />
-                <img
-                  style="max-width: 100%; height: auto"
-                  v-else
-                  src="{{ AD[2] }}"
-                />
-              </a> </q-card-section
-            >{% endfor %}
-          </q-card>
           {% endif %}
+          <lnbits-wallet-ads></lnbits-wallet-ads>
           <div
             v-show="chartDataPointCount"
             class="col-12 col-md-5 q-gutter-y-md"

lnbits/static/js/components/lnbits-wallet-ads.js

@@ -0,0 +1,15 @@
+window.app.component('lnbits-wallet-ads', {
+  template: '#lnbits-wallet-ads',
+  mixins: [window.windowMixin],
+  computed: {
+    ads() {
+      return this.AD_SPACE.map(ad => ad.split(';'))
+    },
+    adSpaceTitle() {
+      return this.AD_SPACE_TITLE || 'Sponsored Ads'
+    },
+    adSpaceEnabled() {
+      return this.AD_SPACE_ENABLED && this.AD_SPACE && this.AD_SPACE.length > 0
+    }
+  }
+})

lnbits/static/vendor.json

@@ -67,6 +67,7 @@
     "js/components/admin/lnbits-admin-site-customisation.js",
     "js/components/admin/lnbits-admin-assets-config.js",
     "js/components/admin/lnbits-admin-audit.js",
+    "js/components/lnbits-wallet-ads.js",
     "js/components/lnbits-wallet-api-docs.js",
     "js/components/lnbits-wallet-new.js",
     "js/components/lnbits-wallet-share.js",

lnbits/templates/components.vue

@@ -19,6 +19,7 @@ include('components/lnbits-manage-extension-list.vue') %} {%
 include('components/lnbits-manage-wallet-list.vue') %} {%
 include('components/lnbits-language-dropdown.vue') %} {%
 include('components/lnbits-payment-list.vue') %} {%
+include('components/lnbits-wallet-ads.vue') %} {%
 include('components/lnbits-wallet-new.vue') %} {%
 include('components/lnbits-wallet-api-docs.vue') %} {%
 include('components/lnbits-wallet-share.vue') %}

lnbits/templates/components/lnbits-wallet-ads.vue

@@ -0,0 +1,21 @@
+<template id="lnbits-wallet-ads">
+  <q-card v-if="adSpaceEnabled">
+    <q-card-section>
+      <h6 v-text="adSpaceTitle" class="text-subtitle1 q-mt-none q-mb-sm"></h6>
+    </q-card-section>
+    <q-card-section class="q-pa-none" v-for="ad in ads">
+      <a
+        style="display: inline-block"
+        :href="ad[0]"
+        class="q-ml-md q-mb-xs q-mr-md"
+      >
+        <img
+          style="max-width: 100%; height: auto"
+          v-if="$q.dark.isActive"
+          :src="ad[1]"
+        />
+        <img v-else :src="ad[2]" style="max-width: 100%; height: auto" />
+      </a>
+    </q-card-section>
+  </q-card>
+</template>

package.json

@@ -119,6 +119,7 @@
       "js/components/admin/lnbits-admin-site-customisation.js",
       "js/components/admin/lnbits-admin-assets-config.js",
       "js/components/admin/lnbits-admin-audit.js",
+      "js/components/lnbits-wallet-ads.js",
       "js/components/lnbits-wallet-api-docs.js",
       "js/components/lnbits-wallet-new.js",
       "js/components/lnbits-wallet-share.js",