Upload Aufgabe 09
This commit is contained in:
Justin Dretvic
parent
3f461a1db2
commit
cf590f2e19
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"liveServer.settings.port": 5502
|
||||
}
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
"use strict";
|
||||
var clientSide;
|
||||
(function (clientSide) {
|
||||
document.querySelector("#getJson").addEventListener("click", communicateJson);
|
||||
document.querySelector("#getHtml").addEventListener("click", communicateHtml);
|
||||
//communicate("https://theoneandgis.herokuapp.com/");
|
||||
async function communicate(_path) {
|
||||
let formData = new FormData(document.forms[0]);
|
||||
let url = "https://theoneandgis.herokuapp.com" + _path;
|
||||
//let url: string = "http://localhost:8100" + _path;
|
||||
let query = new URLSearchParams(formData);
|
||||
url += "?" + query.toString();
|
||||
let response = await fetch(url);
|
||||
let responseUrl;
|
||||
if (_path == "/json") {
|
||||
responseUrl = await response.json();
|
||||
console.log(responseUrl);
|
||||
document.getElementById("htmlResponse").innerHTML = JSON.stringify(responseUrl);
|
||||
}
|
||||
if (_path == "/html") {
|
||||
let responseUrl = await response.text();
|
||||
console.log("html-log: " + responseUrl);
|
||||
document.getElementById("htmlResponse").innerHTML = responseUrl;
|
||||
}
|
||||
}
|
||||
function communicateJson() {
|
||||
communicate("/json");
|
||||
}
|
||||
function communicateHtml() {
|
||||
communicate("/html");
|
||||
}
|
||||
})(clientSide || (clientSide = {}));
|
||||
/*namespace tutorial09 {
|
||||
|
||||
/*console.log(formData.get("vorname"));
|
||||
|
||||
for (let entry of formData) {
|
||||
console.log(entry);
|
||||
console.log("name: " + entry[0]);
|
||||
console.log("value: " + entry[1]);
|
||||
}
|
||||
|
||||
// Trennlinie
|
||||
|
||||
(<HTMLButtonElement>document.querySelector("#getHtml")).addEventListener("click", startCommunication);
|
||||
|
||||
function startCommunication(): void {
|
||||
communicate("http://localhost:8100");
|
||||
}
|
||||
|
||||
async function communicate(_url: RequestInfo): Promise<void> {
|
||||
|
||||
// let response: Response = await fetch(_url);
|
||||
// let jsonObj = await response.json();
|
||||
|
||||
let formData: FormData = new FormData(document.forms[0]);
|
||||
let formquery: URLSearchParams = new URLSearchParams(<any>formData);
|
||||
_url += "?" + formquery.toString();
|
||||
console.log("_url: " + _url);
|
||||
//let url: string = "https://theoneandgis.herokuapp.com/";
|
||||
//let query: URLSearchParams = new URLSearchParams(<any>formData);
|
||||
|
||||
//url += "?" + query.toString();
|
||||
|
||||
//debugger;
|
||||
|
||||
//let response: Response = await fetch(_url);
|
||||
let response: Response = await fetch("Data.json");
|
||||
console.log("response: " + response);
|
||||
console.log(response);
|
||||
let theAnswer: string = await response.text;
|
||||
//let text: string = theAnswer
|
||||
|
||||
|
||||
console.log("theAnswer: " + theAnswer);
|
||||
//let query: URLSearchParams = new URLSearchParams(theAnswer);
|
||||
//console.log(query.toString());
|
||||
//console.log( new URLSearchParams(theAnswer).values() );
|
||||
//console.log(query.keys() );
|
||||
//let queryvorname: string = query.get("/?vorname")!;
|
||||
//let querynachname: string = query.get("nachname")!;
|
||||
|
||||
//console.log(queryvorname);
|
||||
//console.log(querynachname);
|
||||
|
||||
(<HTMLDivElement>document.querySelector("#htmlResponse")).innerHTML = `${theAnswer}`;
|
||||
|
||||
|
||||
// await fetch(url);
|
||||
console.log(theAnswer);
|
||||
}
|
||||
|
||||
console.log("hello");
|
||||
|
||||
}*/
|
||||
//# sourceMappingURL=client.js.map
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"client.js","sourceRoot":"","sources":["client.ts"],"names":[],"mappings":";AACA,IAAU,UAAU,CAuCnB;AAvCD,WAAU,UAAU;IAEI,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAE,CAAC,gBAAgB,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC;IAC/E,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAE,CAAC,gBAAgB,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC;IAEnG,qDAAqD;IAErD,KAAK,UAAU,WAAW,CAAC,KAAa;QAEpC,IAAI,QAAQ,GAAa,IAAI,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QACzD,IAAI,GAAG,GAAW,oCAAoC,GAAG,KAAK,CAAC;QAC/D,oDAAoD;QACpD,IAAI,KAAK,GAAoB,IAAI,eAAe,CAAM,QAAQ,CAAC,CAAC;QAEhE,GAAG,IAAI,GAAG,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC;QAE9B,IAAI,QAAQ,GAAa,MAAM,KAAK,CAAC,GAAG,CAAC,CAAC;QAC1C,IAAI,WAAmB,CAAC;QAExB,IAAI,KAAK,IAAI,OAAO,EAAE;YAClB,WAAW,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;YACpC,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;YACR,QAAQ,CAAC,cAAc,CAAC,cAAc,CAAE,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;SACrG;QAED,IAAI,KAAK,IAAI,OAAO,EAAE;YAClB,IAAI,WAAW,GAAW,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;YAChD,OAAO,CAAC,GAAG,CAAC,YAAY,GAAG,WAAW,CAAC,CAAC;YACvB,QAAQ,CAAC,cAAc,CAAC,cAAc,CAAE,CAAC,SAAS,GAAG,WAAW,CAAC;SACrF;IACL,CAAC;IAED,SAAS,eAAe;QACpB,WAAW,CAAC,OAAO,CAAC,CAAC;IACzB,CAAC;IACD,SAAS,eAAe;QACpB,WAAW,CAAC,OAAO,CAAC,CAAC;IACzB,CAAC;AAEL,CAAC,EAvCS,UAAU,KAAV,UAAU,QAuCnB;AAcD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DG"}
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
|
||||
namespace clientSide {
|
||||
|
||||
(<HTMLButtonElement>document.querySelector("#getJson")).addEventListener("click", communicateJson);
|
||||
(<HTMLButtonElement>document.querySelector("#getHtml")).addEventListener("click", communicateHtml);
|
||||
|
||||
//communicate("https://theoneandgis.herokuapp.com/");
|
||||
|
||||
async function communicate(_path: string): Promise<void> {
|
||||
|
||||
let formData: FormData = new FormData(document.forms[0]);
|
||||
let url: string = "https://theoneandgis.herokuapp.com" + _path;
|
||||
//let url: string = "http://localhost:8100" + _path;
|
||||
let query: URLSearchParams = new URLSearchParams(<any>formData);
|
||||
|
||||
url += "?" + query.toString();
|
||||
|
||||
let response: Response = await fetch(url);
|
||||
let responseUrl: string;
|
||||
|
||||
if (_path == "/json") {
|
||||
responseUrl = await response.json();
|
||||
console.log(responseUrl);
|
||||
(<HTMLDivElement>document.getElementById("htmlResponse")).innerHTML = JSON.stringify(responseUrl);
|
||||
}
|
||||
|
||||
if (_path == "/html") {
|
||||
let responseUrl: string = await response.text();
|
||||
console.log("html-log: " + responseUrl);
|
||||
(<HTMLDivElement>document.getElementById("htmlResponse")).innerHTML = responseUrl;
|
||||
}
|
||||
}
|
||||
|
||||
function communicateJson(): void {
|
||||
communicate("/json");
|
||||
}
|
||||
function communicateHtml(): void {
|
||||
communicate("/html");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*namespace tutorial09 {
|
||||
|
||||
/*console.log(formData.get("vorname"));
|
||||
|
||||
for (let entry of formData) {
|
||||
console.log(entry);
|
||||
console.log("name: " + entry[0]);
|
||||
console.log("value: " + entry[1]);
|
||||
}
|
||||
|
||||
// Trennlinie
|
||||
|
||||
(<HTMLButtonElement>document.querySelector("#getHtml")).addEventListener("click", startCommunication);
|
||||
|
||||
function startCommunication(): void {
|
||||
communicate("http://localhost:8100");
|
||||
}
|
||||
|
||||
async function communicate(_url: RequestInfo): Promise<void> {
|
||||
|
||||
// let response: Response = await fetch(_url);
|
||||
// let jsonObj = await response.json();
|
||||
|
||||
let formData: FormData = new FormData(document.forms[0]);
|
||||
let formquery: URLSearchParams = new URLSearchParams(<any>formData);
|
||||
_url += "?" + formquery.toString();
|
||||
console.log("_url: " + _url);
|
||||
//let url: string = "https://theoneandgis.herokuapp.com/";
|
||||
//let query: URLSearchParams = new URLSearchParams(<any>formData);
|
||||
|
||||
//url += "?" + query.toString();
|
||||
|
||||
//debugger;
|
||||
|
||||
//let response: Response = await fetch(_url);
|
||||
let response: Response = await fetch("Data.json");
|
||||
console.log("response: " + response);
|
||||
console.log(response);
|
||||
let theAnswer: string = await response.text;
|
||||
//let text: string = theAnswer
|
||||
|
||||
|
||||
console.log("theAnswer: " + theAnswer);
|
||||
//let query: URLSearchParams = new URLSearchParams(theAnswer);
|
||||
//console.log(query.toString());
|
||||
//console.log( new URLSearchParams(theAnswer).values() );
|
||||
//console.log(query.keys() );
|
||||
//let queryvorname: string = query.get("/?vorname")!;
|
||||
//let querynachname: string = query.get("nachname")!;
|
||||
|
||||
//console.log(queryvorname);
|
||||
//console.log(querynachname);
|
||||
|
||||
(<HTMLDivElement>document.querySelector("#htmlResponse")).innerHTML = `${theAnswer}`;
|
||||
|
||||
|
||||
// await fetch(url);
|
||||
console.log(theAnswer);
|
||||
}
|
||||
|
||||
console.log("hello");
|
||||
|
||||
}*/
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="client.js" defer></script>
|
||||
<title>Formulare Kapitel 09</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<form method="" action="https://theoneandgis.herokuapp.com">
|
||||
<label for="vorname">Name</label> <br>
|
||||
<input type="text" id="vorname" name="vorname" value="Ben"> <br>
|
||||
<label for="nachname">Geburtsjahr</label> <br>
|
||||
<input type="text" id="nachname" name="nachname" value="Uchiha"> <br>
|
||||
<button type="submit">Submit</button>
|
||||
<button type="button" id="getHtml">HTML Button</button>
|
||||
<button type="button" id="getJson">JSON Button</button>
|
||||
</form>
|
||||
|
||||
<div id="htmlResponse"></div>
|
||||
|
||||
<hr>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<style>
|
||||
button,label,input,div {
|
||||
margin: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.ServerSide = void 0;
|
||||
const Http = require("http");
|
||||
const url = require("url");
|
||||
var ServerSide;
|
||||
(function (ServerSide) {
|
||||
console.log("Starting server");
|
||||
let port = Number(process.env.PORT);
|
||||
// der als numerisches Objekt abgespeichert werden soll
|
||||
if (!port)
|
||||
port = 8100;
|
||||
let server = Http.createServer();
|
||||
server.addListener("request", handleRequest);
|
||||
server.addListener("listening", handleListen);
|
||||
server.listen(port);
|
||||
function handleListen() {
|
||||
console.log("Listening");
|
||||
}
|
||||
function handleRequest(_request, _response) {
|
||||
console.log("http://localhost:8100" + `${_request.url}`);
|
||||
let myData = url.parse(`${_request.url}`, true);
|
||||
let myQuery = myData.query;
|
||||
let splitThis = _request.url.slice(0, 5);
|
||||
let myJsonString = JSON.stringify(myQuery);
|
||||
// Damit ich im Hinterkopf behalte, dass das so funktioniert
|
||||
// console.log("myQuery.vorname: " + myQuery.vorname );
|
||||
// console.log("myQuery.nachname: " + myQuery.nachname);
|
||||
if (splitThis == "/html") {
|
||||
_response.setHeader("content-type", "application/json");
|
||||
_response.setHeader("Access-Control-Allow-Origin", "*");
|
||||
}
|
||||
else if (splitThis == "/json") {
|
||||
_response.setHeader("content-type", "text/html");
|
||||
_response.setHeader("Access-Control-Allow-Origin", "*");
|
||||
}
|
||||
console.log(myJsonString);
|
||||
_response.write(myJsonString);
|
||||
_response.end();
|
||||
}
|
||||
})(ServerSide = exports.ServerSide || (exports.ServerSide = {}));
|
||||
//# sourceMappingURL=server.js.map
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"server.js","sourceRoot":"","sources":["server.ts"],"names":[],"mappings":";;;AAAA,6BAA6B;AAC7B,2BAA2B;AAG3B,IAAiB,UAAU,CAyC1B;AAzCD,WAAiB,UAAU;IACvB,OAAO,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAC/B,IAAI,IAAI,GAAW,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAC5C,uDAAuD;IACvD,IAAI,CAAC,IAAI;QACL,IAAI,GAAG,IAAI,CAAC;IAEhB,IAAI,MAAM,GAAgB,IAAI,CAAC,YAAY,EAAE,CAAC;IAC9C,MAAM,CAAC,WAAW,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;IAC7C,MAAM,CAAC,WAAW,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;IAC9C,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAEpB,SAAS,YAAY;QACjB,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B,CAAC;IAED,SAAS,aAAa,CAAC,QAA8B,EAAE,SAA8B;QACjF,OAAO,CAAC,GAAG,CAAC,uBAAuB,GAAG,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC;QAEzD,IAAI,MAAM,GAA2B,GAAG,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,EAAE,IAAI,CAAC,CAAC;QACxE,IAAI,OAAO,GAAmB,MAAM,CAAC,KAAK,CAAC;QAC3C,IAAI,SAAS,GAAoB,QAAQ,CAAC,GAAI,CAAC,KAAK,CAAC,CAAC,EAAG,CAAC,CAAC,CAAC;QAC5D,IAAI,YAAY,GAAW,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;QAEnD,4DAA4D;QAC5D,uDAAuD;QACvD,wDAAwD;QAExD,IAAI,SAAS,IAAI,OAAO,EAAE;YACtB,SAAS,CAAC,SAAS,CAAC,cAAc,EAAE,kBAAkB,CAAC,CAAC;YACxD,SAAS,CAAC,SAAS,CAAC,6BAA6B,EAAE,GAAG,CAAC,CAAC;SAC3D;aACI,IAAI,SAAS,IAAI,OAAO,EAAE;YAC3B,SAAS,CAAC,SAAS,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC;YACjD,SAAS,CAAC,SAAS,CAAC,6BAA6B,EAAE,GAAG,CAAC,CAAC;SAC3D;QAED,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;QAC1B,SAAS,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;QAC9B,SAAS,CAAC,GAAG,EAAE,CAAC;IACpB,CAAC;AACL,CAAC,EAzCgB,UAAU,GAAV,kBAAU,KAAV,kBAAU,QAyC1B"}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
import * as Http from "http";
|
||||
import * as url from "url";
|
||||
import { ParsedUrlQuery } from "querystring";
|
||||
|
||||
export namespace ServerSide {
|
||||
console.log("Starting server");
|
||||
let port: number = Number(process.env.PORT);
|
||||
// der als numerisches Objekt abgespeichert werden soll
|
||||
if (!port)
|
||||
port = 8100;
|
||||
|
||||
let server: Http.Server = Http.createServer();
|
||||
server.addListener("request", handleRequest);
|
||||
server.addListener("listening", handleListen);
|
||||
server.listen(port);
|
||||
|
||||
function handleListen(): void {
|
||||
console.log("Listening");
|
||||
}
|
||||
|
||||
function handleRequest(_request: Http.IncomingMessage, _response: Http.ServerResponse): void {
|
||||
console.log("http://localhost:8100" + `${_request.url}`);
|
||||
|
||||
let myData: url.UrlWithParsedQuery = url.parse(`${_request.url}`, true);
|
||||
let myQuery: ParsedUrlQuery = myData.query;
|
||||
let splitThis: string = (<string>_request.url).slice(0 , 5);
|
||||
let myJsonString: string = JSON.stringify(myQuery);
|
||||
|
||||
// Damit ich im Hinterkopf behalte, dass das so funktioniert
|
||||
// console.log("myQuery.vorname: " + myQuery.vorname );
|
||||
// console.log("myQuery.nachname: " + myQuery.nachname);
|
||||
|
||||
if (splitThis == "/html") {
|
||||
_response.setHeader("content-type", "application/json");
|
||||
_response.setHeader("Access-Control-Allow-Origin", "*");
|
||||
}
|
||||
else if (splitThis == "/json") {
|
||||
_response.setHeader("content-type", "text/html");
|
||||
_response.setHeader("Access-Control-Allow-Origin", "*");
|
||||
}
|
||||
|
||||
console.log(myJsonString);
|
||||
_response.write(myJsonString);
|
||||
_response.end();
|
||||
}
|
||||
}
|
||||
|
|
@ -15,6 +15,8 @@ body {
|
|||
<!-- Hier die Links zu den gelösten Aufgaben einstellen, aktuelle oben, alte stehen lassen! Format: Aufgabenbezeichnung, Datum -->
|
||||
<a href="https://github.com/YamiDesu/GIS-SoSe-2020/issues" target="_blank"> Github Reposiroty → Issues <br> </a>
|
||||
|
||||
<a href="https://yamidesu.github.io/GIS-SoSe-2020/Aufgaben/Aufgabe_09_2020-06-24/form.html" target="_blank"> Aufgabe_09_2020-06-24 </a> &
|
||||
<a href="https://github.com/YamiDesu/GIS-SoSe-2020/blob/master/Aufgaben/Aufgabe_08_2020-06-17/test.ts" target="_blank"> Server.ts <br> </a>
|
||||
<a href="https://yamidesu.github.io/GIS-SoSe-2020/Aufgaben/Aufgabe_08_2020-06-17/tutorial.html" target="_blank"> Aufgabe_08_2020-06-17 <br> </a>
|
||||
<a href="https://yamidesu.github.io/GIS-SoSe-2020/Aufgaben/Aufgabe_07_2020-06-10/shop.html" target="_blank"> Aufgabe_07_2020-06-10 <br> </a>
|
||||
<a href="https://yamidesu.github.io/GIS-SoSe-2020/Aufgaben/Aufgabe_06_2020-06-03/shop.html" target="_blank"> Aufgabe_06_2020-06-03 <br> </a>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
|
|
@ -3,10 +3,12 @@
|
|||
"version": "1.0.0",
|
||||
"description": "Diese Datei soll mir helfen, mit Heruko arbeiten zu können.",
|
||||
"main": "index.js",
|
||||
"dependencies": {},
|
||||
"dependencies": {
|
||||
"@types/node": "^14.0.13"
|
||||
},
|
||||
"devDependencies": {},
|
||||
"scripts": {
|
||||
"start": "node Aufgaben/Aufgabe_08_2020-06-17/server.js"
|
||||
"start": "node Aufgaben/Aufgabe_09_2020-06-24/server.js"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
|
|
|||
Loading…
Reference in New Issue