SW-2058-pop-up-to-guide-the-user-to-do-hard-refresh-after-update (mrbeam#1590)

* adding the hard refresh overlay
* added translation

Co-authored-by: khaledsherkawi <[email protected]>

Author: JFSolution

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,23 @@ button#terminal-send {
 #support_overlay > div.modal-body.scrollable > table {
   margin: 20px auto;
 }
+/* Support Standalone */
+
+/* Hard refresh overlay */
+
+#hard_refresh_overlay {
+  width: 60%;
+  margin-left: -30%;
+}
+#hard_refresh_overlay .image_description {
+  padding: 40px;
+}
+#hard_refresh_overlay .modal-header {
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+#hard_refresh_overlay .icon-warning-sign{
+  color: #e25303;
+}
+
+/* Hard refresh overlay */

octoprint_mrbeam/static/img/mac_refresh.png

@@ -0,0 +1,47 @@
+$(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 && x === 'true') {
+                    $("#hard_refresh_overlay").modal("show");
+                }
+            }
+
+        };
+        //can be used with newer octoprint version
+        self.onEventplugin_softwareupdate_update_succeeded = function () {
+            document.cookie = "f.u.extra=true" // add cookie
+        }
+        // needs to be used for oprint 1.3.6
+        self.onDataUpdaterPluginMessage = function (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"; // add cookie
+                }
+            }
+        }
+        self.setUserHardRefreshed = function () {
+            document.cookie = "f.u.extra=false; max-age=0" // 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,25 @@
+<div id="hard_refresh_overlay" class="modal hide fade" 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">
+                <div class="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>
+            <div class="span7">
+                <b>{{ _("Windows | Ctrl + 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 -->

octoprint_mrbeam/templates/hard_refresh_overlay.jinja2

@@ -7,8 +7,8 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Mr_Beam 0.1.61\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2022-08-30 11:31+0200\n"
-"PO-Revision-Date: 2022-08-30 11:32+0200\n"
+"POT-Creation-Date: 2022-11-11 08:54+0100\n"
+"PO-Revision-Date: 2022-11-11 08:58+0100\n"
 "Last-Translator: Andy Werner <[email protected]>\n"
 "Language-Team: \n"
 "Language: de\n"
@@ -2576,6 +2576,38 @@ msgstr "Über das Material fahren"
 msgid "It's focused!"
 msgstr "Fokussiert!"
 
+#: octoprint_mrbeam/templates/hard_refresh_overlay.jinja2:3
+msgid "Refresh is needed after the last Software Update"
+msgstr "Nach dem letzten Software-Update ist eine Aktualisierung erforderlich"
+
+#: octoprint_mrbeam/templates/hard_refresh_overlay.jinja2:9
+msgid ""
+"An update has been installed on this Mr Beam. To use the new functions, the "
+"user interace must be completely reloaded."
+msgstr ""
+"Auf dem Mr Beam wurde ein update installiert. Um die neuen Funktionen nutzen "
+"zu können muss die Benutzeroberfläche komplett neu geladen werden."
+
+#: octoprint_mrbeam/templates/hard_refresh_overlay.jinja2:10
+msgid ""
+"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:"
+msgstr ""
+"Wir nennen das einen hard refresh. Drücke dafür gleichzeitig die drei "
+"Tasten, passend zu deinem Betriebssystem, wie in der Grafik dargestellt."
+
+#: octoprint_mrbeam/templates/hard_refresh_overlay.jinja2:14
+msgid "Windows | Ctrl + Shift + R"
+msgstr "Windows | Strg + Shift + R"
+
+#: octoprint_mrbeam/templates/hard_refresh_overlay.jinja2:16
+msgid "Mac | Command + Shift + R"
+msgstr "Mac | Command + Shift + R"
+
+#: octoprint_mrbeam/templates/hard_refresh_overlay.jinja2:23
+msgid "Yes, I will reload the page"
+msgstr "Ja, ich werde die Seite neu laden"
+
 #: octoprint_mrbeam/templates/homing_overlay.jinja2:50
 msgid "Make sure your Mr Beam is empty."
 msgstr "Stelle sicher, dass Dein Mr Beam leer ist."
@@ -3124,11 +3156,11 @@ msgstr ""
 "Support Team kontaktieren um Dein Gerät zurückzusetzen. Mehr dazu findest Du "
 "in der %(tag_open)sKnowledge Base%(tag_close)s."
 
-#: octoprint_mrbeam/templates/mrbeam_doc_translation_placeholders.jinja2:1
+#: octoprint_mrbeam/templates/mrbeam_doc_translation_placeholders.jinja2:2
 msgid "Quickstart Guide"
 msgstr "Quickstart Guide"
 
-#: octoprint_mrbeam/templates/mrbeam_doc_translation_placeholders.jinja2:2
+#: octoprint_mrbeam/templates/mrbeam_doc_translation_placeholders.jinja2:3
 msgid "User Manual"
 msgstr "Betriebsanleitung"
 
@@ -6377,10 +6409,6 @@ msgstr "Dämon zurücksetzen"
 #~ "über 'Einstellungen' > 'Software-Update' aus, bevor Du einen Laserjob "
 #~ "startest."
 
-#~ msgid "iobeam version is outdated. Please try Software update."
-#~ msgstr ""
-#~ "Die iobeam-Version ist veraltet. Bitte versuche ein Software-Update."
-
 #~ msgid "beamOS is reloading..."
 #~ msgstr "beamOS lädt neu..."
 

octoprint_mrbeam/templates/mrbeam_ui_index.jinja2

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PROJECT VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2022-08-30 11:31+0200\n"
+"POT-Creation-Date: 2022-11-11 08:54+0100\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <[email protected]>\n"
@@ -2214,6 +2214,34 @@ msgstr ""
 msgid "It's focused!"
 msgstr ""
 
+#: octoprint_mrbeam/templates/hard_refresh_overlay.jinja2:3
+msgid "Refresh is needed after the last Software Update"
+msgstr ""
+
+#: octoprint_mrbeam/templates/hard_refresh_overlay.jinja2:9
+msgid ""
+"An update has been installed on this Mr Beam. To use the new functions, "
+"the user interace must be completely reloaded."
+msgstr ""
+
+#: octoprint_mrbeam/templates/hard_refresh_overlay.jinja2:10
+msgid ""
+"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:"
+msgstr ""
+
+#: octoprint_mrbeam/templates/hard_refresh_overlay.jinja2:14
+msgid "Windows | Ctrl + Shift + R"
+msgstr ""
+
+#: octoprint_mrbeam/templates/hard_refresh_overlay.jinja2:16
+msgid "Mac | Command + Shift + R"
+msgstr ""
+
+#: octoprint_mrbeam/templates/hard_refresh_overlay.jinja2:23
+msgid "Yes, I will reload the page"
+msgstr ""
+
 #: octoprint_mrbeam/templates/homing_overlay.jinja2:50
 msgid "Make sure your Mr Beam is empty."
 msgstr ""
@@ -2626,11 +2654,11 @@ msgid ""
 "Base%(tag_close)s."
 msgstr ""
 
-#: octoprint_mrbeam/templates/mrbeam_doc_translation_placeholders.jinja2:1
+#: octoprint_mrbeam/templates/mrbeam_doc_translation_placeholders.jinja2:2
 msgid "Quickstart Guide"
 msgstr ""
 
-#: octoprint_mrbeam/templates/mrbeam_doc_translation_placeholders.jinja2:2
+#: octoprint_mrbeam/templates/mrbeam_doc_translation_placeholders.jinja2:3
 msgid "User Manual"
 msgstr ""