build frontend

src/main/java/de/kebidge/middleware/frontend/MyRestController.java

+package de.kebidge.middleware.frontend;
+
+import com.fasterxml.jackson.databind.JsonNode;
+
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.reactive.function.client.WebClient;
+
+@RestController
+@RequestMapping("rest")
+public class MyRestController {
+
+    @GetMapping("/getItemAsJSON") 
+    public String simpleCallJSON(){
+
+        return WebClient
+            .create("http://localhost:8181/shoppingItem/")
+            .get()
+            .retrieve()
+            .bodyToMono(JsonNode.class)
+            .block()
+            .toString();
+    }
+    
+}
\ No newline at end of file

src/main/java/de/kebidge/middleware/frontend/ShoppingItem.java

+package de.kebidge.middleware.frontend;
+
+import java.io.Serializable;
+
+public class ShoppingItem implements Serializable  {
+
+    public long id;
+    public String item;
+    public int amount;
+    
+}
\ No newline at end of file

src/main/java/de/kebidge/middleware/frontend/ThymeleafController.java

+package de.kebidge.middleware.frontend;
+
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.reactive.function.client.WebClient;
+
+import reactor.core.publisher.Mono;
+
+@Controller
+public class ThymeleafController {
+
+    @Value("${welcome.user}")
+    private String user;
+
+    @Value("${shoppingitem.endpoint}")
+    private String shoppingItemEndpoint;
+
+    @GetMapping("/")
+    public String displayPage(Model model) {
+
+        ShoppingItem[] items = WebClient
+            .create(shoppingItemEndpoint)
+            .get()
+            .retrieve()
+            .bodyToMono(ShoppingItem[].class)
+            .block();
+
+        model.addAttribute("user", user);
+        model.addAttribute("items", items);
+        return "page";
+    }
+
+    @PostMapping("/")
+    public String addItem(@RequestParam String newitem, @RequestParam int amount, Model model) {
+
+        ShoppingItem item = new ShoppingItem();
+        item.item = newitem;
+        item.amount = amount;
+
+        WebClient
+            .create(shoppingItemEndpoint + "add")
+            .post()
+            .body(Mono.just(item), ShoppingItem.class)
+            .retrieve()
+            .bodyToMono(ShoppingItem.class)
+            .block();
+
+        return "redirect:/";
+    }
+
+    @PostMapping("/delete")
+    public String deleteItem(@RequestParam String item, Model model) {
+
+        WebClient
+            .create(shoppingItemEndpoint + "del-item/" + item)
+            .delete()
+            .retrieve()
+            .bodyToMono(Void.class)      // dont expect a response
+            .block();
+
+        return "redirect:/";
+    }
+
+    @PostMapping("/delete-all")
+    public String deleteItemById(@RequestParam Long id, Model model) {
+
+        WebClient
+            .create(shoppingItemEndpoint + "del-id/" + id)
+            .delete()
+            .retrieve()
+            .bodyToMono(Void.class)      // dont expect a response
+            .block();
+
+        return "redirect:/";
+    }
+
+    @PostMapping("/delete-list")
+    public String deleteItemList(Model model) {
+
+        WebClient
+            .create(shoppingItemEndpoint + "del-all")
+            .delete()
+            .retrieve()
+            .bodyToMono(Void.class)      // dont expect a response
+            .block();
+
+        return "redirect:/";
+    }
+    
+}
\ No newline at end of file

src/main/resources/META-INF/additional-spring-configuration-metadata.json

+{"properties": [
+  {
+    "name": "welcome.user",
+    "type": "java.lang.String",
+    "description": "ShoppingApp User"
+  },
+  {
+    "name": "shoppingitem.endpoint",
+    "type": "java.lang.String",
+    "description": "Shopping Item REST Endpoint"
+  }
+]}
\ No newline at end of file

src/main/resources/application.properties

+server.port=8282
 
+welcome.user=Kebidge
+shoppingitem.endpoint=http://localhost:8181/shoppingItem/
\ No newline at end of file

src/main/resources/static/style.css

+body {
+    margin: 0;
+    padding: 0;
+    font-family: Avenir, Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    background-color: #27292d;
+    color: #fff;
+  }
+  body  {
+    max-width: 600px;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 50px;
+  }
+  table {
+    text-align: center;
+  }
+  th {
+    width: 200px;
+  }
+  body  h1 {
+    font-weight: 700;
+    font-size: 28px;
+    text-align: center;
+  }
+  body  form {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+  body  form label {
+    font-size: 14px;
+    font-weight: 700;
+  }
+  body  form button,
+  body  form input {
+    height: 36px;
+    box-shadow:hsla(0, 0%, 100%, 0.35);
+    outline: none;
+    padding-left: 12px;
+    padding-right: 12px;
+    border-radius: 6px;
+    font-size: 18px;
+    margin-top: 6px;
+    margin-bottom: 12px;
+  }
+  body  form input {
+    background-color: transparent;
+    border: 2px solid hsla(0, 0%, 100%, 0.35);
+    color: inherit;
+  }
+  body  button {
+    cursor: pointer;
+    background-color: #a0a4d9;
+    border: 1px solid #a0a4d9;
+    color: #1f2023;
+    font-weight: 700;
+    outline: none;
+    border-radius: 6px;
+    width: 100px;
+  }
+  body  h2 {
+    font-size: 22px;
+    border-bottom: 2px solid hsla(0, 0%, 100%, 0.35);
+    padding-bottom: 6px;
+  }
\ No newline at end of file

src/main/resources/templates/page.html

+<!DOCTYPE HTML>
+
+<html xmlns:th="http://www.thymeleaf.org">
+    <head>
+        <title>ShoppingApp</title>
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    </head>
+
+    <link rel="stylesheet" href="style.css"/>
+
+    <body>
+
+        <div>
+            <h1>Shopping List</h1>
+            <h3>
+                <span th:text="'Welcome ' + ${user} + '!'"></span>
+            </h3>
+            <form method="POST" th:action="@{/}">
+                <label for="newitem">New Shopping Item</label>
+                <input type="text" name="newitem" th:value="${newitem}" />
+                <label for="amount">Amount</label>
+                <input type="text" name="amount" th:value="${amount}" />
+                <input type="submit" value="Add">
+            </form>
+        </div>
+
+        <div th:unless="${#lists.isEmpty(items)}">    
+            <table>
+                <tr>
+                    <th>ID</th>
+                    <th>Name</th>
+                    <th>Amount</th>
+                    <th>Delete</th>
+                    <th>Delete All</th>
+                </tr>
+                <tr th:each="item : ${items}">
+                    <td th:text="${item.id}"/>
+                    <td th:text="${item.item}"/>
+                    <td th:text="${item.amount}"/>
+                    <td>
+                        <form method="POST" th:action="@{/delete/}">
+                            <input type="hidden" name="item" th:value="${item.item}" />
+                            <input type="submit" value="Delete"/>
+                        </form>
+                    </td>
+                    <td>
+                        <form method="POST" th:action="@{/delete-all/}">
+                            <input type="hidden" name="id" th:value="${item.id}" />
+                            <input type="submit" value="Delete All"/>
+                        </form>
+                    </td>
+                </tr>
+            </table>
+        </div>
+
+        <div th:if="${#lists.isEmpty(items)}">
+            <p>Your list is empty! Add items to your shopping list...</p>
+        </div>
+
+        <div>
+            <form method="POST" th:action="@{/delete-list}">
+                <input type="submit" value="Delete List">
+            </form>
+        </div>
+
+    </body>
+</html>
\ No newline at end of file