From 1b655db50ee84a564dbdc77ab8e8a2087c1f4f3d Mon Sep 17 00:00:00 2001
From: MathieuG-P <40181755+Zagrios@users.noreply.github.com>
Date: Tue, 17 May 2022 08:15:49 +0200
Subject: [PATCH] add bs note icon

---
 assets/bs-note-fill.svg                       |  1 +
 assets/bs-note.svg                            |  1 +
 .../available-versions-array.component.tsx    |  6 ++--
 .../nav-bar/bs-version-item.component.tsx     |  6 ++--
 .../components/nav-bar/nav-bar.component.tsx  |  4 +--
 .../available-versions-list.components.tsx    | 33 +++++++++++++++++--
 6 files changed, 42 insertions(+), 9 deletions(-)
 create mode 100644 assets/bs-note-fill.svg
 create mode 100644 assets/bs-note.svg

diff --git a/assets/bs-note-fill.svg b/assets/bs-note-fill.svg
new file mode 100644
index 00000000..02fc8159
--- /dev/null
+++ b/assets/bs-note-fill.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 541.867 541.867" height="2048" width="2048"><g transform="translate(0 244.867)"><rect rx="69.453" y="-177.133" x="67.733" height="406.4" width="406.4" fill="currentColor" fill-rule="evenodd" paint-order="fill markers stroke"/><path d="M135.467-109.4H406.4v33.867L270.933-7.8 135.467-75.533z" fill="white" /></g></svg>
\ No newline at end of file
diff --git a/assets/bs-note.svg b/assets/bs-note.svg
new file mode 100644
index 00000000..ebce0ffe
--- /dev/null
+++ b/assets/bs-note.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 541.867 541.867" height="2048" width="2048"><g transform="translate(0 244.867)"><rect rx="69.453" y="-177.133" x="67.733" height="406.4" width="406.4" fill="none" stroke="currentColor" stroke-width="25" fill-rule="evenodd" paint-order="fill markers stroke"/><path d="M135.467-109.4H406.4v33.867L270.933-7.8 135.467-75.533z" fill="none" stroke="currentColor" stroke-width="25" /></g></svg>
\ No newline at end of file
diff --git a/src/renderer/components/available-versions-array.component.tsx b/src/renderer/components/available-versions-array.component.tsx
index 14f0a135..d5c7dcea 100644
--- a/src/renderer/components/available-versions-array.component.tsx
+++ b/src/renderer/components/available-versions-array.component.tsx
@@ -1,11 +1,11 @@
 import { BSVersion } from "../../main/services/bs-version-manager.service"
 import { useEffect, useState } from "react"
 
-export function AvailableVersionsArray({versions}: {versions: BSVersion[]}) {
+export function AvailableVersionsArray({versions, setSelectedVersion}: {versions: BSVersion[], setSelectedVersion: Function}) {
 
   const [versionsMap, setVersionsMap] = useState(new Map<string, BSVersion[]>())
 
-  console.log(versions);
+  console.log(setSelectedVersion);
 
   useEffect(() => {
     organiseVersions()
@@ -25,7 +25,7 @@ export function AvailableVersionsArray({versions}: {versions: BSVersion[]}) {
 
   return (
     <div>
-      { versions.map(v => <button className="bg-gray-200 m-2">{v.BSVersion}</button>) }
+      { versions.map((v, index) => <button onClick={() => setSelectedVersion(v)} key={index} className="bg-gray-200 m-2">{v.BSVersion}</button>) }
     </div>
   )
 }
diff --git a/src/renderer/components/nav-bar/bs-version-item.component.tsx b/src/renderer/components/nav-bar/bs-version-item.component.tsx
index 5e5dfffb..cd9dc237 100644
--- a/src/renderer/components/nav-bar/bs-version-item.component.tsx
+++ b/src/renderer/components/nav-bar/bs-version-item.component.tsx
@@ -1,10 +1,12 @@
 import { BSVersion } from "main/services/bs-version-manager.service";
+import bsNote from '../../../../assets/bs-note-fill.svg'
 import { Link } from "react-router-dom";
 
 export default function BsVersionItem(props: {version: BSVersion}) {
   return (
-    <div className='w-full h-fit pl-1 pr-1 cursor-pointer'>
-        <Link to={`/bs-version/${props.version.BSVersion}`} state={props.version} className="block w-full flex justify-center items-center content-center text-lg text-gray-200 font-bold">{props.version.BSVersion}</Link>
+    <div className='cursor-pointer flex'>
+        <img src={bsNote} alt="" className="inline w-7 aspect-square min-w-0" />
+        <Link to={`/bs-version/${props.version.BSVersion}`} state={props.version} className="inline w-max text-lg text-gray-200 font-bold min-w-0">{props.version.BSVersion}</Link>
     </div>
   )
 }
diff --git a/src/renderer/components/nav-bar/nav-bar.component.tsx b/src/renderer/components/nav-bar/nav-bar.component.tsx
index 7d62f897..f09461c6 100644
--- a/src/renderer/components/nav-bar/nav-bar.component.tsx
+++ b/src/renderer/components/nav-bar/nav-bar.component.tsx
@@ -10,14 +10,14 @@ export function NavBar() {
   const { installedVersions }: {installedVersions: BSVersion[]} = useSelector((state: any) => state.installedBSReducer);
 
   return (
-    <div id='nav-bar' className='z-10 flex flex-col items-center w-fit h-full max-h-full p-2 bg-gray-200 dark:bg-[#202225]'>
+    <div id='nav-bar' className='z-10 flex flex-col h-full max-h-full items-center p-2 bg-gray-200 dark:bg-[#202225]'>
       <div className='w-full flex items-start content-start justify-center relative mb-3'>
         <div className='relative aspect-square w-16'>
           <span id='logo-bottom' className='bg-blue-500 aspect-square w-16'> </span>
           <span id='logo-top' className='bg-red-500 aspect-square w-16'> </span>
         </div>
       </div>
-      <div id='versions' className='relative w-full left-[2px] grow overflow-y-hidden scrollbar-th scrollbar-track-transparent scrollbar-thin scrollbar-thumb-neutral-900 hover:overflow-y-scroll'>
+      <div id='versions' className='relative left-[2px] grow overflow-y-hidden scrollbar-track-transparent scrollbar-thin scrollbar-thumb-neutral-900 hover:overflow-y-scroll'>
         {installedVersions.map((version, index) => <BsVersionItem key={index} version={version}/>)}
       </div>
       <div className='w-full p-2 flex flex-col items-center content-center justify-start'>
diff --git a/src/renderer/pages/available-versions-list.components.tsx b/src/renderer/pages/available-versions-list.components.tsx
index fd5b9298..a47f1f1c 100644
--- a/src/renderer/pages/available-versions-list.components.tsx
+++ b/src/renderer/pages/available-versions-list.components.tsx
@@ -1,17 +1,46 @@
 import { BSVersion } from "../../main/services/bs-version-manager.service";
 import { useSelector } from "react-redux";
 import { AvailableVersionsArray } from "renderer/components/available-versions-array.component";
+import { useState } from "react";
 
 export function AvailableVersionsList() {
 
   const { availableVersions }: {availableVersions: BSVersion[]} = useSelector((state: any) => state.availableBsReducer);
 
+  const [versionSelected, setVersionSelected] = useState(null as BSVersion);
+  const [needIds, setNeedIds] = useState(false);
+  const [stay, setStay] = useState(false);
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+
+  const selectedVersionCallback = (v: BSVersion) => {
+    setVersionSelected(v);
+  }
+
+  const startInstall = (username = localStorage.getItem("username")) => {
+    if(!username){ setNeedIds(true); return; }
+    localStorage.setItem("username", username);
+  }
+
   console.log(availableVersions);
 
   return (
     <div>
-      <h1 className="w-full text-center font-bold text-gray-200 text-3xl mt-6 tracking-wider text-sh">CHOOSE BS VERSION</h1>
-      {availableVersions && <AvailableVersionsArray versions={availableVersions}/>}
+      <h1 className="w-full text-center font-bold text-gray-200 text-3xl mt-6 tracking-wider text-sh mb-5">CHOOSE BS VERSION</h1>
+      {availableVersions && <AvailableVersionsArray versions={availableVersions} setSelectedVersion={selectedVersionCallback}/>}
+      { versionSelected && (
+        <>
+          <h1 className="w-full text-2xl text-gray-200 font-bold text-center mt-5">SELECTED : {versionSelected.BSVersion}</h1>
+          <div className="w-full flex flex-col justify-center items-center content-center">
+            <button onClick={() => startInstall()} className="m-4 bg-white text-xl font-bold p-3">INSTALL</button>
+            <button className="m-4 bg-white text-xl font-bold p-3">VERSION NOTES</button>
+          </div>
+          { needIds && <input onChange={(e) => setUsername(e.target.value)} value={username} type="text" name="" id="" placeholder="username"/> }
+          { needIds && <input onChange={(e) => setPassword(e.target.value)} value={password} type="password" name="" id="" placeholder="password"/> }
+          { needIds && (<> <label htmlFor="stay">STAY</label> <input onChange={(e) => setStay(e.target.checked)} checked={stay} id="stay" type="checkbox"/>  </>) }
+          { needIds && <button onClick={() => startInstall(username)}>SUBMIT</button> }
+        </>
+      )}
     </div>
   )
 }