adding the hard refresh overlay

Author: Josef-MrBeam

octoprint_mrbeam/__init__.py

@@ -709,6 +709,7 @@ def get_assets(self):
                 "js/calibration/watterott/camera_alignment.js",
                 "js/calibration/watterott/calibration_qa.js",
                 "js/calibration/watterott/label_printer.js",
+                "js/hard_refresh_overlay.js",
             ],
             css=[
                 "css/mrbeam.css",

octoprint_mrbeam/static/css/mrbeam.css

@@ -3407,3 +3407,15 @@ button#terminal-send {
 #support_overlay > div.modal-body.scrollable > table {
   margin: 20px auto;
 }
+
+.hard_refresh_overlay {
+  width: 60%;
+  margin-left: -30%;
+}
+.hard_refresh_overlay .image_description {
+  padding: 40px;
+}
+.hard_refresh_overlay .modal-header {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}

octoprint_mrbeam/static/img/mac_refresh.png

@@ -0,0 +1,46 @@
+$(function () {
+    function HardRefreshOverlayViewModel(params) {
+        let self = this;
+        window.mrbeam.viewModels["HardRefreshOverlayViewModel"] = self;
+
+        self.settings = params[0];
+        self.loginState = params[1];
+
+        self.onUserLoggedIn = function () {
+            if (
+                self.loginState.currentUser?.()?.active
+            ) {
+                let x = document.cookie.split('; ').find((row) => row.startsWith('f.u.extra='))?.split('=')[1]; // get cookie
+                if (x !== undefined && x === 'true') {
+                    $("#hard_refresh_overlay").modal("show");
+                }
+            }
+
+        };
+        self.onEventplugin_softwareupdate_update_succeeded = function () {
+            document.cookie = "f.u.extra=true"
+        }
+        self.onDataUpdaterPluginMessage = function (plugin, data) {
+            console.log("hard_refresh", plugin, data);
+            if (plugin === "softwareupdate") {
+                if ("type" in data && (data["type"] === "success" || data["type"] === "restarting" || data["type"] === "restart_manually")) {
+                    document.cookie = "f.u.extra=true";
+                }
+            }
+        }
+        self.setUserHardRefreshed = function () {
+            // document.cookie = "f.u.extra= ; expires = Thu, 01 Jan 1970 00:00:00 GMT"//delete cookie
+        }
+    }
+
+    // view model class, parameters for constructor, container to bind to
+    OCTOPRINT_VIEWMODELS.push([
+        HardRefreshOverlayViewModel,
+
+        // e.g. loginStateViewModel, settingsViewModel, ...
+        ["settingsViewModel", "loginStateViewModel"],
+
+        // e.g. #settings_plugin_mrbeam, #tab_plugin_mrbeam, ...
+        ["#hard_refresh_overlay"],
+    ]);
+});

octoprint_mrbeam/static/img/windows_refresh.png

@@ -0,0 +1,23 @@
+<div id="hard_refresh_overlay" class="modal hide fade hard_refresh_overlay" data-backdrop="static">
+    <div class="modal-header">
+        <h3><i class="icon icon-warning-sign"></i> {{ _('Refresh is needed after the last Software Update') }}</h3>
+    </div>
+    <div class="modal-body">
+        <div class="row-fluid">
+            <div class="span5 image_description">
+                <p>{{ _("An update has been installed on this Mr Beam. To use the new functions, the user interace must be completely reloaded.") }}</p>
+                <p> {{ _("We call this a hard refresh. To do this, press the three keys at the same time, depending on your operating system, as shown in the graphic:") }}</p>
+            </div>
+            <div class="span7">
+                <b>{{ _("Windows | Strg + Shift + R") }}</b>
+                <img src="/plugin/mrbeam/static/img/windows_refresh.png">
+                <b>{{ _("Mac | Command + Shift + R") }}</b>
+                <img src="/plugin/mrbeam/static/img/mac_refresh.png">
+            </div>
+        </div>
+    </div>
+    <div class="modal-footer">
+        <button class="btn btn-primary" id="#hard_refresh_confirmed" data-dismiss="modal"
+                aria-hidden="true" data-bind="click: $root.setUserHardRefreshed">{{ _('Yes, I will reload the page') }}</button>
+    </div>
+</div>

octoprint_mrbeam/static/js/hard_refresh_overlay.js

@@ -177,6 +177,7 @@
         {% include 'quick_shape.jinja2' %}
         {% include 'conversion_dialog.jinja2' %}
         {% include 'laserhead_changed.jinja2' %}
+        {% include 'hard_refresh_overlay.jinja2' %}
         <!-- End of dialogs -->
 
         <!-- Overlays -->