From 380cd461b935c5042262b62a79173e28ce8d1fd5 Mon Sep 17 00:00:00 2001 From: Michael Geers Date: Sun, 2 May 2021 13:37:57 +0200 Subject: [PATCH] Migrate to Bootstrap 5, improve notifications, add supporter confetti (#954) --- .storybook/main.js | 2 +- .storybook/preview-head.html | 2 + assets/index.html | 1 - assets/js/app.js | 47 +- assets/js/components/Footer.stories.js | 10 + assets/js/components/Footer.vue | 33 +- assets/js/components/Loadpoint.vue | 6 +- assets/js/components/LoadpointDetails.vue | 6 +- assets/js/components/Mode.vue | 52 +- assets/js/components/Notifications.stories.js | 32 + assets/js/components/Notifications.vue | 91 + assets/js/components/Site.vue | 4 +- assets/js/components/Sponsor.stories.js | 23 + assets/js/components/Sponsor.vue | 83 + assets/js/components/ToastMessage.vue | 38 - assets/js/components/Toasts.stories.js | 22 - assets/js/components/Toasts.vue | 25 - assets/js/components/VehicleSoc.vue | 13 +- assets/js/components/VehicleSubline.vue | 4 +- assets/js/components/Version.stories.js | 2 +- assets/js/components/Version.vue | 196 +- assets/js/icons.js | 6 +- assets/js/store.js | 4 +- assets/js/views/App.vue | 63 +- dist/css/chunk-vendors.0f1ada3b.css | 6 + dist/css/chunk-vendors.52eaf30c.css | 6 - dist/css/index.307488cf.css | 1 + dist/css/index.65dbbf5e.css | 1 - dist/index.html | 4 +- dist/js/chunk-vendors.35669cb4.js | 73 - dist/js/chunk-vendors.35669cb4.js.map | 1 - dist/js/chunk-vendors.47c2aa5a.js | 24 + dist/js/chunk-vendors.47c2aa5a.js.map | 1 + dist/js/index.ab413d5d.js | 2 + dist/js/index.ab413d5d.js.map | 1 + dist/js/index.f51648a0.js | 2 - dist/js/index.f51648a0.js.map | 1 - package-lock.json | 3439 +++++++++-------- package.json | 21 +- 39 files changed, 2354 insertions(+), 1994 deletions(-) create mode 100644 assets/js/components/Notifications.stories.js create mode 100644 assets/js/components/Notifications.vue create mode 100644 assets/js/components/Sponsor.stories.js create mode 100644 assets/js/components/Sponsor.vue delete mode 100644 assets/js/components/ToastMessage.vue delete mode 100644 assets/js/components/Toasts.stories.js delete mode 100644 assets/js/components/Toasts.vue create mode 100644 dist/css/chunk-vendors.0f1ada3b.css delete mode 100644 dist/css/chunk-vendors.52eaf30c.css create mode 100644 dist/css/index.307488cf.css delete mode 100644 dist/css/index.65dbbf5e.css delete mode 100644 dist/js/chunk-vendors.35669cb4.js delete mode 100644 dist/js/chunk-vendors.35669cb4.js.map create mode 100644 dist/js/chunk-vendors.47c2aa5a.js create mode 100644 dist/js/chunk-vendors.47c2aa5a.js.map create mode 100644 dist/js/index.ab413d5d.js create mode 100644 dist/js/index.ab413d5d.js.map delete mode 100644 dist/js/index.f51648a0.js delete mode 100644 dist/js/index.f51648a0.js.map diff --git a/.storybook/main.js b/.storybook/main.js index c8b46ca1f..08826898c 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,4 +1,4 @@ module.exports = { stories: ["../assets/js/**/*.stories.mdx", "../assets/js/**/*.stories.@(js|jsx|ts|tsx)"], - addons: ["@storybook/addon-links", "@storybook/addon-essentials"], + addons: ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-postcss"], }; diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index b7f801aed..aa62527ab 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -1,2 +1,4 @@ + + diff --git a/assets/index.html b/assets/index.html index 0c56d7b64..2af672b7d 100644 --- a/assets/index.html +++ b/assets/index.html @@ -31,6 +31,5 @@
-
diff --git a/assets/js/app.js b/assets/js/app.js index 319593572..fef225429 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -1,11 +1,9 @@ import "../css/app.css"; import "bootstrap/dist/css/bootstrap.min.css"; -import "popper.js"; import "bootstrap"; import Vue from "vue"; import axios from "axios"; import App from "./views/App"; -import Toasts from "./components/Toasts"; import router from "./router"; import store from "./store"; @@ -14,29 +12,21 @@ axios.defaults.baseURL = loc.protocol + "//" + loc.hostname + (loc.port ? ":" + loc.port : "") + loc.pathname + "api"; axios.defaults.headers.post["Content-Type"] = "application/json"; -window.toasts = new Vue({ - el: "#toasts", +window.app = new Vue({ + el: "#app", + router, + data: { store, notifications: [] }, render: function (h) { - return h(Toasts, { props: { items: this.items, count: this.count } }); + return h(App, { props: { notifications: this.notifications } }); }, - data: { - items: {}, - count: 0, - }, - name: "ToastsRoot", methods: { raise: function (msg) { - let found = false; - Object.keys(this.items).forEach(function (k) { - let m = this.items[k]; - if (m.type == msg.type && m.message == msg.message) { - found = true; - } - }, this); - if (!found) { - msg.id = this.count++; - Vue.set(this.items, msg.id, msg); - } + console[msg.type](msg); + const withoutThisMsg = this.notifications.filter((m) => m.message !== msg.message); + this.notifications = [msg, ...withoutThisMsg]; + }, + clear: function () { + this.notifications = []; }, error: function (msg) { msg.type = "error"; @@ -46,22 +36,11 @@ window.toasts = new Vue({ msg.type = "warn"; this.raise(msg); }, - remove: function (msg) { - Vue.delete(this.items, msg.id); - }, }, }); -new Vue({ - el: "#app", - router, - data: { store }, - render: (h) => h(App), -}); - window.setInterval(function () { - axios.get("health").catch(function (res) { - res.message = "Server unavailable"; - window.toasts.error(res); + axios.get("health").catch(function () { + window.app.error({ message: "Server unavailable" }); }); }, 5000); diff --git a/assets/js/components/Footer.stories.js b/assets/js/components/Footer.stories.js index 250a98633..9f7d125f1 100644 --- a/assets/js/components/Footer.stories.js +++ b/assets/js/components/Footer.stories.js @@ -16,6 +16,7 @@ export const KeinUpdate = Template.bind({}); KeinUpdate.args = { version: { installed: "0.40" }, }; + export const UpdateVerfuegbar = Template.bind({}); UpdateVerfuegbar.args = { version: { @@ -25,6 +26,15 @@ UpdateVerfuegbar.args = { }, }; +export const Sponsor = Template.bind({}); +Sponsor.args = { + version: { + installed: "0.36", + available: "0.40", + }, + sponsor: "naltatis", +}; + export const Updater = Template.bind({}); Updater.args = { version: { diff --git a/assets/js/components/Footer.vue b/assets/js/components/Footer.vue index c15c59087..5ef2e004f 100644 --- a/assets/js/components/Footer.vue +++ b/assets/js/components/Footer.vue @@ -1,18 +1,10 @@