Frontend rewrite (#610)

* started rewrite of frontend * Implemented navigation * Started implementation of conformance service * Started to implement UI mock * Added validate.sh to perform mpd validation * Implementing validation results presentation * Implemented result evaluation * Implemented backend communication * Moved validator logic into separate module * Added input fields for file upload and text input * Added error handling to validator * Showing processing duration * Implemented json download * Implemented HTML report generation * Improved result view * Fixed detail view when loading new result * Fixed height of main content * Fixed opening html report * Added modules according to cli manual * Added static pages * Added current page to url * Removed static result * Moved new frontend to C-F-JCCP and restored old * removed files
Dash-Industry-Forum · Nov 17, 2022 · d8bb783 · d8bb783
1 parent 7f54b79
commit d8bb783
Show file tree

Hide file tree

Showing 48 changed files with 22,619 additions and 0 deletions.
diff --git a/Conformance-Frontend-JCCP/css/bootstrap.min.css b/Conformance-Frontend-JCCP/css/bootstrap.min.css
diff --git a/Conformance-Frontend-JCCP/css/custom.css b/Conformance-Frontend-JCCP/css/custom.css
@@ -0,0 +1,10 @@
+.main-navigation .nav {
+    --bs-nav-link-color: #ddd;
+    --bs-nav-link-hover-color: #fff;
+    --bs-nav-link-disabled-color: #999;
+}
+
+.main-navigation .nav-pills {
+    --bs-nav-pills-link-active-color: #007BFF;
+    --bs-nav-pills-link-active-bg: #eee;
+}
diff --git a/Conformance-Frontend-JCCP/css/fontawesome.all.min.css b/Conformance-Frontend-JCCP/css/fontawesome.all.min.css
diff --git a/Conformance-Frontend-JCCP/index.html b/Conformance-Frontend-JCCP/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>DASH-IF Conformance Tool</title>
+  <link href="./css/bootstrap.min.css" rel="stylesheet">
+  <link href="./res/fontawesome/css/fontawesome.min.css" rel="stylesheet">
+  <link href="./res/fontawesome/css/solid.min.css" rel="stylesheet">
+  <link href="./css/custom.css" rel="stylesheet">
+  <style>
+    body,
+    #root {
+      padding: 0;
+      margin: 0;
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script src="./res/mock.js"></script>
+  <script src="./lib/ui.js"></script>
+  <script src="./lib/showdown.min.js"></script>
+  <script src="./lib/event-handler.js"></script>
+  <script src="./lib/tools.js"></script>
+  <script src="./lib/net.js"></script>
+  <script src="./lib/html-report.js"></script>
+  <script src="./services/conformance-service.js"></script>
+  <script src="./src/navigation-bar.js"></script>
+  <script src="./src/validator.js"></script>
+  <script src="./src/main-view.js"></script>
+  <script src="./src/tool-view.js"></script>
+  <script src="./src/about-view.js"></script>
+  <script src="./src/faq-view.js"></script>
+  <script src="./main.js"></script>
+</body>
+
+</html>
diff --git a/Conformance-Frontend-JCCP/lib/event-handler.js b/Conformance-Frontend-JCCP/lib/event-handler.js
@@ -0,0 +1,26 @@
+function EventHandler() {
+    let callbacks = {};
+
+    function on(eventName, callback) {
+        if (!callbacks[eventName]) callbacks[eventName] = [];
+        callbacks[eventName].push(callback);
+    }
+
+    function off(eventName, callback) {
+        if (!callbacks[eventName]) return;
+        let index = callbacks[eventName].findIndex(element => element === callback);
+        callbacks[eventName].splice(index, 1);
+    }
+
+    function dispatchEvent(eventName, payload) {
+        if (!callbacks[eventName]) return;
+        callbacks[eventName].forEach(callback => callback(payload));
+    }
+
+    let instance = {
+        on,
+        off,
+        dispatchEvent,
+    };
+    return instance;
+}