From 730b95a4fda2cf49d036240e590518d8c799d1ad Mon Sep 17 00:00:00 2001
From: Guillaume Schurck <g.schurck@gmail.com>
Date: Sat, 24 Sep 2022 17:28:57 +0200
Subject: [PATCH] add formatter
---
sg-frontend/.prettierrc | 5 +
sg-frontend/src/App.svelte | 39 ++++----
.../src/components/SoftwareMerger.svelte | 91 ++++++++++---------
.../src/components/SoftwareSelect.svelte | 25 ++---
4 files changed, 83 insertions(+), 77 deletions(-)
create mode 100644 sg-frontend/.prettierrc
diff --git a/sg-frontend/.prettierrc b/sg-frontend/.prettierrc
new file mode 100644
index 0000000..e3de5a6
--- /dev/null
+++ b/sg-frontend/.prettierrc
@@ -0,0 +1,5 @@
+{
+ "useTabs": true,
+ "tabWidth": 2,
+ "svelteStrictMode": true
+}
diff --git a/sg-frontend/src/App.svelte b/sg-frontend/src/App.svelte
index ab0c206..0c491b9 100644
--- a/sg-frontend/src/App.svelte
+++ b/sg-frontend/src/App.svelte
@@ -1,27 +1,26 @@
<script lang="ts">
- import SoftwareMerger from './components/SoftwareMerger.svelte';
- import Counter from './lib/Counter.svelte'
+ import SoftwareMerger from "./components/SoftwareMerger.svelte";
+ import Counter from "./lib/Counter.svelte";
</script>
<main>
- <h1>Software Merger</h1>
- <SoftwareMerger></SoftwareMerger>
-
+ <h1>Software Merger</h1>
+ <SoftwareMerger />
</main>
<style>
- .logo {
- height: 6em;
- padding: 1.5em;
- will-change: filter;
- }
- .logo:hover {
- filter: drop-shadow(0 0 2em #646cffaa);
- }
- .logo.svelte:hover {
- filter: drop-shadow(0 0 2em #ff3e00aa);
- }
- .read-the-docs {
- color: #888;
- }
-</style>
\ No newline at end of file
+ .logo {
+ height: 6em;
+ padding: 1.5em;
+ will-change: filter;
+ }
+ .logo:hover {
+ filter: drop-shadow(0 0 2em #646cffaa);
+ }
+ .logo.svelte:hover {
+ filter: drop-shadow(0 0 2em #ff3e00aa);
+ }
+ .read-the-docs {
+ color: #888;
+ }
+</style>
diff --git a/sg-frontend/src/components/SoftwareMerger.svelte b/sg-frontend/src/components/SoftwareMerger.svelte
index 660ecce..b56764c 100644
--- a/sg-frontend/src/components/SoftwareMerger.svelte
+++ b/sg-frontend/src/components/SoftwareMerger.svelte
@@ -1,63 +1,64 @@
<script>
- import { setContext } from "svelte";
- import { onMount } from "svelte";
+ import { setContext } from "svelte";
+ import { onMount } from "svelte";
import SoftwareSelect from "./SoftwareSelect.svelte";
- const BACKEND_URL = import.meta.env.VITE_BACKEND_URL
- console.log(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 = [];
let software1, software2, result;
- let node, data
+ let node, data;
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)
+ 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 [];
});
- softwares = tempSoft
- console.log(softwares)
- }).catch(error => {
- console.log(error);
- return [];
- });
});
- function checkVars() {
- if(software1 && software2) {
- console.log("OK")
- postSoftwareMerger()
- }
- }
+ function checkVars() {
+ if (software1 && software2) {
+ console.log("OK");
+ postSoftwareMerger();
+ }
+ }
- $: (software1, software2), checkVars()
+ $: (software1, software2), checkVars();
- async function postSoftwareMerger () {
- const res = await fetch(BACKEND_URL + '/software-search', {
- method: 'POST',
+ async function postSoftwareMerger() {
+ const res = await fetch(BACKEND_URL + "/software-search", {
+ method: "POST",
headers: {
- 'Content-Type': 'application/json'
+ "Content-Type": "application/json",
},
body: JSON.stringify({
- "software1": software1.label,
- "software2": software2.label
- })
- })
-
- const data = await res.json()
- data.softwares.shift()
- data.softwares.pop()
- result = data.softwares
- console.log(result)
- }
+ software1: software1.label,
+ software2: software2.label,
+ }),
+ });
+ const data = await res.json();
+ data.softwares.shift();
+ data.softwares.pop();
+ result = data.softwares;
+ console.log(result);
+ }
</script>
+
<p>First Software</p>
-<SoftwareSelect items={softwares} bind:selectedSoftware={software1}/>
+<SoftwareSelect items="{softwares}" bind:selectedSoftware="{software1}" />
<p>Second Software</p>
-<SoftwareSelect items={softwares} bind:selectedSoftware={software2}/>
+<SoftwareSelect items="{softwares}" bind:selectedSoftware="{software2}" />
{#if result}
<div style="text-align: left;">
@@ -73,4 +74,4 @@
<p>To {software2.label}</p>
</div>
-{/if}
\ No newline at end of file
+{/if}
diff --git a/sg-frontend/src/components/SoftwareSelect.svelte b/sg-frontend/src/components/SoftwareSelect.svelte
index 24e2612..21e7dc2 100644
--- a/sg-frontend/src/components/SoftwareSelect.svelte
+++ b/sg-frontend/src/components/SoftwareSelect.svelte
@@ -1,26 +1,27 @@
<script>
- import Select from 'svelte-select';
+ import Select from "svelte-select";
+ export let items, selectedSoftware;
- export let items, selectedSoftware
-
-
-
function handleSelect(event) {
- console.log(event)
+ console.log(event);
selectedSoftware = event.detail;
}
-
+
function handleClear() {
selectedSoftware = undefined;
}
- console.log(items)
-
+ console.log(items);
</script>
<form>
<label for="food">Favourite food:</label>
- <Select id="food" {items} on:select={handleSelect} on:clear={handleClear}></Select>
+ <Select
+ id="food"
+ items="{items}"
+ on:select="{handleSelect}"
+ on:clear="{handleClear}"
+ />
</form>
{#if selectedSoftware}
@@ -34,8 +35,8 @@
padding: 20px;
border-radius: 4px;
}
-
+
label {
margin: 0 0 10px;
}
-</style>
\ No newline at end of file
+</style>
--
GitLab