diff --git a/.idea/dataSources.xml b/.idea/dataSources.xml new file mode 100644 index 0000000000000000000000000000000000000000..ca4676a83301640c4ca9675db3ab7ba3734483b2 --- /dev/null +++ b/.idea/dataSources.xml @@ -0,0 +1,12 @@ +<?xml version="1.0" encoding="UTF-8"?> +<project version="4"> + <component name="DataSourceManagerImpl" format="xml" multifile-model="true"> + <data-source source="LOCAL" name="dev" uuid="dd5ce02c-a064-4b65-9135-1124ad6950da"> + <driver-ref>sqlite.xerial</driver-ref> + <synchronize>true</synchronize> + <jdbc-driver>org.sqlite.JDBC</jdbc-driver> + <jdbc-url>jdbc:sqlite:C:\Users\Robin\Desktop\Lexicon\tierlexikon-api-main\prisma\dev.db</jdbc-url> + <working-dir>$ProjectFileDir$</working-dir> + </data-source> + </component> +</project> \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000000000000000000000000000000000000..35eb1ddfbbc029bcab630581847471d7f238ec53 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ +<?xml version="1.0" encoding="UTF-8"?> +<project version="4"> + <component name="VcsDirectoryMappings"> + <mapping directory="" vcs="Git" /> + </component> +</project> \ No newline at end of file diff --git a/Dockerfile b/Dockerfile index 9533a9e612780bcbef472b5cedce937df7dbea02..d4362a7d8d39c2071796f30b6ca5d7950c46e7ea 100644 --- a/Dockerfile +++ b/Dockerfile @@ -11,6 +11,6 @@ COPY . . RUN npx prisma generate -CMD node index.js +CMD node index_front.js EXPOSE 28785 diff --git a/index.html b/index.html index 6a0d57a83fb45a419a84e3e9a3dc4a03355f4ecd..7137abdae138eba6f4ca591d633785a90f95031b 100644 --- a/index.html +++ b/index.html @@ -10,9 +10,8 @@ <body style="background-color: #0a2d0f"> <div class="headline"> <h1>Das grosse Tierlexikon</h1> - <p>Semsterprojekt VS 2022</p> + <p>Semesterprojekt VS 2022</p> </div> - <form id="create" class="create"> <div class="createleft"> <div class="name">NAME</div> <div class="id"> @@ -25,6 +24,10 @@ <div class="size"> <textarea required type="text" rows="1" cols="50" id="size" input="text"></textarea> </div> + <div class="feed">FUTTER</div> + <div class="weight"> + <textarea required type="text" rows="1" cols="50" id="feed" input="text"></textarea> + </div> <div class="weight_min">GEWICHT MIN</div> <div class="weight"> <textarea required type="text" rows="1" cols="50" id="weight_min" input="text"></textarea> @@ -37,75 +40,23 @@ <div class="class"> <textarea required type="text" rows="1" cols="50" id="class" input="text"></textarea> </div> - <div class="age">ALTER</div> - <div class="age"> - <textarea required type="text" rows="1" cols="50" id="age" input="text"></textarea> - </div> <div class="origin">HERKUNFT</div> <div class="origin"> <textarea required type="text" rows="1" cols="50" id="origin" input="text"></textarea> </div> - - - </div> - - <div class="createright"> - <div class="description">BESCHREIBUNG</div> - <div class="description"> - <textarea required type="text" rows="10" cols="50" id="desc2" input="text"></textarea> - </div> <div class="erstellenknopf"> - <button value="create" type="submit" id="erstellen">Tier Hinzufügen</button> - </div> - <div class="editknopf"> - <button value="edit" type="submit" id="edit">Tier Editieren</button> + <button value="create" id="erstellen">Tier Hinzufügen</button> </div> - </div> - </form> + </div> <div class="read"> - <div class="products">Lexikon Einträge</div> + <div id="container"> <table id="table"> - <caption>Tierarten</caption> - <tr> - <th scope="col">Tiere</th> - <th scope="col">Name</th> - <th scope="col">Größe</th> - <th scope="col">Gewicht</th> - <th scope="col">Klasse</th> - <th scope="col">Alter</th> - <th scope="col">Herkunft</th> - </tr> - <tr> - <th scope="row">Pinguin</th> - <td>Adéliepinguin</td> - <td>70 cm</td> - <td>4-5 kg</td> - <td>Vögel</td> - <td>5 Jahre</td> - <td>Antarktis</td> - </tr> - <tr> - <th scope="row">Wal</th> - <td>Belugawal</td> - <td>3-6 m</td> - <td>1500 kg</td> - <td>Säugetiere</td> - <td>50 Jahre</td> - <td>Alaska, Kanada</td> - </tr> - <tr> - <th scope="row">Hund</th> - <td>Dalmatiner</td> - <td>60 cm</td> - <td>30 kg</td> - <td>Säugetiere</td> - <td>10-13 Jahre</td> - <td>Kroatien</td> - </tr> + + </table> </div> @@ -118,6 +69,6 @@ - <script src="src/index.js"></script> + <script src="src/index_front.js"></script> </body> </html> diff --git a/index.js b/index.js index e39f0504d96b529d3110aa76efc2dffc0e888a37..bb0d6b669e5a8b9c58f918d1118ea6527a8559d8 100644 --- a/index.js +++ b/index.js @@ -27,6 +27,7 @@ app.post('/api/v1/animals', async (req, res) => { weight_max: data.weight_max, feed: data.feed, size: data.size + } }); diff --git a/src/index.js b/src/index.js deleted file mode 100644 index 9c2fc202ab7272793435ca092798018a8f6a0c6d..0000000000000000000000000000000000000000 --- a/src/index.js +++ /dev/null @@ -1,51 +0,0 @@ -const API_BASE = 'http://localhost:28785/api/v1/animals'; - -function fill(animals){ - document.getElementById("ID").value=element.name; - document.getElementById("name").value=element.class; - document.getElementById("origin").value=element.origin; - document.getElementById("weight_min").value=element.weight_min; - document.getElementById("weight_max").value=element.weight_max; - document.getElementById("feed").value=element.feed; - document.getElementById("size").value=element.size; - -} - -function getID(){ - return document.getElementById("id").value; -} - -function getData(){ - let data = JSON.stringify({ - name: document.getElementById("name").value, - origin: document.getElementById("origin").value, - weight_min: document.getElementById("weight_min").value, - weight_max: document.getElementById("weight_max").value, - feed: document.getElementById("feed").value, - size: document.getElementById("size").value - }) - - return data; -} - -async function getAllItems() { - fetch(API_BASE) - .then((response) => { - return response.json(); - }) - .then((text) => { - console.log(text); - }) - - - - - - -window.onload = () => { - getAllItems(); -}} - - - - diff --git a/src/index_front.js b/src/index_front.js new file mode 100644 index 0000000000000000000000000000000000000000..c2d323a55eb60e9fc161781283764f05b2178f8e --- /dev/null +++ b/src/index_front.js @@ -0,0 +1,116 @@ +const API_BASE = 'http://localhost:28785/api/v1/animals'; + +function fill(element){ + document.getElementById("ID").value=element.name; + document.getElementById("name").value=element.class; + document.getElementById("origin").value=element.origin; + document.getElementById("weight_min").value=element.weight_min; + document.getElementById("weight_max").value=element.weight_max; + document.getElementById("feed").value=element.feed; + document.getElementById("size").value=element.size; + +} + +function getID(){ + return document.getElementById("id").value; +} + +function getData(){ + let data = JSON.stringify({ + name: document.getElementById("name").value, + class: document.getElementById("class").value, + origin: document.getElementById("origin").value, + weight_min: parseInt(document.getElementById("weight_min").value), + weight_max: parseInt(document.getElementById("weight_max").value), + feed: document.getElementById("feed").value, + size: parseFloat(document.getElementById("size").value) + + }) + + return data; +} + + +async function addItem(item) { + const headers = new Headers(); + headers.append("Content-Type", "application/json"); + const body = item; + const init = { + method: "put", + headers, + body, + }; + console.log(body); + fetch(API_BASE, init) + .then(function (response){ + console.log(response) + getAllItems(); + return response.json(); + + //return Promise.reject(response); + }).then(() =>{ + } + ).catch((e) => { + console.warn("Something went wrong", e); + }); +} + + +async function getAllItems() { + fetch(API_BASE) + .then((response) => { + return response.json(); + }) + .then((text) => { + console.log(text); + text=text.animals + + + function addHeaders(table, keys) { + const row = table.insertRow(); + for (let i = 0; i < keys.length; i++) { + const cell = row.insertCell(); + cell.appendChild(document.createTextNode(keys[i])); + } + } + + const table = document.createElement("table"); + for (let i = 0; i < text.length; i++) { + const child = text[i]; + if (i == 0) { + addHeaders(table, Object.keys(child)); + } + const row = table.insertRow(); + Object.keys(child).forEach(function (k) { + const cell = row.insertCell(); + cell.appendChild(document.createTextNode(child[k])); + + }) + } + document.getElementById("container").appendChild(table); + + }) + .catch((e) => { + console.log(e); + }); +} + + + +window.onload = () => { + getAllItems(); +} + + +document.getElementById("erstellen").addEventListener("click", async function (e) { + const data = getData() + await fetch(API_BASE, { + headers: { + "Accept": "application/json", + "Content-Type": "application/json" + }, + method: "POST", + body: data + }); + +}) \ No newline at end of file diff --git a/src/style.css b/src/style.css index 0fc1ecf2975f8adc565a55e9d3d33d8d6cb72806..1488d3f9789291dc77b6fc85ce410f93d69ff9a2 100644 --- a/src/style.css +++ b/src/style.css @@ -50,7 +50,22 @@ p{ .products{ color:white; } -#table{ +.weight_min { + color:white; +} + +.weight_max { + color:white; +} +.feed { + color:white; +} + +.container { + color:white; +} + +.table{ color:white; } @@ -140,6 +155,7 @@ button:hover { text-align: center; margin-top: 1%; } + #erstellen { width: 200px; height: 50px; @@ -157,14 +173,7 @@ button:hover { background: linear-gradient(to top right, #fde374, #fde374); } -.editknopf { - font-family: "Century Gothic", CenturyGothic, Geneva, AppleGothic, sans-serif; - height: max-content; - width: 100%; - float: left; - text-align: center; - margin-top: 1%; -} + #edit { width: 200px; height: 50px;