Skip to content

GitLab

Commit 811241e3 authored by EnesKarakas's avatar EnesKarakas
Browse files

xml done

parent 26508673
Hide whitespace changes
Inline Side-by-side
frontend/package-lock.json
View file @ 811241e3
......@@ -14,7 +14,8 @@
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-helmet": "^6.1.0",
"react-router-dom": "^5.2.0"
"react-router-dom": "^5.2.0",
"xml-js": "^1.6.11"
},
"devDependencies": {
"@craco/craco": "^7.1.0",
......@@ -16509,8 +16510,7 @@
"node_modules/sax": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
"integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
"dev": true
"integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
},
"node_modules/saxes": {
"version": "5.0.1",
......@@ -19459,6 +19459,17 @@
}
}
},
"node_modules/xml-js": {
"version": "1.6.11",
"resolved": "https://registry.npmjs.org/xml-js/-/xml-js-1.6.11.tgz",
"integrity": "sha512-7rVi2KMfwfWFl+GpPg6m80IVMWXLRjO+PxTq7V2CDhoGak0wzYzFgUY2m4XJ47OGdXd8eLE8EmwfAmdjw7lC1g==",
"dependencies": {
"sax": "^1.2.4"
},
"bin": {
"xml-js": "bin/cli.js"
}
},
"node_modules/xml-name-validator": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz",
......@@ -31387,8 +31398,7 @@
"sax": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
"integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
"dev": true
"integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
},
"saxes": {
"version": "5.0.1",
......@@ -33680,6 +33690,14 @@
"dev": true,
"requires": {}
},
"xml-js": {
"version": "1.6.11",
"resolved": "https://registry.npmjs.org/xml-js/-/xml-js-1.6.11.tgz",
"integrity": "sha512-7rVi2KMfwfWFl+GpPg6m80IVMWXLRjO+PxTq7V2CDhoGak0wzYzFgUY2m4XJ47OGdXd8eLE8EmwfAmdjw7lC1g==",
"requires": {
"sax": "^1.2.4"
}
},
"xml-name-validator": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz",
frontend/package.json
View file @ 811241e3
......@@ -9,7 +9,8 @@
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-helmet": "^6.1.0",
"react-router-dom": "^5.2.0"
"react-router-dom": "^5.2.0",
"xml-js": "^1.6.11"
},
"scripts": {
"start": "craco start",
......
frontend/src/components/weather/currentData.js
View file @ 811241e3
......@@ -38,7 +38,11 @@ const Currentdata = (props) => {
};
const downloadXml = (weatherdata) => {
const xml = jsonToXml(weatherdata);
var xml = jsonToXml(weatherdata);
xml =
"<?xml version='1.0' encoding='UTF-8' ?><weatherdata>" +
xml +
"</weatherdata>";
const blob = new Blob([xml], { type: "application/xml" });
saveAs(blob, "weatherdata.xml");
};
......@@ -49,12 +53,26 @@ const Currentdata = (props) => {
saveAs(blob, "weatherdata.csv");
};
const jsonToXml = (json) => {
let xml = '<?xml version="1.0" encoding="UTF-8"?>\n<root>\n';
for (let prop in json) {
xml += ` <${prop}>${json[prop]}</${prop}>\n`;
const jsonToXml = (obj) => {
var xml = "";
for (var prop in obj) {
xml += "<" + prop + ">";
if (Array.isArray(obj[prop])) {
for (var array of obj[prop]) {
// A real botch fix here
xml += "</" + prop + ">";
xml += "<" + prop + ">";
xml += jsonToXml(new Object(array));
}
} else if (typeof obj[prop] == "object") {
xml += jsonToXml(new Object(obj[prop]));
} else {
xml += obj[prop];
}
xml += "</" + prop + ">";
}
xml += "</root>";
var xml = xml.replace(/<\/?[0-9]{1,}>/g, "");
return xml;
};
......@@ -63,6 +81,7 @@ const Currentdata = (props) => {
const values = Object.values(json);
return `${keys.join(",")}\n${values.join(",")}`;
};
return (
<div className="home-container">
<div className="thq-grid-5">
......@@ -536,6 +555,18 @@ const Currentdata = (props) => {
filterArray.push("gust_mph");
}
}
if (
air_quality_co ||
air_quality_no2 ||
air_quality_o3 ||
air_quality_so2 ||
air_quality_pm2_5 ||
air_quality_pm10 ||
air_quality_us_epa_index ||
air_quality_gb_defra_index
) {
filterArray.push("air_quality");
}
if (air_quality_co) {
filterArray.push("co");
}
......@@ -606,10 +637,6 @@ const Currentdata = (props) => {
console.error("There was a problem with the fetch operation:", error);
});
}
function boolToWord(bool) {
return bool ? "yes" : "no";
}
};
const ListItem = ({ name, country, region, lat, lon }) => {
......
frontend/src/components/weather/historicalWeatherData.js
View file @ 811241e3
......@@ -40,7 +40,11 @@ const HistoricalWeatherData = (props) => {
};
const downloadXml = (weatherdata) => {
const xml = jsonToXml(weatherdata);
var xml = jsonToXml(weatherdata);
xml =
"<?xml version='1.0' encoding='UTF-8' ?><weatherdata>" +
xml +
"</weatherdata>";
const blob = new Blob([xml], { type: "application/xml" });
saveAs(blob, "weatherdata.xml");
};
......@@ -51,12 +55,26 @@ const HistoricalWeatherData = (props) => {
saveAs(blob, "weatherdata.csv");
};
const jsonToXml = (json) => {
let xml = '<?xml version="1.0" encoding="UTF-8"?>\n<root>\n';
for (let prop in json) {
xml += ` <${prop}>${json[prop]}</${prop}>\n`;
const jsonToXml = (obj) => {
var xml = "";
for (var prop in obj) {
xml += "<" + prop + ">";
if (Array.isArray(obj[prop])) {
for (var array of obj[prop]) {
// A real botch fix here
xml += "</" + prop + ">";
xml += "<" + prop + ">";
xml += jsonToXml(new Object(array));
}
} else if (typeof obj[prop] == "object") {
xml += jsonToXml(new Object(obj[prop]));
} else {
xml += obj[prop];
}
xml += "</" + prop + ">";
}
xml += "</root>";
var xml = xml.replace(/<\/?[0-9]{1,}>/g, "");
return xml;
};
......
frontend/src/components/weather/weatherForecastData.js
View file @ 811241e3
......@@ -38,7 +38,11 @@ const WeatherForecastData = (props) => {
};
const downloadXml = (weatherdata) => {
const xml = jsonToXml(weatherdata);
var xml = jsonToXml(weatherdata);
xml =
"<?xml version='1.0' encoding='UTF-8' ?><weatherdata>" +
xml +
"</weatherdata>";
const blob = new Blob([xml], { type: "application/xml" });
saveAs(blob, "weatherdata.xml");
};
......@@ -49,12 +53,26 @@ const WeatherForecastData = (props) => {
saveAs(blob, "weatherdata.csv");
};
const jsonToXml = (json) => {
let xml = '<?xml version="1.0" encoding="UTF-8"?>\n<root>\n';
for (let prop in json) {
xml += ` <${prop}>${json[prop]}</${prop}>\n`;
const jsonToXml = (obj) => {
var xml = "";
for (var prop in obj) {
xml += "<" + prop + ">";
if (Array.isArray(obj[prop])) {
for (var array of obj[prop]) {
// A real botch fix here
xml += "</" + prop + ">";
xml += "<" + prop + ">";
xml += jsonToXml(new Object(array));
}
} else if (typeof obj[prop] == "object") {
xml += jsonToXml(new Object(obj[prop]));
} else {
xml += obj[prop];
}
xml += "</" + prop + ">";
}
xml += "</root>";
var xml = xml.replace(/<\/?[0-9]{1,}>/g, "");
return xml;
};
......@@ -65,398 +83,365 @@ const WeatherForecastData = (props) => {
};
return (
<div className="home-container">
<div className="thq-grid-5">
<div className="thq-grid-5">
<div class="h1">
<h1>Choose your City</h1>
<br />
</div>
<div class="field_write">
<div class="fw">
</div>
<div class="field_write">
<div class="fw">
<div class="h3">
<h3>Choose your Location</h3>
</div>
<label htmlFor="location"></label>
<input
type="text"
id="city_text"
placeholder="Location"
value={query}
onChange={handleInputChange}
<label htmlFor="location"></label>
<input
type="text"
id="city_text"
placeholder="Location"
value={query}
onChange={handleInputChange}
/>
{data.map((item) => (
<ListItem
key={item.id}
name={item.name}
country={item.country}
region={item.region}
lat={item.lat}
lon={item.lon}
/>
{data.map((item) => (
<ListItem
key={item.id}
name={item.name}
country={item.country}
region={item.region}
lat={item.lat}
lon={item.lon}
/>
))}
</div>
<div class="fw">
<div class="h3">
))}
</div>
<div class="fw">
<div class="h3">
<h3>Choose your Region</h3>
</div>
<label for="region"></label>
<input type="text" id="region_text" placeholder="Region" />
</div>
<div class="fw">
<div class="h3">
<label for="region"></label>
<input type="text" id="region_text" placeholder="Region" />
</div>
<div class="fw">
<div class="h3">
<h3>Choose your Country</h3>
</div>
<label></label>
<input type="text" id="country_text" placeholder="Country" />
</div>
<div class="fw">
<div class="h3">
<label></label>
<input type="text" id="country_text" placeholder="Country" />
</div>
<div class="fw">
<div class="h3">
<h3>Choose your Latitude</h3>
</div>
<label></label>
<input type="text" id="latitude_text" placeholder="Latitude" />
</div>
<div class="fw">
<div class="h3">
<label></label>
<input type="text" id="latitude_text" placeholder="Latitude" />
</div>
<div class="fw">
<div class="h3">
<h3>Choose your Longitude</h3>
</div>
<label></label>
<input type="text" id="longitude_text" placeholder="Longitude" />
</div>
</div>
<div class="h1">
<label></label>
<input type="text" id="longitude_text" placeholder="Longitude" />
</div>
</div>
<div class="h1">
<h1>Choose your custom output Data</h1>
<br />
</div>
<div className="dataselect">
<div class="data">
<div class="h3">
</div>
<div className="dataselect">
<div class="data">
<div class="h3">
<h3>Location</h3>
</div>
<input type="checkbox" id="name" className="checkBoxFilter" />
<label> City Name</label>
<br />
<input type="checkbox" id="region" className="checkBoxFilter" />
<label> Region</label>
<br />
<input type="checkbox" id="country" className="checkBoxFilter" />
<label> Country</label>
<br />
<input type="checkbox" id="lon" className="checkBoxFilter" />
<label> Longitude</label>
<br />
<input type="checkbox" id="lat" className="checkBoxFilter" />
<label> Latitude</label>
</div>
</div>
<input type="checkbox" id="name" className="checkBoxFilter" />
<label> City Name</label>
<br />
<input type="checkbox" id="region" className="checkBoxFilter" />
<label> Region</label>
<br />
<input type="checkbox" id="country" className="checkBoxFilter" />
<label> Country</label>
<br />
<input type="checkbox" id="lon" className="checkBoxFilter" />
<label> Longitude</label>
<br />
<input type="checkbox" id="lat" className="checkBoxFilter" />
<label> Latitude</label>
</div>
<div class="data">
<div class="h3">
<div class="h3">
<h3>Time</h3>
</div>
<input type="checkbox" id="tz_id" className="checkBoxFilter" />
<label> Timezone Id</label>
<br />
<input
type="checkbox"
id="localtime_epoch"
className="checkBoxFilter"
/>
<label> Localtime Epoch</label>
<br />
<input
type="checkbox"
id="localtime"
className="checkBoxFilter"
/>
<label> Localtime</label>
<br />
<input
type="checkbox"
id="last_updated_epoch"
className="checkBoxFilter"
/>
<label> Last Updated Epoch</label>
<br />
<input
type="checkbox"
id="last_updated"
className="checkBoxFilter"
/>
<label> Last Updated</label>
<br />
<input type="checkbox" id="date" class="checkBoxFilter" />
<label for="date">Date</label>
<br />
<input type="checkbox" id="date_epoch" class="checkBoxFilter" />
<label for="date_epoch">Date Epoch</label>
</div>
</div>
<input type="checkbox" id="tz_id" className="checkBoxFilter" />
<label> Timezone Id</label>
<br />
<input
type="checkbox"
id="localtime_epoch"
className="checkBoxFilter"
/>
<label> Localtime Epoch</label>
<br />
<input type="checkbox" id="localtime" className="checkBoxFilter" />
<label> Localtime</label>
<br />
<input
type="checkbox"
id="last_updated_epoch"
className="checkBoxFilter"
/>
<label> Last Updated Epoch</label>
<br />
<input
type="checkbox"
id="last_updated"
className="checkBoxFilter"
/>
<label> Last Updated</label>
<br />
<input type="checkbox" id="date" class="checkBoxFilter" />
<label for="date">Date</label>
<br />
<input type="checkbox" id="date_epoch" class="checkBoxFilter" />
<label for="date_epoch">Date Epoch</label>
</div>
<div class="data">
<div class="h3">
<div class="h3">
<h3>Primery Data</h3>
</div>
<input type="checkbox" id="maxtemp" class="checkBoxFilter" />
<label for="maxtemp">Max Temperature</label>
<br />
<input type="checkbox" id="mintemp" class="checkBoxFilter" />
<label for="mintemp">Min Temperature</label>
<br />
<input type="checkbox" id="avgtemp" class="checkBoxFilter" />
<label for="avgtemp">Average Temperature</label>
<br />
<input type="checkbox" id="maxwind" class="checkBoxFilter" />
<label for="maxwind">Max Wind Speed</label>
<br />
<input type="checkbox" id="totalprecip" class="checkBoxFilter" />
<label for="totalprecip">Total Precipitation</label>
<br />
<input type="checkbox" id="avgvis" class="checkBoxFilter" />
<label for="avgvis">Average Visibility</label>
<br />
<input type="checkbox" id="avghumidity" class="checkBoxFilter" />
<label for="avghumidity">Average Humidity</label>
<br />
<input
type="checkbox"
id="daily_will_it_rain"
class="checkBoxFilter"
/>
<label for="daily_will_it_rain">Daily Will it Rain</label>
</div>
<div class="data">
<div class="h3">
</div>
<input type="checkbox" id="maxtemp" class="checkBoxFilter" />
<label for="maxtemp">Max Temperature</label>
<br />
<input type="checkbox" id="mintemp" class="checkBoxFilter" />
<label for="mintemp">Min Temperature</label>
<br />
<input type="checkbox" id="avgtemp" class="checkBoxFilter" />
<label for="avgtemp">Average Temperature</label>
<br />
<input type="checkbox" id="maxwind" class="checkBoxFilter" />
<label for="maxwind">Max Wind Speed</label>
<br />
<input type="checkbox" id="totalprecip" class="checkBoxFilter" />
<label for="totalprecip">Total Precipitation</label>
<br />
<input type="checkbox" id="avgvis" class="checkBoxFilter" />
<label for="avgvis">Average Visibility</label>
<br />
<input type="checkbox" id="avghumidity" class="checkBoxFilter" />
<label for="avghumidity">Average Humidity</label>
<br />
<input
type="checkbox"
id="daily_will_it_rain"
class="checkBoxFilter"
/>
<label for="daily_will_it_rain">Daily Will it Rain</label>
</div>
<div class="data">
<div class="h3">
<h3>Dayly Data</h3>
</div>
</div>
<input
type="checkbox"
id="daily_chance_of_rain"
class="checkBoxFilter"
/>
<label for="daily_chance_of_rain">Daily Chance of Rain</label>
<br />
<input
type="checkbox"
id="daily_will_it_snow"
class="checkBoxFilter"
/>
<label for="daily_will_it_snow">Daily Will it Snow</label>
<br />
<input
type="checkbox"
id="daily_chance_of_snow"
class="checkBoxFilter"
/>
<label for="daily_chance_of_snow">Daily Chance of Snow</label>
</div>
<input
type="checkbox"
id="daily_chance_of_rain"
class="checkBoxFilter"
/>
<label for="daily_chance_of_rain">Daily Chance of Rain</label>
<br />
<input
type="checkbox"
id="daily_will_it_snow"
class="checkBoxFilter"
/>
<label for="daily_will_it_snow">Daily Will it Snow</label>
<br />
<input
type="checkbox"
id="daily_chance_of_snow"
class="checkBoxFilter"
/>
<label for="daily_chance_of_snow">Daily Chance of Snow</label>
</div>
<div class="data">
<div class="h3">
<div class="h3">
<h3>Time of Day Data</h3>
</div>
<input type="checkbox" id="uv" class="checkBoxFilter" />
<label for="uv">UV Index</label>
<br />
<input type="checkbox" id="sunrise" class="checkBoxFilter" />
<label for="sunrise">Sunrise</label>
<br />
<input type="checkbox" id="sunset" class="checkBoxFilter" />
<label for="sunset">Sunset</label>
<br />
<input type="checkbox" id="moonrise" class="checkBoxFilter" />
<label for="moonrise">Moonrise</label>
<br />
<input type="checkbox" id="moonset" class="checkBoxFilter" />
<label for="moonset">Moonset</label>
<br />
<input type="checkbox" id="moon_phase" class="checkBoxFilter" />
<label for="moon_phase">Moon Phase</label>
<br />
<input
type="checkbox"
id="moon_illumination"
class="checkBoxFilter"
/>
<label for="moon_illumination">Moon Illumination</label>
<br />
<input
type="checkbox"
id="hour_time_epoch"
class="checkBoxFilter"
/>
<label for="hour_time_epoch">Hour Time Epoch</label>
</div>
<div class="data">
<div class="h3">
<h3>Hourly Data</h3>
</div>
<input type="checkbox" id="hour_time" class="checkBoxFilter" />
<label for="hour_time">Hour Time</label>
<br />
<input type="checkbox" id="hour_temp" class="checkBoxFilter" />
<label for="hour_temp">Hour Temperature</label>
<br />
<input type="checkbox" id="hour_is_day" class="checkBoxFilter" />
<label for="hour_is_day">Hour Is Day</label>
<br />
<input type="checkbox" id="hour_wind" class="checkBoxFilter" />
<label for="hour_wind">Hour Wind</label>
<br />
<input
type="checkbox"
id="hour_wind_degree"
class="checkBoxFilter"
/>
<label for="hour_wind_degree">Hour Wind Degree</label>
<br />
<input
type="checkbox"
id="hour_wind_dir"
class="checkBoxFilter"
/>
<label for="hour_wind_dir">Hour Wind Direction</label>
<br />
<input
type="checkbox"
id="hour_pressure"
class="checkBoxFilter"
/>
<label for="hour_pressure">Hour Pressure</label>
<br />
<input type="checkbox" id="hour_precip" class="checkBoxFilter" />
<label for="hour_precip">Hour Precipitation</label>
<br />
<input
type="checkbox"
id="hour_humidity"
class="checkBoxFilter"
/>
<label for="hour_humidity">Hour Humidity</label>
<br />
<input type="checkbox" id="hour_cloud" class="checkBoxFilter" />
<label for="hour_cloud">Hour Cloud</label>
<br />
<input
type="checkbox"
id="hour_feelslike"
class="checkBoxFilter"
/>
<label for="hour_feelslike">Hour Feels Like</label>
<br />
<input
type="checkbox"
id="hour_windchill"
class="checkBoxFilter"
/>
<label for="hour_windchill">Hour Wind Chill</label>
<br />
<input
type="checkbox"
id="hour_heatindex"
class="checkBoxFilter"
/>
<label for="hour_heatindex">Hour Heat Index</label>
<br />
<input
type="checkbox"
id="hour_dewpoint"
class="checkBoxFilter"
/>
<label for="hour_dewpoint">Hour Dew Point</label>
<br />
<input
type="checkbox"
id="hourly_will_it_rain"
class="checkBoxFilter"
/>
<label for="hourly_will_it_rain">Will it Rain</label>
<br />
<input
type="checkbox"
id="hourly_chance_of_rain"
class="checkBoxFilter"
/>
<label for="hourly_chance_of_rain">Chance of Rain</label>
<br />
<input
type="checkbox"
id="hourly_will_it_snow"
class="checkBoxFilter"
/>
<label for="hourly_will_it_snow">Will it Snow</label>
<br />
<input
type="checkbox"
id="hourly_chance_of_snow"
class="checkBoxFilter"
/>
<label for="hourly_chance_of_snow">Chance of Snow</label>
<br />
<input type="checkbox" id="hour_vis" class="checkBoxFilter" />
<label for="hour_vis">Hour Visibility</label>
<br />
<input type="checkbox" id="hour_gust" class="checkBoxFilter" />
<label for="hour_gust">Hour Gust</label>
<br />
<input type="checkbox" id="hour_uv" class="checkBoxFilter" />
<label for="hour_uv">Hour UV</label>
</div>
<div class="data">
<div class="h3">
<h3>Weather Alerts</h3>
</div>
<input type="checkbox" id="alerts" class="checkBoxFilter" />
<label for="alerts">Alerts</label>
</div>
</div>
<div class="fw1">
<div class="h3">
<h3>How many forecast days do you want?</h3>
</div>
<label for="days"></label>
<input type="range" id="days" name="days" min="1" max="7" />
</div>
<div class="fw1">
<div class="h3">
<h3>Choose a Unit</h3>
<input type="checkbox" id="uv" class="checkBoxFilter" />
<label for="uv">UV Index</label>
<br />
<input type="checkbox" id="sunrise" class="checkBoxFilter" />
<label for="sunrise">Sunrise</label>
<br />
<input type="checkbox" id="sunset" class="checkBoxFilter" />
<label for="sunset">Sunset</label>
<br />
<input type="checkbox" id="moonrise" class="checkBoxFilter" />
<label for="moonrise">Moonrise</label>
<br />
<input type="checkbox" id="moonset" class="checkBoxFilter" />
<label for="moonset">Moonset</label>
<br />
<input type="checkbox" id="moon_phase" class="checkBoxFilter" />
<label for="moon_phase">Moon Phase</label>
<br />
<input
type="checkbox"
id="moon_illumination"
class="checkBoxFilter"
/>
<label for="moon_illumination">Moon Illumination</label>
<br />
<input
type="checkbox"
id="hour_time_epoch"
class="checkBoxFilter"
/>
<label for="hour_time_epoch">Hour Time Epoch</label>
</div>
<div class="data">
<div class="h3">
<h3>Hourly Data</h3>
</div>
<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 your data
</button>
</div>
<br />
<div class="fw1">
<div class="h3">
<h3>Choose a Fileformat</h3>
<input type="checkbox" id="hour_time" class="checkBoxFilter" />
<label for="hour_time">Hour Time</label>
<br />
<input type="checkbox" id="hour_temp" class="checkBoxFilter" />
<label for="hour_temp">Hour Temperature</label>
<br />
<input type="checkbox" id="hour_is_day" class="checkBoxFilter" />
<label for="hour_is_day">Hour Is Day</label>
<br />
<input type="checkbox" id="hour_wind" class="checkBoxFilter" />
<label for="hour_wind">Hour Wind</label>
<br />
<input
type="checkbox"
id="hour_wind_degree"
class="checkBoxFilter"
/>
<label for="hour_wind_degree">Hour Wind Degree</label>
<br />
<input type="checkbox" id="hour_wind_dir" class="checkBoxFilter" />
<label for="hour_wind_dir">Hour Wind Direction</label>
<br />
<input type="checkbox" id="hour_pressure" class="checkBoxFilter" />
<label for="hour_pressure">Hour Pressure</label>
<br />
<input type="checkbox" id="hour_precip" class="checkBoxFilter" />
<label for="hour_precip">Hour Precipitation</label>
<br />
<input type="checkbox" id="hour_humidity" class="checkBoxFilter" />
<label for="hour_humidity">Hour Humidity</label>
<br />
<input type="checkbox" id="hour_cloud" class="checkBoxFilter" />
<label for="hour_cloud">Hour Cloud</label>
<br />
<input type="checkbox" id="hour_feelslike" class="checkBoxFilter" />
<label for="hour_feelslike">Hour Feels Like</label>
<br />
<input type="checkbox" id="hour_windchill" class="checkBoxFilter" />
<label for="hour_windchill">Hour Wind Chill</label>
<br />
<input type="checkbox" id="hour_heatindex" class="checkBoxFilter" />
<label for="hour_heatindex">Hour Heat Index</label>
<br />
<input type="checkbox" id="hour_dewpoint" class="checkBoxFilter" />
<label for="hour_dewpoint">Hour Dew Point</label>
<br />
<input
type="checkbox"
id="hourly_will_it_rain"
class="checkBoxFilter"
/>
<label for="hourly_will_it_rain">Will it Rain</label>
<br />
<input
type="checkbox"
id="hourly_chance_of_rain"
class="checkBoxFilter"
/>
<label for="hourly_chance_of_rain">Chance of Rain</label>
<br />
<input
type="checkbox"
id="hourly_will_it_snow"
class="checkBoxFilter"
/>
<label for="hourly_will_it_snow">Will it Snow</label>
<br />
<input
type="checkbox"
id="hourly_chance_of_snow"
class="checkBoxFilter"
/>
<label for="hourly_chance_of_snow">Chance of Snow</label>
<br />
<input type="checkbox" id="hour_vis" class="checkBoxFilter" />
<label for="hour_vis">Hour Visibility</label>
<br />
<input type="checkbox" id="hour_gust" class="checkBoxFilter" />
<label for="hour_gust">Hour Gust</label>
<br />
<input type="checkbox" id="hour_uv" class="checkBoxFilter" />
<label for="hour_uv">Hour UV</label>
</div>
<div class="data">
<div class="h3">
<h3>Weather Alerts</h3>
</div>
<select name="fileformat" id="fileformat">
<option value="json">JSON</option>
<option value="xml">XML</option>
<option value="csv">CSV</option>
</select>
</div>
<button className="thq-button-filled" onClick={downloadData}>
Download your data
</button>
<div id="apiUrl">
<div class="fw1">
<div class="h3">
<input type="checkbox" id="alerts" class="checkBoxFilter" />
<label for="alerts">Alerts</label>
</div>
</div>
<div class="fw1">
<div class="h3">
<h3>How many forecast days do you want?</h3>
</div>
<label for="days"></label>
<input type="range" id="days" name="days" min="1" max="7" />
</div>
<div class="fw1">
<div class="h3">
<h3>Choose a Unit</h3>
</div>
<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 your data
</button>
</div>
<br />
<div class="fw1">
<div class="h3">
<h3>Choose a Fileformat</h3>
</div>
<select name="fileformat" id="fileformat">
<option value="json">JSON</option>
<option value="xml">XML</option>
<option value="csv">CSV</option>
</select>
</div>
<button className="thq-button-filled" onClick={downloadData}>
Download your data
</button>
<div id="apiUrl">
<div class="fw1">
<div class="h3">
<h3>Your Generated apiUrl with your custom Data</h3>
</div>
<input className="input" type="text" id="apiUrloutput" readOnly />
<input className="input" type="text" id="apiUrloutput" readOnly />
</div>
</div>
<div class="output">
<h2>Output:</h2>
<br />
<pre id="weatherData"></pre>
</div>
<h2>Output:</h2>
<br />
<pre id="weatherData"></pre>
</div>
</div>
</div>
);
......
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