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 @@ ...@@ -14,7 +14,8 @@
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^18.3.1", "react-dom": "^18.3.1",
"react-helmet": "^6.1.0", "react-helmet": "^6.1.0",
"react-router-dom": "^5.2.0" "react-router-dom": "^5.2.0",
"xml-js": "^1.6.11"
}, },
"devDependencies": { "devDependencies": {
"@craco/craco": "^7.1.0", "@craco/craco": "^7.1.0",
...@@ -16509,8 +16510,7 @@ ...@@ -16509,8 +16510,7 @@
"node_modules/sax": { "node_modules/sax": {
"version": "1.2.4", "version": "1.2.4",
"resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
"integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==", "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
"dev": true
}, },
"node_modules/saxes": { "node_modules/saxes": {
"version": "5.0.1", "version": "5.0.1",
...@@ -19459,6 +19459,17 @@ ...@@ -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": { "node_modules/xml-name-validator": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz", "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz",
...@@ -31387,8 +31398,7 @@ ...@@ -31387,8 +31398,7 @@
"sax": { "sax": {
"version": "1.2.4", "version": "1.2.4",
"resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
"integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==", "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
"dev": true
}, },
"saxes": { "saxes": {
"version": "5.0.1", "version": "5.0.1",
...@@ -33680,6 +33690,14 @@ ...@@ -33680,6 +33690,14 @@
"dev": true, "dev": true,
"requires": {} "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": { "xml-name-validator": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz", "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 @@ ...@@ -9,7 +9,8 @@
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^18.3.1", "react-dom": "^18.3.1",
"react-helmet": "^6.1.0", "react-helmet": "^6.1.0",
"react-router-dom": "^5.2.0" "react-router-dom": "^5.2.0",
"xml-js": "^1.6.11"
}, },
"scripts": { "scripts": {
"start": "craco start", "start": "craco start",
......
frontend/src/components/weather/currentData.js
View file @ 811241e3
...@@ -38,7 +38,11 @@ const Currentdata = (props) => { ...@@ -38,7 +38,11 @@ const Currentdata = (props) => {
}; };
const downloadXml = (weatherdata) => { 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" }); const blob = new Blob([xml], { type: "application/xml" });
saveAs(blob, "weatherdata.xml"); saveAs(blob, "weatherdata.xml");
}; };
...@@ -49,12 +53,26 @@ const Currentdata = (props) => { ...@@ -49,12 +53,26 @@ const Currentdata = (props) => {
saveAs(blob, "weatherdata.csv"); saveAs(blob, "weatherdata.csv");
}; };
const jsonToXml = (json) => { const jsonToXml = (obj) => {
let xml = '<?xml version="1.0" encoding="UTF-8"?>\n<root>\n'; var xml = "";
for (let prop in json) { for (var prop in obj) {
xml += ` <${prop}>${json[prop]}</${prop}>\n`; 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; return xml;
}; };
...@@ -63,6 +81,7 @@ const Currentdata = (props) => { ...@@ -63,6 +81,7 @@ const Currentdata = (props) => {
const values = Object.values(json); const values = Object.values(json);
return `${keys.join(",")}\n${values.join(",")}`; return `${keys.join(",")}\n${values.join(",")}`;
}; };
return ( return (
<div className="home-container"> <div className="home-container">
<div className="thq-grid-5"> <div className="thq-grid-5">
...@@ -536,6 +555,18 @@ const Currentdata = (props) => { ...@@ -536,6 +555,18 @@ const Currentdata = (props) => {
filterArray.push("gust_mph"); 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) { if (air_quality_co) {
filterArray.push("co"); filterArray.push("co");
} }
...@@ -606,10 +637,6 @@ const Currentdata = (props) => { ...@@ -606,10 +637,6 @@ const Currentdata = (props) => {
console.error("There was a problem with the fetch operation:", error); 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 }) => { const ListItem = ({ name, country, region, lat, lon }) => {
......
frontend/src/components/weather/historicalWeatherData.js
View file @ 811241e3
...@@ -40,7 +40,11 @@ const HistoricalWeatherData = (props) => { ...@@ -40,7 +40,11 @@ const HistoricalWeatherData = (props) => {
}; };
const downloadXml = (weatherdata) => { 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" }); const blob = new Blob([xml], { type: "application/xml" });
saveAs(blob, "weatherdata.xml"); saveAs(blob, "weatherdata.xml");
}; };
...@@ -51,12 +55,26 @@ const HistoricalWeatherData = (props) => { ...@@ -51,12 +55,26 @@ const HistoricalWeatherData = (props) => {
saveAs(blob, "weatherdata.csv"); saveAs(blob, "weatherdata.csv");
}; };
const jsonToXml = (json) => { const jsonToXml = (obj) => {
let xml = '<?xml version="1.0" encoding="UTF-8"?>\n<root>\n'; var xml = "";
for (let prop in json) { for (var prop in obj) {
xml += ` <${prop}>${json[prop]}</${prop}>\n`; 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; return xml;
}; };
......
frontend/src/components/weather/weatherForecastData.js
View file @ 811241e3
...@@ -38,7 +38,11 @@ const WeatherForecastData = (props) => { ...@@ -38,7 +38,11 @@ const WeatherForecastData = (props) => {
}; };
const downloadXml = (weatherdata) => { 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" }); const blob = new Blob([xml], { type: "application/xml" });
saveAs(blob, "weatherdata.xml"); saveAs(blob, "weatherdata.xml");
}; };
...@@ -49,12 +53,26 @@ const WeatherForecastData = (props) => { ...@@ -49,12 +53,26 @@ const WeatherForecastData = (props) => {
saveAs(blob, "weatherdata.csv"); saveAs(blob, "weatherdata.csv");
}; };
const jsonToXml = (json) => { const jsonToXml = (obj) => {
let xml = '<?xml version="1.0" encoding="UTF-8"?>\n<root>\n'; var xml = "";
for (let prop in json) { for (var prop in obj) {
xml += ` <${prop}>${json[prop]}</${prop}>\n`; 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; return xml;
}; };
...@@ -65,398 +83,365 @@ const WeatherForecastData = (props) => { ...@@ -65,398 +83,365 @@ const WeatherForecastData = (props) => {
}; };
return ( return (
<div className="home-container"> <div className="home-container">
<div className="thq-grid-5"> <div className="thq-grid-5">
<div class="h1"> <div class="h1">
<h1>Choose your City</h1> <h1>Choose your City</h1>
<br /> <br />
</div> </div>
<div class="field_write"> <div class="field_write">
<div class="fw"> <div class="fw">
<div class="h3"> <div class="h3">
<h3>Choose your Location</h3> <h3>Choose your Location</h3>
</div> </div>
<label htmlFor="location"></label> <label htmlFor="location"></label>
<input <input
type="text" type="text"
id="city_text" id="city_text"
placeholder="Location" placeholder="Location"
value={query} value={query}
onChange={handleInputChange} 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 </div>
key={item.id} <div class="fw">
name={item.name} <div class="h3">
country={item.country}
region={item.region}
lat={item.lat}
lon={item.lon}
/>
))}
</div>
<div class="fw">
<div class="h3">
<h3>Choose your Region</h3> <h3>Choose your Region</h3>
</div> </div>
<label for="region"></label> <label for="region"></label>
<input type="text" id="region_text" placeholder="Region" /> <input type="text" id="region_text" placeholder="Region" />
</div> </div>
<div class="fw"> <div class="fw">
<div class="h3"> <div class="h3">
<h3>Choose your Country</h3> <h3>Choose your Country</h3>
</div> </div>
<label></label> <label></label>
<input type="text" id="country_text" placeholder="Country" /> <input type="text" id="country_text" placeholder="Country" />
</div> </div>
<div class="fw"> <div class="fw">
<div class="h3"> <div class="h3">
<h3>Choose your Latitude</h3> <h3>Choose your Latitude</h3>
</div> </div>
<label></label> <label></label>
<input type="text" id="latitude_text" placeholder="Latitude" /> <input type="text" id="latitude_text" placeholder="Latitude" />
</div> </div>
<div class="fw"> <div class="fw">
<div class="h3"> <div class="h3">
<h3>Choose your Longitude</h3> <h3>Choose your Longitude</h3>
</div> </div>
<label></label> <label></label>
<input type="text" id="longitude_text" placeholder="Longitude" /> <input type="text" id="longitude_text" placeholder="Longitude" />
</div> </div>
</div> </div>
<div class="h1"> <div class="h1">
<h1>Choose your custom output Data</h1> <h1>Choose your custom output Data</h1>
<br /> <br />
</div> </div>
<div className="dataselect"> <div className="dataselect">
<div class="data"> <div class="data">
<div class="h3"> <div class="h3">
<h3>Location</h3> <h3>Location</h3>
</div> </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 />
<input type="checkbox" id="region" className="checkBoxFilter" /> <input type="checkbox" id="region" className="checkBoxFilter" />
<label> Region</label> <label> Region</label>
<br /> <br />
<input type="checkbox" id="country" className="checkBoxFilter" /> <input type="checkbox" id="country" className="checkBoxFilter" />
<label> Country</label> <label> Country</label>
<br /> <br />
<input type="checkbox" id="lon" className="checkBoxFilter" /> <input type="checkbox" id="lon" className="checkBoxFilter" />
<label> Longitude</label> <label> Longitude</label>
<br /> <br />
<input type="checkbox" id="lat" className="checkBoxFilter" /> <input type="checkbox" id="lat" className="checkBoxFilter" />
<label> Latitude</label> <label> Latitude</label>
</div> </div>
<div class="data"> <div class="data">
<div class="h3"> <div class="h3">
<h3>Time</h3> <h3>Time</h3>
</div> </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 />
<input <input
type="checkbox" type="checkbox"
id="localtime_epoch" id="localtime_epoch"
className="checkBoxFilter" className="checkBoxFilter"
/> />
<label> Localtime Epoch</label> <label> Localtime Epoch</label>
<br /> <br />
<input <input type="checkbox" id="localtime" className="checkBoxFilter" />
type="checkbox" <label> Localtime</label>
id="localtime" <br />
className="checkBoxFilter" <input
/> type="checkbox"
<label> Localtime</label> id="last_updated_epoch"
<br /> className="checkBoxFilter"
<input />
type="checkbox" <label> Last Updated Epoch</label>
id="last_updated_epoch" <br />
className="checkBoxFilter" <input
/> type="checkbox"
<label> Last Updated Epoch</label> id="last_updated"
<br /> className="checkBoxFilter"
<input />
type="checkbox" <label> Last Updated</label>
id="last_updated" <br />
className="checkBoxFilter" <input type="checkbox" id="date" class="checkBoxFilter" />
/> <label for="date">Date</label>
<label> Last Updated</label> <br />
<br /> <input type="checkbox" id="date_epoch" class="checkBoxFilter" />
<input type="checkbox" id="date" class="checkBoxFilter" /> <label for="date_epoch">Date Epoch</label>
<label for="date">Date</label> </div>
<br />
<input type="checkbox" id="date_epoch" class="checkBoxFilter" />
<label for="date_epoch">Date Epoch</label>
</div>
<div class="data"> <div class="data">
<div class="h3"> <div class="h3">
<h3>Primery Data</h3> <h3>Primery Data</h3>
</div> </div>
<input type="checkbox" id="maxtemp" class="checkBoxFilter" /> <input type="checkbox" id="maxtemp" class="checkBoxFilter" />
<label for="maxtemp">Max Temperature</label> <label for="maxtemp">Max Temperature</label>
<br /> <br />
<input type="checkbox" id="mintemp" class="checkBoxFilter" /> <input type="checkbox" id="mintemp" class="checkBoxFilter" />
<label for="mintemp">Min Temperature</label> <label for="mintemp">Min Temperature</label>
<br /> <br />
<input type="checkbox" id="avgtemp" class="checkBoxFilter" /> <input type="checkbox" id="avgtemp" class="checkBoxFilter" />
<label for="avgtemp">Average Temperature</label> <label for="avgtemp">Average Temperature</label>
<br /> <br />
<input type="checkbox" id="maxwind" class="checkBoxFilter" /> <input type="checkbox" id="maxwind" class="checkBoxFilter" />
<label for="maxwind">Max Wind Speed</label> <label for="maxwind">Max Wind Speed</label>
<br /> <br />
<input type="checkbox" id="totalprecip" class="checkBoxFilter" /> <input type="checkbox" id="totalprecip" class="checkBoxFilter" />
<label for="totalprecip">Total Precipitation</label> <label for="totalprecip">Total Precipitation</label>
<br /> <br />
<input type="checkbox" id="avgvis" class="checkBoxFilter" /> <input type="checkbox" id="avgvis" class="checkBoxFilter" />
<label for="avgvis">Average Visibility</label> <label for="avgvis">Average Visibility</label>
<br /> <br />
<input type="checkbox" id="avghumidity" class="checkBoxFilter" /> <input type="checkbox" id="avghumidity" class="checkBoxFilter" />
<label for="avghumidity">Average Humidity</label> <label for="avghumidity">Average Humidity</label>
<br /> <br />
<input <input
type="checkbox" type="checkbox"
id="daily_will_it_rain" id="daily_will_it_rain"
class="checkBoxFilter" class="checkBoxFilter"
/> />
<label for="daily_will_it_rain">Daily Will it Rain</label> <label for="daily_will_it_rain">Daily Will it Rain</label>
</div> </div>
<div class="data"> <div class="data">
<div class="h3"> <div class="h3">
<h3>Dayly Data</h3> <h3>Dayly Data</h3>
</div> </div>
<input <input
type="checkbox" type="checkbox"
id="daily_chance_of_rain" id="daily_chance_of_rain"
class="checkBoxFilter" class="checkBoxFilter"
/> />
<label for="daily_chance_of_rain">Daily Chance of Rain</label> <label for="daily_chance_of_rain">Daily Chance of Rain</label>
<br /> <br />
<input <input
type="checkbox" type="checkbox"
id="daily_will_it_snow" id="daily_will_it_snow"
class="checkBoxFilter" class="checkBoxFilter"
/> />
<label for="daily_will_it_snow">Daily Will it Snow</label> <label for="daily_will_it_snow">Daily Will it Snow</label>
<br /> <br />
<input <input
type="checkbox" type="checkbox"
id="daily_chance_of_snow" id="daily_chance_of_snow"
class="checkBoxFilter" class="checkBoxFilter"
/> />
<label for="daily_chance_of_snow">Daily Chance of Snow</label> <label for="daily_chance_of_snow">Daily Chance of Snow</label>
</div> </div>
<div class="data"> <div class="data">
<div class="h3"> <div class="h3">
<h3>Time of Day Data</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> </div>
<label for="days"></label> <input type="checkbox" id="uv" class="checkBoxFilter" />
<input type="range" id="days" name="days" min="1" max="7" /> <label for="uv">UV Index</label>
</div> <br />
<div class="fw1"> <input type="checkbox" id="sunrise" class="checkBoxFilter" />
<div class="h3"> <label for="sunrise">Sunrise</label>
<h3>Choose a Unit</h3> <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> </div>
<select name="unnits" id="units"> <input type="checkbox" id="hour_time" class="checkBoxFilter" />
<option value="world">Rest of The World</option> <label for="hour_time">Hour Time</label>
<option value="american"> <br />
American units: /eagles per shool shootings <input type="checkbox" id="hour_temp" class="checkBoxFilter" />
</option> <label for="hour_temp">Hour Temperature</label>
</select> <br />
</div> <input type="checkbox" id="hour_is_day" class="checkBoxFilter" />
<div> <label for="hour_is_day">Hour Is Day</label>
<button className="thq-button-filled" onClick={getData}> <br />
Generate your data <input type="checkbox" id="hour_wind" class="checkBoxFilter" />
</button> <label for="hour_wind">Hour Wind</label>
</div> <br />
<br /> <input
<div class="fw1"> type="checkbox"
<div class="h3"> id="hour_wind_degree"
<h3>Choose a Fileformat</h3> 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> </div>
<select name="fileformat" id="fileformat"> <input type="checkbox" id="alerts" class="checkBoxFilter" />
<option value="json">JSON</option> <label for="alerts">Alerts</label>
<option value="xml">XML</option> </div>
<option value="csv">CSV</option> </div>
</select> <div class="fw1">
</div> <div class="h3">
<button className="thq-button-filled" onClick={downloadData}> <h3>How many forecast days do you want?</h3>
Download your data </div>
</button> <label for="days"></label>
<div id="apiUrl"> <input type="range" id="days" name="days" min="1" max="7" />
<div class="fw1"> </div>
<div class="h3"> <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> <h3>Your Generated apiUrl with your custom Data</h3>
</div> </div>
<input className="input" type="text" id="apiUrloutput" readOnly /> <input className="input" type="text" id="apiUrloutput" readOnly />
</div> </div>
</div> </div>
<div class="output"> <div class="output">
<h2>Output:</h2> <h2>Output:</h2>
<br /> <br />
<pre id="weatherData"></pre> <pre id="weatherData"></pre>
</div> </div>
</div> </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