From 1d59effdf86caba921655107327fec0d7d7666d9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <andre.kaufmann@students.fhnw.ch> Date: Mon, 26 Apr 2021 15:02:58 +0200 Subject: [PATCH 1/3] added UserController todo's --- .../mvc/controller/UserController.java | 51 ++++++++++++++++++- 1 file changed, 50 insertions(+), 1 deletion(-) diff --git a/src/main/java/ch/bittime/bittime/mvc/controller/UserController.java b/src/main/java/ch/bittime/bittime/mvc/controller/UserController.java index 0f7790a..21dbda7 100644 --- a/src/main/java/ch/bittime/bittime/mvc/controller/UserController.java +++ b/src/main/java/ch/bittime/bittime/mvc/controller/UserController.java @@ -1,8 +1,57 @@ package ch.bittime.bittime.mvc.controller; +import ch.bittime.bittime.login.UserService; +import ch.bittime.bittime.login.repository.UserRepo; +import org.springframework.beans.factory.annotation.Autowired; + /** * @author Andre */ + public class UserController { - //Abc + @Autowired + private UserService userService; + @Autowired + private UserRepo userRepo; + + //// @RequestMapping(value = "admin/deleteUser", method = RequestMethod.DELETE) + //// public String deleteUser(Model model){ + //// List<User> listUser =userRepo.finb + //// } + // + // + // @GetMapping("/admin/userPanel") + // public String listUser(Model model){ + // List<User> listUser = userRepo.findAll(); + // model.addAttribute("listUser", listUser); + // System.out.println(listUser); + // + // Authentication auth = SecurityContextHolder.getContext().getAuthentication(); + // User user = userService.findUserByUserName(auth.getName()); + // model.addAttribute("userName", "Welcome " + user.getUserName() + "/" + user.getName() + " " + user.getLastName() + " (" + user.getEmail() + ")"); + // + // return "/admin/userPanel"; + // + // } + // + // @GetMapping("/admin/timeRecording") + // public String timeRecording(){ + // return "/admin/timeRecording"; + // } + // + // @GetMapping("/admin/reportingView") + // public String reportingView(){ + // return "/admin/reportingView"; + // } + // + // @GetMapping("/admin/vacationManagement") + // public String vacationManagement(){ + // return "/admin/vacationManagement"; + // } + // + // @GetMapping("/admin/profileView") + // public String profileView(){ + // return "/admin/profileView"; + // } + } -- GitLab From e27a82d36d4a3b28eff518f7bcaef8fc5dc9c2f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <andre.kaufmann@students.fhnw.ch> Date: Mon, 26 Apr 2021 15:06:47 +0200 Subject: [PATCH 2/3] added UserController todo's --- .../java/ch/bittime/bittime/mvc/controller/UserController.java | 1 + 1 file changed, 1 insertion(+) diff --git a/src/main/java/ch/bittime/bittime/mvc/controller/UserController.java b/src/main/java/ch/bittime/bittime/mvc/controller/UserController.java index 21dbda7..6e00b65 100644 --- a/src/main/java/ch/bittime/bittime/mvc/controller/UserController.java +++ b/src/main/java/ch/bittime/bittime/mvc/controller/UserController.java @@ -9,6 +9,7 @@ import org.springframework.beans.factory.annotation.Autowired; */ public class UserController { + @Autowired private UserService userService; @Autowired -- GitLab From 99492e1c103986d3104ab84f2917e6c96a199f8b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <andre.kaufmann@students.fhnw.ch> Date: Mon, 26 Apr 2021 16:37:00 +0200 Subject: [PATCH 3/3] created user views + controller --- .../mvc/controller/UserController.java | 72 +-- src/main/resources/templates/user/home.html | 14 +- .../resources/templates/user/profileView.html | 47 ++ .../templates/user/reportingView.html | 68 +++ .../templates/user/timeRecording.html | 420 ++++++++++++++++++ .../templates/user/vacationView.html | 47 ++ 6 files changed, 616 insertions(+), 52 deletions(-) create mode 100644 src/main/resources/templates/user/profileView.html create mode 100644 src/main/resources/templates/user/reportingView.html create mode 100644 src/main/resources/templates/user/timeRecording.html create mode 100644 src/main/resources/templates/user/vacationView.html diff --git a/src/main/java/ch/bittime/bittime/mvc/controller/UserController.java b/src/main/java/ch/bittime/bittime/mvc/controller/UserController.java index 6e00b65..50fec00 100644 --- a/src/main/java/ch/bittime/bittime/mvc/controller/UserController.java +++ b/src/main/java/ch/bittime/bittime/mvc/controller/UserController.java @@ -1,58 +1,32 @@ package ch.bittime.bittime.mvc.controller; -import ch.bittime.bittime.login.UserService; -import ch.bittime.bittime.login.repository.UserRepo; -import org.springframework.beans.factory.annotation.Autowired; +import org.springframework.stereotype.Controller; +import org.springframework.web.bind.annotation.GetMapping; /** * @author Andre */ +@Controller public class UserController { - @Autowired - private UserService userService; - @Autowired - private UserRepo userRepo; - - //// @RequestMapping(value = "admin/deleteUser", method = RequestMethod.DELETE) - //// public String deleteUser(Model model){ - //// List<User> listUser =userRepo.finb - //// } - // - // - // @GetMapping("/admin/userPanel") - // public String listUser(Model model){ - // List<User> listUser = userRepo.findAll(); - // model.addAttribute("listUser", listUser); - // System.out.println(listUser); - // - // Authentication auth = SecurityContextHolder.getContext().getAuthentication(); - // User user = userService.findUserByUserName(auth.getName()); - // model.addAttribute("userName", "Welcome " + user.getUserName() + "/" + user.getName() + " " + user.getLastName() + " (" + user.getEmail() + ")"); - // - // return "/admin/userPanel"; - // - // } - // - // @GetMapping("/admin/timeRecording") - // public String timeRecording(){ - // return "/admin/timeRecording"; - // } - // - // @GetMapping("/admin/reportingView") - // public String reportingView(){ - // return "/admin/reportingView"; - // } - // - // @GetMapping("/admin/vacationManagement") - // public String vacationManagement(){ - // return "/admin/vacationManagement"; - // } - // - // @GetMapping("/admin/profileView") - // public String profileView(){ - // return "/admin/profileView"; - // } - -} + @GetMapping("/user/timeRecording") + public String timeRecording(){ + return "/user/timeRecording"; + } + + @GetMapping("/user/vacationView") + public String vacationView(){ return "/user/vacationView"; + } + + @GetMapping("/user/reportingView") + public String reportingView(){ + return "/user/reportingView"; + } + + @GetMapping("/user/profileView") + public String profileView(){ + return "/user/profileView"; + } + +} \ No newline at end of file diff --git a/src/main/resources/templates/user/home.html b/src/main/resources/templates/user/home.html index f322ad7..e268188 100644 --- a/src/main/resources/templates/user/home.html +++ b/src/main/resources/templates/user/home.html @@ -4,10 +4,11 @@ <head> <title>BitTime User Panel</title> - <link rel="stylesheet" type="text/css" th:href="@{/css/home.css}"/> + <link rel="stylesheet" type="text/css" th:href="@{/css/styles.css}"/> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> + <meta name="author" content="Andre"> </head> <body> @@ -24,14 +25,21 @@ <div class="panel-heading"> <span th:utext="${userName}"></span> </div> + <div class="panel-body"> + <div class="topnav"> + <a class="active" href="#home">Home</a> + <a th:href="@{/user/timeRecording}">Time Recording</a> + <a th:href="@{/user/vacationView}">Schedule Vacation</a> + <a th:href="@{/user/reportingView}">Reporting</a> + <a th:href="@{/user/profileView}">Profile</a> + </div> + <h2>Welcome</h2> <img th:src="@{/images/Logotsp.png}" class="img-responsive center-block" width="400" height="400" alt="Logo"/> </div> - <p class="admin-message-text text-center" th:utext="${userMessage}"></p> </div> </div> - </div> </body> </html> \ No newline at end of file diff --git a/src/main/resources/templates/user/profileView.html b/src/main/resources/templates/user/profileView.html new file mode 100644 index 0000000..73df629 --- /dev/null +++ b/src/main/resources/templates/user/profileView.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:th="http://www.thymeleaf.org"> + + +<head> + <title>BitTime Admin Panel</title> + <link rel="stylesheet" type="text/css" th:href="@{/css/styles.css}"/> + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> + <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> + <meta name="author" content="Andre"> +</head> + +<body> +<div class="container"> + + <form th:action="@{/logout}" method="get"> + <button class="btn btn-md btn-danger btn-block" name="registration" + type="Submit">Logout + </button> + </form> + + <div class="panel-group" style="margin-top:40px"> + <div class="panel panel-primary"> + <div class="panel-heading"> + <span th:utext="${userName}"></span> + </div> + <div class="panel-body"> + <div class="topnav"> + <a th:href="@{/user/home}">Home</a> + <a th:href="@{/user/timeRecording}">Time Recording</a> + <a th:href="@{/user/vacationView}">Schedule Vacation</a> + <a th:href="@{/user/reportingView}">Reporting</a> + <a class="active" th:href="@{/user/profileView}">Profile</a> + </div> + </div> + + <p>TODO</p> + <p>user profile [edit buttons]</p> + + </div> + </div> + +</div> +</body> +</html> \ No newline at end of file diff --git a/src/main/resources/templates/user/reportingView.html b/src/main/resources/templates/user/reportingView.html new file mode 100644 index 0000000..9a225de --- /dev/null +++ b/src/main/resources/templates/user/reportingView.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:th="http://www.thymeleaf.org"> + + +<head> + <title>BitTime Admin Panel</title> + <link rel="stylesheet" type="text/css" th:href="@{/css/styles.css}"/> + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> + <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> + <meta name="author" content="Andre"> + <style> + .button { + border: none; + color: white; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + margin: 4px 2px; + cursor: pointer; + } + + .button1 {background-color: #4CAF50;} /* Green */ + .button2 {background-color: #008CBA;} /* Blue */ + </style> + +</head> + +<body> +<div class="container"> + + <form th:action="@{/logout}" method="get"> + <button class="btn btn-md btn-danger btn-block" name="registration" + type="Submit">Logout + </button> + </form> + + <div class="panel-group" style="margin-top:40px"> + <div class="panel panel-primary"> + <div class="panel-heading"> + <span th:utext="${userName}"></span> + </div> + + <div class="panel-body"> + <div class="topnav"> + <a th:href="@{/user/home}">Home</a> + <a th:href="@{/user/timeRecording}">Time Recording</a> + <a th:href="@{/user/vacationView}">Schedule Vacation</a> + <a class="active" th:href="@{/user/reportingView}">Reporting</a> + <a th:href="@{/user/profileView}">Profile</a> + </div> + </div> + + <p>TODO</p> + <p>Get Report? ;^)</p> + <!-- button todo: <a th:href="@{/admin/...report?}"><button>Um Report zu generieren Klick!</button></a>--> + <button class="button button1">Yes daddy</button> + <button class="button button2">No mami</button> + + </div> + </div> + +</div> +</body> +</html> \ No newline at end of file diff --git a/src/main/resources/templates/user/timeRecording.html b/src/main/resources/templates/user/timeRecording.html new file mode 100644 index 0000000..71d037d --- /dev/null +++ b/src/main/resources/templates/user/timeRecording.html @@ -0,0 +1,420 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:th="http://www.thymeleaf.org"> + + +<head> + <title>BitTime Admin Panel</title> + <link rel="stylesheet" type="text/css" th:href="@{/css/styles.css}"/> + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> + <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> + <meta name="author" content="Andre"> +</head> + +<body> +<div class="container"> + + <form th:action="@{/logout}" method="get"> + <button class="btn btn-md btn-danger btn-block" name="registration" + type="Submit">Logout + </button> + </form> + + <div class="panel-group" style="margin-top:40px"> + <div class="panel panel-primary"> + <div class="panel-heading"> + <span th:utext="${userName}"></span> + </div> + <div class="panel-body"> + <div class="topnav"> + <a th:href="@{/user/home}">Home</a> + <a class="active" th:href="@{/user/timeRecording}">Time Recording</a> + <a th:href="@{/user/vacationView}">Schedule Vacation</a> + <a th:href="@{/user/reportingView}">Reporting</a> + <a th:href="@{/user/profileView}">Profile</a> + </div> + </div> + + <p>TODO</p> + <script> + var app = { + settings: { + container: $('.calendar'), + calendar: $('.front'), + days: $('.weeks span'), + form: $('.back'), + input: $('.back input'), + buttons: $('.back button') + }, + + init: function() { + instance = this; + settings = this.settings; + this.bindUIActions(); + }, + + swap: function(currentSide, desiredSide) { + settings.container.toggleClass('flip'); + + currentSide.fadeOut(900); + currentSide.hide(); + + desiredSide.show(); + }, + + bindUIActions: function() { + settings.days.on('click', function(){ + instance.swap(settings.calendar, settings.form); + settings.input.focus(); + }); + + settings.buttons.on('click', function(){ + instance.swap(settings.form, settings.calendar); + }); + } + } + + app.init(); + </script> + + <!-- inspired by http://colorhunt.co/c/8184 and + https://dribbble.com/shots/2407357-Calendar%60 --> + <style> + * { + box-sizing: border-box; + font-family: 'Roboto', sans-serif; + list-style: none; + margin: 0; + outline: none; + padding: 0; + } + + a { + text-decoration: none; + } + + body, html { + height: 100%; + } + + body { + background: #dfebed; + font-family: 'Roboto', sans-serif; + } + + .container { + align-items: center; + display: flex; + height: 100%; + justify-content: center; + margin: 0 auto; + max-width: 600px; + width: 100%; + } + + .calendar { + background: #2b4450; + border-radius: 4px; + box-shadow: 0 5px 20px rgba(0, 0, 0, .3); + height: 501px; + perspective: 1000; + transition: .9s; + transform-style: preserve-3d; + width: 100%; + } + + /* Front - Calendar */ + .front { + transform: rotateY(0deg); + } + + .current-date { + border-bottom: 1px solid rgba(73, 114, 133, .6); + display: flex; + justify-content: space-between; + padding: 30px 40px; + } + + .current-date h1 { + color: #dfebed; + font-size: 1.4em; + font-weight: 300; + } + + .week-days { + color: #dfebed; + display: flex; + justify-content: space-between; + font-weight: 600; + padding: 30px 40px; + } + + .days { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + } + + .weeks { + color: #fff; + display: flex; + flex-direction: column; + padding: 0 40px; + } + + .weeks div { + display: flex; + font-size: 1.2em; + font-weight: 300; + justify-content: space-between; + margin-bottom: 20px; + width: 100%; + } + + .last-month { + opacity: .3; + } + + .weeks span { + padding: 10px; + } + + .weeks span.active { + background: #f78536; + border-radius: 50%; + } + + .weeks span:not(.last-month):hover { + cursor: pointer; + font-weight: 600; + } + + .event { + position: relative; + } + + .event:after { + content: '•'; + color: #f78536; + font-size: 1.4em; + position: absolute; + right: -4px; + top: -4px; + } + + /* Back - Event form */ + + .back { + height: 100%; + transform: rotateY(180deg); + } + + .back input { + background: none; + border: none; + border-bottom: 1px solid rgba(73, 114, 133, .6); + color: #dfebed; + font-size: 1.4em; + font-weight: 300; + padding: 30px 40px; + width: 100%; + } + + .info { + color: #dfebed; + display: flex; + flex-direction: column; + font-weight: 600; + font-size: 1.2em; + padding: 30px 40px; + } + + .info div:not(.observations) { + margin-bottom: 40px; + } + + .info span { + font-weight: 300; + } + + .info .date { + display: flex; + justify-content: space-between; + } + + .info .date p { + width: 50%; + } + + .info .address p { + width: 100%; + } + + .actions { + bottom: 0; + border-top: 1px solid rgba(73, 114, 133, .6); + display: flex; + justify-content: space-between; + position: absolute; + width: 100%; + } + + .actions button { + background: none; + border: 0; + color: #fff; + font-weight: 600; + letter-spacing: 3px; + margin: 0; + padding: 30px 0; + text-transform: uppercase; + width: 50%; + } + + .actions button:first-of-type { + border-right: 1px solid rgba(73, 114, 133, .6); + } + + .actions button:hover { + background: #497285; + cursor: pointer; + } + + .actions button:active { + background: #5889a0; + outline: none; + } + + /* Flip animation */ + + .flip { + transform: rotateY(180deg); + } + + .front, .back { + backface-visibility: hidden; + } + </style> + <p></p> + <p>Choose date in calendar</p> + <div class="container"> + <div class="calendar"> + <div class="front"> + <div class="current-date"> + <h1>Friday 15th</h1> + <h1>January 2016</h1> + </div> + + <div class="current-month"> + <ul class="week-days"> + <li>MON</li> + <li>TUE</li> + <li>WED</li> + <li>THU</li> + <li>FRI</li> + <li>SAT</li> + <li>SUN</li> + </ul> + + <div class="weeks"> + <div class="first"> + <span class="last-month">28</span> + <span class="last-month">29</span> + <span class="last-month">30</span> + <span class="last-month">31</span> + <span>01</span> + <span>02</span> + <span>03</span> + </div> + + <div class="second"> + <span>04</span> + <span>05</span> + <span class="event">06</span> + <span>07</span> + <span>08</span> + <span>09</span> + <span>10</span> + </div> + + <div class="third"> + <span>11</span> + <span>12</span> + <span>13</span> + <span>14</span> + <span class="active">15</span> + <span>16</span> + <span>17</span> + </div> + + <div class="fourth"> + <span>18</span> + <span>19</span> + <span>20</span> + <span>21</span> + <span>22</span> + <span>23</span> + <span>24</span> + </div> + + <div class="fifth"> + <span>25</span> + <span>26</span> + <span>27</span> + <span>28</span> + <span>29</span> + <span>30</span> + <span>31</span> + </div> + </div> + </div> + </div> + + <div class="back"> + <input placeholder="What's the event?"> + <div class="info"> + <div class="date"> + <p class="info-date"> + Date: <span>Jan 15th, 2016</span> + </p> + <p class="info-time"> + Time: <span>6:35 PM</span> + </p> + </div> + <div class="address"> + <p> + Address: <span>129 W 81st St, New York, NY</span> + </p> + </div> + <div class="observations"> + <p> + Observations: <span>Be there 15 minutes earlier</span> + </p> + </div> + </div> + + <div class="actions"> + <button class="save"> + Save <i class="ion-checkmark"></i> + </button> + <button class="dismiss"> + Dismiss <i class="ion-android-close"></i> + </button> + </div> + </div> + + </div> + </div> + + + </div> + + </div> +</div> + +</div> + + +</body> +</html> \ No newline at end of file diff --git a/src/main/resources/templates/user/vacationView.html b/src/main/resources/templates/user/vacationView.html new file mode 100644 index 0000000..1fb4777 --- /dev/null +++ b/src/main/resources/templates/user/vacationView.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:th="http://www.thymeleaf.org"> + + +<head> + <title>BitTime Admin Panel</title> + <link rel="stylesheet" type="text/css" th:href="@{/css/styles.css}"/> + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> + <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> + <meta name="author" content="Andre"> +</head> + +<body> +<div class="container"> + + <form th:action="@{/logout}" method="get"> + <button class="btn btn-md btn-danger btn-block" name="registration" + type="Submit">Logout + </button> + </form> + + <div class="panel-group" style="margin-top:40px"> + <div class="panel panel-primary"> + <div class="panel-heading"> + <span th:utext="${userName}"></span> + </div> + <div class="panel-body"> + <div class="topnav"> + <a th:href="@{/user/home}">Home</a> + <a th:href="@{/user/timeRecording}">Time Recording</a> + <a class="active" th:href="@{/user/vacationView}">Schedule Vacation</a> + <a th:href="@{/user/reportingView}">Reporting</a> + <a th:href="@{/user/profileView}">Profile</a> + </div> + </div> + + <p>TODO</p> + <p>enter Vacation date:</p> + + </div> + </div> + +</div> +</body> +</html> \ No newline at end of file -- GitLab