Introduce new UI design; upgrade to Vue 3 tech stack

.eslintrc.js

@@ -6,9 +6,10 @@ module.exports = {
   },
   extends: [
     "eslint:recommended",
-    "plugin:vue/recommended",
+    "plugin:vue/vue3-recommended",
     "plugin:prettier/recommended",
     "prettier",
+    "plugin:storybook/recommended",
   ],
   rules: {
     "vue/require-default-prop": "off",

.github/workflows/default.yml

@@ -72,6 +72,11 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
+      - name: Set up Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: "16"
+
       - name: Cache NPM modules
         uses: actions/cache@v2
         with:

.gitignore

@@ -24,3 +24,4 @@ ca-cert.srl
 server-key.pem
 ca-key.pem
 cmd/wip
+fly.toml

.storybook/main.js

@@ -1,4 +1,23 @@
+const { loadConfigFromFile } = require("vite");
+const path = require("path");
+
 module.exports = {
   stories: ["../assets/js/**/*.stories.mdx", "../assets/js/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-postcss"],
+  framework: "@storybook/vue3",
+  core: {
+    builder: "storybook-builder-vite",
+  },
+  staticDirs: ["../assets"],
+  async viteFinal(config, b) {
+    const { config: userConfig } = await loadConfigFromFile(
+      path.resolve(__dirname, "../vite.config.ts")
+    );
+    const vuePlugin = userConfig.plugins.find((p) => p.name === "vite:vue");
+
+    const vuePluginIndex = config.plugins.findIndex((p) => p.name === "vite:vue");
+    config.plugins[vuePluginIndex] = vuePlugin;
+
+    return config;
+  },
 };

.storybook/preview.js

@@ -1,4 +1,26 @@
+import "bootstrap/dist/css/bootstrap.min.css";
+import "bootstrap";
+import smoothscroll from "smoothscroll-polyfill";
+import { app } from "@storybook/vue3";
+import i18n from "../assets/js/i18n";
+import "../assets/css/app.css";
+
+smoothscroll.polyfill();
+app.use(i18n);
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
-}
+  backgrounds: {
+    default: "dark",
+    values: [
+      {
+        name: "light",
+        value: "#ffffff",
+      },
+      {
+        name: "dark",
+        value: "#28293e",
+      },
+    ],
+  },
+};

Dockerfile

@@ -12,7 +12,7 @@ RUN make install-ui
 
 # build ui
 COPY assets assets
-COPY vue.config.js vue.config.js
+COPY vite.config.js vite.config.js
 COPY .eslintrc.js .eslintrc.js
 RUN make clean ui
 

README.md

@@ -41,14 +41,51 @@ Evcc is an extensible EV Charge Controller with PV integration implemented in [G
 
 You'll find everything you need in our [documentation](https://docs.evcc.io/) (German).
 
-## Build
+## Contribute
 
-To build EVCC from source, [Go][2] 1.18 and [Node][3] 16 are required:
+To build evcc from source, [Go][2] 1.18 and [Node][3] 16 are required.
+
+Build and run go backend. The UI becomes available at http://127.0.0.1:7070/
 
 ```sh
 make
+./evcc
+```
+
+For frontend development start the Vue toolchain in dev-mode. Open http://127.0.0.1:7071/ to get to the livelreloading development server. It pulls its data from port 7070 (see above).
+
+```sh
+npm install
+npm run start
 ```
 
+### Code formatting
+
+We use linters (golangci-lint, Prettier) to keep a coherent source code formatting. It's recommended to use the format-on-save feature of your editor. For VSCode use the [Go](https://marketplace.visualstudio.com/items?itemName=golang.Go), [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) and [Veture](https://marketplace.visualstudio.com/items?itemName=octref.vetur) extension. You can manually reformat your code by running:
+
+```sh
+make lint
+make lint-ui
+```
+
+### Changing UI code
+
+To ensure reproducability the build frontend artifacts are part of the source code repository. If you've made changes to frontend code, please make sure to rebuild the production assets before you commit.
+
+```sh
+make ui
+```
+
+### Changing templates
+
+Evcc supports a massive amount of different devices. To keep our documentation and website in sync with the latest software the core project (this repo) generates meta-data that's pushed to the `docs` and `evcc.io` repository. Make sure to update this meta-data every time you make changes to a templates.
+
+```sh
+make docs
+```
+
+If you miss one of the above steps Gitub Actions will likely trigger a **Porcelain** error.
+
 ## Sponsorship
 
 Evcc believes in open source software. We're committed to provide best in class EV charging experience.

assets/css/app.css

@@ -1,14 +1,67 @@
+@font-face {
+	font-family: "Montserrat";
+	src: url("../font/Montserrat-Medium.woff2") format("woff2");
+	font-weight: normal;
+	font-style: normal;
+}
+@font-face {
+	font-family: "Montserrat";
+	src: url("../font/Montserrat-Bold.woff2") format("woff2");
+	font-weight: bold;
+	font-style: normal;
+}
+
 :root {
-	--evcc-green: #66d85a;
-	--evcc-dark-green: #3aba2c;
-	--evcc-yellow: #ffe000;
+	--evcc-green: #baffcb;
+	--evcc-dark-green: #0fde41;
+	--evcc-yellow: #faf000;
+	--bs-gray-dark: #28293e;
+	--bs-gray-medium: #93949e;
 
 	--evcc-grid: var(--bs-gray-dark);
 	--evcc-self: var(--evcc-dark-green);
 	--evcc-export: var(--evcc-yellow);
 
+	--evcc-transition-slow: 1000ms;
+	--evcc-transition-medium: 500ms;
+	--evcc-transition-fast: 250ms;
+	--evcc-transition-very-fast: 100ms;
+
 	--bs-primary: var(--evcc-dark-green);
 	--bs-primary-rgb: 58, 186, 44;
+
+	--bs-body-font-size: 14px;
+	--bs-font-sans-serif: Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
+		Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+		"Segoe UI Symbol", "Noto Color Emoji";
+}
+
+html {
+	/* prevents content jump when scrollbar is activate */
+	width: 100vw;
+	overflow-x: hidden;
+}
+
+body {
+	background-color: var(--evcc-gray-dark);
+}
+
+h1,
+h2,
+h3,
+h4 {
+	font-weight: bold;
+}
+
+h1,
+h2 {
+	font-size: 1.25rem;
+	text-transform: uppercase;
+}
+
+h3,
+h4 {
+	font-size: 1.25rem;
 }
 
 .bg-primary {
@@ -27,22 +80,33 @@ a {
 	opacity: 0.25;
 }
 
+.rounded {
+	border-radius: 10px !important;
+}
+
 .btn-primary,
 .btn-primary:focus {
 	background-color: var(--bs-gray-dark);
 	border-color: var(--bs-gray-dark);
 }
+
 .btn-primary:hover,
 .btn-primary:active {
 	background-color: var(--evcc-dark-green);
 	border-color: var(--evcc-dark-green);
 }
-.btn-outline-primary {
+.btn-outline-primary,
+.btn-outline-primary:focus {
 	color: var(--bs-gray-dark);
+	background-color: transparent;
+	border-width: 2px;
 	border-color: var(--bs-gray-dark);
 }
-.btn-outline-primary:hover {
-	background-color: var(--evcc-dark-green);
+.btn-outline-primary:hover,
+.btn-outline-primary:active {
+	color: var(--evcc-dark-green);
+	background-color: transparent;
+	border-width: 2px;
 	border-color: var(--evcc-dark-green);
 }
 .text-evcc {
@@ -52,6 +116,18 @@ a {
 .text-grid {
 	color: var(--evcc-grid);
 }
+.text-dark {
+	color: var(--bs-gray-dark);
+}
+.text-gray {
+	color: var(--bs-gray-medium);
+}
+.text-gray-medium {
+	color: var(--bs-gray-medium);
+}
+.bg-dark {
+	background-color: var(--bs-gray-dark) !important;
+}
 
 @media screen and (min-width: 400px) and (max-width: 574px) {
 	.d-xs-none {
@@ -62,10 +138,47 @@ a {
 	}
 }
 
+.modal-backdrop.show {
+	opacity: 0.8;
+}
+
+.modal-header {
+	padding-bottom: 1.5rem;
+}
+
+.modal-title {
+	font-weight: bold;
+	font-size: 22px;
+}
+
+.modal-content {
+	border-radius: 1rem;
+	padding: 1rem;
+}
+
+.modal-body {
+	padding-top: 1.5rem;
+	padding-bottom: 1.5rem;
+}
+
+.modal-footer {
+	padding-top: 1.5rem;
+}
+
 .cursor-pointer {
 	cursor: pointer;
 }
 
 .v-popper__inner {
 	margin: 0 12px !important;
 }
+
+.small,
+small {
+	font-size: var(--bs-body-font-size);
+	color: var(--bs-gray-medium) !important;
+}
+
+.btn-close {
+	opacity: 1;
+}

assets/index.html

@@ -3,22 +3,21 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="description" content="EV Charge Controller" />
-    <meta name="author" content="andig" />
+    <meta name="description" content="evcc - Sonne tanken ☀️🚘" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
-
-    <link rel="apple-touch-icon" sizes="180x180" href="ico/apple-touch-icon.png?[[.Version]]" />
-    <link rel="icon" type="image/png" sizes="32x32" href="ico/favicon-32x32.png?[[.Version]]" />
-    <link rel="icon" type="image/png" sizes="16x16" href="ico/favicon-16x16.png?[[.Version]]" />
-    <link rel="manifest" href="ico/site.webmanifest" />
-    <link rel="mask-icon" href="ico/safari-pinned-tab.svg?[[.Version]]" color="#18191a" />
-    <link rel="shortcut icon" href="ico/favicon.ico?[[.Version]]" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
     <meta name="apple-mobile-web-app-title" content="evcc" />
     <meta name="application-name" content="evcc" />
-    <meta name="msapplication-TileColor" content="#18191a" />
-    <meta name="msapplication-config" content="ico/browserconfig.xml" />
-    <meta name="theme-color" content="#18191a" />
+
+    <link rel="apple-touch-icon" sizes="180x180" href="meta/apple-touch-icon.png?[[.Version]]" />
+    <link rel="icon" type="image/png" sizes="32x32" href="meta/favicon-32x32.png?[[.Version]]" />
+    <link rel="icon" type="image/png" sizes="16x16" href="meta/favicon-16x16.png?[[.Version]]" />
+    <link rel="manifest" href="meta/site.webmanifest?[[.Version]]" />
+    <link rel="mask-icon" href="meta/safari-pinned-tab.svg?[[.Version]]" color="#28293e" />
+    <link rel="shortcut icon" href="meta/favicon.ico?[[.Version]]" />
+    <meta name="msapplication-TileColor" content="#28293e" />
+    <meta name="msapplication-config" content="meta/browserconfig.xml?[[.Version]]" />
+    <meta name="theme-color" content="#28293e" />
 
     <title>evcc</title>
   </head>
@@ -32,5 +31,6 @@
     </script>
 
     <div id="app"></div>
+    <script type="module" src="./js/app.js"></script>
   </body>
 </html>