make UI great again

lnbits/extensions/admin/templates/admin/_tab_funding.html

@@ -9,9 +9,9 @@
           <ul>
             {%raw%}
             <li>
-              Funding Source: {{data.settings.lnbits_backend_wallet_class}}
+              Funding Source: {{settings.lnbits_backend_wallet_class}}
             </li>
-            <li>Balance: {{data.balance / 1000}} sats</li>
+            <li>Balance: {{balance / 1000}} sats</li>
             {%endraw%}
           </ul>
           <br />
@@ -24,10 +24,9 @@
               <p>Active Funding<small> (Requires server restart)</small></p>
               <q-select
                 filled
-                name="lnbits_backend_wallet_class"
-                v-model="data.settings.lnbits_backend_wallet_class"
+                v-model="formData.lnbits_backend_wallet_class"
                 hint="Select the active funding wallet"
-                :options="data.settings.lnbits_allowed_funding_sources"
+                :options="settings.lnbits_allowed_funding_sources"
               ></q-select>
             </div>
             <div class="col-12">
@@ -38,8 +37,7 @@
                     dense
                     type="number"
                     filled
-                    name="lnbits_reserve_fee_min"
-                    v-model="data.settings.lnbits_reserve_fee_min"
+                    v-model="formData.lnbits_reserve_fee_min"
                     label="Reserve fee in msats"
                   ></q-input>
                 </div>
@@ -49,7 +47,7 @@
                     type="number"
                     filled
                     name="lnbits_reserve_fee_percent"
-                    v-model="data.settings.lnbits_reserve_fee_percent"
+                    v-model="formData.lnbits_reserve_fee_percent"
                     label="Reserve fee in percent"
                     step="0.1"
                   ></q-input>
@@ -59,49 +57,22 @@
           </div>
         </div>
         <div class="col-12 col-md-6">
-          <p>TopUp a wallet</p>
-          <div class="row">
-            <div class="col-12">
-              <q-input
-                dense
-                type="text"
-                filled
-                v-model="wallet.id"
-                label="Wallet ID"
-                hint="Use the wallet ID to topup any wallet"
-              ></q-input>
-              <br />
-            </div>
-            <div class="col-12">
-              <q-input
-                dense
-                type="number"
-                filled
-                v-model="wallet.amount"
-                label="Topup amount"
-              ></q-input>
-            </div>
-          </div>
-          <div>
-            <q-btn
-              class="q-mt-md float-right"
-              label="Topup"
-              color="primary"
-              @click="topupWallet"
-            ></q-btn>
-          </div>
           <br />
         </div>
       </div>
       <p>Funding Sources</p>
-      <q-list v-for="fund in data.settings.lnbits_allowed_funding_sources">
+      <q-list
+        v-for="(fund, idx) in settings.lnbits_allowed_funding_sources"
+        :key="idx"
+      >
         <q-expansion-item expand-separator icon="payments" :label="fund">
           <q-card>
             <q-card-section>
+              <!-- TODO A BUNCH OF V-IFS -->
               <q-input
                 filled
                 type="text"
-                v-model="data.settings.lnbits_backend_wallet_class"
+                v-model="formData.lnbits_backend_wallet_class"
                 label="Wallet class"
                 class="q-pr-md"
               ></q-input>

lnbits/extensions/admin/templates/admin/_tab_server.html

@@ -8,11 +8,11 @@
           <p>Server Info</p>
           <ul>
             {%raw%}
-            <li v-if="data.settings.lnbits_data_folder">
-              SQlite: {{data.settings.lnbits_data_folder}}
+            <li v-if="settings.lnbits_data_folder">
+              SQlite: {{settings.lnbits_data_folder}}
             </li>
-            <li v-if="data.settings.lnbits_database_url">
-              Postgres: {{data.settings.lnbits_database_url}}
+            <li v-if="settings.lnbits_database_url">
+              Postgres: {{settings.lnbits_database_url}}
             </li>
             {%endraw%}
           </ul>
@@ -25,7 +25,7 @@
           <q-input
             filled
             type="number"
-            v-model.number="data.settings.lnbits_service_fee"
+            v-model.number="formData.lnbits_service_fee"
             label="Service fee (%)"
             step="0.1"
             hint="Fee charged per tx (%)"
@@ -42,7 +42,7 @@
             <q-item-section avatar>
               <q-toggle
                 size="md"
-                v-model="data.settings.lnbits_force_https"
+                v-model="formData.lnbits_force_https"
                 checked-icon="check"
                 color="green"
                 unchecked-icon="clear"
@@ -59,7 +59,7 @@
             <q-item-section avatar>
               <q-toggle
                 size="md"
-                v-model="data.settings.lnbits_hide_api"
+                v-model="formData.lnbits_hide_api"
                 checked-icon="check"
                 color="green"
                 unchecked-icon="clear"

lnbits/extensions/admin/templates/admin/_tab_theme.html

@@ -9,7 +9,7 @@
           <q-input
             filled
             type="text"
-            v-model="data.settings.lnbits_site_title"
+            v-model="formData.lnbits_site_title"
             label="Site title"
           ></q-input>
           <br />
@@ -19,7 +19,7 @@
           <q-input
             filled
             type="text"
-            v-model="data.settings.lnbits_site_tagline"
+            v-model="formData.lnbits_site_tagline"
             label="Site tagline"
           ></q-input>
           <br />
@@ -28,7 +28,7 @@
       <div>
         <p>Site Description</p>
         <q-input
-          v-model="data.settings.lnbits_site_description"
+          v-model="formData.lnbits_site_description"
           filled
           type="textarea"
           hint="Use plain text or raw HTML"
@@ -41,7 +41,7 @@
           <q-input
             filled
             type="text"
-            v-model="data.settings.lnbits_default_wallet_name"
+            v-model="formData.lnbits_default_wallet_name"
             label="LNbits wallet"
           ></q-input>
           <br />
@@ -51,7 +51,7 @@
           <q-input
             filled
             type="text"
-            v-model="data.settings.lnbits_denomination"
+            v-model="formData.lnbits_denomination"
             label="sats"
             hint="The name for the FakeWallet token"
           ></q-input>
@@ -63,10 +63,10 @@
           <p>Themes</p>
           <q-select
             filled
-            v-model="data.settings.lnbits_theme"
+            v-model="formData.lnbits_theme"
             multiple
             hint="Choose themes available for users"
-            :options="data.settings.lnbits_theme_options"
+            :options="settings.lnbits_theme_options"
             label="Themes"
           ></q-select>
           <br />
@@ -75,7 +75,7 @@
           <p>Advertisement Slots</p>
           <q-input
             filled
-            v-model="data.ad_space_add"
+            v-model="formData.ad_space_add"
             @keydown.enter="addAdSpace"
             type="text"
             label="Ad image URL"
@@ -86,7 +86,7 @@
           <div>
             {% raw %}
             <q-chip
-              v-for="space in data.settings.lnbits_ad_space"
+              v-for="space in settings.lnbits_ad_space"
               :key="space"
               removable
               @remove="removeAdSpace(space)"
@@ -106,7 +106,7 @@
           <q-input
             filled
             type="text"
-            v-model="data.settings.lnbits_custom_logo"
+            v-model="formData.lnbits_custom_logo"
             label="https://example.com/image.png"
             hint="URL to logo image"
           ></q-input>

lnbits/extensions/admin/templates/admin/_tab_users.html

@@ -3,15 +3,14 @@
     <h6 class="q-my-none">User Management</h6>
     <br />
     <p class="q-my-none">
-      Super Admin: {% raw %}{{this.data.settings.lnbits_admin_users[0]}}{%
-      endraw %}
+      Super Admin: {% raw %}{{settings.lnbits_admin_users[0]}}{% endraw %}
     </p>
     <br />
     <div>
       <p>Admin Users</p>
       <q-input
         filled
-        v-model="data.admin_users_add"
+        v-model="formData.admin_users_add"
         @keydown.enter="addAdminUser"
         type="text"
         label="User ID"
@@ -22,7 +21,7 @@
       <div>
         {% raw %}
         <q-chip
-          v-for="user in data.settings.lnbits_admin_users.slice(1)"
+          v-for="user in settings.lnbits_admin_users.slice(1)"
           :key="user"
           removable
           @remove="removeAdminUser(user)"
@@ -39,7 +38,7 @@
       <p>Allowed Users</p>
       <q-input
         filled
-        v-model="data.allowed_users_add"
+        v-model="formData.allowed_users_add"
         @keydown.enter="addAllowedUser"
         type="text"
         label="User ID"
@@ -50,7 +49,7 @@
       <div>
         {% raw %}
         <q-chip
-          v-for="user in data.settings.lnbits_allowed_users"
+          v-for="user in settings.lnbits_allowed_users"
           :key="user"
           removable
           @remove="removeAllowedUser(user)"
@@ -68,7 +67,7 @@
         <p>Admin Extensions</p>
         <q-select
           filled
-          v-model="data.settings.lnbits_admin_extensions"
+          v-model="formData.lnbits_admin_extensions"
           multiple
           hint="Extensions only user with admin privileges can use"
           label="Admin extensions"
@@ -79,7 +78,7 @@
         <p>Disabled Extensions</p>
         <q-select
           filled
-          v-model="data.settings.lnbits_disabled_extensions"
+          v-model="formData.lnbits_disabled_extensions"
           multiple
           hint="Disable extensions *amilk disabled by default as resource heavy"
           label="Disable extensions"

lnbits/extensions/admin/templates/admin/index.html

@@ -1,15 +1,30 @@
 {% extends "base.html" %} {% from "macros.jinja" import window_vars with context
 %} {% block page %}
 <div class="row q-col-gutter-md justify-center">
-  <div class="col q-gutter-y-md">
-    <q-btn label="Save" flat @click="updateSettings"></q-btn>
-    <q-btn label="Restart server" flat @click="restartServer"></q-btn>
-    <q-btn label="Reset to defaults" flat @click="deleteSettings"></q-btn>
+  <div class="col q-gutter-y-md q-my-md">
+    <q-btn label="Save" color="primary" @click="updateSettings">
+      <!-- <q-badge color="red" rounded floating style="padding: 6px; border-radius: 6px"/> -->
+    </q-btn>
     <q-btn
+      label="Restart server"
+      color="primary"
+      @click="restartServer"
+    ></q-btn>
+    <q-btn
+      label="Reset to defaults"
+      color="primary"
+      @click="deleteSettings"
+    ></q-btn>
+    <q-btn
+      label="Topup"
+      color="primary"
+      @click="topUpDialog.show = true"
+    ></q-btn>
+    <!-- <q-btn
       label="Download Database Backup"
       flat
       @click="downloadBackup"
-    ></q-btn>
+    ></q-btn> -->
   </div>
 </div>
 <div class="row q-col-gutter-md justify-center">
@@ -51,6 +66,39 @@
     </q-card>
   </div>
 </div>
+<q-dialog v-model="topUpDialog.show" position="top">
+  <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
+    <q-form class="q-gutter-md">
+      <p>TopUp a wallet</p>
+      <div class="row">
+        <div class="col-12">
+          <q-input
+            dense
+            type="text"
+            filled
+            v-model="wallet.id"
+            label="Wallet ID"
+            hint="Use the wallet ID to topup any wallet"
+          ></q-input>
+          <br />
+        </div>
+        <div class="col-12">
+          <q-input
+            dense
+            type="number"
+            filled
+            v-model="wallet.amount"
+            label="Topup amount"
+          ></q-input>
+        </div>
+      </div>
+      <div class="row q-mt-lg">
+        <q-btn label="Topup" color="primary" @click="topupWallet"></q-btn>
+        <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
+      </div>
+    </q-form>
+  </q-card>
+</q-dialog>
 
 {% endblock %} {% block scripts %} {{ window_vars(user) }}
 <script>
@@ -60,63 +108,67 @@
     data: function () {
       return {
         settings: {},
-        data: {},
+        formData: {},
+        //data: {},
         wallet: {},
         cancel: {},
+        topUpDialog: {
+          show: false
+        },
         tab: 'funding'
       }
     },
     created: function () {
-      this.data.settings = JSON.parse('{{ settings|tojson|safe }}')
-      this.data.balance = {{ balance|safe }}
-      console.log(this.data.settings, this.data.balance)
+      this.settings = JSON.parse('{{ settings|tojson|safe }}') //DB data
+      this.balance = +'{{ balance|safe }}'
+      this.formData = this.settings //model
+      console.log(this.formData)
     },
     methods: {
       addAdminUser() {
-        let addUser = this.data.admin_users_add
-        let admin_users = this.data.admin.admin_users
+        let addUser = this.formData.admin_users_add
+        let admin_users = this.settings.lnbits_admin_users
         if (addUser && addUser.length && !admin_users.includes(addUser)) {
           admin_users.push(addUser)
-          this.data.admin.admin_users = admin_users
-          this.data.admin_users_add = ''
+          this.settings.lnbits_admin_users = admin_users
+          this.formData.admin_users_add = ''
         }
       },
       removeAdminUser(user) {
-        let admin_users = this.data.admin.admin_users
-        this.data.admin.admin_users = admin_users.filter(u => u !== user)
+        let admin_users = this.settings.lnbits_admin_users
+        this.settings.lnbits_admin_users = admin_users.filter(
+          u => u !== user
+        )
       },
       addAllowedUser() {
-        let addUser = this.data.allowed_users_add
-        let allowed_users = this.data.admin.allowed_users
+        let addUser = this.formData.allowed_users_add
+        let allowed_users = this.settings.lnbits_allowed_users
         if (addUser && addUser.length && !allowed_users.includes(addUser)) {
           allowed_users.push(addUser)
-          this.data.admin.allowed_users = allowed_users
-          this.data.allowed_users_add = ''
+          this.settings.lnbits_allowed_users = allowed_users
+          this.formData.allowed_users_add = ''
         }
       },
       removeAllowedUser(user) {
-        let allowed_users = this.data.admin.allowed_users
-        this.data.admin.allowed_users = allowed_users.filter(u => u !== user)
+        let allowed_users = this.settings.lnbits_allowed_users
+        this.settings.lnbits_allowed_users = allowed_users.filter(u => u !== user)
       },
       addAdSpace() {
-        let adSpace = this.data.ad_space_add
-        let spaces = this.data.admin.ad_space
+        let adSpace = this.formData.ad_space_add
+        let spaces = this.settings.lnbits_ad_space
         if (adSpace.length && !spaces.includes(adSpace)) {
           spaces.push(adSpace)
-          this.data.admin.ad_space = spaces
-          this.data.ad_space_add = ''
+          this.settings.lnbits_ad_space = spaces
+          this.formData.ad_space_add = ''
         }
       },
       removeAdSpace(ad) {
-        let spaces = this.data.settings.lnbits_ad_space
-        this.data.admin.ad_space = spaces.filter(s => s !== ad)
+        let spaces = this.settings.lnbits_ad_space
+        this.settings.lnbits_ad_space = spaces.filter(s => s !== ad)
       },
       restartServer() {
         LNbits.api
-          .request(
-            'GET',
-            '/admin/api/v1/restart/?usr=' + this.g.user.id,
-          )
+          .request('GET', '/admin/api/v1/restart/?usr=' + this.g.user.id)
           .then(response => {
             this.$q.notify({
               type: 'positive',
@@ -134,7 +186,7 @@
             'POST',
             '/admin/api/v1/topup/?usr=' + this.g.user.id,
             this.wallet.id,
-            this.wallet.amount,
+            this.wallet.amount
           )
           .then(response => {
             this.$q.notify({
@@ -153,14 +205,19 @@
           })
       },
       updateSettings() {
-        const formElement = document.getElementById('settings_form');
-        const formData = new FormData(formElement);
-        const data = {};
-        formData.forEach((value, key) => (data[key] = value));
+        let data = {
+          ...this.settings,
+          ...this.formData
+        }
+        /*
+        const formElement = document.getElementById('settings_form')
+        const formData = new FormData(formElement)
+        const data = {}
+        formData.forEach((value, key) => (data[key] = value))
         // only for debugging
         for (const [key, value] of formData) {
-            console.log(`${key}: ${value}\n`);
-        }
+          console.log(`${key}: ${value}\n`)
+        }*/
         LNbits.api
           .request(
             'PUT',
@@ -177,43 +234,39 @@
           })
           .catch(function (error) {
             LNbits.utils.notifyApiError(error)
-          });
+          })
       },
       deleteSettings() {
         LNbits.api
-          .request(
-            'DELETE',
-            '/admin/api/v1/settings/?usr=' + this.g.user.id
-          )
+          .request('DELETE', '/admin/api/v1/settings/?usr=' + this.g.user.id)
           .then(response => {
             this.$q.notify({
               type: 'positive',
-              message: 'Success! Restored settings to defaults, restart required!',
+              message:
+                'Success! Restored settings to defaults, restart required!',
               icon: null
             })
           })
           .catch(function (error) {
             LNbits.utils.notifyApiError(error)
-          });
+          })
       },
       downloadBackup() {
         LNbits.api
-          .request(
-            'GET',
-            '/admin/api/v1/backup/?usr=' + this.g.user.id
-          )
+          .request('GET', '/admin/api/v1/backup/?usr=' + this.g.user.id)
           .then(response => {
             this.$q.notify({
               type: 'positive',
-              message: 'Success! Database backup request, download starts soon!',
+              message:
+                'Success! Database backup request, download starts soon!',
               icon: null
             })
           })
           .catch(function (error) {
             LNbits.utils.notifyApiError(error)
-          });
+          })
       }
-    }
+    },
   })
 </script>
 {% endblock %}