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;