Skip to content

aaron-lejeune-fork #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
aaronLejeune wants to merge 1 commit into
base: jam-1
Choose a base branch
from
Open

aaron-lejeune-fork #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@
<title>Vite App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
<script type="module" src="./src/main.jsx"></script>
</body>
</html>
14 changes: 14 additions & 0 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="module" src="../src/main.jsx"></script>
</body>
</html>
2 changes: 1 addition & 1 deletion src/App.js → src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export class App extends Component {
return (
<div>
<header className="header">
<img src="logo" />
<img src={logo} />
</header>
<div className="wrapper">
<TeslaBattery />
Expand Down
278 changes: 119 additions & 159 deletions src/tesla-battery/TeslaBattery.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,184 +1,160 @@
import React, {Component} from 'react';
import React, {Component} from "react";
import teslaService from "./tesla-battery.service";
import {TeslaCar} from "./components/TeslaCar";
import { TeslaCar } from "./components/TeslaCar";

export class TeslaBattery extends Component {
state = {
title: 'Ranger Per Charge',
models: ['60', '60D', '75', '75D', '90D', 'P100D'],
wheels: {
sizes: [19, 21],
value: 19,
focused: null,
},
climate: {
value: true,
focused: false,
},
temperature: {
value: 20,
focused: false,
min: -10,
max: 40,
step: 10,
},
speed: {
value: 55,
focused: false,
min: 45,
max: 70,
step: 5,
},
metrics: {}
}
constructor(props) {
super(props);
this.state = {
title: "Ranger Per Charge",
models: ["60", "60D", "75", "75D", "90D", "P100D"],
wheels: {
sizes: [19, 21],
value: 19,
focused: null,
},
climate: {
value: true,
focused: false,
},
temperature: {
value: 20,
focused: false,
min: -10,
max: 40,
step: 10,
},
speed: {
value: 55,
focused: false,
min: 45,
max: 70,
step: 5,
},
metrics: {},
}
};

onBlurSpeed = () => {
this.setState({speed: {...this.state.speed, focused: false}})
}
this.setState({ speed: { ...this.state.speed, focused: false } });
};
onBlurTemperature = () => {
this.setState({temperature: {...this.state.temperature, focused: false}})
}
this.setState({ temperature: { ...this.state.temperature, focused: false } });
};

onFocusSpeed = () => {
this.setState({speed: {...this.state.speed, focused: true}})
}
this.setState({ speed: { ...this.state.speed, focused: true } });
};
onFocusTemperature = () => {
this.setState({temperature: {...this.state.temperature, focused: true}})
}

incrementSpeed = () => {
this.setState({ temperature: { ...this.state.temperature, focused: true } });
};

}
incrementTemperature = () => {
incrementSpeed = () => {};
incrementTemperature = () => {};

}

decrementSpeed = () => {

}
decrementSpeed = () => {};
decrementTemperature = () => {
const {temperature} = this.state
const { temperature } = this.state;
if (temperature.value > temperature.min) {
this.setState({temperature: {...this.state.temperature, value: temperature.value - temperature.step}})
this.setState({ temperature: { ...this.state.temperature, value: temperature.value - temperature.step } });
}
}
};

changeClimate = () => {

}
changeClimate = () => {};
onBlurClimate = () => {
this.setState({climate: {...this.state.climate, focused: false}})
}
this.setState({ climate: { ...this.state.climate, focused: false } });
};
onFocusClimate = () => {
this.setState({climate: {...this.state.climate, focused: true}})

}

this.setState({ climate: { ...this.state.climate, focused: true } });
};

onBlurWheels = () => {
this.setState({wheels: {...this.state.wheels, focused: null}})
}
this.setState({ wheels: { ...this.state.wheels, focused: null } });
};
changeWheelSize = (size) => {
this.setState({wheels : {...this.state.wheels, value: size}})
}
this.setState({ wheels: { ...this.state.wheels, value: size } });
};
onFocusWheels = (size) => {
this.setState({wheels: {...this.state.wheels, focused: size}})
}
this.setState({ wheels: { ...this.state.wheels, focused: size } });
};


componentDidMount(){
this.setState({metrics: teslaService.getModelData()})
componentDidMount() {
this.setState({ metrics: teslaService.getModelData() });
}

render() {
const {title, wheels, speed, models, metrics, climate, temperature} = this.state
if(!metrics["60"]){
return null
const { title, wheels, speed, models, metrics, climate, temperature } = this.state;

if (!metrics["60"]) {
return null;
}
return (

return (
<form className="tesla-battery">
<h1>{title}</h1>

{/* TeslaCarComponent */}
<TeslaCar wheels={wheels}
speed="speed.value"/>
<TeslaCar wheels={wheels} speed={speed.value} />
{/* End TeslaCarComponent */}

{/* TeslaStatsComponent */}
<div class="tesla-stats">
<div className="tesla-stats">
<ul>
{/* This is working well in the first place you won't have to touch it */}
{models.map(model => {
const miles = metrics[model][wheels.value][
climate.value ? 'on' : 'off'
].speed[speed.value][temperature.value];
return {
model,
miles,
{
models
.map((model) => {
const miles = metrics[model][wheels.value][climate.value ? "on" : "off"].speed[speed.value][temperature.value];
return {
model,
miles,
}
})
.map((stat, index) => (
<li key={index}>
<div className={`tesla-stats-icon tesla-stats-icon--${stat.model}`} />
<p>
{stat.miles}
<span>MI</span>
</p>
</li>
))
}
}).map(stat => <li>
{/* the stat.model here under must be lowercased */}
<div className={`tesla-stats-icon tesla-stats-icon--${stat.model}`} />
<p>{stat.miles}
<span>MI</span>
</p>
</li>
)}
</ul>
</div>
{/* End TeslaStatsComponent */}

<div class="tesla-controls cf">
<div className="tesla-controls cf">
{/* TeslaCounterComponent for speed */}
<div className="tesla-counter">
<p className="tesla-counter__title">Speed</p>
<div className="tesla-counter__container cf">
<div className="tesla-counter__item" tabIndex="0"
blur={"this.onBlurSpeed"}
@Focus={this.onFocusSpeed}>
<div className="tesla-counter__item" tabIndex="0" onBlur={this.onBlurSpeed} onFocus={this.onFocusSpeed}>
<p className="tesla-counter__number">
speed.value
{ speed.value }
<span>mph</span>
</p>
<div className="tesla-counter__controls"
tabIndex="-1">
<button tabIndex="-1"
type="button"
{(click)}="this.incrementSpeed"
disabled="speed.value === speed.max"/>
<button tabIndex="-1"
type="button"
onclick={this.decrementSpeed()}
disabled="speed.value === speed.min"/>
<div className="tesla-counter__controls" tabIndex="-1">
<button tabIndex="-1" type="button" onClick={this.incrementSpeed} disabled={speed.value === speed.max} />
<button tabIndex="-1" type="button" onClick={this.decrementSpeed} disabled={speed.value === speed.min} />
</div>
</div>
</div>
</div>

{/* End TeslaCounterComponent for speed */}
<div className="tesla-climate cf">

{/* TeslaCounterComponent for outside temperature */}
<div className="tesla-counter">
<p className="tesla-counter__title">Outside Temperature</p>
<div className="tesla-counter__container cf">
<div className="tesla-counter__item"
tabIndex="0"
onBlur={() => this.onBlurTemperature}
onFocus={this.onFocusTemperature()}>
<div className="tesla-counter__item" tabIndex="0" onBlur={this.onBlurTemperature} onFocus={this.onFocusTemperature}>
<p className="tesla-counter__number">
{{temperature.value}}
{temperature.value}
<span>°</span>
</p>
<div className="tesla-counter__controls"
tabIndex="-1">
<button tabIndex="-1"
type="button"
onClick={this.incrementTemperature}
disabled={temperature.value === temperature.max}/>
<button tabIndex="-1"
type="button"
onClick={this.decrementTemperature}
disabled={temperature.value === temperature.min}/>
<div className="tesla-counter__controls" tabIndex="-1">
<button tabIndex="-1" type="button" onClick={this.incrementTemperature} disabled={temperature.value === temperature.max} />
<button tabIndex="-1" type="button" onClick={this.decrementTemperature} disabled={temperature.value === temperature.min} />
</div>
</div>
</div>
Expand All @@ -187,56 +163,40 @@ export class TeslaBattery extends Component {

{/* TeslaClimateComponent */}
<div>
<label className={`tesla-climate__item ${!(temperature.value > 10) ? 'tesla-heat ' : ' '}${climate.value ? 'tesla-climate__item--active ': ' '}${climate.focused === climate.value ? 'tesla-climate__item--focused': ''}`}>
<p className="heat">{temperature.value > 10 ? 'ac' : 'heat'} {climate.value ? 'on' : 'off'}</p>
<i className="tesla-climate__icon"/>
<input type="checkbox"
name="climate"
checked={climate.value}
onClick={this.changeClimate}
onBlur={this.onBlurClimate}
onFocus={this.onFocusClimate}/>
<label className={`tesla-climate__item ${!(temperature.value > 10) ? "tesla-heat " : " "}${climate.value ? "tesla-climate__item--active " : " "}${climate.focused === climate.value ? "tesla-climate__item--focused" : ""}`}>
<p className="heat">
{temperature.value > 10 ? "ac" : "heat"} {climate.value ? "on" : "off"}
</p>
<i className="tesla-climate__icon" />
<input type="checkbox" name="climate" checked={climate.value} onClick={this.changeClimate} onBlur={this.onBlurClimate} onFocus={this.onFocusClimate}/>
</label>
</div>
{/* End TeslaClimateComponent */}
</div>

{/* TeslaWheelsComponent */}
<div className="tesla-wheels">
<p className="tesla-wheels__title">Wheels</p>
<div className="tesla-wheels__container cf">
<label
*ngFor="size of wheels.sizes"
key={size}
className={`${wheels.value === size ? 'tesla-wheels__item--active ': ' '}${wheels.focused === size ? 'tesla-wheels__item--focused ' : ' '}tesla-wheels__item tesla-wheels__item--${size}`}>
<input type="radio"
name="wheelsize"
value={size}
onBlur={this.onBlurWheels}
onClick={() => this.changeWheelSize(size)}
onFocus={() => this.onFocusWheels(size)}
defaultChecked={wheels.value === size}/>
<p>
{size}"
</p>
</label>
{
wheels.sizes.map((size, index) => {
return (
<label key={index} className={`${wheels.value === size ? "tesla-wheels__item--active " : " "}${wheels.focused === size ? "tesla-wheels__item--focused " : " "}tesla-wheels__item tesla-wheels__item--${size}`}>
<input type="radio" name="wheelsize" value={size} onBlur={this.onBlurWheels} onClick={() => this.changeWheelSize(size)} onFocus={() => this.onFocusWheels(size)} defaultChecked={wheels.value === size} />
<p>{size}</p>
</label>
)
})
}
</div>
</div>
{/* End TeslaWheelsComponent */}

</div>
{/* End TeslaWheelsComponent */}
<div className="tesla-battery__notice">
<p>
The actual amount of range that you experience will vary based on your particular use conditions. See how
particular use conditions may affect your range in our simulation model.
</p>
<p>
Vehicle range may vary depending on the vehicle configuration, battery age and condition, driving style and
operating, environmental and climate conditions.
</p>
<p>The actual amount of range that you experience will vary based on your particular use conditions. See how particular use conditions may affect your range in our simulation model.</p>
<p>Vehicle range may vary depending on the vehicle configuration, battery age and condition, driving style and operating, environmental and climate conditions.</p>
</div>
</form>
)
);
}
}

Loading