The proof of concept (#2)

* installerat Parcel, React och Reactdom - setup * Lagt in footer-komponent, css fil, gjort footer sticky och uppdaterat gitignore * Lagt in adfrom, adboard, api (js) - fungerar nu att skicka och läsa annonser och uppdaterat readme * tagit bort kommentar och test för att skriva ut alla annonser i adform * LoginControl tillagd och uppdaterat api för att stödja att logga in och ut * lagt till menu komponent och lagt till lite bootstrap för styling * ändra class till className i logincontrol * snygga till med lite css och positionering * gjorde om footer till function component * fixa till lite css och snygga till formuläret * uppdatera api för att sätta kontonamn för företag och testare i localStorage * Uppdaterat API och adform så man kan skicka med inloggad användare i annonserna * uppdaterade text i API (beskrivning) * Lagt till knappen Lägg till ny annons i menyn med conditional rendering + gjort om formuläret för AdForm till modal popup med bootstrap istället (snyggare) * uppdatera id för modal från example till adform * uppdatera adform så currenUser sätts i handleChange istället så det blir rätt med state * ändra om beskrivning i AdForm från text till textarea för att stödja multiline och mer text * ta bort dist & .cache * Ändrat om Enheter att testa på till fieldset istället för att kunna bocka i flera enheter * Ordnade date inputs (min value för slutdatum + max value för startdatum) - felhantering. * Formatering och tog bort en import som ej används * La till CrowdTest text i menu och styling för h1 i css * Bytt namn på komponenten menu till header som är mer passande * uppdatera id i header.jsx och uppdatera css fil till header efter namnbyte * Lagt in hover effekt på knapparna och ändra positioneringen på knapparna med radbryt * Uppdatera text från Close till Stäng på knapp i adform.jsx * Ändrat om header och footer och använder props istället, sätts nu index.jsx istället (DRY) * Uppdaterat logincontrol att använda state istället för api * Uppdatera handeLogutClick för att nollställa state för userRole och currentUser som var missat i förra commiten * lagt in Inline if-Else med conditional operator för att visa en Lämna bud knapp för adboard, om man är inloggad som testare * refaktorering av samtliga komponenter och tagit bort onödigt från API. * tagit bort oanvänd import från logincontrol * Indentation fix för footer.jsx
niborium · Apr 22, 2022 · 8b4642e · 8b4642e
1 parent bed0bf0
commit 8b4642e
Show file tree

Hide file tree

Showing 14 changed files with 7,852 additions and 2 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+.cache
+dist
diff --git a/README.md b/README.md
@@ -1 +1,12 @@
-# CrowdTest
+# CrowdTest
+1. Klona ner repot från GitHub (https://github.com/niborium/CrowdTest)
+2. Öppna projektet i din valda kodeditor.
+3. Kör därefter ```npm ci ``` i terminalen. 
+4. Kör därefter ```npm start``` följande meddelande visas: 
+ > ````
+ > CrowdTest@1.0.0 start [filsökväg]
+ > parcel index.html --open
+ > Server running at http://localhost:1234 
+ > Built in xx s.
+
+5. Nu kan du besöka sidan på ovan adress. Notera att startsidan (index.html) bör öppnas automatiskt i din förvalda webbläsare, du kommer vidare till app via länken i nav-baren eller lägg till: **/app.html** i webbläsarens adressfönster.
diff --git a/app.html b/app.html
@@ -8,8 +8,10 @@
     <link rel="icon" type="image/x-icon" href="favicon.ico">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
+    <link rel="stylesheet" href="./src/app/app.css">
 </head>
 <body>
-    <p>Hello world!</p>
+    <div id="root"></div>
+    <script src="./src/app/index.jsx"></script>
 </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "CrowdTest",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "parcel index.html --open"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/niborium/CrowdTest.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/niborium/CrowdTest/issues"
+  },
+  "homepage": "https://github.com/niborium/CrowdTest#readme",
+  "devDependencies": {
+    "parcel-bundler": "^1.12.5"
+  },
+  "dependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  }
+}
diff --git a/src/app/api/api.js b/src/app/api/api.js
@@ -0,0 +1,58 @@
+const lskey = 'ct-list';
+
+//POST (Sends new post for adboard)
+export function postNewadd(
+	title,
+	desc,
+	devices,
+	budget,
+	nroftesters,
+	startdate,
+	enddate,
+	author
+) {
+	//Get current list of ads (parsed from localStorage)
+	var existingPosts = JSON.parse(localStorage.getItem(lskey)) || [];
+
+	//Converts budget and nroftesters (numbers) to strings for localStorage
+	var cbudget = budget.toString();
+	var cnroftesters = nroftesters.toString();
+
+	//Converts datetimes (startdate + enddate) to string for localStorage
+	var cstartdate = startdate.toString();
+	var cenddate = enddate.toString();
+
+	//Inputs for new post to be added to localStorage
+	var newPost = {
+		id: generateId(7),
+		title: title,
+		description: desc,
+		devicetotest: devices,
+		budget: cbudget,
+		nroftesters: cnroftesters,
+		startdate: cstartdate,
+		enddate: cenddate,
+		author: author,
+	};
+
+	//Functions to random id
+	function dec2hex(dec) {
+		return dec.toString(16).padStart(2, '0');
+	}
+	function generateId(len) {
+		var arr = new Uint8Array((len || 40) / 2);
+		window.crypto.getRandomValues(arr);
+		return Array.from(arr, dec2hex).join('');
+	}
+
+	//Merge new post with existingPosts
+	existingPosts.push(newPost);
+
+	//Push to localStorage
+	localStorage.setItem(lskey, JSON.stringify(existingPosts));
+}
+//GET (Gets all posts from localStorage for adboard)
+export function getAllpost() {
+	var posts = JSON.parse(localStorage.getItem(lskey) || '[]');
+	return posts;
+}
diff --git a/src/app/app.css b/src/app/app.css
@@ -0,0 +1,28 @@
+footer {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    background-color: black;
+    color: white;
+    text-align: center;
+}
+button:hover { 
+    -webkit-transform: scale(1.1);
+}
+body {
+    text-align: center;
+}
+form {
+    display: inline-block;
+}
+#header{
+    height: 130px;
+}
+#header > h1 {
+    font-size: 20px;
+    float: left;
+}
+#btnLat, #btnLac, #btnLo, #btnAf {
+    float: right;
+}
diff --git a/src/app/components/adboard.jsx b/src/app/components/adboard.jsx
@@ -0,0 +1,68 @@
+import React, { useState, useEffect } from 'react';
+import * as api from '../api/api.js';
+
+const AdBoard = ({ data }) => {
+  const { currentUser, userRole, update, list, setList } = data;
+
+  const tick = () => {
+    setList(api.getAllpost());
+  };
+
+  useEffect(() => {
+    tick();
+  }, [update]);
+  return (
+    <>
+      <p>Välkommen {currentUser}!</p>
+      <div className='m-4'>
+        <div className='table-responsive'>
+          <table className='table table-dark table-striped'>
+            <thead>
+              <tr>
+                <th>#id</th>
+                <th>Titel:</th>
+                <th>Beskrivning:</th>
+                <th>Enheter att testa på:</th>
+                <th>Budget:</th>
+                <th>Antal testare som behövs:</th>
+                <th>Startdatum:</th>
+                <th>Slutdatum:</th>
+                <th>Publicerad av:</th>
+                {userRole === 'tester' ? <th>Lämna bud</th> : null}
+              </tr>
+            </thead>
+            <tbody>
+              {list?.map((data) => (
+                <tr key={data.id}>
+                  <td>{data.id}</td>
+                  <td>{data.title}</td>
+                  <td>{data.description}</td>
+                  <td>{data.devicetotest}</td>
+                  <td>{data.budget}</td>
+                  <td>{data.nroftesters}</td>
+                  <td>{data.startdate}</td>
+                  <td>{data.enddate}</td>
+                  <td>{data.author}</td>
+                  {userRole === 'tester' ? (
+                    <td>
+                      <button
+                        id='btnAf'
+                        className='btn btn-primary'
+                        data-bs-toggle='modal'
+                        data-bs-target='#bidformModal'
+                      >
+                        Bud ej tillgängligt ännu
+                      </button>
+                    </td>
+                  ) : null}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default AdBoard;