From 5208ae7774180ea270dd962667ac156c7680c88b Mon Sep 17 00:00:00 2001
From: Guillaume Schurck <g.schurck@gmail.com>
Date: Fri, 20 Jan 2023 01:25:07 +0100
Subject: [PATCH] test js store
---
.../src/components/RelationInsert.svelte | 10 ++-
.../src/components/SoftwareInsert.svelte | 9 ++-
.../src/components/SoftwareMerger.svelte | 29 ++------
.../src/components/SoftwareSelect.svelte | 74 +++++++++++--------
sg-frontend/src/routes/AddNode.svelte | 4 +-
sg-frontend/src/store.js | 34 +++++++++
6 files changed, 101 insertions(+), 59 deletions(-)
create mode 100644 sg-frontend/src/store.js
diff --git a/sg-frontend/src/components/RelationInsert.svelte b/sg-frontend/src/components/RelationInsert.svelte
index 7d0386f..7a60374 100644
--- a/sg-frontend/src/components/RelationInsert.svelte
+++ b/sg-frontend/src/components/RelationInsert.svelte
@@ -1,6 +1,7 @@
<script>
import SoftwareSelect from "./SoftwareSelect.svelte";
import {onMount} from "svelte";
+ import {softwareNamesStore} from "../store.js";
let softwares = [],
software1,
@@ -8,6 +9,7 @@
result,
node;
const BACKEND_URL = import.meta.env.VITE_BACKEND_URL;
+
onMount(async () => {
const relationAddButton = document.getElementById("relationAddButton");
@@ -39,6 +41,10 @@
node = Object.values(Object.values(element))[0];
delete Object.assign(node, {["label"]: node["name"]})["name"];
tempSoft.push(node);
+ softwareNamesStore.update((store) => {
+ store.push(node["label"]);
+ return store;
+ });
});
softwares = tempSoft;
console.log(softwares);
@@ -51,7 +57,7 @@
</script>
<form>
- <SoftwareSelect items="{softwares}" bind:selectedSoftware="{software1}"/>
+ <SoftwareSelect bind:selectedSoftware="{software1}"/>
<div>
<label class="radio-inline">
<input type="radio" id="SIMILAR" name="relationType" value="SIMILAR" checked>SIMILAR
@@ -60,7 +66,7 @@
<input type="radio" id="HAS_SAME_CREATOR" name="relationType" value="HAS_SAME_CREATOR">HAS SAME CREATOR
</label>
</div>
- <SoftwareSelect items="{softwares}" bind:selectedSoftware="{software2}"/>
+ <SoftwareSelect bind:selectedSoftware="{software2}"/>
<button id="relationAddButton">Add</button>
</form>
diff --git a/sg-frontend/src/components/SoftwareInsert.svelte b/sg-frontend/src/components/SoftwareInsert.svelte
index abb98b8..d0cd225 100644
--- a/sg-frontend/src/components/SoftwareInsert.svelte
+++ b/sg-frontend/src/components/SoftwareInsert.svelte
@@ -1,4 +1,5 @@
<script>
+ import {softwareNamesStore} from "../store.js";
const BACKEND_URL = import.meta.env.VITE_BACKEND_URL;
@@ -12,7 +13,13 @@
"Content-Type": "application/json",
},
body: JSON.stringify({"newNodeName": newNodeName}),
- }).then(() => window.location.reload());
+ }).then(() => {
+ softwareNamesStore.update((softwareNames) => {
+ softwareNames.push(newNodeName);
+ return softwareNames;
+ });
+ // window.location.reload()
+ });
}
}
</script>
diff --git a/sg-frontend/src/components/SoftwareMerger.svelte b/sg-frontend/src/components/SoftwareMerger.svelte
index 947413f..f975a38 100644
--- a/sg-frontend/src/components/SoftwareMerger.svelte
+++ b/sg-frontend/src/components/SoftwareMerger.svelte
@@ -1,33 +1,14 @@
<script>
- import {onMount} from "svelte";
- import SoftwareSelect from "./SoftwareSelect.svelte";
+ import SoftwareSelect from "./SoftwareSelect.svelte";
- const BACKEND_URL = import.meta.env.VITE_BACKEND_URL;
+ const BACKEND_URL = import.meta.env.VITE_BACKEND_URL;
console.log(import.meta.env.VITE_BACKEND_URL);
let softwares = [],
software1,
software2,
result,
node;
- onMount(async () => {
- await fetch(BACKEND_URL + "/software")
- .then((response) => response.json())
- .then((data) => {
- console.log(data);
- let tempSoft = [];
- data["softwares"].forEach((element) => {
- node = Object.values(Object.values(element))[0];
- delete Object.assign(node, {["label"]: node["name"]})["name"];
- tempSoft.push(node);
- });
- softwares = tempSoft;
- console.log(softwares);
- })
- .catch((error) => {
- console.log(error);
- return [];
- });
- });
+
function checkVars() {
console.log({onChange: {software1: software1, softwares: softwares}});
@@ -62,9 +43,9 @@
</script>
<p>First Software</p>
-<SoftwareSelect items="{softwares}" bind:selectedSoftware="{software1}"/>
+<SoftwareSelect bind:selectedSoftware="{software1}"/>
<p>Second Software</p>
-<SoftwareSelect items="{softwares}" bind:selectedSoftware="{software2}"/>
+<SoftwareSelect bind:selectedSoftware="{software2}"/>
{#if result}
<div style="max-width: 470px; text-align: left; margin: auto;">
diff --git a/sg-frontend/src/components/SoftwareSelect.svelte b/sg-frontend/src/components/SoftwareSelect.svelte
index 844318e..30b1b0d 100644
--- a/sg-frontend/src/components/SoftwareSelect.svelte
+++ b/sg-frontend/src/components/SoftwareSelect.svelte
@@ -1,44 +1,58 @@
<script>
- import Select from "svelte-select";
+ import Select from "svelte-select";
+ import {fetchSoftwareNames, softwareNamesStore} from "../store.js";
+ import {onDestroy} from "svelte";
- export let items, selectedSoftware;
- function handleSelect(event) {
- console.log(event);
- selectedSoftware = event.detail;
- }
+ let softwareNames = fetchSoftwareNames();
+ console.log("sooooo");
+ console.log(softwareNames);
+ let unsubscribe = softwareNamesStore.subscribe(value => {
+ console.log("value", value);
+ softwareNames = value;
+ });
+ onDestroy(unsubscribe);
- function handleClear() {
- selectedSoftware = "null";
- }
- console.log(items);
+
+ export let items, selectedSoftware;
+
+ function handleSelect(event) {
+ console.log(event);
+ selectedSoftware = event.detail;
+ }
+
+ function handleClear() {
+ selectedSoftware = "null";
+ }
+
+ console.log(softwareNames);
</script>
<form>
- <label for="food">Software:</label>
- <Select
- id="food"
- items="{items}"
- on:select="{handleSelect}"
- on:clear="{handleClear}"
- />
+ <label for="food">Software:</label>
+ <Select
+ id="food"
+ bind:items="{$softwareNamesStore}"
+ on:select="{handleSelect}"
+ on:clear="{handleClear}"
+ />
</form>
{#if selectedSoftware}
- <p>Selected software is: {selectedSoftware.label}</p>
+ <p>Selected software is: {selectedSoftware.label}</p>
{/if}
<style>
- form {
- max-width: 500px;
- background: #f4f4f4;
- padding: 20px;
- border-radius: 4px;
- color: black;
- margin: auto;
- }
-
- label {
- margin: 0 0 10px;
- }
+ form {
+ max-width: 500px;
+ background: #f4f4f4;
+ padding: 20px;
+ border-radius: 4px;
+ color: black;
+ margin: auto;
+ }
+
+ label {
+ margin: 0 0 10px;
+ }
</style>
diff --git a/sg-frontend/src/routes/AddNode.svelte b/sg-frontend/src/routes/AddNode.svelte
index e869809..bc57f9f 100644
--- a/sg-frontend/src/routes/AddNode.svelte
+++ b/sg-frontend/src/routes/AddNode.svelte
@@ -1,7 +1,7 @@
<script lang="ts">
import {onMount} from 'svelte';
- import SotfwareInsert from "../components/SoftwareInsert.svelte";
+ import SoftwareInsert from "../components/SoftwareInsert.svelte";
import RelationInsert from "../components/RelationInsert.svelte";
onMount(() => {
@@ -16,7 +16,7 @@
</script>
<div id="app-base">
<h1>Add new node</h1>
- <SotfwareInsert></SotfwareInsert>
+ <SoftwareInsert></SoftwareInsert>
<h1>Add new relation</h1>
<RelationInsert></RelationInsert>
</div>
\ No newline at end of file
diff --git a/sg-frontend/src/store.js b/sg-frontend/src/store.js
new file mode 100644
index 0000000..05a57bc
--- /dev/null
+++ b/sg-frontend/src/store.js
@@ -0,0 +1,34 @@
+import {get, writable} from "svelte/store";
+
+const BACKEND_URL = import.meta.env.VITE_BACKEND_URL;
+
+export const softwareNamesStore = writable([]);
+
+let node;
+
+// function to fetch the software names from the backend
+export function fetchSoftwareNames() {
+ let softwaresNames = get(softwareNamesStore);
+ if (softwaresNames.length > 0) {
+ return softwaresNames;
+ }
+ fetch(BACKEND_URL + "/software")
+ .then((response) => response.json())
+ .then((data) => {
+ console.log(data);
+ let softwaresNames = [];
+ data["softwares"].forEach((element) => {
+ node = Object.values(Object.values(element))[0];
+ delete Object.assign(node, {["label"]: node["name"]})["name"];
+ softwaresNames.push(node);
+ return softwaresNames;
+ });
+ softwareNamesStore.set(softwaresNames);
+ console.log(softwaresNames);
+ })
+ .catch((error) => {
+ console.log(error);
+ return [];
+ }
+ );
+}
\ No newline at end of file
--
GitLab