From 56bf18266065fa00b1576f16ed5f7305bd7fadbd Mon Sep 17 00:00:00 2001 From: xang23 <46744878+xang23@users.noreply.github.com> Date: Sun, 8 Dec 2019 00:33:17 +0100 Subject: [PATCH] Add files via upload --- App.css | 127 +++++++++++++++++++++++++++-------------------- BarSite.js | 16 +++--- CourseInfo.js | 9 ++-- DonutSite.js | 43 +++++++--------- FormSite.js | 88 ++++++++++++++++++--------------- ReportTime.js | 134 ++++++++++++++++++++++++++++++++------------------ 6 files changed, 241 insertions(+), 176 deletions(-) diff --git a/App.css b/App.css index 08867e5..5a22dbb 100644 --- a/App.css +++ b/App.css @@ -13,8 +13,15 @@ a{ text-decoration-line: none; } -p, h1, td{ +h1, td, input{ color: #C9C7CE; + font-family: "Roboto"; +} + +p{ + font-size:calc(14px + .8vw); + color: #C9C7CE; + } .h3{ @@ -68,7 +75,7 @@ display: inline-block; .App-bottom{ position: fixed; bottom: 0; - height: 70px; + height: 100px; width: 100%; z-index: 9; background-color: #2C3535; @@ -82,7 +89,7 @@ display: inline-block; } .head h1{ - margin: 30px 0 12px 0; + margin: 30px 0 0px 0; } #root{ @@ -106,6 +113,10 @@ display: inline-block; .orangeButton{ background-color: #e3871b; } + +.mainBody{ + margin-bottom: 100px; +} /*******************************************************************************************/ @@ -120,9 +131,12 @@ display: inline-block; width: 100%; } +.recTimeText{ + font-size: calc(24px + .8vw); +} + .recTime{ position: absolute; - font-size: 24px; width: 100%; top: 38%; } @@ -167,6 +181,18 @@ display: inline-block; /*******************************************************************************************/ +input:focus { + background-color: #C9C7CE; + color: black; +} + +input:focus::-webkit-input-placeholder { + color: transparent; +} + +input::-webkit-input-placeholder{ + color: #262e2e; +} /*Bar*/ @@ -184,25 +210,10 @@ input{ border: none; text-indent: 10px; font-size: 20px; - font-family: "Roboto"; background-color: #4C5454; color: #C9C7CE; } -input:focus { - background-color: #C9C7CE; - color: black; -} - -input:focus::-webkit-input-placeholder { - color: transparent; -} - -input::-webkit-input-placeholder{ - color: #262e2e; -} - - #bars{ height: 100%; } @@ -212,7 +223,7 @@ input::-webkit-input-placeholder{ /*Bars - "child"*/ .wrapperActivity{ height: 65px; - width: 80%; + width: 70%; margin: auto; border-style: solid; border-color: #C9C7CE; @@ -222,6 +233,7 @@ input::-webkit-input-placeholder{ background-color: #262e2e; } + .activityName{ text-align: left; margin-top: 0; @@ -276,13 +288,11 @@ input::-webkit-input-placeholder{ height: 100vh; } -.wrapperAddActivity{ +.wrapperOutline{ border-style: solid; border-color: #C9C7CE; border-width: 1px; width: 80%; - justify-content: center; - margin: auto; } /*Activity name*/ @@ -381,13 +391,12 @@ input::-webkit-input-placeholder{ /*Buttons in "Add Activity"*/ .addActivityButton{ width: 80%; - height: 40px; padding: 30px 0; margin: auto; } #formSaveButton{ - width: 200px; + width: 215px; } #resetButton{ @@ -495,28 +504,7 @@ text-align: left; margin-bottom: 59%; } /* Textfields i ReportTime */ -input{ - height: 40px; - border: none; - text-indent: 10px; - font-size: 20px; - font-family: "Roboto"; - background-color: #4C5454; - color: #C9C7CE; -} - -input:focus { - background-color: #C9C7CE; - color: black; -} - -input:focus::-webkit-input-placeholder { - color: transparent; -} -input::-webkit-input-placeholder{ - color: #262e2e; -} #hh{ width: 60px; @@ -582,25 +570,25 @@ input::-webkit-input-placeholder{ #rhsText{ position: absolute; text-align: center; - font-size: 20px; width: 100%; top: 29%; color: #DDDDDD; } #rhsText p{ margin: 0px; + font-size: calc(22px); } #lhsText{ position: absolute; text-align: center; - font-size: 20px; width: 100%; top: 32%; color: #DDDDDD; } #lhsText p{ - margin: 0px; + margin: 0px; + font-size: calc(22px); } .goal{ @@ -812,8 +800,6 @@ height: 100%; width: 80%; display: block; margin-top: 0; - margin-left: auto; - margin-right: auto; margin-bottom: 25px; border-style: solid; border-color: #C9C7CE; @@ -838,4 +824,41 @@ height: 100%; font-size: 16px; margin-top: -16px; } -/*******************************************************************************************/ \ No newline at end of file +/*******************************************************************************************/ + +.nextPage_left{ + position: fixed; + top: 50%; + left:-32px; + background-color: hotpink; + height: 60px; + width: 60px; + z-index: 130; + border-radius: 20px; + text-align: right; + font-size: 30px; + + +} + +.nextPage_right{ + position: fixed; + top: 50%; + right:-32px; + background-color: green; + height: 60px; + width: 60px; + z-index: 130; + border-radius: 20px; + text-align: left; +} + +.nextPage_right p{ + font-size: 30px; + margin: 8px 0 0 5px; +} + +.nextPage_left p{ + font-size: 30px; + margin: 8px 5px 0 0; +} diff --git a/BarSite.js b/BarSite.js index d78b2f8..ff681c4 100644 --- a/BarSite.js +++ b/BarSite.js @@ -131,7 +131,7 @@ console.log(a); //}//den här är tillaggd var sist förut!!!!!!!!!!!! /*renderar sidelementen typ*/ - function BarSite(HHH) { +function BarSite(HHH) { // test const [ToCourseInfo, setToCourseInfo] = useState(0); @@ -269,10 +269,7 @@ console.log(a); {renderActivities(HHH)} {/*här ska vi rendera ActivityInfo, för att skriva ut kursinfo*/} - {/*Footer*/} -
-

Bottom Header

-
+ {/*Menu Button*/}
@@ -288,7 +285,7 @@ console.log(a);
- +
@@ -297,9 +294,14 @@ console.log(a); {questionText()}
+

>

+
- + {/*Footer*/} +
+

Bottom Header

+
); diff --git a/CourseInfo.js b/CourseInfo.js index 21cc45e..91f2940 100644 --- a/CourseInfo.js +++ b/CourseInfo.js @@ -290,9 +290,12 @@ function courseinfo() { - - - + + {/*Footer*/} +
+

Bottom Header

+
+ ); } diff --git a/DonutSite.js b/DonutSite.js index 2be3f42..d5b601d 100644 --- a/DonutSite.js +++ b/DonutSite.js @@ -62,8 +62,8 @@ function createTable() {
) - children.push({props[i].id}) - children.push({stringTime(props[i].repTime)+" of "+ recTime_today(props,i) }) //myData[i].value+'h' + children.push(

{props[i].id}

) + children.push(

{stringTime(props[i].repTime)+" of "+ recTime_today(props,i) }

) //myData[i].value+'h' //Create a parent and add it's children table.push({children}) @@ -175,7 +175,7 @@ function DonutSite(props){

HELP

-
+

To do List

-centera meny √
-skriva text till help
-hitta på namn
-footer swipe

To do List

@@ -236,7 +236,7 @@ function DonutSite(props){ return ( -
+
{/*
*/} @@ -248,24 +248,6 @@ function DonutSite(props){

To achive your goal, study these hours

- - - {/*Menu Button*/} -
-
-
-
-
-
-
- - {/*Menu List*/} -
-
- - - -
{/*Question Button*/} @@ -278,11 +260,11 @@ function DonutSite(props){ {questionText()}
- {/**/} + {/*Donutgeneration*/}
-

Study

-

{recTime(props.data)}

+

Study

+

{recTime(props.data)}

- +
{createTable(props.data)}
+ + +

<

+ + + {/*Footer*/} +
+

Bottom Header

+
); diff --git a/FormSite.js b/FormSite.js index b55bc7e..67cfc2b 100644 --- a/FormSite.js +++ b/FormSite.js @@ -35,8 +35,8 @@ function colour(){ var props = loadData(); let arrayFromStorage = JSON.parse(localStorage.getItem("data")); var colorCounter = props.length; - //console.log(colorCounter) - //console.log('colorCounter'); + console.log(colorCounter) + console.log('colorCounter'); let colour1 = "white"; var mod = colorCounter % 5; @@ -61,36 +61,32 @@ function colour(){ colorCounter= colorCounter+1; - //console.log(colorCounter); + console.log(colorCounter); return colour1; } function fixObject (a, b, c, d, e) { - console.log("SKriver denna ut något") console.log(a) if (a === ""){ a = "NoName" - // console.log("NoName achived") + console.log("NoName achived") } - if(b === ""){ + if(b == ""){ b = "12/11/2019" } - if(c === ""){ + if(c == ""){ c = "12/24/2020" } - console.log(d); - console.log(e); + let TotTime = (Number(d)*60) + Number(e); let g = String(0); //reptime let f = String(TotTime); - const Course = {id: a, startDate: b, endDate: c, totTime: f, repTime: g, repTodayTime: "0", color: colour(), colorCounter: "0" }; - console.log("courses"); - console.log(Course); + const Course = {id: a, startDate: b, endDate: c, totTime: f, repTime: g, repTodayTime: "0", color: colour()}; + addtoList(Course); - } @@ -115,16 +111,16 @@ function clearList(){ //App är form function App(props) { // props eller inte props?? - // console.log("vad får vi in??"); - //console.log(props); - //console.log("Fick vi"); + console.log("vad får vi in??"); + console.log(props); + console.log("Fick vi"); const [name, setCoursName] = useState(''); const [startDate, setStartDate] = useState(0); const [endDate, setEndDate] = useState(0); - const [hours, setHours] = useState(0); + const [hours, setHours] = useState(2); const [min, setMin] = useState(0); - //console.log(props); + function changeInput(event){ if(event.target.id === "name"){ @@ -162,51 +158,61 @@ function App(props) { // props eller inte props??
-
+
+

Activity Name

+

Start Date

- +

End Date

- +
+

Set time:

- - {/*Obs ändra plats på id=hours och id=hh om det ej funkar!!! samma för min!!*/} - -

h

- -

m

+ +

h

+ +

m

-
-
-
- - -
-
+
+ +
+ - -
+ +
+ + +
+ + + + {/*Footer*/} +
+

Bottom Header

+
+
); } -export default Parent;//ska det vara parent eller app här? +export default Parent;//ska det vara parent eller app här? \ No newline at end of file diff --git a/ReportTime.js b/ReportTime.js index 64a6faf..bed0ae3 100644 --- a/ReportTime.js +++ b/ReportTime.js @@ -1,3 +1,4 @@ +import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"; import './App.css'; import { useState } from 'react'; import React, { Component } from 'react'; @@ -27,34 +28,22 @@ function ReportTime(){ } function fixObject (d, e) { - console.log(d); - console.log(e); - let g = (Number(d)*60) + Number(e); - console.log(g); - //let g = String(0); //reptime - //let f = String(TotTime); - //const Course = {repTime: g }; - - //addtoList(Course); - // console.log(Course); - - var A = loadData(); - console.log("Snart mat"); - console.log(A); - console.log("Pizza"); - - A[0].repTime = Number(A[0].repTime) + g; - - console.log(A); - saveData(A); + var A = loadData(); - } + // Här behöver vi veta vilken slot i arrayen som kursen som ska raporteras är + /* + A[0].repTime = Number(A[0].repTime) + g; + + saveData(A); + */ + } +// addtolist kan vara en hellt onödig här function addtoList(courseToAdd){ localData.push(courseToAdd); setData(localData); @@ -80,7 +69,7 @@ function ReportTime(){ // main component of app is always one page (depending on url path) + Menu below -//redirect === false && + return(
@@ -99,42 +88,89 @@ function ReportTime(){ //App är form function App(props) { // props eller inte props?? - const [name, setCoursName] = useState({name: ''}); - const [startDate, setStartDate] = useState({startDate: 0}); - const [endDate, setEndDate] = useState({endDate: 0}); + const [localData, setLocalData] = useState(loadData()); + const [name, setCoursName] = useState(''); + const [startDate, setStartDate] = useState(0); + const [endDate, setEndDate] = useState(0); const [hours, setHours] = useState(0); const [min, setMin] = useState(0); + const [dropTrigg, setDropTrigg] = useState(false); + + function loadData(){ + try { + const storage = JSON.parse(window.localStorage.getItem("data")); + return storage || []; + } + catch (e) { + return []; + } + } + + + let arr = localData; function changeInput(event){ + /* - if(event.target.id == "name"){ + if(event.target.id === "name"){ setCoursName(event.target.value); - console.log("name in event"); } else if(event.target.id == "startDate"){ setStartDate(event.target.value); - console.log("startDate in event"); } else if(event.target.id == "endDate"){ - console.log("endDate in event"); setEndDate(event.target.value); } - else if(event.target.id == "hours"){ - console.log("Hours in event"); - setHours(event.target.value); - }*/ - if(event.target.id === "hours"){ - setHours(event.target.value); - console.log("Hours in event"); - } + */ + + + + if(event.target.id == "hours"){ + setHours(event.target.value); + } else{ - console.log("min in event"); setMin(event.target.value); } } + + + function dropMenu(){ + console.log("funkar`?"); + console.log(localData); + //callDropMenu(); +if(dropTrigg){ + setDropTrigg(false); +} + else{ + setDropTrigg(true); + } + console.log(dropTrigg); + RenderMenu(localData); + } + + function RenderMenu(arr){ + console.log("orkar inte"); + return( + arr.map(c=> ()) + ); + } + +function MenuContent(arrData){ + let menuList = arrData.arrData; + console.log("fjksadkf"); + return( +
+

{menuList.id}

+
+ + ); +} + + + return (
@@ -148,8 +184,11 @@ function App(props) { // props eller inte props??

Activity

-
-
+
+ { + dropTrigg ? (RenderMenu(arr)) : (null) + } +

Time studied

@@ -160,20 +199,21 @@ function App(props) { // props eller inte props??
{/*textfält */} - -

h

- -

m

+ +

h

+ +

m

- - +