From e6a70240d03036d3a5cc5dbf7966b2a94d5254e7 Mon Sep 17 00:00:00 2001 From: Sruti Modekurty Date: Wed, 13 Feb 2019 13:33:44 -0500 Subject: [PATCH] Add api call to send data to server. Introduce data state var. --- api.js | 12 ---------- backend-aws/handler.py | 5 +--- backend-aws/serverless.yml | 7 ++++++ frontend/api.js | 31 ++++++++++++++++++++++++ graph.js => frontend/graph.js | 39 +++++++++++++++++-------------- index.html => frontend/index.html | 0 styles.css => frontend/styles.css | 0 7 files changed, 61 insertions(+), 33 deletions(-) delete mode 100644 api.js create mode 100644 frontend/api.js rename graph.js => frontend/graph.js (75%) rename index.html => frontend/index.html (100%) rename styles.css => frontend/styles.css (100%) diff --git a/api.js b/api.js deleted file mode 100644 index a9b0775..0000000 --- a/api.js +++ /dev/null @@ -1,12 +0,0 @@ -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) }); -} \ No newline at end of file diff --git a/backend-aws/handler.py b/backend-aws/handler.py index c163b81..627949b 100644 --- a/backend-aws/handler.py +++ b/backend-aws/handler.py @@ -18,14 +18,11 @@ def format_response(status_code, body): def get_data(event, context): response = table.get_item(Key={"dataId": "1"}) - print(response) data = response.get("Item") - print(data) return format_response(200, data) def store_data(event, context): - print(event) item = json.loads(event.get('body')) - item["dataId"] = "2" + item["dataId"] = "1" response = table.put_item(Item=item) return format_response(200, "Stored the data") diff --git a/backend-aws/serverless.yml b/backend-aws/serverless.yml index 3bfa984..68890c4 100644 --- a/backend-aws/serverless.yml +++ b/backend-aws/serverless.yml @@ -23,12 +23,19 @@ functions: - http: path: data method: get + cors: true store_data: handler: handler.store_data events: - http: path: data method: post + cors: + origin: '*' + headers: + - Content-Type + - Access-Control-Allow-Origin + - Access-Control-Allow-Credentials resources: Resources: diff --git a/frontend/api.js b/frontend/api.js new file mode 100644 index 0000000..3abfed9 --- /dev/null +++ b/frontend/api.js @@ -0,0 +1,31 @@ +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) }); +} + +function storeData(data) { + return fetch(`${BACKEND_URL}${DATA_ENDPOINT}`, + { + method: 'POST', + body: JSON.stringify(data), + headers: { + 'Content-Type': 'application/json', + "Access-Control-Allow-Origin": "*", + "Access-Control-Allow-Credentials": true + } + }) + .then(response => { + if (response.ok) { + return response.json() + } throw new Error(response.statusText) + }) + .catch(error => { throw new Error(error.message) }); +} \ No newline at end of file diff --git a/graph.js b/frontend/graph.js similarity index 75% rename from graph.js rename to frontend/graph.js index 57a87dc..393a888 100644 --- a/graph.js +++ b/frontend/graph.js @@ -1,5 +1,6 @@ const graphElem = document.getElementById("idea-graph"); const Graph = ForceGraph3D()(graphElem) +var dataState = {} displayGraph(); window.onclick = function (event) { @@ -9,11 +10,9 @@ window.onclick = function (event) { } async function displayGraph() { - let newData try { - newData = await getData(); - newData.nodes = newData.nodes.map(node => ({...node, tags: new Set(node.tags)})); - Graph.graphData(newData) + dataState = await getData(); + Graph.graphData(JSON.parse(JSON.stringify(dataState))) .nodeLabel("name") .onNodeHover(node => graphElem.style.cursor = node ? "pointer" : null) .onNodeClick(node => { @@ -30,7 +29,7 @@ async function displayGraph() { }); } catch (error) { - console.log(error) + console.log(error); } } @@ -42,7 +41,7 @@ function displayDetail(node) { const detailDescription = document.getElementById("detail-description"); detailName.textContent = node.name; - detailTags.textContent = [...node.tags].join(', '); + detailTags.textContent = node.tags.filter(Boolean).toString(); detailCreator.textContent = node.creator; detailDescription.textContent = node.description; @@ -66,24 +65,30 @@ function onModalSubmitClick(event, form) { const ideaDescription = form["description"]; const creatorName = form["creator-name"]; - const { nodes, links } = Graph.graphData(); - const id = nodes.length; + const id = dataState.nodes.length; + const newTags = new Set(ideaTags.value.split(",").map(tag => tag.trim().toLowerCase())); const newIdea = { - id: id, + id: id.toString(), name: ideaName.value, - tags: new Set(ideaTags.value.split(",").map(tag => tag.trim().toLowerCase())), + tags: Array.from(newTags), creator: creatorName.value, description: ideaDescription.value, }; - const newLinks = matchTags(newIdea, nodes) + const newLinks = matchTags(newIdea, dataState.nodes) - Graph.graphData({ - nodes: [...nodes, { ...newIdea }], - links: [...links, ...newLinks] - }); + dataState.nodes = [...dataState.nodes, {...newIdea}] + dataState.links = [...dataState.links, ...newLinks] + Graph.graphData(JSON.parse(JSON.stringify(dataState))) form.reset(); + + try { + storeData(dataState); + } + catch (error) { + console.log(error); + } } function onModalCloseClick(modal) { @@ -93,8 +98,8 @@ function onModalCloseClick(modal) { 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) { + var intersection = idea.tags.filter(x => newIdea.tags.includes(x)); + if (intersection.length != 0) { newLinks = [...newLinks, { source: newIdea.id, target: idea.id }] } } diff --git a/index.html b/frontend/index.html similarity index 100% rename from index.html rename to frontend/index.html diff --git a/styles.css b/frontend/styles.css similarity index 100% rename from styles.css rename to frontend/styles.css