From b54b4abcf05012bceb0674f8e3f5f8864d705c15 Mon Sep 17 00:00:00 2001
From: Jason Cox <jason@jasonacox.com>
Date: Sun, 3 Mar 2024 17:07:22 -0800
Subject: [PATCH] Add solar.js style for animation

---
 proxy/RELEASE.md   |   6 +++
 proxy/server.py    |   2 +-
 proxy/web/solar.js | 104 +++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 111 insertions(+), 1 deletion(-)
 create mode 100644 proxy/web/solar.js

diff --git a/proxy/RELEASE.md b/proxy/RELEASE.md
index 524658c..56d4837 100644
--- a/proxy/RELEASE.md
+++ b/proxy/RELEASE.md
@@ -1,5 +1,11 @@
 ## pyPowerwall Proxy Release Notes
 
+### Proxy t42 (3 Mar 2024)
+
+* Add Power Flow Animation style (set `PW_STYLE="solar"`) for Solar-Only display. Removes the Powerwall image and related text to display a Grid + Solar + Home powerflow animation.
+
+<img width="443" alt="image" src="https://github.com/jasonacox/Powerwall-Dashboard/assets/836718/37fa7f7b-d4f9-4240-82bc-a81ba2f798c7">
+
 ### Proxy t41 (25 Feb 2024)
 
 * Bug fixes for Solar-Only systems using `cloud mode` (see https://github.com/jasonacox/Powerwall-Dashboard/issues/437).
diff --git a/proxy/server.py b/proxy/server.py
index 43df79e..6511526 100755
--- a/proxy/server.py
+++ b/proxy/server.py
@@ -42,7 +42,7 @@
 import ssl
 from transform import get_static, inject_js
 
-BUILD = "t41"
+BUILD = "t42"
 ALLOWLIST = [
     '/api/status', '/api/site_info/site_name', '/api/meters/site',
     '/api/meters/solar', '/api/sitemaster', '/api/powerwalls', 
diff --git a/proxy/web/solar.js b/proxy/web/solar.js
new file mode 100644
index 0000000..63a0ddd
--- /dev/null
+++ b/proxy/web/solar.js
@@ -0,0 +1,104 @@
+'use strict'
+
+// Clear IndexedDB to prevent auth hangup in the proxied Powerwall web app.
+try {
+    window.indexedDB.databases().then((dbs) => {
+        dbs.forEach(db => { window.indexedDB.deleteDatabase(db.name) });
+    });
+} catch (error) {
+    document.write("Browser blocking indexedDB - Turn off incognito mode.");
+}
+
+function injectScriptAndUse() {
+    return new Promise((resolve, reject) => {
+        var body = document.getElementsByTagName("body")[0];
+        var script = document.createElement("script");
+        script.src = "//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js";
+        script.onload = function () {
+            resolve();
+        };
+        body.appendChild(script);
+    });
+}
+
+injectScriptAndUse().then(() => {
+    console.log("Applying SolarOnly customization");
+    triggerOnMutation(formatPowerwallForSolar);
+});
+
+function triggerOnMutation(cb) {
+    // Create an observer instance
+    var observer = new MutationObserver(function (mutations) {
+        mutations.forEach(function (mutation) {
+            var newNodes = mutation.addedNodes; // DOM NodeList
+            if (newNodes !== null) { // If there are new nodes added
+                if (cb) cb();
+            }
+        });
+    });
+
+    // Configuration of the observer:
+    var config = {
+        attributes: true,
+        childList: true,
+        subtree: true,
+    };
+
+    var target = $("#root")[0];
+
+    // Pass in the target node, as well as the observer options
+    observer.observe(target, config);
+}
+
+function formatPowerwallForSolar() {
+    // Hide elements.
+    $('.overview-menu, #logout, .footer, .compact-btn-row, .toast-list, .power-flow-header, .btn, .powerwall-soe, .soe-label').hide();
+
+    // Hide Powerwall image 
+    var imgElement = document.querySelector('[data-testid="b3372156-8a9e-4d17-9721-fcc5891d1074"]');
+    if (imgElement) {
+        imgElement.style.display = 'none';
+    }
+    // Hide the Powerwall text
+    const divs = document.querySelectorAll('[data-testid="ec7d6a6d-b6d2-411c-a535-c052c00baf62"]');
+    divs.forEach(div => {
+        if (div.style.width === '120px' && div.style.top === '200.5px' && div.style.left === '0px' && div.style.right === '0px') {
+            const paragraph = div.querySelector('p[data-testid="4c6aadb3-7661-4d7f-b1ff-d5a0571fac60"]');
+            if (paragraph) {
+                paragraph.style.display = 'none';
+            }
+        }
+    });
+
+    // Set alignment
+    $('.core-layout__viewport').css({
+        padding: 0,
+        margin: 0,
+    });
+
+    $('.power-flow-header').css({
+        "padding-top": 0,
+    });
+
+    $('.power-flow-grid').css({
+        width: "100%",
+        left: 0,
+        right: 0,
+        margin: 0,
+        "padding-top": 0,
+        "position": "fixed",
+    });
+
+    $('.app').css({
+        "overflow-y": "hidden",
+    });
+
+    // Set colors
+    $('body').css({
+        "background-color": "transparent",
+    });
+
+    $('.power-flow-grid.active').css({
+        "background-color": "transparent",
+    });
+}