init webview: add webview ui and list machine as api example

pkgs/clan-vm-manager/clan_vm_manager/app.py

@@ -106,7 +106,7 @@ class MainApplication(Adw.Application):
     def on_activate(self, source: "MainApplication") -> None:
         if not self.window:
             self.init_style()
-            self.window = MainWindow(config=ClanConfig(initial_view="list"))
+            self.window = MainWindow(config=ClanConfig(initial_view="webview"))
             self.window.set_application(self)
 
         self.window.show()

pkgs/clan-vm-manager/clan_vm_manager/views/webview.py

@@ -0,0 +1,51 @@
+import sys
+from pathlib import Path
+from typing import Any, List
+from clan_cli import machines
+import time
+import gi
+import json
+
+gi.require_version("WebKit", "6.0")
+
+from gi.repository import WebKit
+
+site_index: Path = (Path(sys.argv[0]).absolute() / Path("../..") / Path("web/app/dist/index.html") ).resolve()
+
+
+class WebView():
+    def __init__(self) -> None:
+
+        self.webview = WebKit.WebView()
+
+        self.manager = self.webview.get_user_content_manager()
+        # Can be called with: window.webkit.messageHandlers.gtk.postMessage("...")
+        # Important: it seems postMessage must be given some payload, otherwise it won't trigger the event
+        self.manager.register_script_message_handler("gtk")
+        self.manager.connect("script-message-received", self.on_message_received)
+
+        self.webview.load_uri(f"file://{site_index}")
+
+    def on_message_received(
+        self, user_content_manager: WebKit.UserContentManager, message: Any
+    ) -> None:
+        # payload = json.loads(message.to_json(0))
+        # TODO: 
+        # Dynamically call functions in the js context
+        # I.e. the result function should have the same name as the target method in the gtk context
+        # Example: 
+        # request -> { method: "list_machines", data: None }
+        # internally call list_machines and serialize the result
+        # result -> window.clan.list_machines(`{serialized}`)
+
+        list_of_machines = machines.list.list_machines(".")
+        serialized = json.dumps(list_of_machines)
+        # Important: use ` backticks to avoid escaping issues with conflicting quotes in js and json
+        self.webview.evaluate_javascript(f"""
+            setTimeout(() => {{ 
+                window.clan.setMachines(`{serialized}`);
+            }},2000);
+        """, -1, None, None, None)
+
+    def get_webview(self) -> WebKit.WebView:
+        return self.webview

pkgs/clan-vm-manager/clan_vm_manager/windows/main_window.py

@@ -11,6 +11,7 @@ from clan_vm_manager.singletons.use_vms import ClanStore
 from clan_vm_manager.views.details import Details
 from clan_vm_manager.views.list import ClanList
 from clan_vm_manager.views.logs import Logs
+from clan_vm_manager.views.webview import WebView
 
 gi.require_version("Adw", "1")
 
@@ -58,6 +59,7 @@ class MainWindow(Adw.ApplicationWindow):
         stack_view.add_named(ClanList(config), "list")
         stack_view.add_named(Details(), "details")
         stack_view.add_named(Logs(), "logs")
+        stack_view.add_named(WebView().get_webview(), "webview")
 
         stack_view.set_visible_child_name(config.initial_view)