Adding the complete temperature sensor view (#59)

PBI [30939]

* added temperature value

* removed deead code

* removed dummy

* added type to the slider

* remove unit notions

* added degree sign

* removed extra spaces

* more extra spaces removed

* using varaiable for the slider color

* centering yhe label with the slider

* Update src/view/components/toolbar/InputSlider.tsx

Co-Authored-By: Jonathan Wang <jonathanwangg@gmail.com>

* Update src/view/components/toolbar/TemperatureSensorBar.tsx

Co-Authored-By: Jonathan Wang <jonathanwangg@gmail.com>

* Update src/view/components/toolbar/TemperatureSensorBar.tsx

Co-Authored-By: Jonathan Wang <jonathanwangg@gmail.com>

* Update src/view/components/toolbar/TemperatureSensorBar.css

Co-Authored-By: Jonathan Wang <jonathanwangg@gmail.com>

* Update src/view/components/toolbar/InputSlider.tsx

Co-Authored-By: Jonathan Wang <jonathanwangg@gmail.com>

src/view/App.tsx

@@ -4,7 +4,7 @@
 "use strict";
 import * as React from "react";
 import Simulator from "./components/Simulator";
-import InputSlider from "./components/toolbar/InputSlider";
+import TemperatureSensorBar from "./components/toolbar/TemperatureSensorBar"
 import "./App.css";
 
 class App extends React.Component {
@@ -13,13 +13,7 @@ class App extends React.Component {
       <div className="App">
         <main className="App-main">
           <Simulator />
-          <InputSlider
-            min={0}
-            max={250}
-            step={1}
-            min_label={"min"}
-            max_label={"max"}
-          />
+          <TemperatureSensorBar/>
         </main>
       </div>
     );

src/view/components/toolbar/InputSlider.css

@@ -1,4 +1,6 @@
-
+:root{
+    --slider-gray-color:#cccccc;
+}
 .inputSlider{
     height: 50px;
     margin-bottom: 100px;
@@ -15,7 +17,7 @@
 
 .slider{
     -webkit-appearance: none;
-    background-color: #cccccc;
+    background-color: var(--slider-gray-color);
     height: 1px;
     width: 280px;
     vertical-align: middle;

src/view/components/toolbar/InputSlider.tsx

@@ -10,6 +10,7 @@ interface ISliderProps{
     min_label: string;
     max_label: string;
     step:number;
+    type: string;
 }
 
 
@@ -19,7 +20,7 @@ class InputSlider extends React.Component<ISliderProps,any,any>{
     constructor(props: ISliderProps){
         super(props);
         this.state = {
-            value:0,
+            value: 0
         };
 
         this.handleOnChange = this.handleOnChange.bind(this);
@@ -45,10 +46,10 @@ class InputSlider extends React.Component<ISliderProps,any,any>{
                 step={this.props.step} onChange={this.handleOnChange} value={this.state.value} defaultValue={this.props.min.toLocaleString()}/>
                 <div className="downLabelArea">
                     <div className='minLabel'>
-                        {this.props.min_label}
+                        {this.props.min}
                     </div>
                     <div className='maxLabel'>
-                        {this.props.max_label}
+                        {this.props.max}
                     </div>
                 </div>
             </div>

src/view/components/toolbar/TemperatureSensorBar.css

@@ -0,0 +1,19 @@
+
+
+.title{
+    font-size: 14px;
+    text-align: left;
+}
+
+.header{
+    -webkit-appearance: none;
+    height: 30px;
+    margin-bottom: 2px;
+}
+
+.temperatureSensorBar{
+    margin-top: 10px;
+    width: 440px;
+    margin-left: auto;
+    margin-right: auto;
+}

src/view/components/toolbar/TemperatureSensorBar.tsx

@@ -0,0 +1,57 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import * as React from "react";
+import InputSlider from "./InputSlider";
+import "./TemperatureSensorBar.css"
+
+const TEMPERATURE_SENSOR_PROPERTIES = {
+    MIN_LABEL: "Cold",
+    MAX_LABEL: "Hot",
+    LABEL: "Temperature sensor",
+    TYPE: "temperature",
+  }
+
+
+interface ITemperatureUnit {
+    name: string,
+    minValue: number,
+    maxValue: number
+}
+
+const CELSIUS_STATE: ITemperatureUnit ={
+    name: "°C",
+    minValue: -40,
+    maxValue: 40
+}
+
+
+class TemperatureSensorBar extends React.Component<any,ITemperatureUnit,any>{
+
+    constructor(props: any){
+        super(props);
+        this.state = CELSIUS_STATE
+    }
+
+    render(){
+
+      
+      return (
+        <div className="temperatureSensorBar">
+            <div className="header">
+                <div className="title">{TEMPERATURE_SENSOR_PROPERTIES.LABEL+" "+CELSIUS_STATE.name}</div>
+                
+            </div>
+                <InputSlider min={this.state.minValue} max={this.state.maxValue} type={TEMPERATURE_SENSOR_PROPERTIES.TYPE}
+                    min_label={TEMPERATURE_SENSOR_PROPERTIES.MIN_LABEL} max_label={TEMPERATURE_SENSOR_PROPERTIES.MAX_LABEL}
+                    step={1} />
+
+        </div>
+      )
+    }
+
+
+}
+
+export default TemperatureSensorBar;
+