Merge branch 'adriankumpf-master'

.gitignore

@@ -53,3 +53,4 @@ config/*.env
 .idea/
 .eclipse/
 .elixir_ls/
+/.project

CHANGELOG.md

@@ -2,6 +2,42 @@
 
 ## [Unreleased]
 
+## [1.18.0-dev]
+
+### Enhancements
+
+- Add Swedish translation ([#485](https://github.com/adriankumpf/teslamate/pull/485) by [tobiasehlert](https://github.com/tobiasehlert))
+- Add Norwegian translation ([#500](https://github.com/adriankumpf/teslamate/pull/500) by [spacecosmos](https://github.com/spacecosmos))
+- Add Spanish translation ([#519](https://github.com/adriankumpf/teslamate/pull/519) by [alceasan](https://github.com/alceasan))
+- Overview: Add states panel ([#520](https://github.com/adriankumpf/teslamate/pull/520) by [DrMichael](https://github.com/DrMichael))
+- Immediately display the current car software version after restarting TeslaMate
+- Add mileage to the summary page
+- Add option to calculate charging costs retroactively
+- Allow to enter total cost or cost per KWh used
+- Indicate if any of the doors are open
+- Add support for session fees
+- Store more vehicle config attributes (`exterior_color`, `wheel_type`, `spoiler_type`)
+
+#### New MQTT Topics
+
+- `teslamate/cars/$car_id/doors_open`: Indicates if any of the doors are open
+- `teslamate/cars/$car_id/model`: Either "S", "3", "X" or "Y"
+- `teslamate/cars/$car_id/trim_badging`: Trim badging
+- `teslamate/cars/$car_id/exterior_color`: The exterior color
+- `teslamate/cars/$car_id/wheel_type`: The wheel type
+- `teslamate/cars/$car_id/spoiler_type`: The spoiler type
+
+### Bug Fixes
+
+- Drive Stats: Show stats in desired units ([#484](https://github.com/adriankumpf/teslamate/pull/484) by [pichalite](https://github.com/pichalite))
+- Drive Details: Fix odometer units ([#487](https://github.com/adriankumpf/teslamate/pull/487) by [pichalite](https://github.com/pichalite))
+- Update address formatting to avoid showing obscure names instead of towns/cities
+- Charge Details: Hide empty series
+- Suppress `Cldr.NoMatchingLocale` warnings
+- Trip: Prevent 'division by zero' error
+- Open dashboard links in a new tab to work around Grafana regression
+- Use the maximum kWh to calculate the charge cost
+
 ## [1.17.1] - 2020-02-23
 
 ### Bug Fixes

Makefile

@@ -9,9 +9,9 @@ help:
 	@perl -nle'print $& if m{^[a-zA-Z_-]+:.*?## .*$$}' $(MAKEFILE_LIST) | sort | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-30s\033[0m %s\n", $$1, $$2}'
 
 teslamate: ## Build teslamate Docker image
-	@docker build \
+	@docker build --pull \
 			-t $(APP_NAME):$(APP_VSN)-$(BUILD) \
 			-t $(APP_NAME) .
 
 grafana: ## Build  teslamate-grafana Docker image
-	@cd grafana && docker build -t teslamate-grafana .
+	@cd grafana && docker build --pull -t teslamate-grafana .

assets/css/app.scss

@@ -13,10 +13,21 @@ $fullhd-enabled: false;
 
 @import "~bulma/sass/utilities/_all";
 @import "~bulma/sass/base/_all";
+
+// Modal customization
+$modal-z: 1010;
+$modal-content-width: 560px;
+$modal-card-head-padding: 15px;
+$modal-card-body-padding: 5px 15px 10px;
+$modal-card-head-background-color: $white;
+$modal-card-head-border-bottom: none;
+$modal-card-foot-border-top: none;
+
 @import "~bulma/sass/components/breadcrumb";
 @import "~bulma/sass/components/card";
 @import "~bulma/sass/components/dropdown";
 @import "~bulma/sass/components/message";
+@import "~bulma/sass/components/modal";
 @import "~bulma/sass/components/navbar";
 @import "~bulma/sass/components/tabs";
 @import "~bulma/sass/elements/box";
@@ -30,12 +41,13 @@ $fullhd-enabled: false;
 @import "~bulma/sass/form/_all";
 @import "~bulma/sass/layout/section";
 @import "~bulma/sass/grid/_all";
-// @import "~bulma/bulma";
 
 @import '~bulma-tooltip';
 @import '~bulma-switch';
 @import '~bulma-divider';
 
+@import './vendor/modal-fx';
+
 // @import "../../deps/phoenix_live_view/assets/css/live_view.css";
 .phx-disconnected {
   cursor: wait;

assets/css/vendor/modal-fx.scss

@@ -0,0 +1,42 @@
+// source: https://github.com/postare/bulma-modal-fx/blob/master/src/_scss/components/_modal-fx.scss
+
+$transition-duration: .3s;
+
+.modal {
+    display: flex;
+    visibility: hidden;
+
+    .modal-content {
+      max-width: 95%;
+    }
+
+    .modal-background {
+        transition: all $transition-duration;
+        opacity: 0;
+    }
+
+    &.is-active {
+        visibility: visible;
+        .modal-background {
+            opacity: 1;
+        }
+    }
+
+   &.modal-fx {
+        &-fadeInScale {
+            .modal-content {
+                transform: scale(0.7);
+                opacity: 0;
+                transition: all $transition-duration;
+            }
+
+            &.is-active {
+                .modal-content {
+                    transform: scale(1);
+                    opacity: 1;
+                }
+            }
+        }
+    }
+}
+

assets/js/hooks.js

@@ -243,15 +243,48 @@ export const Map = {
   }
 };
 
-export const SetLangAttr = {
-  exec() {
-    this.el.setAttribute("lang", LANG);
+export const UpdateCostMode = {
+  mounted() {
+    const $energy = document.querySelector("#energy-tag > span:nth-child(2)");
+    let kWh = $energy && $energy.textContent.split(" ")[0];
+
+    if (kWh != null) {
+      kWh = parseFloat(kWh, 10);
+
+      this.el.addEventListener("change", function() {
+        const $cost = document.querySelector("#charging_process_cost");
+
+        const cost =
+          this.value == "per_kwh"
+            ? $cost.value / kWh
+            : this.value == "total"
+            ? $cost.value * kWh
+            : 0.0;
+
+        $cost.value = cost.toFixed(2);
+      });
+    }
+  }
+};
+
+export const Modal = {
+  _freeze() {
+    document.documentElement.classList.add("is-clipped");
+  },
+
+  _unfreeze() {
+    document.documentElement.classList.remove("is-clipped");
   },
 
   mounted() {
-    this.exec();
+    // assumption: 'is-active' is always added after the initial mount
   },
+
   updated() {
-    this.exec();
+    this.el.classList.contains("is-active") ? this._freeze() : this._unfreeze();
+  },
+
+  destroyed() {
+    this._unfreeze();
   }
 };