First set of code for new layout based on AdminLTE 3.0

frontend/build.sh

@@ -0,0 +1,20 @@
+#!/usr/bin/env bash
+
+# build translations.
+php /sites/tools/firefly-iii-tools/cli.php ff3:json-translations --v2
+
+# remove old stuff
+rm -rf public/
+rm -rf ../public/fonts
+rm -rf ../public/v2/js
+rm -rf ../public/v2/css
+
+# build new stuff
+npm run prod
+
+# move to right directory
+mv public/js ../public/v2
+mv public/css ../public/v2
+
+# also copy fonts
+cp -r fonts ../public

frontend/mix-manifest.json

@@ -0,0 +1,9 @@
+{
+    "/public/js/dashboard.js": "/public/js/dashboard.js",
+    "/public/css/app.css": "/public/css/app.css",
+    "/public/js/dashboard.js.map": "/public/js/dashboard.js.map",
+    "/public/js/manifest.js": "/public/js/manifest.js",
+    "/public/js/manifest.js.map": "/public/js/manifest.js.map",
+    "/public/js/vendor.js": "/public/js/vendor.js",
+    "/public/js/vendor.js.map": "/public/js/vendor.js.map"
+}

frontend/package.json

@@ -0,0 +1,35 @@
+{
+    "private": true,
+    "scripts": {
+        "dev": "npm run development",
+        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "watch": "npm run development -- --watch",
+        "watch-poll": "npm run watch -- --watch-poll",
+        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "prod": "npm run production",
+        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
+    },
+    "devDependencies": {
+        "axios": "^0.19",
+        "cross-env": "^7.0",
+        "laravel-mix": "^5.0.1",
+        "laravel-mix-bundle-analyzer": "^1.0.5",
+        "lodash": "^4.17.13",
+        "resolve-url-loader": "^3.1.0",
+        "sass": "^1.15.2",
+        "sass-loader": "^8.0.0",
+        "vue": "^2.6",
+        "vue-i18n": "^8.15",
+        "vue-template-compiler": "^2.6.11"
+    },
+    "dependencies": {
+        "@fortawesome/fontawesome-free": "^5.13.0",
+        "@popperjs/core": "^2.4.2",
+        "bootstrap": "^4.5.0",
+        "icheck-bootstrap": "^3.0.1",
+        "jquery": "^3.5.1",
+        "jquery-ui": "^1.12.1",
+        "overlayscrollbars": "^1.12.0",
+        "popper.js": "^1.16.1"
+    }
+}

frontend/src/app.scss

@@ -0,0 +1,14 @@
+// Fonts
+@import '~@fortawesome/fontawesome-free/css/all.css';
+// OverlayScrollbars
+@import '~overlayscrollbars/css/OverlayScrollbars.css';
+// iCheck
+@import '~icheck-bootstrap/icheck-bootstrap.css';
+// AdminLTE
+@import 'dist/css/adminlte.css';
+
+
+
+// Bootstrap
+// Already imported by AdminLTE
+//@import '~bootstrap/scss/bootstrap';

frontend/src/bootstrap.js

@@ -0,0 +1,34 @@
+// imports
+import Vue from 'vue';
+import VueI18n from 'vue-i18n'
+import * as uiv from 'uiv';
+
+// export jquery for others scripts to use
+window.$ = window.jQuery = require('jquery');
+
+// axios
+window.axios = require('axios');
+window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+
+// CSRF
+let token = document.head.querySelector('meta[name="csrf-token"]');
+
+if (token) {
+   window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
+} else {
+   console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
+}
+
+// admin stuff
+require('jquery-ui');
+require('bootstrap');
+
+require('./dist/js/adminlte');
+require('overlayscrollbars');
+
+// vue
+window.vuei18n = VueI18n;
+window.uiv =uiv;
+Vue.use(vuei18n);
+Vue.use(uiv);
+window.Vue = Vue;

frontend/src/components/dashboard/Dashboard.vue

@@ -0,0 +1,56 @@
+<!--
+  - ExampleComponent.vue
+  - Copyright (c) 2019 james@firefly-iii.org
+  -
+  - This file is part of Firefly III (https://github.com/firefly-iii).
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<template>
+    <top-boxes />
+
+
+    <div class="container">
+        <div class="row">
+            <div class="col-md-8 col-md-offset-2">
+                <div class="panel panel-default">
+                    <div class="panel-heading">Example Component</div>
+
+                    <div class="panel-body">
+                        <div class="dropdown">
+                            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                Dropdown button
+                            </button>
+                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                                <a class="dropdown-item" href="#">Action</a>
+                                <a class="dropdown-item" href="#">Another action</a>
+                                <a class="dropdown-item" href="#">Something else here</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "Dashboard",
+        mounted() {
+            console.log('Dashboard mounted.')
+        }
+    }
+</script>

frontend/src/components/dashboard/TopBoxes.vue

@@ -0,0 +1,73 @@
+<template>
+    <div class="row">
+        <div class="col-12 col-sm-6 col-md-3">
+            <div class="info-box">
+                <span class="info-box-icon bg-info elevation-1"><i class="fas fa-cog"></i></span>
+
+                <div class="info-box-content">
+                    <span class="info-box-text">{{ $t("firefly.balance") }}</span>
+                    <span class="info-box-number">
+                  xxxxxxx
+                  <small>xx</small>
+                </span>
+                </div>
+                <!-- /.info-box-content -->
+            </div>
+            <!-- /.info-box -->
+        </div>
+        <!-- /.col -->
+        <div class="col-12 col-sm-6 col-md-3">
+            <div class="info-box mb-3">
+                <span class="info-box-icon bg-danger elevation-1"><i class="fas fa-thumbs-up"></i></span>
+
+                <div class="info-box-content">
+                    <span class="info-box-text">{{ $t('firefly.bills_to_pay') }}</span>
+                    <span class="info-box-number">xxxxxx</span>
+                </div>
+                <!-- /.info-box-content -->
+            </div>
+            <!-- /.info-box -->
+        </div>
+        <!-- /.col -->
+
+        <!-- fix for small devices only -->
+        <div class="clearfix hidden-md-up"></div>
+
+        <div class="col-12 col-sm-6 col-md-3">
+            <div class="info-box mb-3">
+                <span class="info-box-icon bg-success elevation-1"><i class="fas fa-shopping-cart"></i></span>
+
+                <div class="info-box-content">
+                    <span class="info-box-text">{{ $t('firefly.left_to_spend') }}</span>
+                    <span class="info-box-number">xxxxx</span>
+                </div>
+                <!-- /.info-box-content -->
+            </div>
+            <!-- /.info-box -->
+        </div>
+        <!-- /.col -->
+        <div class="col-12 col-sm-6 col-md-3">
+            <div class="info-box mb-3">
+                <span class="info-box-icon bg-warning elevation-1"><i class="fas fa-users"></i></span>
+
+                <div class="info-box-content">
+                    <span class="info-box-text">{{ $t('firefly.net_worth') }}</span>
+                    <span class="info-box-number">xxxxx</span>
+                </div>
+                <!-- /.info-box-content -->
+            </div>
+            <!-- /.info-box -->
+        </div>
+        <!-- /.col -->
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "TopBoxes"
+    }
+</script>
+
+<style scoped>
+
+</style>

frontend/src/i18n.js

@@ -0,0 +1,27 @@
+// Create VueI18n instance with options
+module.exports = new vuei18n({
+    locale: document.documentElement.lang, // set locale
+    fallbackLocale: 'en',
+    messages: {
+        'cs': require('./locales/cs.json'),
+        'de': require('./locales/de.json'),
+        'en': require('./locales/en.json'),
+        'es': require('./locales/es.json'),
+        'el': require('./locales/el.json'),
+        'fr': require('./locales/fr.json'),
+        'hu': require('./locales/hu.json'),
+        'id': require('./locales/id.json'),
+        'it': require('./locales/it.json'),
+        'nl': require('./locales/nl.json'),
+        'nb': require('./locales/nb.json'),
+        'pl': require('./locales/pl.json'),
+        'fi': require('./locales/fi.json'),
+        'pt-br': require('./locales/pt-br.json'),
+        'ro': require('./locales/ro.json'),
+        'ru': require('./locales/ru.json'),
+        'zh-tw': require('./locales/zh-tw.json'),
+        'zh-cn': require('./locales/zh-cn.json'),
+        'sv': require('./locales/sv.json'),
+        'vi': require('./locales/vi.json'),
+    }
+});

frontend/src/locales/cs.json

@@ -0,0 +1,11 @@
+{
+    "firefly": {
+        "balance": "Z\u016fstatek",
+        "bills_to_pay": "Faktury k zaplacen\u00ed",
+        "left_to_spend": "Zb\u00fdv\u00e1 k utracen\u00ed",
+        "net_worth": "\u010cist\u00e9 jm\u011bn\u00ed"
+    },
+    "config": {
+        "html_language": "cs"
+    }
+}

frontend/src/locales/de.json

@@ -0,0 +1,11 @@
+{
+    "firefly": {
+        "balance": "Kontostand",
+        "bills_to_pay": "Unbezahlte Rechnungen",
+        "left_to_spend": "Verbleibend zum Ausgeben",
+        "net_worth": "Eigenkapital"
+    },
+    "config": {
+        "html_language": "de"
+    }
+}

frontend/src/locales/el.json

@@ -0,0 +1,11 @@
+{
+    "firefly": {
+        "balance": "\u0399\u03c3\u03bf\u03b6\u03cd\u03b3\u03b9\u03bf",
+        "bills_to_pay": "\u03a0\u03ac\u03b3\u03b9\u03b1 \u03ad\u03be\u03bf\u03b4\u03b1 \u03c0\u03c1\u03bf\u03c2 \u03c0\u03bb\u03b7\u03c1\u03c9\u03bc\u03ae",
+        "left_to_spend": "\u0394\u03b9\u03b1\u03b8\u03ad\u03c3\u03b9\u03bc\u03b1 \u03c0\u03c1\u03bf\u03cb\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03bc\u03ce\u03bd",
+        "net_worth": "\u039a\u03b1\u03b8\u03b1\u03c1\u03ae \u03b1\u03be\u03af\u03b1"
+    },
+    "config": {
+        "html_language": "el"
+    }
+}

frontend/src/locales/en.json

@@ -0,0 +1,11 @@
+{
+    "firefly": {
+        "balance": "Balance",
+        "bills_to_pay": "Bills to pay",
+        "left_to_spend": "Left to spend",
+        "net_worth": "Net worth"
+    },
+    "config": {
+        "html_language": "en"
+    }
+}

frontend/src/locales/es.json

@@ -0,0 +1,11 @@
+{
+    "firefly": {
+        "balance": "Balance",
+        "bills_to_pay": "Facturas por pagar",
+        "left_to_spend": "Disponible para gastar",
+        "net_worth": "Valor Neto"
+    },
+    "config": {
+        "html_language": "es"
+    }
+}

frontend/src/locales/fi.json

@@ -0,0 +1,11 @@
+{
+    "firefly": {
+        "balance": "Saldo",
+        "bills_to_pay": "Laskuja maksettavana",
+        "left_to_spend": "K\u00e4ytett\u00e4viss\u00e4",
+        "net_worth": "Varallisuus"
+    },
+    "config": {
+        "html_language": "fi"
+    }
+}

frontend/src/locales/fr.json

@@ -0,0 +1,11 @@
+{
+    "firefly": {
+        "balance": "Solde",
+        "bills_to_pay": "Factures \u00e0 payer",
+        "left_to_spend": "Reste \u00e0 d\u00e9penser",
+        "net_worth": "Avoir net"
+    },
+    "config": {
+        "html_language": "fr"
+    }
+}

frontend/src/locales/hu.json

@@ -0,0 +1,11 @@
+{
+    "firefly": {
+        "balance": "Egyenleg",
+        "bills_to_pay": "Fizetend\u0151 sz\u00e1ml\u00e1k",
+        "left_to_spend": "Elk\u00f6lthet\u0151",
+        "net_worth": "Nett\u00f3 \u00e9rt\u00e9k"
+    },
+    "config": {
+        "html_language": "hu"
+    }
+}

frontend/src/locales/id.json

@@ -0,0 +1,11 @@
+{
+    "firefly": {
+        "balance": "Keseimbangan",
+        "bills_to_pay": "Bills untuk membayar",
+        "left_to_spend": "Kiri untuk dibelanjakan",
+        "net_worth": "Nilai bersih"
+    },
+    "config": {
+        "html_language": "id"
+    }
+}

frontend/src/locales/it.json

@@ -0,0 +1,11 @@
+{
+    "firefly": {
+        "balance": "Saldo",
+        "bills_to_pay": "Bollette da pagare",
+        "left_to_spend": "Altro da spendere",
+        "net_worth": "Patrimonio"
+    },
+    "config": {
+        "html_language": "it"
+    }
+}

frontend/src/locales/nb.json

@@ -0,0 +1,11 @@
+{
+    "firefly": {
+        "balance": "Saldo",
+        "bills_to_pay": "Regninger \u00e5 betale",
+        "left_to_spend": "Igjen \u00e5 bruke",
+        "net_worth": "Formue"
+    },
+    "config": {
+        "html_language": "nb"
+    }
+}

frontend/src/locales/nl.json

@@ -0,0 +1,11 @@
+{
+    "firefly": {
+        "balance": "Saldo",
+        "bills_to_pay": "Openstaande contracten",
+        "left_to_spend": "Over om uit te geven",
+        "net_worth": "Kapitaal"
+    },
+    "config": {
+        "html_language": "nl"
+    }
+}

frontend/src/locales/pl.json

@@ -0,0 +1,11 @@
+{
+    "firefly": {
+        "balance": "Saldo",
+        "bills_to_pay": "Rachunki do zap\u0142acenia",
+        "left_to_spend": "Pozosta\u0142o do wydania",
+        "net_worth": "Warto\u015b\u0107 netto"
+    },
+    "config": {
+        "html_language": "pl"
+    }
+}

frontend/src/locales/pt-br.json

@@ -0,0 +1,11 @@
+{
+    "firefly": {
+        "balance": "Saldo",
+        "bills_to_pay": "Faturas a pagar",
+        "left_to_spend": "Restante para gastar",
+        "net_worth": "Valor L\u00edquido"
+    },
+    "config": {
+        "html_language": "pt-br"
+    }
+}

frontend/src/locales/ro.json

@@ -0,0 +1,11 @@
+{
+    "firefly": {
+        "balance": "Balant\u0103",
+        "bills_to_pay": "Facturile de plat\u0103",
+        "left_to_spend": "Ramas de cheltuit",
+        "net_worth": "Valoarea net\u0103"
+    },
+    "config": {
+        "html_language": "ro"
+    }
+}

frontend/src/locales/ru.json

@@ -0,0 +1,11 @@
+{
+    "firefly": {
+        "balance": "\u0411a\u043ba\u043dc",
+        "bills_to_pay": "\u0421\u0447\u0435\u0442\u0430 \u043a \u043e\u043f\u043b\u0430\u0442\u0435",
+        "left_to_spend": "\u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u0442\u044c",
+        "net_worth": "\u041c\u043e\u0438 \u0441\u0431\u0435\u0440\u0435\u0436\u0435\u043d\u0438\u044f"
+    },
+    "config": {
+        "html_language": "ru"
+    }
+}

frontend/src/locales/sv.json

@@ -0,0 +1,11 @@
+{
+    "firefly": {
+        "balance": "Saldo",
+        "bills_to_pay": "Notor att betala",
+        "left_to_spend": "\u00c5terst\u00e5r att spendera",
+        "net_worth": "Nettof\u00f6rm\u00f6genhet"
+    },
+    "config": {
+        "html_language": "sv"
+    }
+}

frontend/src/locales/tr.json

@@ -0,0 +1,11 @@
+{
+    "firefly": {
+        "balance": "Denge",
+        "bills_to_pay": "\u00d6denecek fatura",
+        "left_to_spend": "Harcama i\u00e7in b\u0131rak\u0131ld\u0131",
+        "net_worth": "Net de\u011fer"
+    },
+    "config": {
+        "html_language": "tr"
+    }
+}

frontend/src/locales/vi.json

@@ -0,0 +1,11 @@
+{
+    "firefly": {
+        "balance": "Ti\u1ec1n c\u00f2n l\u1ea1i",
+        "bills_to_pay": "H\u00f3a \u0111\u01a1n ph\u1ea3i tr\u1ea3",
+        "left_to_spend": "C\u00f2n l\u1ea1i \u0111\u1ec3 chi ti\u00eau",
+        "net_worth": "T\u00e0i s\u1ea3n th\u1ef1c"
+    },
+    "config": {
+        "html_language": "vi"
+    }
+}

frontend/src/locales/zh-cn.json

@@ -0,0 +1,11 @@
+{
+    "firefly": {
+        "balance": "\u4f59\u989d",
+        "bills_to_pay": "\u5f85\u4ed8\u5e10\u5355",
+        "left_to_spend": "\u5269\u4f59\u53ef\u82b1\u8d39",
+        "net_worth": "\u51c0\u503c"
+    },
+    "config": {
+        "html_language": "zh-cn"
+    }
+}

frontend/src/locales/zh-tw.json

@@ -0,0 +1,11 @@
+{
+    "firefly": {
+        "balance": "\u9918\u984d",
+        "bills_to_pay": "\u5f85\u4ed8\u5e33\u55ae",
+        "left_to_spend": "\u5269\u9918\u53ef\u82b1\u8cbb",
+        "net_worth": "\u6de8\u503c"
+    },
+    "config": {
+        "html_language": "zh-tw"
+    }
+}

frontend/src/pages/dashboard.js

@@ -0,0 +1,26 @@
+import Dashboard from "../components/dashboard/Dashboard";
+import TopBoxes from "../components/dashboard/TopBoxes";
+
+/**
+ * First we will load Axios via bootstrap.js
+ * jquery and bootstrap-sass preloaded in app.js
+ * vue, uiv and vuei18n are in app_vue.js
+ */
+
+require('../bootstrap');
+
+// components as an example
+Vue.component('dashboard', Dashboard);
+Vue.component('top-boxes', TopBoxes);
+
+// i18n
+let i18n = require('../i18n');
+
+let props = {};
+new Vue({
+            i18n,
+            el: "#dashboard",
+            render: (createElement) => {
+                return createElement(Dashboard, { props: props });
+            },
+        });

frontend/webpack.mix.js

@@ -0,0 +1,44 @@
+const mix = require('laravel-mix');
+require('laravel-mix-bundle-analyzer');
+
+
+// production
+mix.webpackConfig({
+                      resolve: {
+                          alias: {
+                              'vue$': 'vue/dist/vue.runtime.common.js'
+                          }
+                      }
+                  });
+
+mix
+    // AUTO LOAD
+    // .autoload({
+    //              jquery: ['$', 'window.jQuery','jQuery']
+    //          })
+
+    // MIX IN CLASSIC SCRIPT
+    // .babel([
+    //              '../resources/assets/js/v2/classic/adminlte.js',
+    //          ], 'public/v2/js/classic.js')
+
+    // MIX IN CLASSIC SCRIPT
+    // .scripts([
+    //              '../resources/assets/js/v2/classic/adminlte.js',
+    //          ], 'public/v2/js/classic.js')
+
+
+    // COPY SCRIPT
+    //.copy('../resources/assets/js/v2/classic/adminlte.js', 'public/v2/js/classic.js')
+
+    // dashboard component (frontpage):
+    .js('src/pages/dashboard.js', 'public/js')
+
+
+
+    .extract().sourceMaps()
+    .sass('src/app.scss', 'public/css');
+
+if (!mix.inProduction()) {
+    mix.bundleAnalyzer();
+}