✨ search bar and girlab integration

NespoliBT · Jul 24, 2021 · 2722ebd · 2722ebd
1 parent 0589188
commit 2722ebd
Show file tree

Hide file tree

Showing 29 changed files with 658 additions and 255 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,4 +4,5 @@ public/build
 yarn-error.log
 release
 .todo
-dist
+dist
+pnpm-lock.yaml
diff --git a/readme.md → README.md b/readme.md → README.md
diff --git a/app/backend/plugins/inputs.ts b/app/backend/plugins/inputs.ts
@@ -20,4 +20,9 @@ export const inputs = {
     type: "git",
     placeholder: "Indirizzo",
   },
+  id: {
+    name: "ID",
+    type: "text",
+    placeholder: "ID",
+  },
 };
diff --git a/app/backend/plugins/plugins.ts b/app/backend/plugins/plugins.ts
@@ -23,7 +23,7 @@ const plugins = [
   {
     name: "Git",
     icon: "",
-    inputs: [i.git],
+    inputs: [i.git, i.id],
     envBound: false,
   },
 ];

diff --git a/app/frontend/components/App.svelte b/app/frontend/components/App.svelte
@@ -1,5 +1,6 @@
 <script>
   import NewProject from "@components/NewProject/NewProject.svelte";
+  import SearchProjects from "@components/SearchProjects/SearchProjects.svelte";
   import Projects from "@components/Projects/Projects.svelte";
   import Updater from "@components/Updater/Updater.svelte";
 
@@ -9,8 +10,11 @@
 
 <div class="content">
   <Projects />
-  <NewProject />
   <Updater />
+  <div class="footer">
+    <NewProject />
+    <SearchProjects />
+  </div>
 </div>
 
 <style lang="scss">

diff --git a/app/frontend/components/Atoms/Loading/Loading.svelte b/app/frontend/components/Atoms/Loading/Loading.svelte
@@ -0,0 +1,15 @@
+<div class="sk-cube-grid">
+  <div class="sk-cube sk-cube1" />
+  <div class="sk-cube sk-cube2" />
+  <div class="sk-cube sk-cube3" />
+  <div class="sk-cube sk-cube4" />
+  <div class="sk-cube sk-cube5" />
+  <div class="sk-cube sk-cube6" />
+  <div class="sk-cube sk-cube7" />
+  <div class="sk-cube sk-cube8" />
+  <div class="sk-cube sk-cube9" />
+</div>
+
+<style lang="scss">
+  @import "./loading.scss";
+</style>
diff --git a/app/frontend/components/Atoms/Loading/loading.scss b/app/frontend/components/Atoms/Loading/loading.scss
@@ -0,0 +1,52 @@
+@import "../../../scss/variables.scss";
+
+.sk-cube-grid {
+  width: 40px;
+  height: 40px;
+  margin: 100px auto;
+}
+
+.sk-cube-grid .sk-cube {
+  width: 33%;
+  height: 33%;
+  background: $color_7;
+  float: left;
+  -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
+  animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
+}
+.sk-cube-grid .sk-cube1 {
+  -webkit-animation-delay: 0.2s;
+  animation-delay: 0.2s;
+}
+.sk-cube-grid .sk-cube2 {
+  -webkit-animation-delay: 0.3s;
+  animation-delay: 0.3s;
+}
+.sk-cube-grid .sk-cube3 {
+  -webkit-animation-delay: 0.4s;
+  animation-delay: 0.4s;
+}
+.sk-cube-grid .sk-cube4 {
+  -webkit-animation-delay: 0.1s;
+  animation-delay: 0.1s;
+}
+.sk-cube-grid .sk-cube5 {
+  -webkit-animation-delay: 0.2s;
+  animation-delay: 0.2s;
+}
+.sk-cube-grid .sk-cube6 {
+  -webkit-animation-delay: 0.3s;
+  animation-delay: 0.3s;
+}
+.sk-cube-grid .sk-cube7 {
+  -webkit-animation-delay: 0s;
+  animation-delay: 0s;
+}
+.sk-cube-grid .sk-cube8 {
+  -webkit-animation-delay: 0.1s;
+  animation-delay: 0.1s;
+}
+.sk-cube-grid .sk-cube9 {
+  -webkit-animation-delay: 0.2s;
+  animation-delay: 0.2s;
+}
diff --git a/app/frontend/components/Input/Input.svelte b/app/frontend/components/Input/Input.svelte
@@ -2,7 +2,6 @@
   import type { InputT } from "../../types/types";
   import { shell } from "electron";
   export let input: InputT;
-  console.log(input);
 </script>
 
 <div class="input">

diff --git a/app/frontend/components/NewEnviroments/NewEnviroments.svelte b/app/frontend/components/NewEnviroments/NewEnviroments.svelte
@@ -73,7 +73,9 @@
 
     enviroments = enviroments.filter((e, i) => i != id);
 
-    selectedEnv = enviroments.length - 1;
+    setTimeout(() => {
+      selectedEnv = enviroments.length - 1;
+    }, 500);
   }
 
   function setEnvName(envId: number) {
@@ -86,7 +88,7 @@
 
 {#each enviroments as enviroment, envId}
   <div
-    class="enviroment"
+    class={`enviroment ${selectedEnv === envId ? "selectedEnv" : ""}`}
     on:mouseenter={() => (selectedEnv = envId)}
     in:fly={{ x: -500 }}
     out:fly={{ x: -500 }}

diff --git a/app/frontend/components/NewEnviroments/newEnviroments.scss b/app/frontend/components/NewEnviroments/newEnviroments.scss
@@ -1,8 +1,9 @@
 @import "../../scss/variables.scss";
 
 .enviroment {
+  transition: 0.5s;
   padding: 15px;
-
+  margin: 10px;
   display: flex;
   justify-content: center;
   flex-direction: column;
@@ -40,13 +41,17 @@
       }
     }
   }
+
+  &.selectedEnv {
+    box-shadow: 0px 0px 2px 2px $color_4;
+  }
 }
 
 .newEnviroment {
   transition: 0.2s;
   font-family: NerdFont;
   border: 2px dashed $color_7;
-  margin-right: 10px;
+  margin: 10px;
   border-radius: 10px;
   padding: 20px;
   display: flex;

diff --git a/app/frontend/components/NewInput/NewInput.svelte b/app/frontend/components/NewInput/NewInput.svelte
@@ -22,35 +22,17 @@
 
     switch (type) {
       case "ip":
-        err = !(regexIP.test(value) || regexAddress.test(value));
-        break;
       case "git":
-        try {
-          let addr = value;
-          const addrArray = addr.split("/");
-          const flavour = addrArray[2].split(".")[0];
-          let owner = "";
-          let repo = "";
-
-          if (flavour == "github") {
-            owner = addrArray[3];
-            repo = addrArray[4].split(".")[0];
-          }
-          err = false;
-        } catch {
-          err = true;
-        }
-
+        err = !(regexIP.test(value) || regexAddress.test(value));
         break;
     }
 
     newProjectStore.update((state) => {
       if (!envBound) {
         state.standalonePlugins[pluginId].inputs[inputId].value = value;
       } else {
-        state.enviroments[envId].plugins[pluginId].inputs[
-          inputId
-        ].value = value;
+        state.enviroments[envId].plugins[pluginId].inputs[inputId].value =
+          value;
       }
 
       return state;

diff --git a/app/frontend/components/NewPlugin/NewPlugin.svelte b/app/frontend/components/NewPlugin/NewPlugin.svelte
@@ -1,14 +1,16 @@
 <script lang="ts">
   import type { FormPlugin } from "../../types/types";
   import { newProjectStore } from "../../stores";
-  import Input from "@components/NewInput/NewInput.svelte";
+  import NewInput from "@components/NewInput/NewInput.svelte";
   import { fly } from "svelte/transition";
   import { createEventDispatcher } from "svelte";
   const dispatch = createEventDispatcher();
 
   export let plugin: FormPlugin;
-  export let envId;
+  export let envId = 0;
   export let pluginId;
+  let openGitlab = false;
+  let openGitHub = false;
 
   function deletePlugin() {
     newProjectStore.update((state) => {
@@ -52,20 +54,74 @@
   });
 </script>
 
-<div
-  class={plugin.envBound ? "plugin" : "standalonePlugin"}
-  in:fly={{ x: -500 }}
-  out:fly={{ x: -500 }}
->
-  <h3 on:click={() => deletePlugin()}>
-    {plugin.name}
-  </h3>
-  <div class="inputs">
-    {#each plugin.inputs as input, inputId}
-      <Input {input} {pluginId} {envId} {inputId} envBound={plugin.envBound} />
-    {/each}
+{#if plugin.name == "Git"}
+  {#if !(openGitlab || openGitHub)}
+    <div class="flavourBox" in:fly={{ x: -500 }} out:fly={{ x: -500 }}>
+      <div
+        class="flavour"
+        on:click={() => {
+          openGitlab = true;
+        }}
+      >
+        
+      </div>
+      <div
+        class="flavour"
+        on:click={() => {
+          openGitHub = true;
+        }}
+      >
+        
+      </div>
+    </div>
+  {/if}
+  {#if openGitlab || openGitHub}
+    <div
+      class="plugin standalonePlugin"
+      in:fly={{ x: -500 }}
+      out:fly={{ x: -500 }}
+    >
+      <h3 on:click={() => deletePlugin()}>
+        {openGitlab ? "GitLab" : "GitHub"}
+      </h3>
+      <div class="inputs">
+        <NewInput
+          input={plugin.inputs[0]}
+          {pluginId}
+          {envId}
+          inputId={0}
+          envBound={plugin.envBound}
+        />
+        {#if openGitlab}
+          <NewInput
+            input={plugin.inputs[1]}
+            {pluginId}
+            {envId}
+            inputId={1}
+            envBound={plugin.envBound}
+          />
+        {/if}
+      </div>
+    </div>
+  {/if}
+{:else}
+  <div class="plugin" in:fly={{ x: -500 }} out:fly={{ x: -500 }}>
+    <h3 on:click={() => deletePlugin()}>
+      {plugin.name}
+    </h3>
+    <div class="inputs">
+      {#each plugin.inputs as input, inputId}
+        <NewInput
+          {input}
+          {pluginId}
+          {envId}
+          {inputId}
+          envBound={plugin.envBound}
+        />
+      {/each}
+    </div>
   </div>
-</div>
+{/if}
 
 <style lang="scss">
   @import "./newPlugin.scss";

diff --git a/app/frontend/components/NewPlugin/newPlugin.scss b/app/frontend/components/NewPlugin/newPlugin.scss
@@ -44,3 +44,21 @@ h3 {
     margin-top: 0;
   }
 }
+.flavourBox {
+  font-family: NerdFont;
+  display: flex;
+  background: $color_1;
+  border-radius: 10px;
+  justify-content: space-around;
+  .flavour {
+    font-size: 60px;
+    cursor: pointer;
+    padding: 20px;
+    transition: 0.2s ease-in-out;
+
+    &:hover {
+      color: $color_7;
+      transform: scale(1.1z);
+    }
+  }
+}
diff --git a/app/frontend/components/NewProject/newProject.scss b/app/frontend/components/NewProject/newProject.scss
@@ -11,9 +11,6 @@
   justify-content: center;
   align-items: center;
   font-size: 30px;
-  position: fixed;
-  left: 30px;
-  bottom: 30px;
   border-radius: 100px;
   user-select: none;
   cursor: pointer;
@@ -58,6 +55,23 @@
       "left right"
       "submit submit";
 
+    @media (max-width: 600px) {
+      grid-template-areas:
+        "title"
+        "left"
+        "right"
+        "submit";
+      grid-template-columns: 1fr;
+      grid-template-rows: 80px auto auto 50px;
+      overflow-y: scroll;
+
+      .right,
+      .left {
+        height: fit-content;
+        padding: 20px 0;
+      }
+    }
+
     h1 {
       grid-area: title;
       font-size: 40px;

diff --git a/app/frontend/components/Project/Project.svelte b/app/frontend/components/Project/Project.svelte
@@ -4,7 +4,7 @@
   import type { ProjectT } from "../../types/types";
   import Enviroment from "@components/Enviroment/Enviroment.svelte";
   import StandalonePlugins from "@components/StandalonePlugins/StandalonePlugins.svelte";
-  import { projectsStore } from "app/frontend/stores";
+  import { projectsStore } from "../../stores";
   export let project: ProjectT;
   let openInfo;
   let openRemovePopup;
@@ -42,7 +42,7 @@
         <div class="projectTechnology">{project.technology}</div>
         <div class="projectDescription">{project.description}</div>
         <div class="actions">
-          <!-- <div class="edit">Modifica</div> -->
+          <div class="edit">Modifica</div>
           <div class="delete" on:click={() => (openRemovePopup = true)}>
             Elimina
           </div>