Build frontend again, using Yarn.

frontend/src/bootstrap.js

@@ -43,9 +43,9 @@ if (token) {
 let localeToken = document.head.querySelector('meta[name="locale"]');
 
 if (localeToken) {
-    window.localeValue = localeToken.content;
+    localStorage.locale = localeToken.content;
 } else {
-    window.localeValue = 'en_US';
+    localStorage.locale = 'en_US';
 }
 
 // admin stuff

frontend/src/components/charts/DataConverter.vue

@@ -19,166 +19,167 @@
   -->
 
 <script>
-    export default {
+export default {
-        name: "DataConverter",
+  name: "DataConverter",
-        data() {
+  data() {
-            return {
+    return {
-                dataSet: null,
+      dataSet: null,
-                newDataSet: null,
+      newDataSet: null,
-            }
+      locale: localStorage.local,
-        },
-        methods: {
-            convertChart(dataSet) {
-                this.dataSet = dataSet;
-                this.newDataSet = {
-                    count: 0,
-                    labels: [],
-                    datasets: []
-                }
-                this.getLabels();
-                this.getDataSets();
-                this.newDataSet.count = this.newDataSet.datasets.length;
-                return this.newDataSet;
-            },
-
-            colorizeBarData(dataSet) {
-                this.dataSet = dataSet;
-                this.newDataSet = {
-                    count: 0,
-                    labels: [],
-                    datasets: []
-                };
-                // colors
-                let colourSet = [
-                    [53, 124, 165],
-                    [0, 141, 76], // green
-                    [219, 139, 11],
-                    [202, 25, 90], // paars rood-ish #CA195A
-                    [85, 82, 153],
-                    [66, 133, 244],
-                    [219, 68, 55], // red #DB4437
-                    [244, 180, 0],
-                    [15, 157, 88],
-                    [171, 71, 188],
-                    [0, 172, 193],
-                    [255, 112, 67],
-                    [158, 157, 36],
-                    [92, 107, 192],
-                    [240, 98, 146],
-                    [0, 121, 107],
-                    [194, 24, 91]
-                ];
-
-                let fillColors = [];
-                //let strokePointHighColors = [];
-
-
-                for (let i = 0; i < colourSet.length; i++) {
-                    fillColors.push("rgba(" + colourSet[i][0] + ", " + colourSet[i][1] + ", " + colourSet[i][2] + ", 0.5)");
-                    //strokePointHighColors.push("rgba(" + colourSet[i][0] + ", " + colourSet[i][1] + ", " + colourSet[i][2] + ", 0.9)");
-                }
-                this.newDataSet.labels = this.dataSet.labels;
-                this.newDataSet.count = this.dataSet.count;
-                for (let setKey in this.dataSet.datasets) {
-                    if (this.dataSet.datasets.hasOwnProperty(setKey)) {
-                        var dataset = this.dataSet.datasets[setKey];
-                        dataset.fill = false;
-                        dataset.backgroundColor = dataset.borderColor = fillColors[setKey];
-                        this.newDataSet.datasets.push(dataset);
-                    }
-                }
-                return this.newDataSet;
-            },
-
-            colorizeLineData(dataSet) {
-                this.dataSet = dataSet;
-                this.newDataSet = {
-                    count: 0,
-                    labels: [],
-                    datasets: []
-                };
-                // colors
-                let colourSet = [
-                    [53, 124, 165],
-                    [0, 141, 76], // green
-                    [219, 139, 11],
-                    [202, 25, 90], // paars rood-ish #CA195A
-                    [85, 82, 153],
-                    [66, 133, 244],
-                    [219, 68, 55], // red #DB4437
-                    [244, 180, 0],
-                    [15, 157, 88],
-                    [171, 71, 188],
-                    [0, 172, 193],
-                    [255, 112, 67],
-                    [158, 157, 36],
-                    [92, 107, 192],
-                    [240, 98, 146],
-                    [0, 121, 107],
-                    [194, 24, 91]
-                ];
-
-                let fillColors = [];
-                //let strokePointHighColors = [];
-
-
-                for (let i = 0; i < colourSet.length; i++) {
-                    fillColors.push("rgba(" + colourSet[i][0] + ", " + colourSet[i][1] + ", " + colourSet[i][2] + ", 0.5)");
-                    //strokePointHighColors.push("rgba(" + colourSet[i][0] + ", " + colourSet[i][1] + ", " + colourSet[i][2] + ", 0.9)");
-                }
-                this.newDataSet.labels = this.dataSet.labels;
-                this.newDataSet.count = this.dataSet.count;
-                for (let setKey in this.dataSet.datasets) {
-                    if (this.dataSet.datasets.hasOwnProperty(setKey)) {
-                        var dataset = this.dataSet.datasets[setKey];
-                        dataset.fill = false;
-                        dataset.backgroundColor = dataset.borderColor = fillColors[setKey];
-                        this.newDataSet.datasets.push(dataset);
-                    }
-                }
-                return this.newDataSet;
-            },
-            convertLabelsToDate(dataSet) {
-                for (let labelKey in dataSet.labels) {
-                    if (dataSet.labels.hasOwnProperty(labelKey)) {
-                        const unixTimeZero = Date.parse(dataSet.labels[labelKey]);
-                        dataSet.labels[labelKey] = new Intl.DateTimeFormat(window.localeValue).format(unixTimeZero);
-                    }
-                }
-                return dataSet;
-            },
-            getLabels() {
-                let firstSet = this.dataSet[0];
-                if (typeof firstSet !== 'undefined') {
-                    for (const entryLabel in firstSet.entries) {
-                        if (firstSet.entries.hasOwnProperty(entryLabel)) {
-                            this.newDataSet.labels.push(entryLabel);
-                        }
-                    }
-                }
-            },
-            getDataSets() {
-                for (const setKey in this.dataSet) {
-                    if (this.dataSet.hasOwnProperty(setKey)) {
-                        let newSet = {};
-                        let oldSet = this.dataSet[setKey];
-                        if (typeof oldSet !== 'undefined') {
-                            newSet.label = oldSet.label;
-                            newSet.type = oldSet.type;
-                            newSet.currency_symbol = oldSet.currency_symbol;
-                            newSet.currency_code = oldSet.currency_code;
-                            newSet.yAxisID = oldSet.yAxisID;
-                            newSet.data = [];
-                            for (const entryLabel in oldSet.entries) {
-                                if (oldSet.entries.hasOwnProperty(entryLabel)) {
-                                    newSet.data.push(oldSet.entries[entryLabel]);
-                                }
-                            }
-                            this.newDataSet.datasets.push(newSet);
-                        }
-                    }
-                }
-            }
-        }
     }
+  },
+  methods: {
+    convertChart(dataSet) {
+      this.dataSet = dataSet;
+      this.newDataSet = {
+        count: 0,
+        labels: [],
+        datasets: []
+      }
+      this.getLabels();
+      this.getDataSets();
+      this.newDataSet.count = this.newDataSet.datasets.length;
+      return this.newDataSet;
+    },
+
+    colorizeBarData(dataSet) {
+      this.dataSet = dataSet;
+      this.newDataSet = {
+        count: 0,
+        labels: [],
+        datasets: []
+      };
+      // colors
+      let colourSet = [
+        [53, 124, 165],
+        [0, 141, 76], // green
+        [219, 139, 11],
+        [202, 25, 90], // paars rood-ish #CA195A
+        [85, 82, 153],
+        [66, 133, 244],
+        [219, 68, 55], // red #DB4437
+        [244, 180, 0],
+        [15, 157, 88],
+        [171, 71, 188],
+        [0, 172, 193],
+        [255, 112, 67],
+        [158, 157, 36],
+        [92, 107, 192],
+        [240, 98, 146],
+        [0, 121, 107],
+        [194, 24, 91]
+      ];
+
+      let fillColors = [];
+      //let strokePointHighColors = [];
+
+
+      for (let i = 0; i < colourSet.length; i++) {
+        fillColors.push("rgba(" + colourSet[i][0] + ", " + colourSet[i][1] + ", " + colourSet[i][2] + ", 0.5)");
+        //strokePointHighColors.push("rgba(" + colourSet[i][0] + ", " + colourSet[i][1] + ", " + colourSet[i][2] + ", 0.9)");
+      }
+      this.newDataSet.labels = this.dataSet.labels;
+      this.newDataSet.count = this.dataSet.count;
+      for (let setKey in this.dataSet.datasets) {
+        if (this.dataSet.datasets.hasOwnProperty(setKey)) {
+          var dataset = this.dataSet.datasets[setKey];
+          dataset.fill = false;
+          dataset.backgroundColor = dataset.borderColor = fillColors[setKey];
+          this.newDataSet.datasets.push(dataset);
+        }
+      }
+      return this.newDataSet;
+    },
+
+    colorizeLineData(dataSet) {
+      this.dataSet = dataSet;
+      this.newDataSet = {
+        count: 0,
+        labels: [],
+        datasets: []
+      };
+      // colors
+      let colourSet = [
+        [53, 124, 165],
+        [0, 141, 76], // green
+        [219, 139, 11],
+        [202, 25, 90], // paars rood-ish #CA195A
+        [85, 82, 153],
+        [66, 133, 244],
+        [219, 68, 55], // red #DB4437
+        [244, 180, 0],
+        [15, 157, 88],
+        [171, 71, 188],
+        [0, 172, 193],
+        [255, 112, 67],
+        [158, 157, 36],
+        [92, 107, 192],
+        [240, 98, 146],
+        [0, 121, 107],
+        [194, 24, 91]
+      ];
+
+      let fillColors = [];
+      //let strokePointHighColors = [];
+
+
+      for (let i = 0; i < colourSet.length; i++) {
+        fillColors.push("rgba(" + colourSet[i][0] + ", " + colourSet[i][1] + ", " + colourSet[i][2] + ", 0.5)");
+        //strokePointHighColors.push("rgba(" + colourSet[i][0] + ", " + colourSet[i][1] + ", " + colourSet[i][2] + ", 0.9)");
+      }
+      this.newDataSet.labels = this.dataSet.labels;
+      this.newDataSet.count = this.dataSet.count;
+      for (let setKey in this.dataSet.datasets) {
+        if (this.dataSet.datasets.hasOwnProperty(setKey)) {
+          var dataset = this.dataSet.datasets[setKey];
+          dataset.fill = false;
+          dataset.backgroundColor = dataset.borderColor = fillColors[setKey];
+          this.newDataSet.datasets.push(dataset);
+        }
+      }
+      return this.newDataSet;
+    },
+    convertLabelsToDate(dataSet) {
+      for (let labelKey in dataSet.labels) {
+        if (dataSet.labels.hasOwnProperty(labelKey)) {
+          const unixTimeZero = Date.parse(dataSet.labels[labelKey]);
+          dataSet.labels[labelKey] = new Intl.DateTimeFormat(this.locale).format(unixTimeZero);
+        }
+      }
+      return dataSet;
+    },
+    getLabels() {
+      let firstSet = this.dataSet[0];
+      if (typeof firstSet !== 'undefined') {
+        for (const entryLabel in firstSet.entries) {
+          if (firstSet.entries.hasOwnProperty(entryLabel)) {
+            this.newDataSet.labels.push(entryLabel);
+          }
+        }
+      }
+    },
+    getDataSets() {
+      for (const setKey in this.dataSet) {
+        if (this.dataSet.hasOwnProperty(setKey)) {
+          let newSet = {};
+          let oldSet = this.dataSet[setKey];
+          if (typeof oldSet !== 'undefined') {
+            newSet.label = oldSet.label;
+            newSet.type = oldSet.type;
+            newSet.currency_symbol = oldSet.currency_symbol;
+            newSet.currency_code = oldSet.currency_code;
+            newSet.yAxisID = oldSet.yAxisID;
+            newSet.data = [];
+            for (const entryLabel in oldSet.entries) {
+              if (oldSet.entries.hasOwnProperty(entryLabel)) {
+                newSet.data.push(oldSet.entries[entryLabel]);
+              }
+            }
+            this.newDataSet.datasets.push(newSet);
+          }
+        }
+      }
+    }
+  }
+}
 </script>

frontend/src/components/charts/DefaultBarOptions.vue

@@ -83,7 +83,7 @@
                                 callback: function (tickValue) {
                                     "use strict";
                                     let currencyCode = this.chart.data.datasets[0] ? this.chart.data.datasets[0].currency_code : 'EUR';
-                                    return new Intl.NumberFormat(window.localeValue, {style: 'currency', currency: currencyCode}).format(tickValue);
+                                    return new Intl.NumberFormat(localStorage.locale, {style: 'currency', currency: currencyCode}).format(tickValue);
                                 },
 
                             }
@@ -95,7 +95,7 @@
                             label: function (tooltipItem, data) {
                                 "use strict";
                                 let currencyCode = data.datasets[tooltipItem.datasetIndex] ? data.datasets[tooltipItem.datasetIndex].currency_code : 'EUR';
-                                let nrString = new Intl.NumberFormat(window.localeValue, {
+                                let nrString = new Intl.NumberFormat(localStorage.locale, {
                                     style: 'currency',
                                     currency: currencyCode
                                 }).format(tooltipItem.yLabel);

frontend/src/components/charts/DefaultLineOptions.vue

@@ -106,7 +106,7 @@ export default {
                   // date format
                   let dateObj = new Date(value);
                   let options = { year: 'numeric', month: 'long', day: 'numeric' };
-                  let str = new Intl.DateTimeFormat(window.localeValue, options).format(dateObj);
+                  let str = new Intl.DateTimeFormat(localStorage.locale, options).format(dateObj);
                   //console.log();
                   //return self.formatLabel(value, 20);
                   return self.formatLabel(str, 20);
@@ -120,7 +120,7 @@ export default {
               callback: function (tickValue) {
                 "use strict";
                 let currencyCode = this.chart.data.datasets[0].currency_code ? this.chart.data.datasets[0].currency_code : 'EUR';
-                return new Intl.NumberFormat(window.localeValue, {style: 'currency', currency: currencyCode}).format(tickValue);
+                return new Intl.NumberFormat(localStorage.locale, {style: 'currency', currency: currencyCode}).format(tickValue);
               },
               beginAtZero: true
             }
@@ -134,7 +134,7 @@ export default {
               "use strict";
               let currencyCode = data.datasets[tooltipItem.datasetIndex].currency_code ? data.datasets[tooltipItem.datasetIndex].currency_code : 'EUR';
               let nrString =
-                  new Intl.NumberFormat(window.localeValue, {style: 'currency', currency: currencyCode}).format(tooltipItem.yLabel)
+                  new Intl.NumberFormat(localStorage.locale, {style: 'currency', currency: currencyCode}).format(tooltipItem.yLabel)
 
               return data.datasets[tooltipItem.datasetIndex].label + ': ' + nrString;
             }

frontend/src/components/dashboard/MainAccountList.vue

@@ -19,72 +19,72 @@
   -->
 
 <template>
-    <div class="row">
+  <div class="row">
-        <div v-bind:class="{ 'col-lg-12': 1 === accounts.length, 'col-lg-6': 2 === accounts.length, 'col-lg-4': accounts.length > 2 }"
+    <div v-bind:class="{ 'col-lg-12': 1 === accounts.length, 'col-lg-6': 2 === accounts.length, 'col-lg-4': accounts.length > 2 }"
-             v-for="account in accounts">
+         v-for="account in accounts">
-            <div class="card">
+      <div class="card">
-                <div class="card-header">
+        <div class="card-header">
-                    <h3 class="card-title"><a :href="account.uri">{{ account.title }}</a></h3>
+          <h3 class="card-title"><a :href="account.uri">{{ account.title }}</a></h3>
-                </div>
-                <div class="card-body table-responsive p-0">
-                    <transaction-list-large :transactions="account.transactions" v-if="1===accounts.length" :account_id="account.id" />
-                    <transaction-list-medium :transactions="account.transactions" v-if="2===accounts.length" :account_id="account.id" />
-                    <transaction-list-small :transactions="account.transactions" v-if="accounts.length > 2" :account_id="account.id" />
-                </div>
-            </div>
         </div>
+        <div class="card-body table-responsive p-0">
+          <transaction-list-large :transactions="account.transactions" v-if="1===accounts.length" :account_id="account.id"/>
+          <transaction-list-medium :transactions="account.transactions" v-if="2===accounts.length" :account_id="account.id"/>
+          <transaction-list-small :transactions="account.transactions" v-if="accounts.length > 2" :account_id="account.id"/>
+        </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
-    export default {
+export default {
-        name: "MainAccountList",
+  name: "MainAccountList",
-        data() {
+  data() {
-            return {
+    return {
-                accounts: [],
+      accounts: [],
-            }
-        },
-        mounted() {
-            axios.get('./api/v1/preferences/frontpageAccounts')
-                .then(response => {
-                          this.loadAccounts(response);
-                      }
-                );
-        },
-        methods:
-            {
-                loadAccounts(response) {
-                    let accountIds = response.data.data.attributes.data;
-                    for (let key in accountIds) {
-                        if (accountIds.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294) {
-                            this.accounts.push({
-                                                   id: accountIds[key],
-                                                   title: '',
-                                                   uri: '',
-                                                   transactions: []
-                                               });
-                            this.loadSingleAccount(key, accountIds[key]);
-                        }
-                    }
-                },
-                loadSingleAccount(key, accountId) {
-                    axios.get('./api/v1/accounts/' + accountId)
-                        .then(response => {
-                                  this.accounts[key].title = response.data.data.attributes.name;
-                                  this.accounts[key].uri = './accounts/show/' + response.data.data.id;
-                                  this.loadTransactions(key, accountId);
-                              }
-                        );
-                },
-                loadTransactions(key, accountId) {
-                    axios.get('./api/v1/accounts/' + accountId + '/transactions?page=1&limit=10')
-                        .then(response => {
-                                  this.accounts[key].transactions = response.data.data;
-                              }
-                        );
-                },
-            }
     }
+  },
+  mounted() {
+    axios.get('./api/v1/preferences/frontpageAccounts')
+        .then(response => {
+                this.loadAccounts(response);
+              }
+        );
+  },
+  methods:
+      {
+        loadAccounts(response) {
+          let accountIds = response.data.data.attributes.data;
+          for (let key in accountIds) {
+            if (accountIds.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294) {
+              this.accounts.push({
+                                   id: accountIds[key],
+                                   title: '',
+                                   uri: '',
+                                   transactions: []
+                                 });
+              this.loadSingleAccount(key, accountIds[key]);
+            }
+          }
+        },
+        loadSingleAccount(key, accountId) {
+          axios.get('./api/v1/accounts/' + accountId)
+              .then(response => {
+                      this.accounts[key].title = response.data.data.attributes.name;
+                      this.accounts[key].uri = './accounts/show/' + response.data.data.id;
+                      this.loadTransactions(key, accountId);
+                    }
+              );
+        },
+        loadTransactions(key, accountId) {
+          axios.get('./api/v1/accounts/' + accountId + '/transactions?page=1&limit=10')
+              .then(response => {
+                      this.accounts[key].transactions = response.data.data;
+                    }
+              );
+        },
+      }
+}
 </script>
 
 <style scoped>

frontend/src/components/transactions/TransactionListSmall.vue

@@ -19,61 +19,71 @@
   -->
 
 <template>
-    <table class="table table-striped table-sm">
+  <table class="table table-striped table-sm">
-        <caption style="display:none;">{{ $t('firefly.transaction_table_description') }}</caption>
+    <caption style="display:none;">{{ $t('firefly.transaction_table_description') }}</caption>
-        <thead>
+    <thead>
-        <tr>
+    <tr>
-            <th scope="col" class="text-left">{{ $t('firefly.description') }}</th>
+      <th scope="col" class="text-left">{{ $t('firefly.description') }}</th>
-            <th scope="col" class="text-right">{{ $t('firefly.amount') }}</th>
+      <th scope="col" class="text-right">{{ $t('firefly.amount') }}</th>
-        </tr>
+    </tr>
-        </thead>
+    </thead>
-        <tbody>
+    <tbody>
-        <tr v-for="transaction in this.transactions">
+    <tr v-for="transaction in this.transactions">
-            <td>
+      <td>
-                <a :href="'transactions/show/' + transaction.id " :title="transaction.date">
+        <a :href="'transactions/show/' + transaction.id " :title="new Intl.DateTimeFormat(locale, { year: 'numeric', month: 'long', day: 'numeric' }).format(new Date(transaction.attributes.transactions[0].date))">
-                    <span v-if="transaction.attributes.transactions.length > 1">{{ transaction.attributes.group_title }}</span>
+          <span v-if="transaction.attributes.transactions.length > 1">{{ transaction.attributes.group_title }}</span>
-                    <span v-if="1===transaction.attributes.transactions.length">{{ transaction.attributes.transactions[0].description }}</span>
+          <span v-if="1===transaction.attributes.transactions.length">{{ transaction.attributes.transactions[0].description }}</span>
-                </a>
+        </a>
-            </td>
+      </td>
-            <td style="text-align:right;">
+      <td style="text-align:right;">
                 <span v-for="tr in transaction.attributes.transactions">
                      <span v-if="'withdrawal' === tr.type" class="text-danger">
-                        {{ Intl.NumberFormat('en-US', {style: 'currency', currency: tr.currency_code}).format(tr.amount * -1)}}<br>
+                        {{ Intl.NumberFormat(locale, {style: 'currency', currency: tr.currency_code}).format(tr.amount * -1) }}<br>
                      </span>
                     <span v-if="'deposit' === tr.type" class="text-success">
-                        {{ Intl.NumberFormat('en-US', {style: 'currency', currency: tr.currency_code}).format(tr.amount)}}<br>
+                        {{ Intl.NumberFormat(locale, {style: 'currency', currency: tr.currency_code}).format(tr.amount) }}<br>
                      </span>
                     <span v-if="'transfer' === tr.type && tr.source_id === account_id" class="text-info">
-                        {{ Intl.NumberFormat('en-US', {style: 'currency', currency: tr.currency_code}).format(tr.amount * -1)}}<br>
+                        {{ Intl.NumberFormat(locale, {style: 'currency', currency: tr.currency_code}).format(tr.amount * -1) }}<br>
                     </span>
                     <span v-if="'transfer' === tr.type && tr.destination_id === account_id" class="text-info">
-                        {{ Intl.NumberFormat('en-US', {style: 'currency', currency: tr.currency_code}).format(tr.amount)}}<br>
+                        {{ Intl.NumberFormat(locale, {style: 'currency', currency: tr.currency_code}).format(tr.amount) }}<br>
                     </span>
                 </span>
-            </td>
+      </td>
-        </tr>
+    </tr>
-        </tbody>
+    </tbody>
-    </table>
+  </table>
 </template>
 
 <script>
-    export default {
+export default {
-        name: "TransactionListSmall",
+  name: "TransactionListSmall",
-        props: {
+  data() {
-            transactions: {
+    return {
-                type: Array,
+      locale: 'en-US'
-                default: function () {
-                    return [];
-                }
-            },
-            account_id: {
-                type: Number,
-                default: function() {
-                    return 0;
-                }
-            },
-        }
     }
+  },
+  mounted() {
+    this.locale = localStorage.locale ?? 'en-US';
+  },
+  methods: {
+  },
+  props: {
+    transactions: {
+      type: Array,
+      default: function () {
+        return [];
+      }
+    },
+    account_id: {
+      type: Number,
+      default: function () {
+        return 0;
+      }
+    },
+  }
+}
 </script>
 
 <style scoped>