From 8fd32339f46ca9d31d8a5552476d84d9b6113051 Mon Sep 17 00:00:00 2001
From: feialm <45712644+feialm@users.noreply.github.com>
Date: Sat, 7 Dec 2019 23:45:22 +0100
Subject: [PATCH] Add files via upload

---
 App.css       | 127 +++++++++++++++++++++-----------------------------
 BarSite.js    |  16 +++----
 CourseInfo.js |   9 ++--
 DonutSite.js  |  43 ++++++++++-------
 FormSite.js   |  88 ++++++++++++++++------------------
 ReportTime.js |  69 +++++++++++++++++++--------
 6 files changed, 178 insertions(+), 174 deletions(-)

diff --git a/App.css b/App.css
index 5a22dbb..08867e5 100644
--- a/App.css
+++ b/App.css
@@ -13,15 +13,8 @@ a{
   text-decoration-line: none;
 }
 
-h1, td, input{
+p, h1, td{
   color: #C9C7CE;
-  font-family: "Roboto";
-}
-
-p{
-  font-size:calc(14px + .8vw);
-  color: #C9C7CE;
- 
 }
 
 .h3{
@@ -75,7 +68,7 @@ display: inline-block;
 .App-bottom{
   position: fixed;
   bottom: 0;
-  height: 100px;
+  height: 70px;
   width: 100%;
   z-index: 9;
    background-color: #2C3535;
@@ -89,7 +82,7 @@ display: inline-block;
 }
 
 .head h1{
-  margin: 30px 0 0px 0;
+  margin: 30px 0 12px 0;
 }
 
 #root{
@@ -113,10 +106,6 @@ display: inline-block;
 .orangeButton{
   background-color: #e3871b;
 }
-
-.mainBody{
-  margin-bottom: 100px;
-}
 /*******************************************************************************************/
 
 
@@ -131,12 +120,9 @@ display: inline-block;
 	width: 100%;
 }
 
-.recTimeText{
-    font-size: calc(24px + .8vw);
-}
-
 .recTime{
 	position: absolute;
+	font-size: 24px;
 	width: 100%;
 	top: 38%;
 }
@@ -181,18 +167,6 @@ display: inline-block;
 /*******************************************************************************************/
 
 
-input:focus {
-  background-color: #C9C7CE;
-  color: black;
-}
-
-input:focus::-webkit-input-placeholder {
-  color: transparent;
-}
-
-input::-webkit-input-placeholder{
-  color: #262e2e;
-} 
 
 
 /*Bar*/
@@ -210,10 +184,25 @@ 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%;
 }
@@ -223,7 +212,7 @@ input{
 /*Bars - "child"*/
 .wrapperActivity{
   height: 65px;
-  width: 70%;
+  width: 80%;
   margin: auto;
   border-style: solid;
   border-color: #C9C7CE;
@@ -233,7 +222,6 @@ input{
   background-color: #262e2e;
 }
 
-
 .activityName{
   text-align: left;
   margin-top: 0;
@@ -288,11 +276,13 @@ input{
   height: 100vh;
 }
 
-.wrapperOutline{
+.wrapperAddActivity{
   border-style: solid;
   border-color: #C9C7CE;
   border-width: 1px;
   width: 80%;
+  justify-content: center;
+  margin: auto;
 }
 
 /*Activity name*/
@@ -391,12 +381,13 @@ input{
 /*Buttons in "Add Activity"*/
 .addActivityButton{
   width: 80%;
+  height: 40px;
   padding: 30px 0;
   margin: auto;
 }
 
 #formSaveButton{
-  width: 215px; 
+  width: 200px; 
 }
 
 #resetButton{
@@ -504,7 +495,28 @@ 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;
@@ -570,25 +582,25 @@ text-align: left;
 #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; 
-  font-size: calc(22px);
+  margin: 0px;
 }
 
 .goal{
@@ -800,6 +812,8 @@ height: 100%;
   width: 80%;
   display: block;
   margin-top: 0;
+  margin-left: auto;
+  margin-right: auto;
   margin-bottom: 25px;
   border-style: solid;
   border-color: #C9C7CE;
@@ -824,41 +838,4 @@ height: 100%;
   font-size: 16px;
   margin-top: -16px;
 }
-/*******************************************************************************************/
-
-.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;
-}
+/*******************************************************************************************/
\ No newline at end of file
diff --git a/BarSite.js b/BarSite.js
index ff681c4..d78b2f8 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,7 +269,10 @@ function BarSite(HHH) {
         {renderActivities(HHH)}  {/*här ska vi rendera ActivityInfo, för att skriva ut kursinfo*/}
       </div>
 
-      
+      {/*Footer*/}
+      <div className="App-bottom">
+      <p className="dots">Bottom Header</p>
+      </div>
 
       {/*Menu Button*/}
       <div className="menuButton" onClick={HandleClickMenu}>
@@ -285,7 +288,7 @@ function BarSite(HHH) {
       <div className="menuClass" style={{width: menuWidth}}>
         <div className="menuID" style={{width: menuWidth}}></div>
         <Link to="/ReportTime.js"><button className="reportButton" style={{width: buttonWidth}}>{reportTime()}</button></Link>
-        <Link to="/"><button className="addButton" style={{width: buttonWidth}}>{addActivity()}</button></Link>
+        <button className="addButton" style={{width: buttonWidth}}>{addActivity()}</button>
         <button className="deleteButton" style={{width: buttonWidth}}>{deleteActivity()}</button>
       </div>
       
@@ -294,14 +297,9 @@ function BarSite(HHH) {
         {questionText()}
       </div>
 
-      <Link to="/DonutSite.js"><div className="nextPage_right"><p>&#62;</p>
-      </div></Link>
 
     <div>
-     {/*Footer*/}
-      <div className="App-bottom">
-      <p className="dots">Bottom Header</p>
-      </div>
+     
     </div>
   );
 
diff --git a/CourseInfo.js b/CourseInfo.js
index 91f2940..21cc45e 100644
--- a/CourseInfo.js
+++ b/CourseInfo.js
@@ -290,12 +290,9 @@ function courseinfo() {
             <button onClick={() =>( myData[0].id, myData[0].startDate,myData[0].endDate,myData[0].value)} className="editButton center">
                <p className="buttonText" id="editButtonText">Edit activity</p>
            </button>
-        </div>
-   {/*Footer*/}
-      <div className="App-bottom">
-      <p className="dots">Bottom Header</p>
-      </div>
-      
+         </div>
+
+    
     </div>
   );
 }
diff --git a/DonutSite.js b/DonutSite.js
index d5b601d..2be3f42 100644
--- a/DonutSite.js
+++ b/DonutSite.js
@@ -62,8 +62,8 @@ function createTable() {
               <div className="box" style={{backgroundColor:props[i].color}}>
                
               </div></td>) 
-            children.push(<td className='idLabel' key={i + 'b'}><p>{props[i].id}</p></td>)
-            children.push(<td className='timeLabel' key={i + 'c'}><p>{stringTime(props[i].repTime)+" of "+ recTime_today(props,i) }</p></td>)  //myData[i].value+'h'
+            children.push(<td className='idLabel' key={i + 'b'}>{props[i].id}</td>)
+            children.push(<td className='timeLabel' key={i + 'c'}>{stringTime(props[i].repTime)+" of "+ recTime_today(props,i) }</td>)  //myData[i].value+'h'
           
           //Create a parent and add it's children
           table.push(<tr key={i + 'd'}>{children}</tr>)
@@ -175,7 +175,7 @@ function DonutSite(props){
           <div className="appHeader">
           <h1 className="title">HELP<br/></h1>
           </div>
-          <div className="questionText center">
+          <div className="questionText">
             <p className="helpTitle">To do List</p>
             <p className="helpText">-centera meny √ <br/> -skriva text till help <br/> -hitta på namn <br/> -footer swipe</p>
             <p className="helpTitle">To do List</p>
@@ -236,7 +236,7 @@ function DonutSite(props){
     
 
     return (
-      <div className="center mainBody">
+      <div className="center">
         {/*<div>
           <button onClick={changeData}>Transform</button>
         </div>*/}
@@ -248,6 +248,24 @@ function DonutSite(props){
           </Link>
           <p className="h3">To achive your goal, study these hours</p>
         </div>
+
+
+      {/*Menu Button*/}
+      <div className="menuButton" onClick={HandleClickMenu}>
+        <div className="menuIcon">
+          <div className="menu"></div>
+          <div className="menu"></div>
+          <div className="menu"></div>
+        </div>
+      </div>
+
+      {/*Menu List*/}
+      <div className="menuClass" style={{width: menuWidth}}>
+        <div className="menuID" style={{width: menuWidth}}></div>
+        <Link to="/ReportTime.js"><button className="reportButton" style={{width: buttonWidth}}>{reportTime()}</button></Link>
+        <button className="addButton" style={{width: buttonWidth}}>{addActivity()}</button>
+        <button className="deleteButton" style={{width: buttonWidth}}>{deleteActivity()}</button>
+      </div>
       
 
       {/*Question Button*/}
@@ -260,11 +278,11 @@ function DonutSite(props){
           {questionText()}
         </div>
        
-      {/*Donutgeneration*/}
+      {/**/}
         <div className="donut heightMax">
           <div className="recTime center">
-          <p className="removeMargin recTimeText">Study</p>
-            <p className="removeMargin recTimeText"> {recTime(props.data)} </p>
+          <p className="removeMargin">Study</p>
+            <p className="removeMargin"> {recTime(props.data)} </p>
           </div>
           <AnimatedPieHooks
             data={props}
@@ -275,19 +293,10 @@ function DonutSite(props){
           />
         </div>
         <div id='myData'>
-          <table className="wrapperOutline tableDonut center">
+          <table className="tableDonut center">
             {createTable(props.data)}
           </table>
         </div>
-
-      <Link to="/BarSite.js">
-        <div className="nextPage_left"><p>&#60;</p></div>
-      </Link>
-
-        {/*Footer*/}
-      <div className="App-bottom">
-      <p className="dots">Bottom Header</p>
-      </div>
       </div>
     );
   
diff --git a/FormSite.js b/FormSite.js
index 67cfc2b..b55bc7e 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,32 +61,36 @@ 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()};
-     
+    const Course = {id: a, startDate: b, endDate: c, totTime: f, repTime: g, repTodayTime: "0", color: colour(), colorCounter: "0" };
+    console.log("courses");
+     console.log(Course);
     addtoList(Course);
 
+
   }
 
  
@@ -111,16 +115,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(2);
+  const [hours, setHours] = useState(0);
   const [min, setMin] = useState(0);
-
+ //console.log(props);
 
   function changeInput(event){
     if(event.target.id === "name"){
@@ -158,61 +162,51 @@ function App(props) { // props eller inte props??
       </div>
 
       <div className="mainBody">
-        <div className="wrapperOutline fitText">
-
+        <div className="wrapperAddActivity fitText">
           <div className="wrapperAddName">
             <p className="addActivityText" id="activityName">Activity Name</p>
             <input className="textBox" id="name" type="text" placeholder="Name" onChange={changeInput}/>
           </div>
-
           <div className="wrapperDate">
             <div className="wrapperStartDate"> 
               <p className="addActivityText">Start Date</p> 
-              <input className="dateBox" id="startDate" type="text" placeholder="mm/dd/yyyy" onChange={changeInput}/>
+              <input className="dateBox" id="startDate" type="text" placeholder="ddmmyy" onChange={changeInput}/>
             </div>
             <div className="wrapperEndDate">
               <p className="addActivityText">End Date</p>
-              <input className="dateBox" id="endDate" type="text" placeholder="mm/dd/yyyy" onChange={changeInput}/>
+              <input className="dateBox" id="endDate" type="text" placeholder="ddmmyy" onChange={changeInput}/>
             </div>
           </div>
-
           <div className="wrapperAddTime">
           <p className="addActivityTime">Set time:</p>
             <div className="time">
-              <input className="timeBox"  type="text" placeholder="hh" onChange={changeInput}/>
-              <p className="timeIndicator">h</p>
-              <input className="timeBox"  type="text" placeholder="mm" onChange={changeInput}/>
-              <p className="timeIndicator">m</p>
-            </div>
-          </div> 
-        </div>
 
-        <div className="addActivityButton fitText">
-          <Link to="/DonutSite.js"><button onClick={() => props.fixObjectEtikett(name,startDate,endDate,hours,min)} className="greenButton center" id="formSaveButton">
+          {/*Obs ändra plats på id=hours och id=hh om det ej funkar!!! samma för min!!*/}
+          <input className="timeBox" id="hours" type="text" placeholder="hh" onChange={changeInput}/>
+               <p className="timeIndicator" id="hh">h</p>
+               <input className="timeBox" id="min" type="text" placeholder="mm" onChange={changeInput}/>
+               <p className="timeIndicator" id="mm" >m</p>
+            </div>
+          </div>
+          <div className="addActivityButton fitText">
+          <div className="addActivityCancelReset">
+          <button className="redButton">
+            <p className="buttonText pBlack">Cancel</p>
+          </button>
+          <button onClick={() => clearList()} className="orangeButton" id="resetButton">
+            <p className="buttonText pBlack">Reset</p>
+          </button>
+          </div>
+          <Link to="/ReportTime.js"><button onClick={() => props.fixObjectEtikett(name,startDate,endDate,hours,min)} className="greenButton center" id="formSaveButton">
             <p className="buttonText pBlack">Save</p>
           </button></Link>
-
-          <div className="addActivityCancelReset">
-            <Link to="/BarSite.js"><button className="redButton">
-              <p className="buttonText pBlack">Cancel</p>
-            </button></Link>
-            <button onClick={() => clearList()} className="orangeButton" id="resetButton">
-              <p className="buttonText pBlack">Reset</p>
-            </button>
-          </div>         
+          
+          </div>
         </div>
-
-
-
-         {/*Footer*/}
-      <div className="App-bottom">
-      <p className="dots">Bottom Header</p>
-      </div>
-
       </div>
     </div>
     
   );
 }
 
-export default Parent;//ska det vara parent eller app här?
\ No newline at end of file
+export default Parent;//ska det vara parent eller app här?
diff --git a/ReportTime.js b/ReportTime.js
index 7e4d668..64a6faf 100644
--- a/ReportTime.js
+++ b/ReportTime.js
@@ -26,17 +26,35 @@ function ReportTime(){
     saveData(data);
   }
 
-  function fixObject (a, b, c, d, e) {
+  function fixObject (d, e) {
+    console.log(d);
+    console.log(e);
 
-    let TotTime = (Number(d)*60) + Number(e);
-    let g = String(0); //reptime
-    let f = String(TotTime);
 
-    const Course = {name: a, startDate: b, endDate: c, totTime: f, repTime: g };
+    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);
+    //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);
+
   }
 
+
+
   function addtoList(courseToAdd){
     localData.push(courseToAdd);
     setData(localData);
@@ -62,13 +80,13 @@ function ReportTime(){
 
 
 // main component of app is always one page (depending on url path) + Menu below
-
+//redirect === false && 
 
   return(
     <div>
       
 
-      {redirect === false && 
+      {
       <App fixObjectEtikett={fixObject} />
       }
      
@@ -81,27 +99,38 @@ function ReportTime(){
 //App är form
 function App(props) { // props eller inte props??
 
-  const [name, setCoursName] = useState('');
-  const [startDate, setStartDate] = useState(0);
-  const [endDate, setEndDate] = useState(0);
-  const [hours, setHours] = useState(2);
+  const [name, setCoursName] = useState({name: ''});
+  const [startDate, setStartDate] = useState({startDate: 0});
+  const [endDate, setEndDate] = useState({endDate: 0});
+  const [hours, setHours] = useState(0);
   const [min, setMin] = useState(0);
 
 
   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");
+      }
     else{
+      console.log("min in event");
         setMin(event.target.value);
     }
   } 
@@ -131,10 +160,10 @@ function App(props) { // props eller inte props??
             <div className="wrapperAddTime" id="centerDiv">
 
               {/*textfält */}
-               <input className="timeBox" id="hh" type="text" placeholder="hh" onChange={changeInput}/>
-               <p className="timeIndicator" id="hours">h</p>
-               <input className="timeBox" id="mm" type="text" placeholder="mm" onChange={changeInput}/>
-               <p className="timeIndicator" id="minutes" >m</p>
+               <input className="timeBox" id="hours" type="text" placeholder="hh" onChange={changeInput}/>
+               <p className="timeIndicator" id="hh">h</p>
+               <input className="timeBox" id="min" type="text" placeholder="mm" onChange={changeInput}/>
+               <p className="timeIndicator" id="mm" >m</p>
             </div>
 
 
@@ -142,8 +171,8 @@ function App(props) { // props eller inte props??
 
           </div>
 
-          <button onClick={() => {props.fixObjectEtikett(name,startDate,endDate,hours,min); props.history.goBack()}} className="reportButtonText">
-              <p className = "buttonText">Report</p>
+          <button onClick={() => {props.fixObjectEtikett(hours,min)}} className="reportButtonText">
+              <p className = "buttonText">Report Time</p>
           </button>
 
       </div>