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 @@