diff --git a/wearright/package-lock.json b/wearright/package-lock.json
index a0acd174724e5b96b7585c7443fe070fc83b89bc..761caad5dd0bd2cc1eb9d0b38bb9b59a50359ca4 100644
--- a/wearright/package-lock.json
+++ b/wearright/package-lock.json
@@ -2830,7 +2830,8 @@
},
"ansi-regex": {
"version": "2.1.1",
- "bundled": true
+ "bundled": true,
+ "optional": true
},
"aproba": {
"version": "1.2.0",
@@ -2856,7 +2857,7 @@
"bundled": true,
"optional": true,
"requires": {
- "balanced-match": "1.0.0",
+ "balanced-match": "^1.0.0",
"concat-map": "0.0.1"
}
},
@@ -2959,7 +2960,7 @@
"bundled": true,
"optional": true,
"requires": {
- "safer-buffer": "2.1.2"
+ "safer-buffer": ">= 2.1.2 < 3"
}
},
"ignore-walk": {
@@ -2967,7 +2968,7 @@
"bundled": true,
"optional": true,
"requires": {
- "minimatch": "3.0.4"
+ "minimatch": "^3.0.4"
}
},
"inflight": {
@@ -2994,7 +2995,7 @@
"bundled": true,
"optional": true,
"requires": {
- "number-is-nan": "1.0.1"
+ "number-is-nan": "^1.0.0"
}
},
"isarray": {
@@ -3007,7 +3008,7 @@
"bundled": true,
"optional": true,
"requires": {
- "brace-expansion": "1.1.11"
+ "brace-expansion": "^1.1.7"
}
},
"minimist": {
@@ -3050,9 +3051,9 @@
"bundled": true,
"optional": true,
"requires": {
- "debug": "2.6.9",
- "iconv-lite": "0.4.24",
- "sax": "1.2.4"
+ "debug": "^2.1.2",
+ "iconv-lite": "^0.4.4",
+ "sax": "^1.2.4"
}
},
"node-pre-gyp": {
@@ -3077,8 +3078,8 @@
"bundled": true,
"optional": true,
"requires": {
- "abbrev": "1.1.1",
- "osenv": "0.1.5"
+ "abbrev": "1",
+ "osenv": "^0.1.4"
}
},
"npm-bundled": {
@@ -3091,8 +3092,8 @@
"bundled": true,
"optional": true,
"requires": {
- "ignore-walk": "3.0.1",
- "npm-bundled": "1.0.5"
+ "ignore-walk": "^3.0.1",
+ "npm-bundled": "^1.0.1"
}
},
"npmlog": {
@@ -3139,8 +3140,8 @@
"bundled": true,
"optional": true,
"requires": {
- "os-homedir": "1.0.2",
- "os-tmpdir": "1.0.2"
+ "os-homedir": "^1.0.0",
+ "os-tmpdir": "^1.0.0"
}
},
"path-is-absolute": {
@@ -3158,10 +3159,10 @@
"bundled": true,
"optional": true,
"requires": {
- "deep-extend": "0.6.0",
- "ini": "1.3.5",
- "minimist": "1.2.0",
- "strip-json-comments": "2.0.1"
+ "deep-extend": "^0.6.0",
+ "ini": "~1.3.0",
+ "minimist": "^1.2.0",
+ "strip-json-comments": "~2.0.1"
},
"dependencies": {
"minimist": {
@@ -3195,7 +3196,8 @@
},
"safe-buffer": {
"version": "5.1.2",
- "bundled": true
+ "bundled": true,
+ "optional": true
},
"safer-buffer": {
"version": "2.1.2",
@@ -3227,9 +3229,9 @@
"bundled": true,
"optional": true,
"requires": {
- "code-point-at": "1.1.0",
- "is-fullwidth-code-point": "1.0.0",
- "strip-ansi": "3.0.1"
+ "code-point-at": "^1.0.0",
+ "is-fullwidth-code-point": "^1.0.0",
+ "strip-ansi": "^3.0.0"
}
},
"string_decoder": {
@@ -3237,14 +3239,15 @@
"bundled": true,
"optional": true,
"requires": {
- "safe-buffer": "5.1.2"
+ "safe-buffer": "~5.1.0"
}
},
"strip-ansi": {
"version": "3.0.1",
"bundled": true,
+ "optional": true,
"requires": {
- "ansi-regex": "2.1.1"
+ "ansi-regex": "^2.0.0"
}
},
"strip-json-comments": {
@@ -3281,11 +3284,13 @@
},
"wrappy": {
"version": "1.0.2",
- "bundled": true
+ "bundled": true,
+ "optional": true
},
"yallist": {
"version": "3.0.3",
- "bundled": true
+ "bundled": true,
+ "optional": true
}
}
},
@@ -6321,8 +6326,8 @@
"bundled": true,
"optional": true,
"requires": {
- "delegates": "1.0.0",
- "readable-stream": "2.3.6"
+ "delegates": "^1.0.0",
+ "readable-stream": "^2.0.6"
}
},
"balanced-match": {
@@ -6346,8 +6351,7 @@
},
"code-point-at": {
"version": "1.1.0",
- "bundled": true,
- "optional": true
+ "bundled": true
},
"concat-map": {
"version": "0.0.1",
@@ -6356,8 +6360,7 @@
},
"console-control-strings": {
"version": "1.1.0",
- "bundled": true,
- "optional": true
+ "bundled": true
},
"core-util-is": {
"version": "1.0.2",
@@ -6392,7 +6395,7 @@
"bundled": true,
"optional": true,
"requires": {
- "minipass": "2.2.4"
+ "minipass": "^2.2.1"
}
},
"fs.realpath": {
@@ -6405,14 +6408,14 @@
"bundled": true,
"optional": true,
"requires": {
- "aproba": "1.2.0",
- "console-control-strings": "1.1.0",
- "has-unicode": "2.0.1",
- "object-assign": "4.1.1",
- "signal-exit": "3.0.2",
- "string-width": "1.0.2",
- "strip-ansi": "3.0.1",
- "wide-align": "1.1.2"
+ "aproba": "^1.0.3",
+ "console-control-strings": "^1.0.0",
+ "has-unicode": "^2.0.0",
+ "object-assign": "^4.1.0",
+ "signal-exit": "^3.0.0",
+ "string-width": "^1.0.1",
+ "strip-ansi": "^3.0.1",
+ "wide-align": "^1.1.0"
}
},
"glob": {
@@ -6420,12 +6423,12 @@
"bundled": true,
"optional": true,
"requires": {
- "fs.realpath": "1.0.0",
- "inflight": "1.0.6",
- "inherits": "2.0.3",
- "minimatch": "3.0.4",
- "once": "1.4.0",
- "path-is-absolute": "1.0.1"
+ "fs.realpath": "^1.0.0",
+ "inflight": "^1.0.4",
+ "inherits": "2",
+ "minimatch": "^3.0.4",
+ "once": "^1.3.0",
+ "path-is-absolute": "^1.0.0"
}
},
"has-unicode": {
@@ -6438,7 +6441,7 @@
"bundled": true,
"optional": true,
"requires": {
- "safer-buffer": "2.1.2"
+ "safer-buffer": "^2.1.0"
}
},
"ignore-walk": {
@@ -6446,7 +6449,7 @@
"bundled": true,
"optional": true,
"requires": {
- "minimatch": "3.0.4"
+ "minimatch": "^3.0.4"
}
},
"inflight": {
@@ -6454,14 +6457,13 @@
"bundled": true,
"optional": true,
"requires": {
- "once": "1.4.0",
- "wrappy": "1.0.2"
+ "once": "^1.3.0",
+ "wrappy": "1"
}
},
"inherits": {
"version": "2.0.3",
- "bundled": true,
- "optional": true
+ "bundled": true
},
"ini": {
"version": "1.3.5",
@@ -6471,9 +6473,8 @@
"is-fullwidth-code-point": {
"version": "1.0.0",
"bundled": true,
- "optional": true,
"requires": {
- "number-is-nan": "1.0.1"
+ "number-is-nan": "^1.0.0"
}
},
"isarray": {
@@ -6484,23 +6485,20 @@
"minimatch": {
"version": "3.0.4",
"bundled": true,
- "optional": true,
"requires": {
"brace-expansion": "1.1.11"
}
},
"minimist": {
"version": "0.0.8",
- "bundled": true,
- "optional": true
+ "bundled": true
},
"minipass": {
"version": "2.2.4",
"bundled": true,
- "optional": true,
"requires": {
- "safe-buffer": "5.1.1",
- "yallist": "3.0.2"
+ "safe-buffer": "^5.1.1",
+ "yallist": "^3.0.0"
}
},
"minizlib": {
@@ -6508,13 +6506,12 @@
"bundled": true,
"optional": true,
"requires": {
- "minipass": "2.2.4"
+ "minipass": "^2.2.1"
}
},
"mkdirp": {
"version": "0.5.1",
"bundled": true,
- "optional": true,
"requires": {
"minimist": "0.0.8"
}
@@ -6529,9 +6526,9 @@
"bundled": true,
"optional": true,
"requires": {
- "debug": "2.6.9",
- "iconv-lite": "0.4.21",
- "sax": "1.2.4"
+ "debug": "^2.1.2",
+ "iconv-lite": "^0.4.4",
+ "sax": "^1.2.4"
}
},
"node-pre-gyp": {
@@ -6539,16 +6536,16 @@
"bundled": true,
"optional": true,
"requires": {
- "detect-libc": "1.0.3",
- "mkdirp": "0.5.1",
- "needle": "2.2.0",
- "nopt": "4.0.1",
- "npm-packlist": "1.1.10",
- "npmlog": "4.1.2",
- "rc": "1.2.7",
- "rimraf": "2.6.2",
- "semver": "5.5.0",
- "tar": "4.4.1"
+ "detect-libc": "^1.0.2",
+ "mkdirp": "^0.5.1",
+ "needle": "^2.2.0",
+ "nopt": "^4.0.1",
+ "npm-packlist": "^1.1.6",
+ "npmlog": "^4.0.2",
+ "rc": "^1.1.7",
+ "rimraf": "^2.6.1",
+ "semver": "^5.3.0",
+ "tar": "^4"
}
},
"nopt": {
@@ -6556,8 +6553,8 @@
"bundled": true,
"optional": true,
"requires": {
- "abbrev": "1.1.1",
- "osenv": "0.1.5"
+ "abbrev": "1",
+ "osenv": "^0.1.4"
}
},
"npm-bundled": {
@@ -6570,8 +6567,8 @@
"bundled": true,
"optional": true,
"requires": {
- "ignore-walk": "3.0.1",
- "npm-bundled": "1.0.3"
+ "ignore-walk": "^3.0.1",
+ "npm-bundled": "^1.0.1"
}
},
"npmlog": {
@@ -6579,16 +6576,15 @@
"bundled": true,
"optional": true,
"requires": {
- "are-we-there-yet": "1.1.4",
- "console-control-strings": "1.1.0",
- "gauge": "2.7.4",
- "set-blocking": "2.0.0"
+ "are-we-there-yet": "~1.1.2",
+ "console-control-strings": "~1.1.0",
+ "gauge": "~2.7.3",
+ "set-blocking": "~2.0.0"
}
},
"number-is-nan": {
"version": "1.0.1",
- "bundled": true,
- "optional": true
+ "bundled": true
},
"object-assign": {
"version": "4.1.1",
@@ -6598,9 +6594,8 @@
"once": {
"version": "1.4.0",
"bundled": true,
- "optional": true,
"requires": {
- "wrappy": "1.0.2"
+ "wrappy": "1"
}
},
"os-homedir": {
@@ -6618,8 +6613,8 @@
"bundled": true,
"optional": true,
"requires": {
- "os-homedir": "1.0.2",
- "os-tmpdir": "1.0.2"
+ "os-homedir": "^1.0.0",
+ "os-tmpdir": "^1.0.0"
}
},
"path-is-absolute": {
@@ -6637,10 +6632,10 @@
"bundled": true,
"optional": true,
"requires": {
- "deep-extend": "0.5.1",
- "ini": "1.3.5",
- "minimist": "1.2.0",
- "strip-json-comments": "2.0.1"
+ "deep-extend": "^0.5.1",
+ "ini": "~1.3.0",
+ "minimist": "^1.2.0",
+ "strip-json-comments": "~2.0.1"
},
"dependencies": {
"minimist": {
@@ -6655,13 +6650,13 @@
"bundled": true,
"optional": true,
"requires": {
- "core-util-is": "1.0.2",
- "inherits": "2.0.3",
- "isarray": "1.0.0",
- "process-nextick-args": "2.0.0",
- "safe-buffer": "5.1.1",
- "string_decoder": "1.1.1",
- "util-deprecate": "1.0.2"
+ "core-util-is": "~1.0.0",
+ "inherits": "~2.0.3",
+ "isarray": "~1.0.0",
+ "process-nextick-args": "~2.0.0",
+ "safe-buffer": "~5.1.1",
+ "string_decoder": "~1.1.1",
+ "util-deprecate": "~1.0.1"
}
},
"rimraf": {
@@ -6669,7 +6664,7 @@
"bundled": true,
"optional": true,
"requires": {
- "glob": "7.1.2"
+ "glob": "^7.0.5"
}
},
"safe-buffer": {
@@ -6704,11 +6699,10 @@
"string-width": {
"version": "1.0.2",
"bundled": true,
- "optional": true,
"requires": {
- "code-point-at": "1.1.0",
- "is-fullwidth-code-point": "1.0.0",
- "strip-ansi": "3.0.1"
+ "code-point-at": "^1.0.0",
+ "is-fullwidth-code-point": "^1.0.0",
+ "strip-ansi": "^3.0.0"
}
},
"string_decoder": {
@@ -6716,14 +6710,14 @@
"bundled": true,
"optional": true,
"requires": {
- "safe-buffer": "5.1.1"
+ "safe-buffer": "~5.1.0"
}
},
"strip-ansi": {
"version": "3.0.1",
"bundled": true,
"requires": {
- "ansi-regex": "2.1.1"
+ "ansi-regex": "^2.0.0"
}
},
"strip-json-comments": {
@@ -6736,13 +6730,13 @@
"bundled": true,
"optional": true,
"requires": {
- "chownr": "1.0.1",
- "fs-minipass": "1.2.5",
- "minipass": "2.2.4",
- "minizlib": "1.1.0",
- "mkdirp": "0.5.1",
- "safe-buffer": "5.1.1",
- "yallist": "3.0.2"
+ "chownr": "^1.0.1",
+ "fs-minipass": "^1.2.5",
+ "minipass": "^2.2.4",
+ "minizlib": "^1.1.0",
+ "mkdirp": "^0.5.0",
+ "safe-buffer": "^5.1.1",
+ "yallist": "^3.0.2"
}
},
"util-deprecate": {
@@ -6755,7 +6749,7 @@
"bundled": true,
"optional": true,
"requires": {
- "string-width": "1.0.2"
+ "string-width": "^1.0.2"
}
},
"wrappy": {
@@ -12906,6 +12900,11 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-5.1.4.tgz",
"integrity": "sha512-fp+U98OMZcnduQ+NSEiQa4s/XMsbp+5KlydmkbESOw4P69iWZ68ZMFM5a2BuE0FgqPBKApJyRuYHR95jM8lAmg=="
},
+ "react-icons": {
+ "version": "3.5.0",
+ "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-3.5.0.tgz",
+ "integrity": "sha512-LuKUcavgPWjPrRkIdNbsGw8LqcnhfNN0AGCtU4Td1UkOenJSIWbYppSJrD6zi/TDZOHtTs9opu6ZKB/NFWk21g=="
+ },
"react-is": {
"version": "16.8.4",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.4.tgz",
diff --git a/wearright/package.json b/wearright/package.json
index 06c4c2a2ed7467835391e008a1fbc5c10d6e8cb0..c9c6ea7e27144dda42538331428810a000f635e5 100644
--- a/wearright/package.json
+++ b/wearright/package.json
@@ -5,6 +5,7 @@
"dependencies": {
"react": "^16.8.4",
"react-dom": "^16.8.4",
+ "react-icons": "^3.5.0",
"react-scripts": "2.1.8",
"universal-cookie": "^3.0.7"
},
diff --git a/wearright/src/components/MainPage.js b/wearright/src/components/MainPage.js
index ffb403da607f56426a9cf94f7fbc66a0ef207d0f..35a3bc696d856f8567c2f39da1ec38ee1f5d3cdc 100644
--- a/wearright/src/components/MainPage.js
+++ b/wearright/src/components/MainPage.js
@@ -1,19 +1,40 @@
import React, { Component } from 'react';
import "../styles/MainPage.css"
+import {FaStar, FaArrowLeft, FaArrowRight, FaBars } from 'react-icons/fa';
class MainPage extends Component {
constructor(props) {
super(props);
this.state = {
currentWeather : [],
- isLoaded: false,
- error: null
+ isLoaded: true,
+ error: null,
+ clothes: [],
+ location: []
+
}
- }
+ this.currentWeather = this.currentWeather.bind(this);
+ this.getClothes = this.getClothes.bind(this);
+ this.getLocation = this.getLocation.bind(this);
+ }
componentDidMount(){
- //token for API request
- const token = "&APPID=dc7912235b38897f91307afe6e1162c3"
+ //this.currentWeather()
+ this.getClothes()
+ this.getLocation()
+ }
+
+ getLocation(){
+ const tempArr = []
+ tempArr.push('Jyväskylä')
+ tempArr.push('Helsinki')
+
+ this.setState({location: tempArr})
+ }
+
+ currentWeather(){
+ //token for API request
+ const token = ""
const unit = "&units=metric"
//API address
const apiUrl ='http://api.openweathermap.org/data/2.5/weather?q=Tampere,fi'
@@ -36,32 +57,75 @@ class MainPage extends Component {
error
})
}
- )
+ )
+ }
+
+ getClothes(){
+ //get clothes for user from backend
+ //compare clothes to weather => set to state array
+
+ //testdata
+ const tempArr = []
+ tempArr.push(require('../testimages/housut.png'))
+ tempArr.push(require('../testimages/paita.png'))
+ tempArr.push(require('../testimages/pipo.png'))
+
+ this.setState({clothes: tempArr})
+ //console.log(this.state.clothes[2])
}
+
render() {
- const {currentWeather, isLoaded} = this.state
+ const {currentWeather, isLoaded, clothes, location} = this.state
if(isLoaded){
- return (
- <div className="weatherBox">
- {/* <ul>
- <li>testdata</li>
- <li>testdata</li>
- <li>testdata</li>
- </ul>
- */}
+ return (
+ <div className={"content"}>
+ <h1>Wear Right</h1>
+ <div className={"header"}>
+ <div className={"menu"}>
+ {/* menubutton here! from component */}
+ {/* Test menu button */}
+ <button><FaBars className={"icons"} /></button>
+ </div>
+ <div className={"location"}>
+ {/* favourite places here from component */}
+ {/* Test data */}
+ {location.map((loc) => <h3><FaStar className={"icons"} />{loc}</h3>)}
+ </div>
+ </div>
+ <hr></hr>
+ <div className={"weather"}>
+ <div className={"sliders"}>
+ <p>sliders</p>
+ </div>
+ <div className="weatherBox">
+ {/* <ul>
+ <li>testdata</li>
+ <li>testdata</li>
+ <li>testdata</li>
+ </ul> */}
+ <ul>
+ <li>Lämpötila: { JSON.stringify(currentWeather[0]) }C</li>
+ <li>Tuuli: { JSON.stringify(currentWeather[1]) }m/s</li>
+ <li>Tuntuu kuin: ?</li>
+ </ul>
+ </div>
+ </div>
+ <div className={"clothes"}>
+ {clothes.map((item) => <img alt="img" src={item}></img>)}
- <ul>
- <li>Lämpötila: { JSON.stringify(currentWeather[0]) }C</li>
- <li>Tuuli: { JSON.stringify(currentWeather[1]) }m/s</li>
- <li>Tuntuu kuin: ?</li>
- </ul>
- </div>
+ <div className={"button"}>
+ <button id={"left"} ><FaArrowLeft className={"icons"} /></button>
+ <button id={"right"}><FaArrowRight className={"icons"}/></button>
+ </div>
+ </div>
+ </div>
);
}
else{
return <p>Lataa...</p>
}
+
}
}
diff --git a/wearright/src/styles/MainPage.css b/wearright/src/styles/MainPage.css
index 44909b42b60cebd9044dba177c4a43e921dcc606..ed79a0aa563797f8622c002726ec5631a1188bc2 100644
--- a/wearright/src/styles/MainPage.css
+++ b/wearright/src/styles/MainPage.css
@@ -1,8 +1,55 @@
-ul{
- list-style: none;
+
+
+/*top page*/
+
+.header{
+ display: flex;
+ justify-content: space-between;
+}
+
+.menu{
+ margin: 20px;
+}
+.location{
+ margin-right: 30px;
+}
+.icons{
+ font-size: 30px;
+}
+
+.weather{
+ margin: 20px;
+ display: flex;
+ justify-content: space-around
+}
+
+.weatherBox, .sliders {
box-sizing: content-box;
width: 300px;
height: 100px;
+ padding: 10px;
+ border: solid;
+}
+
+ul{
+ list-style: none;
+}
+
+/*bottom of page*/
+
+.clothes{
+ margin: 30px;
+ display: inline-block;
+ box-sizing: content-box;
padding: 30px;
border: solid;
-}
\ No newline at end of file
+}
+
+#left{
+ float: left;
+ margin: 10px;
+}
+#right{
+ float: right;
+ margin: 10px;
+}
\ No newline at end of file
diff --git a/wearright/src/testimages/housut.png b/wearright/src/testimages/housut.png
new file mode 100644
index 0000000000000000000000000000000000000000..d5fe4630d792cf58a411cf5d2fe9d12412efafc1
Binary files /dev/null and b/wearright/src/testimages/housut.png differ
diff --git a/wearright/src/testimages/paita.png b/wearright/src/testimages/paita.png
new file mode 100644
index 0000000000000000000000000000000000000000..0622920ba41b717bdffa2780ab7128fb8b0d8c6a
Binary files /dev/null and b/wearright/src/testimages/paita.png differ
diff --git a/wearright/src/testimages/pipo.png b/wearright/src/testimages/pipo.png
new file mode 100644
index 0000000000000000000000000000000000000000..0e28d2ad49aad42ecb83e3b2cf05f182cb07840f
Binary files /dev/null and b/wearright/src/testimages/pipo.png differ