Skip to content

GitLab

Commit e4eb29a7 authored by Karakas's avatar Karakas
Browse files

Merge branch 'dev_enes' into 'master' 

Dev enes

See merge request !3
parents 8a93ea8a 10bdeec9
Show whitespace changes
Inline Side-by-side
frontend/src/components/navbar4.css
View file @ e4eb29a7
...@@ -39,25 +39,10 @@ ...@@ -39,25 +39,10 @@
align-items: center; align-items: center;
margin-left: var(--dl-space-space-twounits); margin-left: var(--dl-space-space-twounits);
} }
.navbar4-burger-menu {
display: none;
}
.navbar4-icon { .navbar4-icon {
width: var(--dl-size-size-xsmall); width: var(--dl-size-size-xsmall);
height: var(--dl-size-size-xsmall); height: var(--dl-size-size-xsmall);
} }
.navbar4-mobile-menu {
top: 0px;
left: 0px;
width: 100%;
height: 100vh;
display: none;
padding: var(--dl-space-space-twounits);
z-index: 100;
position: absolute;
flex-direction: column;
background-color: var(--dl-color-theme-neutral-light);
}
.navbar4-nav { .navbar4-nav {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
...@@ -101,25 +86,3 @@ ...@@ -101,25 +86,3 @@
left: 0px; left: 0px;
position: static; position: static;
} }
@media (max-width: 767px) {
.navbar4-navbar-interactive {
padding-left: var(--dl-space-space-twounits);
padding-right: var(--dl-space-space-twounits);
}
.navbar4-desktop-menu {
display: none;
}
.navbar4-burger-menu {
display: flex;
align-items: center;
justify-content: center;
}
}
@media (max-width: 479px) {
.navbar4-navbar-interactive {
padding: var(--dl-space-space-unit);
}
.navbar4-mobile-menu {
padding: var(--dl-space-space-unit);
}
}
frontend/src/style.css
View file @ e4eb29a7
...@@ -87,7 +87,6 @@ ...@@ -87,7 +87,6 @@
color: var(--dl-color-theme-secondary1); color: var(--dl-color-theme-secondary1);
cursor: pointer; cursor: pointer;
transition: 0.3s; transition: 0.3s;
font-family: Noto Sans;
font-weight: bold; font-weight: bold;
padding-top: var(--dl-space-space-halfunit); padding-top: var(--dl-space-space-halfunit);
white-space: nowrap; white-space: nowrap;
......
frontend/src/views/data.css
View file @ e4eb29a7
.filter label {
display: block;
margin-bottom: 5px;
}
.filter input[type="text"],
.filter select {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.filter button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.filter button:hover {
background-color: #0056b3;
}
.output {
margin-top: 40px;
}
.checkBoxFilter {
margin-bottom: 10px;
}
#weatherData {
white-space: pre-wrap; /* Umbruch von langen Zeilen */
}
#apiUrl {
margin-top: 50px;
}
#apiUrloutput {
width: 1250px;
}
frontend/src/views/data.js
View file @ e4eb29a7
...@@ -3,9 +3,90 @@ import React from "react"; ...@@ -3,9 +3,90 @@ import React from "react";
import Navbar4 from "../components/navbar4"; import Navbar4 from "../components/navbar4";
import Footer15 from "../components/footer15"; import Footer15 from "../components/footer15";
import "./home.css"; import "./home.css";
import "./data.css";
const Data = (props) => { const Data = (props) => {
//JS Code function getData() {
const city = document.getElementById("city").value;
const region = document.getElementById("region").value;
const country = document.getElementById("country").value;
const latitude = document.getElementById("latitude").value;
const longitude = document.getElementById("longitude").value;
const temperature = document.getElementById("temperature").checked;
const isDay = document.getElementById("isDay").checked;
const condition = document.getElementById("condition").checked;
const pressure = document.getElementById("pressure").checked;
const precipitation = document.getElementById("precipitation").checked;
const humidity = document.getElementById("humidity").checked;
const cloud = document.getElementById("cloud").checked;
const feelslikeTemp = document.getElementById("feelslikeTemp").checked;
const visibility = document.getElementById("visibility").checked;
const uv = document.getElementById("uv").checked;
const gust = document.getElementById("gust").checked;
const airquality = boolToWord(
document.getElementById("airquality").checked
);
const unitTemperature = document.getElementById("unitTemperature").value;
const unitWindSpeed = document.getElementById("unitWindSpeed").value;
const unitPressure = document.getElementById("unitPressure").value;
const unitPrecipitation =
document.getElementById("unitPrecipitation").value;
const output = document.getElementById("output").value;
const format = document.getElementById("format").value;
const apiKey = "1244099aeaee4b179e6111803241304";
const apiUrl = `https://api.weatherapi.com/v1/current.${format}?key=${apiKey}&q=${city}&aqi=${airquality}`;
fetch(apiUrl)
.then((response) => {
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.json();
})
.then((data) => {
// Wetterdaten anzeigen
document.getElementById("weatherData").innerText = JSON.stringify(
data,
null,
2
);
document.getElementById("apiUrloutput").value = apiUrl;
})
.catch((error) => {
console.error("There was a problem with the fetch operation:", error);
});
}
function searchAPI() {
const cityInput = document.getElementById("city").value;
const apiKey = "1244099aeaee4b179e6111803241304";
const apiUrl = `https://api.weatherapi.com/v1/search.json?key=${apiKey}&q=${cityInput}`;
fetch(apiUrl)
.then((response) => {
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.json();
})
.then((data) => {
// Wetterdaten anzeigen
document.getElementById("weatherData").innerText = JSON.stringify(
data,
null,
2
);
})
.catch((error) => {
console.error("There was a problem with the fetch operation:", error);
});
}
function boolToWord(bool) {
return bool ? "yes" : "no";
}
return ( return (
<div className="home-container"> <div className="home-container">
...@@ -13,41 +94,131 @@ const Data = (props) => { ...@@ -13,41 +94,131 @@ const Data = (props) => {
<Navbar4 rootClassName="navbar4-root-class-name"></Navbar4> <Navbar4 rootClassName="navbar4-root-class-name"></Navbar4>
</div> </div>
<div class="container"> <div>
<div class="box"> <div className="thq-grid-5">
<h1>Wetterdaten abrufen</h1>
<div class="filter"> <div class="filter">
<label for="city">Stadt:</label> <label for="city">City:</label>
<input type="text" id="city" placeholder="Stadt" /> <input type="text" id="city" placeholder="City" />
<br />
<label for="city">Region:</label>
<input type="text" id="region" placeholder="Region" />
<br />
<label>Country:</label>
<input type="text" id="country" placeholder="Country" />
<br />
<label>Latitude:</label>
<input type="text" id="latitude" placeholder="Latitude" />
<label>Longitude:</label>
<input type="text" id="longitude" placeholder="Longitude" />
<br />
</div>
<div>
<input
type="checkbox"
id="temperature"
className="checkBoxFilter"
/>
<label> Temprature</label>
<br />
<input type="checkbox" id="isDay" className="checkBoxFilter" />
<label> Is it day?</label>
<br />
<input type="checkbox" id="condition" className="checkBoxFilter" />
<label> Condition</label>
<br />
<input type="checkbox" id="pressure" className="checkBoxFilter" />
<label> Pressure</label>
<br />
<input
type="checkbox"
id="precipitation"
className="checkBoxFilter"
/>
<label> Precipitation</label>
<br /> <br />
<label for="start">Startdatum:</label> <input type="checkbox" id="humidity" className="checkBoxFilter" />
<input type="date" id="start" value="2024-04-24" /> <label> Humidity</label>
<br /> <br />
<label for="end">Enddatum:</label> <input type="checkbox" id="cloud" className="checkBoxFilter" />
<input type="date" id="end" value="2024-05-08" /> <label> Cloud</label>
<br /> <br />
<label for="storage">Speicherort:</label> <input
<select id="storage"> type="checkbox"
<option value="local">Lokal</option> id="feelslikeTemp"
<option value="database">Datenbank</option> className="checkBoxFilter"
/>
<label> Feelslike Temp.</label>
<br />
<input type="checkbox" id="visibility" className="checkBoxFilter" />
<label> Visibility</label>
<br />
<input type="checkbox" id="uv" className="checkBoxFilter" />
<label> UV-Index</label>
<br />
<input type="checkbox" id="gust" className="checkBoxFilter" />
<label> Gust</label>
<br />
<input type="checkbox" id="airquality" className="checkBoxFilter" />
<label> Airquality</label>
<br />
</div>
<div class="filter">
<label>Temperature Unit:</label>
<select id="unitTemperature">
<option value="temp_c">Celsius</option>
<option value="temp_f">Fahrenheit</option>
</select>
<label>Wind speed Unit:</label>
<select id="unitWindSpeed">
<option value="wind_kph">km/h</option>
<option value="wind_mph">Mph</option>
</select>
<label>Pressure Unit:</label>
<select id="unitPressure">
<option value="pressure_mb">Millibar</option>
<option value="pressure_in">Inch</option>
</select>
<label>Precipitation Unit:</label>
<select id="unitPrecipitation">
<option value="precip_mm">Millimeter</option>
<option value="precip_in">Inch</option>
</select>
</div>
<div class="filter">
<label>Output:</label>
<select id="output">
<option value="local">Local</option>
<option value="database">API</option>
</select> </select>
<br /> <br />
<label for="format">Datenformat:</label> <label>Data format:</label>
<select id="format"> <select id="format">
<option value="json">JSON</option> <option value="json">JSON</option>
<option value="csv">CSV</option> <option value="csv">CSV</option>
<option value="xml">XML</option> <option value="xml">XML</option>
</select> </select>
<br /> <br />
<button onclick="getData()">Daten abrufen</button> <button onClick={searchAPI}>City api</button>
</div> </div>
</div> </div>
<div>
<button className="thq-button-filled" onClick={getData}>
Generate
</button>
</div>
<div class="box"> <div class="output">
<h2>Wetterdaten</h2> <h2>Output:</h2>
<br />
<pre id="weatherData"></pre> <pre id="weatherData"></pre>
</div> </div>
</div> </div>
<div id="apiUrl">
<label>API URL:</label>
<br />
<input className="input" type="text" id="apiUrloutput" readOnly />
</div>
<div className="home-footer11"> <div className="home-footer11">
<Footer15></Footer15> <Footer15></Footer15>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

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