Sparse-Technology · iegrsy · Jan 3, 2024 · Jan 3, 2024 · Jan 3, 2024 · Jan 3, 2024
diff --git a/Pages/Index.cshtml b/Pages/Index.cshtml
@@ -10,68 +10,11 @@
     ViewData["Title"] = "Device Monitoring";
 }
 
+@section Styles{
+    <link rel="stylesheet" href="~/css/index.css" />
+}
 
-<style>
-
-    body {
-        background-color: #3f4549;
-    }
-
-    [data-card="cameraContainer"] {
-        width: 100%;
-        box-sizing: border-box;
-        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
-        background-color: #fff;
-        border-radius: 0.5rem;
-        padding: 1rem;
-        margin: 1rem;
-        transition: box-shadow 0.3s ease, border-radius 0.3s ease, background-color 0.3s ease;
-    }
-
-        [data-card="cameraContainer"]:hover {
-            box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.3);
-            border-radius: 1.5rem;
-            background-color: #dcdcdc;
-        }
-
-    .camera-card {
-        width: 100%;
-    }
-
-    .bg-light-gray {
-        background-color: #7d8690; /* Light Gray */
-    }
-
-    .bg-gray {
-        background-color: #6c757d; /* Gray */
-    }
-
-    .bg-dark-gray {
-        background-color: #3f4549; /* Dark Gray */
-    }
-
-    body {
-        overflow-y: scroll;
-        scrollbar-width: thin;
-        scrollbar-color: #333 #f5f5f5; 
-    }
-
-        body::-webkit-scrollbar {
-            width: 8px; 
-        }
-
-        body::-webkit-scrollbar-thumb {
-            background-color: #333;
-        }
-
-        body::-webkit-scrollbar-track {
-            background-color: #f5f5f5; 
-        }
-
-</style>
-
-
-<header>
+<div>
     <nav class="navbar navbar-expand-lg navbar-dark bg-dark p-2">
         <div class="d-flex flex-row align-items-center justify-content-between me-2 ms-2 w-100">
 
@@ -104,10 +47,11 @@
             </div>
         </div>
     </nav>
-</header>
+</div>
 
+<div id="streamNotif">Stream is copied.</div>
 
-<body data-simplebar>
+<div data-simplebar>
     <div class="d-flex flex-row justify-content-between p-2 ms-2 me-2">
         <!-- Tagify Filter Bar with Button -->
         <div class="d-flex input-group w-50">
@@ -149,9 +93,9 @@
             <div class="accordion-body">
                 <div id="exportMenu" class="card bg-light">
                     <div class="d-flex flex-column mt-2 bg-light">
-                        <button type="submit" class="btn btn-outline-dark mb-2">
+                        <button onclick="toggleExportOptions()" type="submit" class="btn btn-outline-dark mb-2">
                             <i class="fa-solid fa-arrow-right-arrow-left"></i>
-                            <span id="exportOptionsButton" onclick="toggleExportOptions()">Advanced Export Options</span>
+                            <span id="exportOptionsButton">Advanced Export Options</span>
                         </button>
 
                         <div class="d-flex flex-row justify-content-between ms-2 me-2">
@@ -505,13 +449,13 @@
                                                         @switch (dev.Streams[i].Status)
                                                         {
                                                             case Models.StreamStatus.OK:
-                                                                <div class="col-lg-8"><a class="badge bg-success" style="white-space: unset !important;" data-toggle="tooltip" title="<img src='./thumbnails/@(dev.UUID)/stream_@(i)__1.jpeg' class='img-thumbnail' style='width:100% !important; height:auto !important;'>">@dev.Streams[i].URI</a></div>
+                                                                <div class="col-lg-8 btn btn-sm"><a class="badge bg-success" onclick="myFunction()" data-stream="@dev.Streams[i].URI" style="white-space: unset !important;" data-toggle="tooltip" title="<img src='./thumbnails/@(dev.UUID)/stream_@(i)__1.jpeg' class='img-thumbnail' style='width:100% !important; height:auto !important;'>">@dev.Streams[i].URI</a></div>
                                                                 break;
                                                             case Models.StreamStatus.ERROR:
-                                                                <div class="col-lg-8"><a class="badge bg-danger" style="white-space: unset !important;">@dev.Streams[i].URI</a></div>
+                                                                <div class="col-lg-8 btn btn-sm"><a class="badge bg-danger" onclick="myFunction()" data-stream="@dev.Streams[i].URI" style="white-space: unset !important;">@dev.Streams[i].URI</a></div>
                                                                 break;
                                                             default:
-                                                                <div class="col-lg-8"><a class="badge bg-warning" style="white-space: unset !important;">@dev.Streams[i].URI</a></div>
+                                                                <div class="col-lg-8 btn btn-sm"><a class="badge bg-warning" onclick="myFunction()" data-stream="@dev.Streams[i].URI" style="white-space: unset !important;">@dev.Streams[i].URI</a></div>
                                                                 break;
                                                         }
                                                     }
@@ -531,9 +475,10 @@
             }
         </div>
     </div>
-</body>
+</div>
+
 
 
 @section Scripts {
-    <script src="~/js/dist/bundle.js"></script>
-}
+
+}
diff --git a/Pages/Shared/_Layout.cshtml b/Pages/Shared/_Layout.cshtml
@@ -4,28 +4,15 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>@ViewData["Title"]</title>
+    <link rel="stylesheet" href="~/js/dist/main.bundle.css" />
     <link rel="icon" type="image/x-icon" href="https://web-test.sparsetechnology.com/images/favicon.png">
+    @await RenderSectionAsync("Styles", required: false)
 
-    <style>
-        ::-webkit-scrollbar {
-            width: 12px;
-        }
-
-        ::-webkit-scrollbar-track {
-            -webkit-box-shadow: inset 0 0 6px rgba(200,200,200,1);
-            border-radius: 10px;
-        }
-
-        ::-webkit-scrollbar-thumb {
-            border-radius: 10px;
-            background-color: #fff;
-            -webkit-box-shadow: inset 0 0 6px rgba(90,90,90,0.7);
-        }
-    </style>
 </head>
 <body>
     @RenderBody()
-
     @await RenderSectionAsync("Scripts", required: false)
+    <script src="~/js/dist/main.bundle.js"></script>
+
 </body>
 </html>
diff --git a/wwwroot/css/index.css b/wwwroot/css/index.css
@@ -0,0 +1,98 @@
+body {
+  background-color: #3f4549;
+}
+
+[data-card="cameraContainer"] {
+  width: 100%;
+  box-sizing: border-box;
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
+  background-color: #fff;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  margin: 1rem;
+  transition: box-shadow 0.3s ease, border-radius 0.3s ease,
+    background-color 0.3s ease;
+}
+
+[data-card="cameraContainer"]:hover {
+  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.3);
+  border-radius: 1.5rem;
+  background-color: #dcdcdc;
+}
+
+.camera-card {
+  width: 100%;
+}
+
+.bg-light-gray {
+  background-color: #7d8690; /* Light Gray */
+}
+
+.bg-gray {
+  background-color: #6c757d; /* Gray */
+}
+
+.bg-dark-gray {
+  background-color: #3f4549; /* Dark Gray */
+}
+
+body {
+  overflow-y: scroll;
+  scrollbar-width: thin;
+  scrollbar-color: #333 #f5f5f5;
+}
+
+body::-webkit-scrollbar {
+  width: 8px;
+}
+
+body::-webkit-scrollbar-thumb {
+  background-color: #333;
+}
+
+body::-webkit-scrollbar-track {
+  background-color: #f5f5f5;
+}
+
+
+#streamNotif {
+  visibility: hidden;
+  min-width: 3rem;
+  background-color: #20ad6b;
+  color: #ffffff;
+  text-align: center;
+  border-radius: 2rem;
+  padding: 2rem;
+  position: fixed;
+  z-index: 1;
+  left: 50%;
+  bottom: 2rem;
+  font-size: 1.5rem;
+  opacity: 0.9;
+}
+
+#streamNotif.show {
+  visibility: visible;
+  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
+  animation: fadein 0.5s, fadeout 0.5s 2.5s;
+}
+
+@-webkit-keyframes fadein {
+  from {bottom: 0; opacity: 0;} 
+  to {bottom: 30px; opacity: 1;}
+}
+
+@keyframes fadein {
+  from {bottom: 0; opacity: 0;}
+  to {bottom: 30px; opacity: 1;}
+}
+
+@-webkit-keyframes fadeout {
+  from {bottom: 30px; opacity: 1;} 
+  to {bottom: 0; opacity: 0;}
+}
+
+@keyframes fadeout {
+  from {bottom: 30px; opacity: 1;}
+  to {bottom: 0; opacity: 0;}
+}
diff --git a/wwwroot/js/package.json b/wwwroot/js/package.json
@@ -10,12 +10,16 @@
     "@babel/core": "^7.23.6",
     "@babel/plugin-proposal-decorators": "^7.23.6",
     "@babel/preset-env": "^7.23.6",
+    "autoprefixer": "^10.4.16",
     "babel-loader": "^9.1.3",
     "css-loader": "^6.8.1",
     "expose-loader": "^4.1.0",
     "html-webpack-plugin": "^5.5.3",
+    "mini-css-extract-plugin": "^2.7.6",
+    "postcss-loader": "^7.3.4",
     "prettier": "^3.1.1",
-    "sass-loader": "^13.3.2",
+    "sass": "^1.69.7",
+    "sass-loader": "^13.3.3",
     "standard": "^17.1.0",
     "style-loader": "^3.3.3",
     "webpack": "^5.89.0",

diff --git a/wwwroot/js/src/Classes/CustomTagify.js b/wwwroot/js/src/Classes/CustomTagify.js
@@ -31,7 +31,6 @@ class CustomTagify {
       var dataFilterText = $(this).text().toLowerCase().trim();
       words.add(dataFilterText);
     });
-    console.log(Array.from(words));
     return Array.from(words);
   }
 

diff --git a/wwwroot/js/src/main.js b/wwwroot/js/src/main.js
@@ -1,11 +1,13 @@
-import { CustomTagify } from "./Classes/CustomTagify";
-import hljs from "highlight.js";
+import "bootstrap/dist/css/bootstrap.min.css";
 import "highlight.js/styles/intellij-light.css";
 import { Tooltip, Toast, Popover } from "bootstrap";
-import "bootstrap/dist/css/bootstrap.min.css";
 import fontawesome from "@fortawesome/fontawesome-free/js/all.js";
+import { CustomTagify } from "./Classes/CustomTagify";
+import hljs from "highlight.js";
 import { jsonrepair } from "jsonrepair";
 
+
+
 // GLOBAL VARIABLES
 var jsonDeviceArray = [];
 var jsonStringCopy = "";
@@ -356,3 +358,29 @@ window.copyDevicesJSON = function () {
       alert("Unable to copy the content", error);
     });
 };
+
+document.addEventListener("DOMContentLoaded", function () {
+  var copyButtons = document.querySelectorAll("[data-stream]");
+
+  copyButtons.forEach(function (button) {
+    button.addEventListener("click", function () {
+      var streamData = button.getAttribute("data-stream");
+
+      navigator.clipboard
+        .writeText(streamData)
+        .then(() => {
+          console.log(streamData);
+          notificateStream();
+        })
+        .catch((error) => {
+          console.log(error)
+        });
+    });
+  });
+});
+
+window.notificateStream = function () {
+  var x = document.getElementById("streamNotif");
+  x.className = "show";
+  setTimeout(function(){ x.className = x.className.replace("show", ""); }, 2500);
+  }
diff --git a/wwwroot/js/webpack.config.js b/wwwroot/js/webpack.config.js
@@ -1,17 +1,20 @@
 var webpack = require("webpack");
 const path = require("path");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 module.exports = {
-  entry: "./src/main.js",
+  entry: {
+    main: "./src/main.js",
+  },
   output: {
-    filename: "bundle.js",
+    filename: "[name].bundle.js",
     path: path.resolve(__dirname, "dist"),
   },
   module: {
     rules: [
       {
         test: /\.css$/i,
-        use: ["style-loader", "css-loader"],
+        use: [MiniCssExtractPlugin.loader, "css-loader"],
       },
     ],
   },
@@ -21,5 +24,8 @@ module.exports = {
       jQuery: "jquery",
       "window.jQuery": "jquery",
     }),
+    new MiniCssExtractPlugin({
+      filename: "[name].bundle.css",
+    }),
   ],
 };