add initial drawings page

src/blenderbim/blenderbim/bim/data/webui/sioserver.py

@@ -119,11 +119,19 @@ async def gantt(request):
     return web.Response(text=html_content, content_type="text/html")
 
 
+async def drawings(request):
+    with open("templates/drawings.html", "r") as f:
+        template = f.read()
+    html_content = pystache.render(template, {"port": sio_port})
+    return web.Response(text=html_content, content_type="text/html")
+
+
 async def open_web_browser(app):
     webbrowser.open(f"http://127.0.0.1:{sio_port}/")
 
 
 app.router.add_get("/", index)
+app.router.add_get("/drawings", drawings)
 app.router.add_get("/gantt", gantt)
 app.router.add_static("/jsgantt/", path="../gantt", name="jsgantt")
 app.router.add_static("/static/", path="./static", name="static")

src/blenderbim/blenderbim/bim/data/webui/static/css/drawings.css

@@ -0,0 +1,186 @@
+:root {
+    --font-family: Arial, sans-serif;
+    --base-font-size: 16px;
+    --margin-tiny: 0.125rem;
+    --margin-small: 0.625rem;
+    --margin-medium: 1.25rem;
+    --margin-large: 2.5rem;
+    --padding-tiny: 0.125rem;
+    --padding-small: 0.625rem;
+    --padding-medium: 1rem;
+    --font-size-large: 1.2rem;
+    --logo-height: 2.5rem;
+    --nav-height: 2.5rem;
+}
+
+:root.dark {
+    color-scheme: dark;
+    --bg-color: #252525;
+    --text-color: #e0e0e0;
+    --nav-bg-color: #121212;
+    --nav-border-color: #25682a;
+    --nav-link-color: #fff;
+    --nav-link-hover-color: #3fb449;
+    --warning-color: #FFDB8F;
+    --table-border-color: #464444;
+}
+
+:root.light {
+    color-scheme: light;
+    --bg-color: #ffffff;
+    --text-color: #000000;
+    --nav-bg-color: #f8f8f8;
+    --nav-border-color: #cccccc;
+    --nav-link-color: #000000;
+    --nav-link-hover-color: #38a63d;
+    --warning-color: #FF4500;
+    --table-border-color: #222;
+}
+
+html {
+    font-size: var(--base-font-size);
+}
+
+body {
+    background-color: var(--bg-color);
+    color: var(--text-color);
+    margin: 0;
+    font-family: var(--font-family);
+}
+
+#container {
+    margin-top: var(--margin-medium);
+    margin-left: var(--margin-small);
+    margin-right: var(--margin-small);
+    margin-bottom: var(--margin-medium);
+}
+
+h3 {
+    margin-top: 0;
+}
+
+nav {
+    background-color: var(--nav-bg-color);
+    height: var(--nav-height);
+    padding: var(--padding-medium) 0;
+    display: flex;
+    align-items: center;
+    position: relative;
+    border-bottom: 2px solid var(--nav-border-color);
+}
+
+nav .logo {
+    margin-left: var(--margin-large);
+    height: var(--logo-height);
+}
+
+nav ul {
+    list-style-type: none;
+    margin: 0;
+    margin-left: 0.0625rem;
+    display: flex;
+    flex-grow: 1;
+    justify-content: center;
+}
+
+nav ul li {
+    margin-right: 3.125rem;
+}
+
+nav ul li a {
+    text-decoration: none;
+    color: var(--nav-link-color);
+    font-size: var(--font-size-large);
+}
+
+nav ul li a:hover,
+nav ul li a.active {
+    color: var(--nav-link-hover-color);
+}
+
+.warning {
+    color: var(--warning-color);
+    margin-bottom: var(--margin-small);
+    padding: var(--padding-tiny);
+    display: none;
+}
+
+#toggle-theme {
+    border: none;
+    background: none;
+    cursor: pointer;
+    font-size: var(--font-size-large);
+    margin-right: var(--margin-medium);
+}
+
+#toggle-theme:focus {
+    outline: none;
+}
+
+#client-list {
+    position: absolute;
+    top: calc(0 + var(--nav-height));
+    overflow-y: auto;
+    overflow: hidden;
+    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
+    border: 1px solid var(--table-border-color);
+    background-color: var(--nav-bg-color);
+    z-index: 1;
+    opacity: 0;
+    visibility: hidden;
+    width: auto;
+}
+
+#client-list.show {
+    opacity: 1;
+    visibility: visible;
+}
+
+#connected-list-div {
+    display: inline-block;
+}
+
+.client {
+    padding: var(--margin-small);
+    border-bottom: 1px solid var(--table-border-color);
+    cursor: pointer;
+}
+
+.client-details {
+    max-height: 0;
+    overflow: hidden;
+    padding-left: var(--padding-small);
+    transition: max-height 0.2s ease-out, padding 0.2s ease-out, opacity 0.1s ease-out;
+    background-color: var(--nav-bg-color);
+    margin-top: var(--margin-tiny);
+    opacity: 0;
+}
+
+.client-details.show {
+    max-height: none;
+    padding: var(--padding-small);
+    opacity: 1;
+}
+
+.client-detail {
+    border-bottom: 1px solid var(--table-border-color);
+    padding: var(--padding-small);
+}
+
+#show-connected-button {
+    width: auto;
+    background-color: var(--bg-color);
+    border: none;
+    font-size: var(--base-font-size);
+}
+
+#show-connected-button:hover,
+.scroll-button:hover {
+    cursor: pointer;
+}
+
+.scroll-button {
+    font-size: var(--base-font-size);
+    margin-left: var(--margin-tiny);
+    margin-top: var(--margin-small);
+}

src/blenderbim/blenderbim/bim/data/webui/static/js/drawings.js

@@ -0,0 +1,28 @@
+// keeps track of blenders connected in form of
+// {shown:bool, filename:string, headers:array}
+const connectedClients = {};
+let socket;
+
+// Document ready function
+$(document).ready(function () {
+  var systemTheme = window.matchMedia("(prefers-color-scheme: light)").matches
+    ? "light"
+    : "dark";
+  var theme = localStorage.getItem("theme") || systemTheme;
+  setTheme(theme);
+
+  connectSocket();
+});
+
+// Function to connect to Socket.IO server
+function connectSocket() {
+  const url = "ws://localhost:" + SOCKET_PORT + "/web";
+  socket = io(url);
+  console.log("socket: ", socket);
+
+  // Register socket event handlers
+  //   socket.on("blender_connect", handleBlenderConnect);
+  //   socket.on("blender_disconnect", handleBlenderDisconnect);
+  //   socket.on("csv_data", handleCsvData);
+  //   socket.on("default_data", handleDefaultData);
+}

src/blenderbim/blenderbim/bim/data/webui/templates/drawings.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Web Client</title>
+    <link rel="stylesheet" href="/static/css/drawings.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
+    />
+    <script
+      type="text/javascript"
+      src="https://code.jquery.com/jquery-3.6.0.min.js"
+    ></script>
+    <script
+      type="text/javascript"
+      src="https://cdn.socket.io/4.0.0/socket.io.min.js"
+    ></script>
+    <script>
+      var SOCKET_PORT = {{port}};
+    </script>
+    <script defer src="./static/js/drawings.js"></script>
+  </head>
+  <body>
+    <nav>
+      <img
+        src="https://blenderbim.org/assets/images/blender/blender-logo.png"
+        alt="Logo"
+        class="logo"
+      />
+      <ul>
+        <li><a href="/">IFC Data</a></li>
+        <li><a href="/gantt">Gantt Chart</a></li>
+        <li><a href="/drawings" class="active">Drawings</a></li>
+      </ul>
+      <button id="toggle-theme" onclick="toggleTheme()">
+        <i class="fas fa-moon"></i>
+      </button>
+    </nav>
+    <div id="connected-list-div">
+      <button id="show-connected-button" onclick="toggleClientList()">
+        Connected Blenders:
+        <span id="blender-count">0</span>
+        <i class="fas fa-chevron-down"></i>
+      </button>
+      <div id="client-list"></div>
+    </div>
+    <div id="container"></div>
+  </body>
+</html>

src/blenderbim/blenderbim/bim/data/webui/templates/gantt.html

@@ -34,6 +34,7 @@
       <ul>
         <li><a href="/">IFC Data</a></li>
         <li><a href="/gantt" class="active">Gantt Chart</a></li>
+        <li><a href="/drawings">Drawings</a></li>
       </ul>
       <button id="toggle-theme" onclick="toggleTheme()">
         <i class="fas fa-moon"></i>

src/blenderbim/blenderbim/bim/data/webui/templates/index.html

@@ -41,6 +41,7 @@
       <ul>
         <li><a href="/" class="active">IFC Data</a></li>
         <li><a href="/gantt">Gantt Chart</a></li>
+        <li><a href="/drawings">Drawings</a></li>
       </ul>
       <button id="toggle-theme" onclick="toggleTheme()">
         <i class="fas fa-moon"></i>