1.12 Aircon and Heating Controls
We'll cover the following...
We'll cover the following...
We monitor the temperature and change the heating to aircon when it is more than 20 degrees, and heating when it is below 20 degrees.
First create a directory src/components/TeslaClimate, create a TeslaClimate.js file in it, and enter the following code:
import React from 'react';import PropTypes from 'react';import './TeslaClimate.css';const TeslaClimate = (props) => (<div className="tesla-climate"><labelclassName={'tesla-climate__item ${props.value ? 'tesla-climate__item--active' : '' } ${!props.limit ? 'tesla-heat':''}'}><p>{props.limit ? 'ac' : 'heat'} {props.value ? 'on' : 'off'}</p><i className="tesla-climate__icon"></i><inputtype="checkbox"name="climate"checked={props.value}onChange={() => {props.handleChangeClimate()}}/></label></div>);TeslaClimate.propTypes = {value: PropTypes.bool,limit: PropTypes.bool,handleChangeClimate: PropTypes.func}export default TeslaClimate;
This component changes the style class according to the props.value passed in, and changes the text according to props.limit.
TeslaBattery passes callback(handleChangeClimate in this case) to TeslaClimate, which is executed whenever the state needs to be updated. onChange event can be used to notify the event. The callback passed by TeslaBattery is called with setState() to update its state and re-render.
1.12.1 TeslaClimate Component Style
Create a TeslaClimate.css file in the src/components/TeslaClimate directory and specify the following styles. Since the code is long and omitted here, let’s check the source code.
.tesla-climate {float: left;}.tesla-climate__item {cursor: pointer;display: block;width: 100px;height: 100px;border: 6px solid #f7f7f7;border-radius: 50%;box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);color: #666;background: #fff;}...
1.12.2 Import TeslaClimate Component in TeslaBattery Container
Now we will implement callback in TeslaBattery and pass it to the TeslaClimate component.
First, add import to use the TeslaClimate component in TeslaBattery.js. We implement callback function handleChangeClimate() and bind it in constructor(). Then pass the callback function to the TeslaClimate component as props.
...import TeslaClimate from '../components/TeslaClimate';...constructor(props) {super(props);...this.handleChangeClimate = this.handleChangeClimate.bind(this);...}// handle aircon & heating click event handlerhandleChangeClimate() {const config = {...this.state.config};config['climate'] = !this.state.config.climate;this.setState({ config });}...<TeslaClimatevalue={this.state.config.climate}limit={this.state.config.temperature > 10}handleChangeClimate={this.handleChangeClimate}/>...
Now the state value changes according to the temperature change, and when the changed value is passed to the TeslaClimate component, the style class and text are changed according to the value.
export function getModelData() {
return {
'60': {
19: {
on: {
speed: {
45: {
'-10': 224,
'0': 255,
'10': 287,
'20': 289,
'30': 287,
'40': 258
},
50: {
'-10': 211,
'0': 238,
'10': 264,
'20': 267,
'30': 267,
'40': 244
},
55: {
'-10': 198,
'0': 221,
'10': 242,
'20': 246,
'30': 245,
'40': 228
},
60: {
'-10': 184,
'0': 204,
'10': 222,
'20': 225,
'30': 226,
'40': 212
},
65: {
'-10': 170,
'0': 187,
'10': 202,
'20': 206,
'30': 208,
'40': 195
},
70: {
'-10': 156,
'0': 172,
'10': 185,
'20': 189,
'30': 190,
'40': 179
},
}
},
off: {
speed: {
45: {
'-10': 297,
'0': 312,
'10': 318,
'20': 325,
'30': 329,
'40': 333
},
50: {
'-10': 269,
'0': 283,
'10': 288,
'20': 294,
'30': 298,
'40': 304
},
55: {
'-10': 245,
'0': 256,
'10': 261,
'20': 267,
'30': 269,
'40': 277
},
60: {
'-10': 221,
'0': 231,
'10': 236,
'20': 242,
'30': 243,
'40': 252
},
65: {
'-10': 200,
'0': 209,
'10': 214,
'20': 219,
'30': 222,
'40': 230
},
70: {
'-10': 181,
'0': 189,
'10': 194,
'20': 199,
'30': 202,
'40': 209
},
}
}
},
21: {
on: {
speed: {
45: {
'-10': 220,
'0': 251,
'10': 283,
'20': 285,
'30': 282,
'40': 284
},
50: {
'-10': 208,
'0': 234,
'10': 260,
'20': 262,
'30': 262,
'40': 240
},
55: {
'-10': 194,
'0': 216,
'10': 238,
'20': 241,
'30': 240,
'40': 224
},
60: {
'-10': 180,
'0': 199,
'10': 217,
'20': 220,
'30': 221,
'40': 208
},
65: {
'-10': 166,
'0': 183,
'10': 198,
'20': 202,
'30': 203,
'40': 191
},
70: {
'-10': 152,
'0': 167,
'10': 180,
'20': 184,
'30': 185,
'40': 174
},
}
},
off: {
speed: {
45: {
'-10': 292,
'0': 307,
'10': 314,
'20': 320,
'30': 324,
'40': 328
},
50: {
'-10': 265,
'0': 278,
'10': 283,
'20': 289,
'30': 293,
'40': 298
},
55: {
'-10': 240,
'0': 251,
'10': 256,
'20': 261,
'30': 264,
'40': 272
},
60: {
'-10': 217,
'0': 226,
'10': 231,
'20': 236,
'30': 238,
'40': 247
},
65: {
'-10': 196,
'0': 204,
'10': 209,
'20': 214,
'30': 217,
'40': 225
},
70: {
'-10': 177,
'0': 184,
'10': 189,
'20': 194,
'30': 197,
'40': 204
},
}
}
}
},
'60D': {
19: {
on: {
speed: {
45: {
'-10': 227,
'0': 258,
'10': 291,
'20': 293,
'30': 292,
'40': 264
},
50: {
'-10': 215,
'0': 242,
'10': 269,
'20': 271,
'30': 272,
'40': 250
},
55: {
'-10': 201,
'0': 224,
'10': 247,
'20': 250,
'30': 251,
'40': 235
},
60: {
'-10': 187,
'0': 207,
'10': 226,
'20': 229,
'30': 232,
'40': 217
},
65: {
'-10': 172,
'0': 191,
'10': 207,
'20': 211,
'30': 213,
'40': 201
},
70: {
'-10': 158,
'0': 175,
'10': 189,
'20': 193,
'30': 195,
'40': 185
},
}
},
off: {
speed: {
45: {
'-10': 301,
'0': 317,
'10': 323,
'20': 330,
'30': 336,
'40': 339
},
50: {
'-10': 275,
'0': 288,
'10': 294,
'20': 301,
'30': 306,
'40': 311
},
55: {
'-10': 249,
'0': 260,
'10': 266,
'20': 273,
'30': 278,
'40': 283
},
60: {
'-10': 225,
'0': 236,
'10': 241,
'20': 248,
'30': 251,
'40': 258
},
65: {
'-10': 204,
'0': 214,
'10': 219,
'20': 225,
'30': 229,
'40': 236
},
70: {
'-10': 184,
'0': 193,
'10': 198,
'20': 205,
'30': 207,
'40': 215
},
}
}
},
21: {
on: {
speed: {
45: {
'-10': 223,
'0': 255,
'10': 287,
'20': 289,
'30': 288,
'40': 260
},
50: {
'-10': 211,
'0': 238,
'10': 264,
'20': 267,
'30': 267,
'40': 246
},
55: {
'-10': 197,
'0': 220,
'10': 242,
'20': 246,
'30': 246,
'40': 230
},
60: {
'-10': 183,
'0': 203,
'10': 221,
'20': 225,
'30': 227,
'40': 212
},
65: {
'-10': 168,
'0': 186,
'10': 202,
'20': 206,
'30': 208,
'40': 196
},
70: {
'-10': 155,
'0': 171,
'10': 184,
'20': 188,
'30': 190,
'40': 181
},
}
},
off: {
speed: {
45: {
'-10': 297,
'0': 312,
'10': 319,
'20': 326,
'30': 331,
'40': 335
},
50: {
'-10': 270,
'0': 283,
'10': 289,
'20': 296,
'30': 301,
'40': 306
},
55: {
'-10': 244,
'0': 256,
'10': 261,
'20': 268,
'30': 272,
'40': 278
},
60: {
'-10': 221,
'0': 231,
'10': 236,
'20': 242,
'30': 246,
'40': 253
},
65: {
'-10': 199,
'0': 209,
'10': 214,
'20': 220,
'30': 223,
'40': 231
},
70: {
'-10': 180,
'0': 188,
'10': 193,
'20': 200,
'30': 202,
'40': 210
},
}
}
}
},
'75': {
19: {
on: {
speed: {
45: {
'-10': 271,
'0': 309,
'10': 347,
'20': 350,
'30': 347,
'40': 312
},
50: {
'-10': 256,
'0': 288,
'10': 320,
'20': 323,
'30': 323,
'40': 295
},
55: {
'-10': 240,
'0': 267,
'10': 293,
'20': 297,
'30': 297,
'40': 276
},
60: {
'-10': 222,
'0': 246,
'10': 268,
'20': 272,
'30': 273,
'40': 257
},
65: {
'-10': 205,
'0': 227,
'10': 245,
'20': 250,
'30': 252,
'40': 236
},
70: {
'-10': 189,
'0': 206,
'10': 224,
'20': 228,
'30': 230,
'40': 216
},
}
},
off: {
speed: {
45: {
'-10': 359,
'0': 377,
'10': 385,
'20': 393,
'30': 398,
'40': 403
},
50: {
'-10': 326,
'0': 342,
'10': 349,
'20': 356,
'30': 360,
'40': 368
},
55: {
'-10': 296,
'0': 309,
'10': 316,
'20': 323,
'30': 326,
'40': 335
},
60: {
'-10': 268,
'0': 280,
'10': 286,
'20': 292,
'30': 295,
'40': 305
},
65: {
'-10': 242,
'0': 253,
'10': 259,
'20': 265,
'30': 268,
'40': 278
},
70: {
'-10': 219,
'0': 229,
'10': 234,
'20': 241,
'30': 244,
'40': 253
},
}
}
},
21: {
on: {
speed: {
45: {
'-10': 267,
'0': 304,
'10': 342,
'20': 344,
'30': 342,
'40': 308
},
50: {
'-10': 251,
'0': 283,
'10': 314,
'20': 317,
'30': 317,
'40': 290
},
55: {
'-10': 235,
'0': 262,
'10': 287,
'20': 291,
'30': 291,
'40': 271
},
60: {
'-10': 218,
'0': 241,
'10': 262,
'20': 266,
'30': 267,
'40': 251
},
65: {
'-10': 201,
'0': 222,
'10': 239,
'20': 244,
'30': 246,
'40': 231
},
70: {
'-10': 184,
'0': 203,
'10': 218,
'20': 223,
'30': 224,
'40': 211
},
}
},
off: {
speed: {
45: {
'-10': 353,
'0': 372,
'10': 279,
'20': 387,
'30': 392,
'40': 397
},
50: {
'-10': 320,
'0': 336,
'10': 343,
'20': 350,
'30': 354,
'40': 361
},
55: {
'-10': 290,
'0': 303,
'10': 309,
'20': 316,
'30': 319,
'40': 329
},
60: {
'-10': 262,
'0': 274,
'10': 279,
'20': 286,
'30': 288,
'40': 299
},
65: {
'-10': 237,
'0': 247,
'10': 253,
'20': 259,
'30': 262,
'40': 272
},
70: {
'-10': 214,
'0': 223,
'10': 229,
'20': 235,
'30': 238,
'40': 247
},
}
}
}
},
'75D': {
19: {
on: {
speed: {
45: {
'-10': 227,
'0': 316,
'10': 356,
'20': 358,
'30': 357,
'40': 323
},
50: {
'-10': 262,
'0': 296,
'10': 328,
'20': 332,
'30': 332,
'40': 305
},
55: {
'-10': 246,
'0': 274,
'10': 302,
'20': 306,
'30': 307,
'40': 287
},
60: {
'-10': 228,
'0': 253,
'10': 276,
'20': 280,
'30': 283,
'40': 265
},
65: {
'-10': 211,
'0': 233,
'10': 253,
'20': 257,
'30': 260,
'40': 246
},
70: {
'-10': 194,
'0': 214,
'10': 231,
'20': 236,
'30': 238,
'40': 226
},
}
},
off: {
speed: {
45: {
'-10': 368,
'0': 387,
'10': 395,
'20': 404,
'30': 410,
'40': 415
},
50: {
'-10': 335,
'0': 351,
'10': 359,
'20': 367,
'30': 374,
'40': 380
},
55: {
'-10': 304,
'0': 318,
'10': 325,
'20': 334,
'30': 339,
'40': 346
},
60: {
'-10': 275,
'0': 288,
'10': 294,
'20': 303,
'30': 307,
'40': 316
},
65: {
'-10': 249,
'0': 261,
'10': 267,
'20': 275,
'30': 279,
'40': 289
},
70: {
'-10': 225,
'0': 236,
'10': 242,
'20': 250,
'30': 253,
'40': 263
},
}
}
},
21: {
on: {
speed: {
45: {
'-10': 273,
'0': 311,
'10': 351,
'20': 354,
'30': 352,
'40': 318
},
50: {
'-10': 258,
'0': 291,
'10': 323,
'20': 326,
'30': 327,
'40': 300
},
55: {
'-10': 241,
'0': 269,
'10': 296,
'20': 300,
'30': 301,
'40': 281
},
60: {
'-10': 223,
'0': 248,
'10': 270,
'20': 275,
'30': 277,
'40': 259
},
65: {
'-10': 206,
'0': 228,
'10': 247,
'20': 252,
'30': 254,
'40': 240
},
70: {
'-10': 189,
'0': 209,
'10': 225,
'20': 230,
'30': 232,
'40': 221
},
}
},
off: {
speed: {
45: {
'-10': 363,
'0': 382,
'10': 390,
'20': 398,
'30': 405,
'40': 409
},
50: {
'-10': 330,
'0': 346,
'10': 353,
'20': 361,
'30': 368,
'40': 373
},
55: {
'-10': 299,
'0': 312,
'10': 319,
'20': 327,
'30': 333,
'40': 340
},
60: {
'-10': 270,
'0': 282,
'10': 288,
'20': 296,
'30': 301,
'40': 309
},
65: {
'-10': 244,
'0': 255,
'10': 261,
'20': 269,
'30': 273,
'40': 282
},
70: {
'-10': 219,
'0': 230,
'10': 236,
'20': 244,
'30': 247,
'40': 257
},
}
}
}
},
'90D': {
19: {
on: {
speed: {
45: {
'-10': 308,
'0': 349,
'10': 392,
'20': 394,
'30': 392,
'40': 357
},
50: {
'-10': 292,
'0': 326,
'10': 362,
'20': 365,
'30': 365,
'40': 338
},
55: {
'-10': 273,
'0': 303,
'10': 332,
'20': 336,
'30': 337,
'40': 317
},
60: {
'-10': 254,
'0': 280,
'10': 305,
'20': 308,
'30': 310,
'40': 293
},
65: {
'-10': 235,
'0': 258,
'10': 279,
'20': 283,
'30': 285,
'40': 273
},
70: {
'-10': 216,
'0': 238,
'10': 256,
'20': 260,
'30': 263,
'40': 253
},
}
},
off: {
speed: {
45: {
'-10': 406,
'0': 426,
'10': 434,
'20': 443,
'30': 451,
'40': 455
},
50: {
'-10': 370,
'0': 386,
'10': 394,
'20': 403,
'30': 412,
'40': 416
},
55: {
'-10': 336,
'0': 350,
'10': 358,
'20': 366,
'30': 274,
'40': 380
},
60: {
'-10': 304,
'0': 317,
'10': 324,
'20': 332,
'30': 338,
'40': 347
},
65: {
'-10': 276,
'0': 288,
'10': 295,
'20': 302,
'30': 308,
'40': 317
},
70: {
'-10': 250,
'0': 261,
'10': 268,
'20': 275,
'30': 279,
'40': 290
},
}
}
},
21: {
on: {
speed: {
45: {
'-10': 304,
'0': 345,
'10': 386,
'20': 388,
'30': 387,
'40': 352
},
50: {
'-10': 287,
'0': 321,
'10': 356,
'20': 359,
'30': 360,
'40': 332
},
55: {
'-10': 268,
'0': 297,
'10': 326,
'20': 330,
'30': 330,
'40': 311
},
60: {
'-10': 249,
'0': 274,
'10': 299,
'20': 302,
'30': 303,
'40': 287
},
65: {
'-10': 230,
'0': 253,
'10': 273,
'20': 277,
'30': 279,
'40': 267
},
70: {
'-10': 211,
'0': 232,
'10': 250,
'20': 254,
'30': 257,
'40': 247
},
}
},
off: {
speed: {
45: {
'-10': 401,
'0': 420,
'10': 428,
'20': 437,
'30': 446,
'40': 449
},
50: {
'-10': 364,
'0': 380,
'10': 388,
'20': 397,
'30': 405,
'40': 410
},
55: {
'-10': 330,
'0': 344,
'10': 351,
'20': 359,
'30': 367,
'40': 373
},
60: {
'-10': 298,
'0': 311,
'10': 318,
'20': 325,
'30': 331,
'40': 340
},
65: {
'-10': 270,
'0': 282,
'10': 288,
'20': 296,
'30': 301,
'40': 310
},
70: {
'-10': 244,
'0': 255,
'10': 262,
'20': 269,
'30': 273,
'40': 284
},
}
}
}
},
'P100D': {
19: {
on: {
speed: {
45: {
'-10': 341,
'0': 390,
'10': 439,
'20': 442,
'30': 440,
'40': 401
},
50: {
'-10': 323,
'0': 365,
'10': 405,
'20': 409,
'30': 410,
'40': 380
},
55: {
'-10': 303,
'0': 339,
'10': 372,
'20': 376,
'30': 379,
'40': 353
},
60: {
'-10': 282,
'0': 313,
'10': 341,
'20': 345,
'30': 347,
'40': 329
},
65: {
'-10': 261,
'0': 289,
'10': 312,
'20': 317,
'30': 318,
'40': 306
},
70: {
'-10': 240,
'0': 265,
'10': 285,
'20': 290,
'30': 293,
'40': 283
},
}
},
off: {
speed: {
45: {
'-10': 447,
'0': 474,
'10': 485,
'20': 496,
'30': 505,
'40': 509
},
50: {
'-10': 408,
'0': 431,
'10': 441,
'20': 451,
'30': 461,
'40': 466
},
55: {
'-10': 372,
'0': 391,
'10': 400,
'20': 409,
'30': 419,
'40': 425
},
60: {
'-10': 337,
'0': 354,
'10': 362,
'20': 371,
'30': 377,
'40': 388
},
65: {
'-10': 306,
'0': 321,
'10': 329,
'20': 337,
'30': 341,
'40': 354
},
70: {
'-10': 277,
'0': 291,
'10': 299,
'20': 307,
'30': 311,
'40': 323
},
}
}
},
21: {
on: {
speed: {
45: {
'-10': 322,
'0': 369,
'10': 414,
'20': 417,
'30': 416,
'40': 379
},
50: {
'-10': 306,
'0': 347,
'10': 384,
'20': 388,
'30': 389,
'40': 360
},
55: {
'-10': 228,
'0': 323,
'10': 354,
'20': 358,
'30': 360,
'40': 336
},
60: {
'-10': 269,
'0': 299,
'10': 325,
'20': 329,
'30': 331,
'40': 313
},
65: {
'-10': 250,
'0': 276,
'10': 299,
'20': 303,
'30': 305,
'40': 292
},
70: {
'-10': 230,
'0': 254,
'10': 273,
'20': 278,
'30': 281,
'40': 271
},
}
},
off: {
speed: {
45: {
'-10': 422,
'0': 447,
'10': 458,
'20': 468,
'30': 477,
'40': 481
},
50: {
'-10': 387,
'0': 409,
'10': 418,
'20': 428,
'30': 437,
'40': 442
},
55: {
'-10': 353,
'0': 372,
'10': 380,
'20': 389,
'30': 398,
'40': 404
},
60: {
'-10': 322,
'0': 338,
'10': 345,
'20': 354,
'30': 359,
'40': 370
},
65: {
'-10': 293,
'0': 307,
'10': 315,
'20': 323,
'30': 326,
'40': 339
},
70: {
'-10': 265,
'0': 279,
'10': 286,
'20': 294,
'30': 298,
'40': 310
},
}
}
}
}
}
}