From 401bd08d8b29225ab6626b2e277c3a3cd5286809 Mon Sep 17 00:00:00 2001
From: Xantios Krugor <git@xantios.nl>
Date: Sat, 10 Jul 2021 15:27:36 +0200
Subject: [PATCH] Improved frontend a bit, elements should all scale normally
 now

---
 src/HttpServer.php |  28 +++--
 src/ui/app.css     |  12 +++
 src/ui/app.js      | 168 +++++++++++++++++++++++++++++
 src/ui/index.html  | 256 +++++----------------------------------------
 4 files changed, 231 insertions(+), 233 deletions(-)

diff --git a/src/HttpServer.php b/src/HttpServer.php
index d3d45b7..bc74cea 100644
--- a/src/HttpServer.php
+++ b/src/HttpServer.php
@@ -18,7 +18,7 @@ class HttpServer {
     private Server $server;
     private OutputInterface $output;
 
-    public function __construct(array $config,LoopInterface $loop,OutputInterface $output) {
+    public function __construct(array $config,LoopInterface $loop,OutputInterface $output,ProcessStateManager $psm) {
 
         $this->port = $config['port'] ?? '8100';
         $this->host = $config['host'] ?? '127.0.0.1';
@@ -26,17 +26,33 @@ public function __construct(array $config,LoopInterface $loop,OutputInterface $o
         $this->loop = $loop;
         $this->output = $output;
 
-        $psm = ProcessStateManager::getInstance($output,$loop);
-
         $this->server = new Server($this->loop,function(ServerRequestInterface $request) use($psm) {
 
             $route = $request->getUri()->getPath();
 
             // Serve out dashboard
-            if($route === "/") {
+            if($route === "/" || $route==="/app.css" || $route==="/app.js") {
+
+                $route = ($route==="/") ? "/index.html" : $route;
+
+                switch ($route) {
+                    case '/index.html':
+                        $mime = 'text/html';
+                        break;
+                    case '/app.js':
+                        $mime = 'text/javascript';
+                        break;
+                    case '/app.css':
+                        $mime = 'text/css';
+                        break;
+                    default:
+                        $mime = "text/json";
+                        break;
+                }
+
                 return new Response(200,[
-                    'Content-Type' => 'text/html'
-                ],file_get_contents(__DIR__.'/ui/index.html'));
+                    'Content-Type' => $mime
+                ],file_get_contents(__DIR__.'/ui'.$route));
             }
 
             if($route === "/api/processes") {
diff --git a/src/ui/app.css b/src/ui/app.css
index e69de29..3e396c3 100644
--- a/src/ui/app.css
+++ b/src/ui/app.css
@@ -0,0 +1,12 @@
+body {
+    font-family: Nunito, sans-serif;
+    font-size: .95rem;
+    font-weight: 400;
+    line-height: 1.5;
+}
+
+.truncate {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
\ No newline at end of file
diff --git a/src/ui/app.js b/src/ui/app.js
index e69de29..d9ebd6e 100644
--- a/src/ui/app.js
+++ b/src/ui/app.js
@@ -0,0 +1,168 @@
+function main() {
+    setInterval(() => {
+        axios.get('/api/processes')
+            .then(resp => {
+
+                // Format desktop/tablet
+                let data = '';
+
+                let icon = "<svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-7 w-7\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\
+                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z\" />\
+                    </svg>";
+
+                resp.data.forEach((item, i) => {
+
+                    let logButton = "<div class='w-8 text-gray-400 hover:text-gray-600 block' id=\"hook-"+i+"\" onclick=\"openLogModal('"+item.name+"')\">"+icon+"</div>";
+
+                    data += "<tr class=\"bg-white border border-gray-200 h-12\">";
+                    data += "   <td class='truncate md:px-3'>"+ item.name + "</td>";
+                    data += "   <td class='hidden lg:block'><pre class=\"truncate\">" + item.command + "</pre></td>";
+                    data += "   <td class='w-10 md:pl-4'>"+logButton+"</td>";
+                    data += "   <td class='text-center'>" + statusPill(item.status) + "</td>";
+                    data += "   <td class='text-center hidden md:block md:py-4'>" + fuzzyTime(item.started_at) + "</td>";
+                    data += "   <td class='hidden lg:block -mt-5 lg:mb-2 text-center'>"+formattedAttempt(item)+"</td>";
+                    data += "</tr>";
+                });
+
+                document.querySelector('#tablecontent').innerHTML = data;
+
+                let mobile = '';
+
+                // Format Mobile
+                resp.data.forEach((item,i) => {
+
+                    mobile += "<div class=\"mt-4 bg-white\" onClick=\"openLogModal('"+item.name+"');\">";
+                    mobile += '     <div class="flex justify-between">';
+                    mobile += '         <h1 class="text-lg pl-2 pt-1 truncate pr-8">'+item.name+'</h1>';
+                    mobile += '          <div class="mt-2">'+statusPill(item.status)+'</div>';
+                    mobile += '     </div>';
+                    // mobile += '<div class="pl-2 pr-2">';
+                    // mobile += "     <pre class='truncate'>"+item.command+"</pre>";
+                    // mobile += '</div>';
+                    mobile += '<div class="flex justify-between p-2">';
+                    mobile += ' <span>'+formattedAttempt(item)+"</span>";
+                    mobile += ' <span>'+fuzzyTime(item.started_at)+"</span>";
+                    mobile += '</div>';
+                    mobile += '</div>';
+                })
+
+                document.querySelector('#mobile').innerHTML = mobile;
+            })
+            .catch(e => console.error(e.message));
+    },1000);
+}
+
+function classes(...items) { return items.join(' ') }
+
+function formattedAttempt(item) {
+
+    if(item.retries===0 && item.currentRetry===0) {
+        return '<span class="text-sm text-gray-400"> 0 / 0 </span>';
+    }
+
+    let max = (item.retries===-1) ? '&infin;' : item.retries;
+
+    return '<span class="text-sm text-gray-400">'+item.currentRetry+" / "+max+'</span>';
+}
+
+function statusPill(label) {
+
+    if (label === "Finished") {
+        return "<div class=\"py-1 px-2 md:py-2 md:px-4 shadow-md no-underline rounded-full bg-blue-800 text-white font-sans font-semibold text-xs md:text-sm border-blue btn-primary hover:text-white hover:bg-blue-light focus:outline-none active:shadow-none mr-2\">Finished</div>";
+    }
+
+    if (label === "Running") {
+        return "<div class=\"py-1 px-2 md:py-2 md:px-4 shadow-md no-underline rounded-full bg-green-600 text-white font-sans font-semibold text-xs md:text-sm border-blue btn-primary hover:text-white hover:bg-blue-light focus:outline-none active:shadow-none mr-2\">Running</div>";
+    }
+
+    if (label === "Crashed") {
+        return "<div class=\"py-1 px-2 md:py-2 md:px-4 shadow-md no-underline rounded-full bg-red-600 text-white font-sans font-semibold text-sm md:text-sm border-blue btn-primary hover:text-white hover:bg-blue-light focus:outline-none active:shadow-none mr-2\">Crashed</div>";
+    }
+
+    if (label === "Created") {
+        return "<div class=\"py-1 px-2 md:py-2 md:px-4 shadow-md no-underline rounded-full bg-blue-400 text-white font-sans font-semibold text-sm md:text-sm border-blue btn-primary hover:text-white hover:bg-blue-light focus:outline-none active:shadow-none mr-2\">Created</div>";
+    }
+
+    return label;
+}
+
+function fuzzyTime(data) {
+
+    // let data = "2021-01-18T20:30:00";
+    // const ts = Date.parse(data);
+    // console.log(ts,data);
+
+    return '<span class="text-sm text-gray-400">' + timeDifference(data, 'en') + '</span>';
+}
+
+function timeDifference(timestamp, locale) {
+
+    const msPerMinute = 60 * 1000;
+    const msPerHour = msPerMinute * 60;
+    const msPerDay = msPerHour * 24;
+
+    const current = Date.now();
+    const elapsed = current - timestamp;
+
+    const rtf = new Intl.RelativeTimeFormat(locale, {numeric: "auto"});
+
+    if (elapsed < msPerMinute) {
+        return rtf.format(-Math.floor(elapsed / 1000), 'seconds');
+    } else if (elapsed < msPerHour) {
+        return rtf.format(-Math.floor(elapsed / msPerMinute), 'minutes');
+    } else if (elapsed < msPerDay) {
+        return rtf.format(-Math.floor(elapsed / msPerHour), 'hours');
+    } else {
+        return new Date(timestamp).toLocaleDateString(locale);
+    }
+}
+
+function openLogModal(title) {
+    document.querySelector('#modal-title').innerHTML = "Recent evens for "+title;
+    document.querySelector('#modal-content').innerHTML = "";
+
+    document.querySelector('#modal').style.display = "block";
+
+    // Add listener
+    logWatcher = setInterval(() => {
+
+        const url = '/api/log/'+title;
+        axios.get(url)
+            .then(resp => {
+                let lines = resp.data.log
+                    .map(line => {
+                        if(line.msg !== "") {
+                            let channel = line.channel.replace('std','');
+
+                            let prefix;
+                            if(channel=="out") {
+                                prefix = '<span class="text-gray-400">[Out]</span>';
+                            } else {
+                                prefix = '<span class="text-red-400">[Err]</span>';
+                            }
+
+                            return prefix+"&nbsp;<span class='text-white'>"+line.msg+"</span>";
+
+                        } else {
+                            return "";
+                        }
+                    })
+                    .filter(line => line!=="")
+                    .join('<br />');
+
+                document.querySelector('#modal-content').innerHTML = lines;
+            })
+            .catch(e => {
+                console.error(e);
+            })
+
+    },250);
+}
+
+function closeLogModal() {
+
+    document.querySelector('#modal').style.display = 'none';
+
+    // Remove Listener
+    clearInterval(logWatcher);
+}
diff --git a/src/ui/index.html b/src/ui/index.html
index 6144ae5..d0370a3 100644
--- a/src/ui/index.html
+++ b/src/ui/index.html
@@ -9,25 +9,11 @@
     <title>Maple :: Dashboard</title>
 
     <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+    <script src="app.js"></script>
 
     <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
     <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
-
-    <style>
-        body {
-            font-family: Nunito, sans-serif;
-            font-size: .95rem;
-            font-weight: 400;
-            line-height: 1.5;
-        }
-
-        .truncate {
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-    </style>
-
+    <link href="./app.css" rel="stylesheet">
 </head>
 
 <script>
@@ -35,178 +21,17 @@
         main();
         var logWatcher = undefined;
     })
+</script>
 
-    function main() {
-
-        setInterval(() => {
-            axios.get('/api/processes')
-                .then(resp => {
-
-                    // Fortmat desktop/tablet
-                    let data = '';
-
-                    let icon = "<svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\
-                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z\" />\
-                    </svg>";
-
-                    resp.data.forEach((item, i) => {
-
-                        let logButton = "<div id=\"hook-"+i+"\" onclick=\"openLogModal('"+item.name+"')\">"+icon+"</div>";
-
-                        data += "<tr class=\"bg-white border border-gray-200\">";
-                        data += "   <td class='lg:w-4 px-3 py-2 hidden lg:block w-0'>" + i + "</td>";
-                        data += "   <td class='w-2/5 px-4 py-2'>" + item.name + "</td>";
-                        data += "   <td class='w-0 md:w-3/12 lg:w-3/5 px-1 py-2 hidden lg:block'><pre class=\"truncate\">" + item.command + "</pre></td>";
-                        data += "   <td class='w-1/12 x-1 py-2 text-gray-400 hover:text-gray-600 text-center'>"+logButton+"</td>";
-                        data += "   <td class='w-12 px-5 py-2'>" + statusPill(item.status) + "</td>";
-                        data += "   <td class='w-12 px-1 py-2'>" + fuzzyTime(item.started_at) + "</td>";
-                        data += "   <td class='w-6/12 px-1 py-2 hidden lg:block'>"+formattedAttempt(item)+"</td>";
-                        data += "</tr>";
-                    });
-
-                    document.querySelector('#tablecontent').innerHTML = data;
-
-                    let mobile = '';
-
-                    // Format Mobile 
-                    resp.data.forEach((item,i) => {
-
-                        mobile += "<div class=\"mt-4 bg-white\" onClick=\"openLogModal('"+item.name+"');\">";
-                        mobile += '     <div class="flex justify-between">';
-                        mobile += '         <h1 class="text-lg pl-2 pt-1 truncate pr-8">'+item.name+'</h1>';
-                        mobile += '          <div class="mt-2">'+statusPill(item.status)+'</div>';
-                        mobile += '     </div>';
-                        // mobile += '<div class="pl-2 pr-2">';
-                        // mobile += "     <pre class='truncate'>"+item.command+"</pre>";
-                        // mobile += '</div>';
-                        mobile += '<div class="flex justify-between p-2">'; 
-                        mobile += ' <span>'+formattedAttempt(item)+"</span>";
-                        mobile += ' <span>'+fuzzyTime(item.started_at)+"</span>";
-                        mobile += '</div>';
-                        mobile += '</div>';
-                    })
-
-                    document.querySelector('#mobile').innerHTML = mobile;
-                })
-                .catch(e => console.error(e.message));
-        },1000);
-    }
-
-    function formattedAttempt(item) {
-
-        if(item.retries===0 && item.currentRetry===0) {
-            return '<span class="text-sm text-gray-400"> 0 / 0 </span>';
-        }
-
-        let max = (item.retries===-1) ? '&infin;' : item.retries;
-
-        return '<span class="text-sm text-gray-400">'+item.currentRetry+" / "+max+'</span>';
-    }
-
-    function statusPill(label) {
-
-        if (label === "Finished") {
-            return "<div class=\"py-1 px-2 md:py-2 md:px-4 shadow-md no-underline rounded-full bg-blue-800 text-white font-sans font-semibold text-xs md:text-sm border-blue btn-primary hover:text-white hover:bg-blue-light focus:outline-none active:shadow-none mr-2\">Finished</div>";
-        }
-
-        if (label === "Running") {
-            return "<div class=\"py-1 px-2 md:py-2 md:px-4 shadow-md no-underline rounded-full bg-green-600 text-white font-sans font-semibold text-xs md:text-sm border-blue btn-primary hover:text-white hover:bg-blue-light focus:outline-none active:shadow-none mr-2\">Running</div>";
-        }
-
-        if (label === "Crashed") {
-            return "<div class=\"py-1 px-2 md:py-2 md:px-4 shadow-md no-underline rounded-full bg-red-600 text-white font-sans font-semibold text-sm md:text-sm border-blue btn-primary hover:text-white hover:bg-blue-light focus:outline-none active:shadow-none mr-2\">Crashed</div>";
-        }
-
-        if (label === "Created") {
-            return "<div class=\"py-1 px-2 md:py-2 md:px-4 shadow-md no-underline rounded-full bg-blue-400 text-white font-sans font-semibold text-sm md:text-sm border-blue btn-primary hover:text-white hover:bg-blue-light focus:outline-none active:shadow-none mr-2\">Created</div>";
-        }
-
-        return label;
-    }
-
-    function fuzzyTime(data) {
-
-        // let data = "2021-01-18T20:30:00";
-        // const ts = Date.parse(data);
-        // console.log(ts,data);
-
-        return '<span class="text-sm text-gray-400">' + timeDifference(data, 'en') + '</span>';
-    }
-
-    function timeDifference(timestamp, locale) {
-
-        const msPerMinute = 60 * 1000;
-        const msPerHour = msPerMinute * 60;
-        const msPerDay = msPerHour * 24;
-
-        const current = Date.now();
-        const elapsed = current - timestamp;
-
-        const rtf = new Intl.RelativeTimeFormat(locale, {numeric: "auto"});
-
-        if (elapsed < msPerMinute) {
-            return rtf.format(-Math.floor(elapsed / 1000), 'seconds');
-        } else if (elapsed < msPerHour) {
-            return rtf.format(-Math.floor(elapsed / msPerMinute), 'minutes');
-        } else if (elapsed < msPerDay) {
-            return rtf.format(-Math.floor(elapsed / msPerHour), 'hours');
-        } else {
-            return new Date(timestamp).toLocaleDateString(locale);
-        }
-    }
-
-    function openLogModal(title) {
-        document.querySelector('#modal-title').innerHTML = "Recent evens for "+title;
-        document.querySelector('#modal-content').innerHTML = "";
-
-        document.querySelector('#modal').style.display = "block";
-
-        // Add listener
-        logWatcher = setInterval(() => {
-            
-            const url = '/api/log/'+title;
-            axios.get(url)
-                .then(resp => {
-                    let lines = resp.data.log
-                        .map(line => {
-                            if(line.msg !== "") {
-                                let channel = line.channel.replace('std','');
-
-                                let prefix;
-                                if(channel=="out") {
-                                    prefix = '<span class="text-gray-400">[Out]</span>';
-                                } else {
-                                    prefix = '<span class="text-red-400">[Err]</span>';
-                                }
-
-                                return prefix+"&nbsp;<span class='text-white'>"+line.msg+"</span>";
-
-                            } else {
-                                return "";
-                            }
-                        })
-                        .filter(line => line!=="")
-                        .join('<br />');
-
-                    document.querySelector('#modal-content').innerHTML = lines;
-                })
-                .catch(e => {
-                    console.error(e);
-                })
-
-        },250);
-    }
-
-    function closeLogModal() {
-
-        document.querySelector('#modal').style.display = 'none';
-
-        // Remove Listener
-        clearInterval(logWatcher);
-    }
+<body class="bg-gray-100 w-full overflow-hidden">
 
-</script>
-<body class="bg-gray-100">
+<div class="fixed top-0 right-0 bg-gray-500 opacity-70 p-2 text-green-400">
+    <span class="block md:hidden">SM</span>
+    <span class="hidden md:block lg:hidden">MD</span>
+    <span class="hidden lg:block xl:hidden">LG</span>
+    <span class="hidden xl:block 2xl:hidden">XL</span>
+    <span class="hidden 2xl:block">2XL</span>
+</div>
 
 <div class="header w-full h-18 p-4 border-b border-gray-200 mb-0 lg:mb-6 flex bg-red-600 text-white">
     <div class="w-10 h-10 mr-4">
@@ -229,8 +54,6 @@ <h4 class="font-medium text-2xl">Maple</h4>
 
 <div class="flex">
 
-    <div class="w-0 lg:w-3/12"></div>
-
     <!-- Mobile view -->
     <div class="w-full md:hidden">
         <h4 class="text-xl p-2 bg-white">Processes</h4>
@@ -241,7 +64,7 @@ <h4 class="text-xl p-2 bg-white">Processes</h4>
     </div>
 
     <!-- Tablet and desktop view -->
-    <div class="w-full flex hidden md:block">
+    <div class="w-full flex hidden md:block lg:mx-12">
 
         <div class="w-full bg-white lg:shadow-xl">
 
@@ -249,49 +72,28 @@ <h4 class="text-xl p-2 bg-white">Processes</h4>
                 <h4 class="text-xl">Processes</h4>
             </div>
 
-            <table class="w-full table-auto mb-6">
+                <table class="w-full table-fixed mb-6">
 
                 <thead class="justify-between">
-                <tr class="bg-gray-100">
-                    <th class="px-2 py-2 hidden lg:block">
-                        <span class="text-gray-600">#</span>
-                    </th>
-                    <th class="px-2 py-2">
-                        <span class="text-gray-600">Name</span>
-                    </th>
-                    <th class="px-8 py-2 hidden lg:block">
-                        <span class="text-gray-600">Command</span>
-                    </th>
-
-                    <th class="px-4 py-2">
-                        <span class="text-gray-600">Log</span>
-                    </th>
-
-                    <th class="px-4 py-2">
-                        <span class="text-gray-600">Status</span>
-                    </th>
-
-                    <th class="px-16 py-2">
-                        <span class="text-gray-600">Started</span>
-                    </th>
-
-                    <th class="px-4 py-2 hidden lg:block">
-                        <span class="text-gray-600">Attempt</span>
-                    </th>
-
-                </tr>
-                </thead>
-
-                <tbody class="bg-gray-200" id="tablecontent">
-                </tbody>
-
-            </table>
-
+                    <tr class="bg-gray-100 text-gray-600">
+                        <th class="w-4/12 md:w-6/12 lg:w-3/12">Name</th>
+                        <th class="hidden lg:block w-0 lg:w-5/12">Command</th>
+                        <th class="w-1/12">Log</th>
+                        <th class="md:w-2/12 lg:w-36">Status</th>
+                        <th class="w-2/12">Started</th>
+                        <th class="w-0 lg:w-2/12 hidden">Attempt</th>
+                    </tr>
+                    </thead>
+
+                    <tbody class="bg-gray-200 w-full" id="tablecontent">
+                    </tbody>
+
+                </table>
+            </div>
+        
         </div>
     </div>
 
-    <div class="w-0 lg:w-3/12"></div>
-
 </div>
 
 <!-- Log modal -->