changes

src/Layout/LoginButton.js

@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+import HomeIcon from '@material-ui/icons/Home';
+
+
+class LoginButton extends Component {
+
+          handleClick = () => {
+          console.log('this is:', this);
+        }
+
+        render() {
+          return (
+        <a href="http://localhost:3000/login" onClick={this.handleClick}>
+ <HomeIcon style={{cursor: "pointer", position: 'relative', left: '-84%' }}>
+                     </HomeIcon>
+         </a>
+    );
+  }
+}
+export default LoginButton;

src/Layout/Page.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import classNames from 'classnames';
+
+const Page = ({children, open, classes}) => <div className={classNames(classes.content, {
+    [classes.contentShift]: open,
+  })}
+  style={{marginTop: '80px'}}>{children}</div>;
+
+export default Page;

src/assets/canvasjs.react.js

@@ -0,0 +1,48 @@
+var React = require('react');
+var CanvasJS = require('./canvasjs.min');
+CanvasJS = CanvasJS.Chart ? CanvasJS : window.CanvasJS;
+
+class CanvasJSChart extends React.Component {
+	static _cjsContainerId = 0
+	constructor(props) {		
+		super(props);		
+		this.options = props.options ? props.options : {};		
+		this.containerProps = props.containerProps ? props.containerProps : {width: "100%", position: "relative"};
+		this.containerProps.height = props.containerProps && props.containerProps.height ? props.containerProps.height : this.options.height ? this.options.height + "px" : "400px";
+		this.chartContainerId = "canvasjs-react-chart-container-" + CanvasJSChart._cjsContainerId++;
+	}	
+	componentDidMount() {
+		//Create Chart and Render		
+		this.chart = new CanvasJS.Chart(this.chartContainerId, this.options);
+		this.chart.render();
+
+		if(this.props.onRef)
+			this.props.onRef(this.chart);
+	}	
+    shouldComponentUpdate(nextProps, nextState){
+		//Check if Chart-options has changed and determine if component has to be updated
+        return !(nextProps.options === this.options);
+    }
+	componentDidUpdate() {
+		//Update Chart Options & Render
+		this.chart.options = this.props.options;
+		this.chart.render();
+	}
+	componentWillUnmount() {
+		//Destroy chart and remove reference
+		this.chart.destroy();
+		if(this.props.onRef)
+			this.props.onRef(undefined);
+	}		
+	render() {		
+		//return React.createElement('div', { id: this.chartContainerId, style: this.containerProps });		
+		return <div id = {this.chartContainerId} style = {this.containerProps}/>		
+	}	
+}
+
+var CanvasJSReact = {
+    CanvasJSChart: CanvasJSChart,
+    CanvasJS: CanvasJS
+};
+
+export default CanvasJSReact;

src/pages/HomePage/PieChart.js

@@ -0,0 +1,48 @@
+
+//import React, { Component } from 'react';
+//import CanvasJSReact from 'canvasjs.react.js';
+//import CanvasJS2 from 'canvasjs.min';
+
+/* App.js */
+var React = require('react');
+var Component = React.Component;
+var CanvasJSReact = require('./canvasjs.react');
+// var CanvasJS = CanvasJSReact.CanvasJS;
+var CanvasJSChart = CanvasJSReact.CanvasJSChart;
+
+export default class PieChart extends Component {
+	render() {
+		console.log("rendered")
+		const options = {
+			exportEnabled: true,
+			animationEnabled: false,
+			title: {
+				text: "Website Traffic Sources"
+			},
+			data: [{
+				type: "pie",
+				startAngle: 75,
+				toolTipContent: "<b>{label}</b>: {y}%",
+				showInLegend: "true",
+				legendText: "{label}",
+				indexLabelFontSize: 16,
+				indexLabel: "{label} - {y}%",
+				dataPoints: [
+					{ y: 18, label: "Direct" },
+					{ y: 49, label: "Organic Search" },
+					{ y: 9, label: "Paid Search" },
+					{ y: 5, label: "Referral" },
+					{ y: 19, label: "Social" }
+				]
+			}]
+		}
+		return (
+		<div>
+			<CanvasJSChart options = {options}
+				/* onRef={ref => this.chart = ref} */
+			/>
+			{/*You can get reference to the chart instance as shown above using onRef. This allows you to access all chart properties and methods*/}
+		</div>
+		);
+	}
+}

src/pages/LoginPage/LoginPage.js

@@ -0,0 +1,57 @@
+import React, { Component } from "react";
+import Card from "@material-ui/core/Card";
+import CardContent from "@material-ui/core/CardContent";
+import FormGroup from "@material-ui/core/FormGroup";
+import TextField from "@material-ui/core/TextField";
+
+class LoginPage extends Component {
+  render() {
+    return (
+      <div style={{ background: "#C7C8C8", height: "100%" }}>
+        <p style={{ textAlign: "center" , padding: "50px"}}>Login to ANYWAY</p>
+        <Card
+          style={{
+            background: "#C6F4FF",
+            borderRadius: "25px",
+            verticalAlign: "middle",
+            padding: "5%",
+            margin: "10%"
+          }}
+        >
+          <CardContent style={{ textAlign: "center" }}>
+            <FormGroup style={{ alignItems: "center" }}>
+              <TextField
+                style={{ width: 200 }}
+                multiline="Controlled"
+                id="standard-name"
+                margin="normal"
+                label="שם משתמש:"
+                alignContent="middle"
+              />
+              <TextField
+                style={{ width: 200 }}
+                multiline="Controlled"
+                id="standard-name"
+                label="סיסמה:"
+                margin="normal"
+              />
+            </FormGroup>
+            <a href="http://localhost:3000">
+            <button
+              block
+              bsSize="large"
+              type="submit"
+              style={{ cursor: "pointer" }}
+            >
+              login
+            </button>
+            </a>
+
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+}
+
+export default LoginPage;

src/pages/LoginPage/index.js

@@ -0,0 +1,3 @@
+import LoginPage from './LoginPage';
+
+export default LoginPage;