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