Refactor frontend

sruti · Feb 8, 2019 · 1dfd0b3 · 1dfd0b3
1 parent 41b0df6
commit 1dfd0b3
Show file tree

Hide file tree

Showing 4 changed files with 127 additions and 117 deletions.
diff --git a/api.js b/api.js
@@ -0,0 +1,12 @@
+const BACKEND_URL = "https://syar2tbuna.execute-api.us-east-1.amazonaws.com/"
+const DATA_ENDPOINT = "dev/data"
+
+function getData() {
+    return fetch(`${BACKEND_URL}${DATA_ENDPOINT}`)
+        .then(response => {
+            if (response.ok) {
+                return response.json()
+            } throw new Error(response.statusText)
+        })
+        .catch(error => { throw new Error(error.message) });
+}
diff --git a/graph.js b/graph.js
@@ -0,0 +1,100 @@
+const graphElem = document.getElementById('idea-graph');
+const Graph = ForceGraph3D()(graphElem)
+displayGraph();
+
+window.onclick = function (event) {
+    if (event.target == document.getElementById("modal-idea-detail")) {
+        document.getElementById("modal-idea-detail").style.display = "none";
+    }
+}
+
+async function displayGraph() {
+    let newData
+    try {
+        newData = await getData()
+        Graph.graphData(newData)
+            .nodeLabel('name')
+            .onNodeHover(node => graphElem.style.cursor = node ? 'pointer' : null)
+            .onNodeClick(node => {
+                // Aim at node from outside it
+                const distance = 40;
+                const distRatio = 1 + distance / Math.hypot(node.x, node.y, node.z);
+
+                Graph.cameraPosition(
+                    { x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio }, // new position
+                    node, // lookAt ({ x, y, z })
+                    3000  // ms transition duration
+                );
+                displayDetail(node);
+            });
+    }
+    catch (error) {
+        console.log(error)
+    }
+}
+
+function displayDetail(node) {
+    const modal = document.getElementById("modal-idea-detail");
+    const detailName = document.getElementById("detail-name");
+    const detailTags = document.getElementById("detail-tags");
+    const detailCreator = document.getElementById("detail-creator");
+    const detailDescription = document.getElementById("detail-description");
+
+    detailName.textContent = node.name;
+    detailTags.textContent = [...node.tags].join(', ');
+    detailCreator.textContent = node.creator;
+    detailDescription.textContent = node.description;
+
+    modal.style.top = event.pageY;
+    modal.style.left = event.pageX;
+    modal.style.display = 'block';
+}
+
+function onAddItemClick() {
+    const modal = document.getElementById("modal-idea-new");
+    modal.style.display = "block";
+}
+
+function onModalSubmitClick(event, form) {
+    event.preventDefault();
+    const modal = document.getElementById("modal-idea-new");
+    modal.style.display = "none";
+
+    const ideaName = form["idea-name"];
+    const ideaTags = form["tags"];
+    const ideaDescription = form["description"];
+    const creatorName = form["creator-name"];
+
+    const { nodes, links } = Graph.graphData();
+    const id = nodes.length;
+
+    const newIdea = {
+        id: id,
+        name: ideaName.value,
+        tags: new Set(ideaTags.value.split(",").map(tag => tag.trim().toLowerCase())),
+        creator: creatorName.value,
+        description: ideaDescription.value,
+    };
+    const newLinks = matchTags(newIdea, nodes)
+
+    Graph.graphData({
+        nodes: [...nodes, { ...newIdea }],
+        links: [...links, ...newLinks]
+    });
+
+    form.reset();
+}
+
+function onModalCloseClick(modal) {
+    modal.parentElement.style.display = 'none';
+}
+
+function matchTags(newIdea, nodes) {
+    var newLinks = [];
+    for (idea of nodes) {
+        var intersection = new Set([...idea.tags].filter(x => newIdea.tags.has(x)));
+        if (intersection.size != 0) {
+            newLinks = [...newLinks, { source: newIdea.id, target: idea.id }]
+        }
+    }
+}
diff --git a/index.html b/index.html
@@ -1,13 +1,18 @@
+<!DOCTYPE html>
+<html lang="en-US">
+
 <head>
     <link rel="stylesheet" href="styles.css">
     <script src="https://unpkg.com/3d-force-graph"></script>
 </head>
 
 <body>
-    <div id="idea-web"></div>
-    <button id="btn-add" onclick="onAddItemClick()">Add Idea</button>
+    <div id="idea-graph"></div>
+
+    <button id="button-add" onclick="onAddItemClick()">Add Idea</button>
+
     <div id="modal-idea-new">
-        <button class="exit-button" onclick="onModalCloseClick(this)">X</button>
+        <button class="button-modal-close" onclick="onModalCloseClick(this)">X</button>
         <form id="form-idea-new" onsubmit="onModalSubmitClick(event, this)">
             Idea Name:<br>
             <input type="text" name="idea-name">
@@ -26,122 +31,15 @@
     </div>
 
     <div id="modal-idea-detail">
-        <button class="exit-button" onclick="onModalCloseClick(this)">X</button>
+        <button class="button-modal-close" onclick="onModalCloseClick(this)">X</button>
         <b><span id="detail-name"></span></b><br>
         <span id="detail-creator"></span><br><br>
         <span id="detail-description"></span><br><br>
         Topics: <span id="detail-tags"></span>
     </div>
+</body>
 
-    <script>
-        displayGraph();
-
-        async function displayGraph() {
-            const web = document.getElementById('idea-web');
-            let newData
-            try {
-                newData = await getData()
-                const Graph = ForceGraph3D()
-                    (web)
-                    .graphData(newData)
-                    .nodeLabel('name')
-                    .onNodeHover(node => web.style.cursor = node ? 'pointer' : null)
-                    .onNodeClick(node => {
-                        // Aim at node from outside it
-                        const distance = 40;
-                        const distRatio = 1 + distance / Math.hypot(node.x, node.y, node.z);
-
-                        Graph.cameraPosition(
-                            { x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio }, // new position
-                            node, // lookAt ({ x, y, z })
-                            3000  // ms transition duration
-                        );
-                        detailDisplay(node);
-                    });
-            }
-            catch (error) {
-                console.log(error)
-            }
-        }
-
-        function getData() {
-            return fetch('https://syar2tbuna.execute-api.us-east-1.amazonaws.com/dev/data')
-                .then(response => {
-                    if (response.ok) {
-                        return response.json()
-                    } throw new Error(response.statusText)
-                })
-                .catch(error => { throw new Error(error.message) });
-        }
-
-        function onAddItemClick() {
-            const modal = document.getElementById("modal-idea-new");
-            modal.style.display = "block";
-        }
-
-        function onModalSubmitClick(event, form) {
-            event.preventDefault();
-            const modal = document.getElementById("modal-idea-new");
-            const ideaName = form["idea-name"];
-            const ideaTags = form["tags"];
-            const ideaDescription = form["description"];
-            const creatorName = form["creator-name"];
-
-            const { nodes, links } = Graph.graphData();
-            const id = nodes.length;
-
-            const newIdea = {
-                id: id,
-                name: ideaName.value,
-                tags: new Set(ideaTags.value.split(",").map(tag => tag.trim().toLowerCase())),
-                creator: creatorName.value,
-                description: ideaDescription.value,
-            };
-
-            modal.style.display = "none";
-            form.reset();
-
-            var newLinks = [];
-
-            for (idea of nodes) {
-                var intersection = new Set([...idea.tags].filter(x => newIdea.tags.has(x)));
-                if (intersection.size != 0) {
-                    newLinks = [...newLinks, { source: newIdea.id, target: idea.id }]
-                }
-            }
-
-            Graph.graphData({
-                nodes: [...nodes, { ...newIdea }],
-                links: [...links, ...newLinks]
-            });
-        }
-
-        function detailDisplay(node) {
-            const modal = document.getElementById("modal-idea-detail");
-            const detailName = document.getElementById("detail-name");
-            const detailTags = document.getElementById("detail-tags");
-            const detailCreator = document.getElementById("detail-creator");
-            const detailDescription = document.getElementById("detail-description");
-
-            detailName.textContent = node.name;
-            detailTags.textContent = [...node.tags].join(', ');
-            detailCreator.textContent = node.creator;
-            detailDescription.textContent = node.description;
-
-            modal.style.top = event.pageY;
-            modal.style.left = event.pageX;
-            modal.style.display = 'block';
-        }
-
-        function onModalCloseClick(modal) {
-            modal.parentElement.style.display = 'none';
-        }
-
-        window.onclick = function (event) {
-            if (event.target == document.getElementById("modal-idea-detail")) {
-                document.getElementById("modal-idea-detail").style.display = "none";
-            }
-        }
+<script src="api.js"></script>
+<script src="graph.js"></script>
 
-    </script>
-</body>
+</html>
diff --git a/styles.css b/styles.css
@@ -3,7 +3,7 @@ body {
     font-family: Arial, Helvetica, sans-serif;
 }
 
-#btn-add {
+#button-add {
     position: fixed;
     bottom: 10px;
     right: 10px;
@@ -30,7 +30,7 @@ textarea {
     height: 75px;
 }
 
-.exit-button {
+.button-modal-close {
     position: absolute;
     right: 5px;
     top: 5px;