Skip to content
GitLab
"...de.hft-stuttgart.cityunits.git" did not exist on "00817fee65e3a9f89449fddb4ec1cec08f506480"
Commits (2)
Hide whitespace changes
Inline Side-by-side
frontend/src/components/weather/currentData.css
View file @ 447c97b4
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
} }
.filter input[type="text"], .filter input[type="text"],
.filter select { .filter select {
width: 100%; width: 100%;
padding: 8px; padding: 8px;
...@@ -44,39 +45,43 @@ ...@@ -44,39 +45,43 @@
#apiUrloutput { #apiUrloutput {
width: 1250px; width: 1250px;
} }
.list-container { .field_write{
width: 300px; margin-top: 30px;
margin: 20px auto; display: flex;
font-family: Arial, sans-serif; flex-direction: row;
} }
.fw{
.list-item { margin-left:20px;
border: 1px solid #ccc;
margin: 10px 0;
padding: 10px;
border-radius: 5px;
transition: background-color 0.3s;
cursor: pointer;
} }
.h1{
.list-item:hover { margin-bottom: -30px;
background-color: #f0f0f0;
} }
.thq-grid-5{
.title { display: flex;
font-size: 18px; flex-direction: column;
font-weight: bold;
} }
.h2{
.subtitle { margin-top: 40px;
font-size: 14px;
color: #666;
} }
.location{
margin-top: 40px;
}
.time{
margin-top:40px;
margin-left:80px;
}
.dataselect{
display: flex;
flex-direction: row;
.APIButton {
display: block;
margin: 10px auto;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
} }
.data{
margin-top:40px;
margin-left:80px;
}
.h3{
margin-bottom: 10px;
}
.generate{
margin-top: 20px;
}
\ No newline at end of file
frontend/src/components/weather/currentData.js
View file @ 447c97b4
...@@ -86,20 +86,33 @@ const Currentdata = (props) => { ...@@ -86,20 +86,33 @@ const Currentdata = (props) => {
lon={item.lon} lon={item.lon}
/> />
))} ))}
<br /> </div>
<div class="fw">
<label for="region">Region:</label> <label for="region">Region:</label>
<input type="text" id="region_text" placeholder="Region" /> <input type="text" id="region_text" placeholder="Region" />
<br /> </div>
<div class="fw">
<label>Country:</label> <label>Country:</label>
<input type="text" id="country_text" placeholder="Country" /> <input type="text" id="country_text" placeholder="Country" />
<br /> </div>
<div class="fw">
<label>Latitude:</label> <label>Latitude:</label>
<input type="text" id="latitude_text" placeholder="Latitude" /> <input type="text" id="latitude_text" placeholder="Latitude" />
</div>
<div class="fw">
<label>Longitude:</label> <label>Longitude:</label>
<input type="text" id="longitude_text" placeholder="Longitude" /> <input type="text" id="longitude_text" placeholder="Longitude" />
<br /> </div>
</div> </div>
<div> </div>
<div class="h2">
<h2>Choose the variables you want.</h2>
</div>
<div className="dataselect">
<div class="location">
<div class="h3">
<h3>Location</h3>
</div>
<input type="checkbox" id="name" className="checkBoxFilter" /> <input type="checkbox" id="name" className="checkBoxFilter" />
<label> City Name</label> <label> City Name</label>
<br /> <br />
...@@ -115,6 +128,11 @@ const Currentdata = (props) => { ...@@ -115,6 +128,11 @@ const Currentdata = (props) => {
<input type="checkbox" id="lat" className="checkBoxFilter" /> <input type="checkbox" id="lat" className="checkBoxFilter" />
<label> Latitude</label> <label> Latitude</label>
<br /> <br />
</div>
<div class="time">
<div class="h3">
<h3>Time</h3>
</div>
<input type="checkbox" id="tz_id" className="checkBoxFilter" /> <input type="checkbox" id="tz_id" className="checkBoxFilter" />
<label> Timezone Id</label> <label> Timezone Id</label>
<br /> <br />
...@@ -142,29 +160,26 @@ const Currentdata = (props) => { ...@@ -142,29 +160,26 @@ const Currentdata = (props) => {
/> />
<label> Last Updated</label> <label> Last Updated</label>
<br /> <br />
</div>
<div class="data">
<div class="h3">
<h3>Temperature</h3>
</div>
<input type="checkbox" id="temp" className="checkBoxFilter" /> <input type="checkbox" id="temp" className="checkBoxFilter" />
<label for="temp">Temp</label> <label for="temp">Temp</label>
<br /> <br />
<input type="checkbox" id="id_day" className="checkBoxFilter" /> <input type="checkbox" id="id_day" className="checkBoxFilter" />
<label for="id_day">ID Day</label> <label for="id_day">ID Day</label>
<br /> <br />
<input <input type="checkbox" id="condition_text" className="checkBoxFilter" />
type="checkbox"
id="condition_text"
className="checkBoxFilter"
/>
<label for="condition">Condition Text</label> <label for="condition">Condition Text</label>
<br /> <br />
<input </div>
type="checkbox" <div class="data">
id="condition" <div class="h3">
className="checkBoxFilter" <h3>Wind</h3>
/> </div>
<input <input type="checkbox" id="wind_degree" className="checkBoxFilter" />
type="checkbox"
id="wind_degree"
className="checkBoxFilter"
/>
<label for="wind_degree">Wind Degree</label> <label for="wind_degree">Wind Degree</label>
<br /> <br />
<input type="checkbox" id="wind_dir" className="checkBoxFilter" /> <input type="checkbox" id="wind_dir" className="checkBoxFilter" />
...@@ -182,6 +197,11 @@ const Currentdata = (props) => { ...@@ -182,6 +197,11 @@ const Currentdata = (props) => {
<input type="checkbox" id="cloud" className="checkBoxFilter" /> <input type="checkbox" id="cloud" className="checkBoxFilter" />
<label for="cloud">Cloud</label> <label for="cloud">Cloud</label>
<br /> <br />
</div>
<div class="data">
<div class="h3">
<h3>Temperature</h3>
</div>
<input type="checkbox" id="feelslike" className="checkBoxFilter" /> <input type="checkbox" id="feelslike" className="checkBoxFilter" />
<label for="feelslike">Feelslike</label> <label for="feelslike">Feelslike</label>
<br /> <br />
...@@ -203,6 +223,11 @@ const Currentdata = (props) => { ...@@ -203,6 +223,11 @@ const Currentdata = (props) => {
<input type="checkbox" id="gust" className="checkBoxFilter" /> <input type="checkbox" id="gust" className="checkBoxFilter" />
<label for="gust">Gust </label> <label for="gust">Gust </label>
<br /> <br />
</div>
<div class="data">
<div class="h3">
<h3>Air Quality</h3>
</div>
<input <input
type="checkbox" type="checkbox"
id="air_quality_co" id="air_quality_co"
...@@ -259,44 +284,35 @@ const Currentdata = (props) => { ...@@ -259,44 +284,35 @@ const Currentdata = (props) => {
/> />
<label for="air_quality_gb_defra_index">GB DEFRA Index</label> <label for="air_quality_gb_defra_index">GB DEFRA Index</label>
<br /> <br />
<div>
<label for="units">Choose a unit:</label>
<select name="unnits" id="units">
<option value="world">Rest of The World</option>
<option value="american">
American units: /eagles per shool shootings
</option>
</select>
</div>
<div>
<button className="thq-button-filled" onClick={getData}>
Generate
</button>
</div>
<br />
<div class="output">
<h2>Output:</h2>
<br />
<pre id="weatherData"></pre>
</div>
<label for="fileformat">Choose a File Format:</label>
<select name="fileformat" id="fileformat">
<option value="json">JSON</option>
<option value="xml">XML</option>
<option value="csv">CSV</option>
</select>
<button className="thq-button-filled" onClick={downloadData}>
Download
</button>
<div id="apiUrl">
<label>API URL:</label>
<br />
<input className="input" type="text" id="apiUrloutput" readOnly />
</div>
<br />
<br />
</div> </div>
</div> </div>
<div>
<label for="units">Choose a unit:</label>
<select name="unnits" id="units">
<option value="world">Rest of The World</option>
<option value="american">
American units: /eagles per shool shootings
</option>
</select>
</div>
<div class="generate">
<button className="thq-button-filled" onClick={getData}>
Generate
</button>
</div>
<br />
<div class="output">
<h2>Output:</h2>
<br />
<pre id="weatherData"></pre>
</div>
<div id="apiUrl">
<label>API URL:</label>
<br />
<input className="input" type="text" id="apiUrloutput" readOnly />
</div>
<br />
<br />
</div> </div>
</div> </div>
); );
......

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal