Added functional start input fields set and end input fields set.

src/pages/components/CertificateInputFields.js

@@ -1,9 +1,24 @@
-import React from 'react'
+import React, { useState } from 'react'
 import styled from 'styled-components'
 
 import CertificateTimeInterval from './CertificateTimeInterval'
+import InputFieldDate from './InputFieldDate'
+import InputFieldTime from './InputFieldTime'
+// TODO: Import energy usage and bash size
 
 export default function CertificateInputFields() {
+  const [sdVal, setSdVal] = useState('2024-01-01')
+  const [stVal, setStVal] = useState('00:00')
+  const [edVal, setEdVal] = useState('2024-01-01')
+  const [etVal, setEtVal] = useState('23:55')
+  // TODO: Add: enVal, setEnVal & szVal, setSzVal
+
+  const handleSdChgeVal = (e) => setSdVal(e.target.value)
+  const handleStChgeVal = (e) => setStVal(e.target.value)
+  const handleEdChgeVal = (e) => setEdVal(e.target.value)
+  const handleEtChgeVal = (e) => setEtVal(e.target.value)
+  // TODO: Add handleEnChgeVal & handleSzChgeVal
+
   return (
     <>
       <MarginedDiv>
@@ -13,19 +28,48 @@ export default function CertificateInputFields() {
               <GrowingDiv>
                 <InputHeadingDiv>Start timestamp of energy use</InputHeadingDiv>
                 <InputWrapLeftDiv>
-                  <InputHalfWrap>StartDate</InputHalfWrap>
-                  <InputHalfWrap>StartTime</InputHalfWrap>
+                  <InputHalfWrap>
+                    <InputFieldDate
+                      val={sdVal}
+                      onChangeVal={handleSdChgeVal}
+                      name="sd"
+                      id="sd"
+                    />
+                  </InputHalfWrap>
+                  <InputHalfWrap>
+                    <InputFieldTime
+                      val={stVal}
+                      onChangeVal={handleStChgeVal}
+                      name="st"
+                      id="st"
+                    />
+                  </InputHalfWrap>
                 </InputWrapLeftDiv>
               </GrowingDiv>
               <CertificateTimeInterval
-                sTimestamp={'2024-01-01 00:00:00'}
-                eTimestamp={'2024-01-01 23:59:59'}
+                // sTimestamp={'2024-01-01 00:00:00'} eTimestamp={'2024-02-01 23:59:59'}
+                sTimestamp={`${sdVal} ${stVal}`}
+                eTimestamp={`${edVal} ${etVal}`}
               />
               <GrowingDiv>
                 <InputHeadingDiv>End timestamp of energy use</InputHeadingDiv>
                 <InputWrapRightDiv>
-                  <InputHalfWrap>EndDate</InputHalfWrap>
-                  <InputHalfWrap>EndTime</InputHalfWrap>
+                  <InputHalfWrap>
+                    <InputFieldDate
+                      val={edVal}
+                      onChangeVal={handleEdChgeVal}
+                      name="ed"
+                      id="ed"
+                    />
+                  </InputHalfWrap>
+                  <InputHalfWrap>
+                    <InputFieldTime
+                      val={etVal}
+                      onChangeVal={handleEtChgeVal}
+                      name="et"
+                      id="et"
+                    />
+                  </InputHalfWrap>
                 </InputWrapRightDiv>
               </GrowingDiv>
             </ContainerFlexNoWrapDiv>
@@ -35,7 +79,7 @@ export default function CertificateInputFields() {
               <InputHeadingDiv>Electric energy use</InputHeadingDiv>
               <InputWrapDiv>
                 <InputWrap>
-                  Lore ipsum dolores est sit amen test lore ipsum
+                  InputFieldEnergy ( &lt;InputFieldEnergy /&gt; )
                 </InputWrap>
               </InputWrapDiv>
             </ContainerFullWidthWrapDiv>
@@ -45,7 +89,7 @@ export default function CertificateInputFields() {
               <InputHeadingDiv>H2 batch size</InputHeadingDiv>
               <InputWrapDiv>
                 <InputWrap>
-                  Lore ipsum dolores est sit amen test lore ipsum
+                  InputFieldSize ( &lt;InputFieldSize /&gt; )
                 </InputWrap>
               </InputWrapDiv>
             </ContainerFullWidthWrapDiv>
@@ -130,6 +174,7 @@ const InputWrap = styled.div`
   display: block;
   height: 52px;
   line-height: 52px;
+  // padding-left: 15px;
 
   background: rgba(200, 200, 200, 0.5);
 `
@@ -140,6 +185,7 @@ const InputHalfWrap = styled.div`
   height: 52px;
   line-height: 52px;
   float: left;
+  // padding-left: 15px;
 
   background: rgba(200, 200, 200, 0.5);
 `

src/pages/components/InputFieldDate.js

@@ -0,0 +1,78 @@
+import React from 'react'
+import styled from 'styled-components'
+
+import BgIconDateSVG from '../../assets/images/icon-date.svg'
+
+export default function InputFieldDate({ val, onChangeVal, name, id }) {
+  return (
+    <>
+      <Label htmlFor={id}>
+        <BgDateSpan>&nbsp;</BgDateSpan>Date
+      </Label>
+      {/* <Input defaultValue={defaultVal} type="date" /> */}
+      <Input
+        name={name}
+        id={id}
+        value={val}
+        onChange={(e) => onChangeVal(e)}
+        placeholder="01/01/2024"
+      />
+    </>
+  )
+}
+
+const Label = styled.label`
+  display: flex;
+  width: calc(100% - 15px);
+  height: 26px;
+  line-height: 26px;
+  margin-left: 15px;
+  color: #7b9390;
+  font: 500 14px/26px Roboto;
+`
+
+const BgDateSpan = styled.span`
+  width: 26px;
+  height: 26px;
+  background: transparent url(${BgIconDateSVG}) no-repeat;
+`
+
+const Input = styled.input.attrs({ type: 'date' })`
+  display: flex;
+  width: calc(100% - 15px);
+  height: 26px;
+  font: 500 18px/26px Roboto;
+  color: #aebcbb;
+  margin-left: 15px;
+  background: transparent;
+  outline: 0;
+  border: none;
+  position: relative;
+  &::-webkit-calendar-picker-indicator {
+    position: absolute;
+    top: unset;
+    left: unset;
+    width: 100%;
+    height: 100%;
+    background: transparent;
+    color: transparent;
+  }
+  &::-webkit-inner-spin-button {
+    z-index: 1;
+  }
+  &::-webkit-clear-button {
+    z-index: 1;
+  }
+  &::-webkit-input-placeholder {
+    color: #aebcbb;
+  }
+  &::placeholder {
+    color: #aebcbb;
+  }
+  &:active {
+    color: #000000;
+  }
+  &:hover {
+    color: #000000;
+  }
+`

src/pages/components/InputFieldEnergy.js

@@ -0,0 +1,62 @@
+import React from 'react'
+import styled from 'styled-components'
+
+export default function InputFieldEnergy({ val, onChangeVal, name, id }) {
+  return (
+    <>
+      <Label htmlFor={id}>Energy use</Label>
+      {/* <Input defaultValue="0.0 kWh" type="text" /> */}
+
+      <Input
+        name={name}
+        id={id}
+        value={val}
+        onChange={(e) => onChangeVal(e)}
+        placeholder="0.0 kWh"
+        list={`${id}-list`}
+      />
+      <datalist id={`${id}-list`}>
+        {Array.from(Array(2 * 20).keys()).map((e) => {
+          const r = (e + 1) / 2
+          return <option key={e} value={`${r.toFixed(1)} MWh`} />
+        })}
+      </datalist>
+      {/* Styling: https://www.npmjs.com/package/datalist-css */}
+    </>
+  )
+}
+
+const Label = styled.label`
+  display: flex;
+  width: calc(100% - 15px);
+  height: 26px;
+  line-height: 26px;
+  margin-left: 15px;
+  color: #7b9390;
+  font: 500 14px/26px Roboto;
+`
+
+const Input = styled.input`
+  display: flex;
+  width: calc(100% - 15px);
+  height: 26px;
+  font: 500 18px/26px Roboto;
+  color: #aebcbb;
+  margin-left: 15px;
+  background: transparent;
+  outline: 0;
+  border: none;
+  position: relative;
+  &::-webkit-input-placeholder {
+    color: #aebcbb;
+  }
+  &::placeholder {
+    color: #aebcbb;
+  }
+  &:active {
+    color: #000000;
+  }
+  &:hover {
+    color: #000000;
+  }
+`

src/pages/components/InputFieldSize.js

@@ -0,0 +1,62 @@
+import React from 'react'
+import styled from 'styled-components'
+
+export default function InputFieldEnergy({ val, onChangeVal, name, id }) {
+  return (
+    <>
+      <Label htmlFor={id}>H2 batch</Label>
+      {/* <Input defaultValue="0.0 kWh" type="text" /> */}
+
+      <Input
+        name={name}
+        id={id}
+        value={val}
+        onChange={(e) => onChangeVal(e)}
+        placeholder="0.0 kWh"
+        list={`${id}-list`}
+      />
+      <datalist id={`${id}-list`}>
+        {Array.from(Array(2 * 20).keys()).map((e) => {
+          const r = (e + 1) / 2
+          return <option key={e} value={`${r.toFixed(1)} MWh`} />
+        })}
+      </datalist>
+      {/* Styling: https://www.npmjs.com/package/datalist-css */}
+    </>
+  )
+}
+
+const Label = styled.label`
+  display: flex;
+  width: calc(100% - 15px);
+  height: 26px;
+  line-height: 26px;
+  margin-left: 15px;
+  color: #7b9390;
+  font: 500 14px/26px Roboto;
+`
+
+const Input = styled.input`
+  display: flex;
+  width: calc(100% - 15px);
+  height: 26px;
+  font: 500 18px/26px Roboto;
+  color: #aebcbb;
+  margin-left: 15px;
+  background: transparent;
+  outline: 0;
+  border: none;
+  position: relative;
+  &::-webkit-input-placeholder {
+    color: #aebcbb;
+  }
+  &::placeholder {
+    color: #aebcbb;
+  }
+  &:active {
+    color: #000000;
+  }
+  &:hover {
+    color: #000000;
+  }
+`