hft-informatik/ubiquitous-computing-geo-timetracking
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Cleanup frontend code

Browse Source
This commit is contained in:
Tim Zieger 2020-06-03 16:32:36 +02:00
parent b0759a64b7
commit 6a42650c40
11 changed files with 38 additions and 328 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/App.vue
View File

@ -93,14 +93,6 @@
<v-divider></v-divider> <v-divider></v-divider>
<v-list>
<v-list-item>
<v-list-item-action>
<v-switch color="primary" :input-value="login" @change="login= !login"></v-switch>
</v-list-item-action>
<v-list-item-title>View as Guest</v-list-item-title>
</v-list-item>
</v-list>
<v-card-actions> <v-card-actions>
<v-spacer></v-spacer> <v-spacer></v-spacer>
@ -163,7 +155,6 @@ export default {
}, },
data: () => ({ data: () => ({
drawer: null, drawer: null,
login: true,
dialog: false, dialog: false,
menu: false, menu: false,
loggedIn: sessionStorage.getItem("loggedin"), loggedIn: sessionStorage.getItem("loggedin"),

32
frontend/src/router/index.js
View File

@ -1,13 +1,9 @@
import Vue from "vue"; import Vue from "vue";
import VueRouter from "vue-router"; import VueRouter from "vue-router";
import Home from "../views/Home.vue"; import Home from "../views/Home.vue";
import Profile from "../views/profile.vue";
import missing from "../views/missing.vue"; import missing from "../views/missing.vue";
import Info from "../views/Info.vue";
import TimeRecords from "../views/TimeRecords.vue"; import TimeRecords from "../views/TimeRecords.vue";
import About from "../views/About.vue"; import About from "../views/About.vue";
import Login from "../views/Login.vue";
import Register from "../views/Register.vue";
import StatisticOverview from "../views/StatisticOverview.vue"; import StatisticOverview from "../views/StatisticOverview.vue";
import Users from "../views/Users.vue"; import Users from "../views/Users.vue";
import EditUser from "../views/EditUser.vue"; import EditUser from "../views/EditUser.vue";
@ -29,33 +25,7 @@ const routes = [
name: "TimeRecords", name: "TimeRecords",
component: TimeRecords component: TimeRecords
}, },
{
path: "/login",
name: "Login",
component: Login
},
{
path: "/register",
name: "Register",
component: Register
},
{
path: "/profile/:id",
name: "Profile",
component: Profile,
children: [
{
path: 'info',
name: 'Info',
component: Info
}
]
},
{
path: "/profile",
name: "ProfileMain",
component: Profile
},
{ {
path: "/about", path: "/about",
name: "About", name: "About",

11
frontend/src/views/CreateTimerecord.vue
View File

@ -172,10 +172,7 @@ export default {
accountxhttp.onreadystatechange = function() { accountxhttp.onreadystatechange = function() {
if ((this.status == 200) & (this.readyState == 4)) { if ((this.status == 200) & (this.readyState == 4)) {
//account =
account = JSON.parse(accountxhttp.responseText); account = JSON.parse(accountxhttp.responseText);
account = account._links.self.href; account = account._links.self.href;
} }
}; };
@ -196,12 +193,7 @@ export default {
); );
accountxhttp.send(null); accountxhttp.send(null);
if ( if (this.newstartdate != "" && this.newenddate != "" && this.newdate != "" && account != "") {
this.newstartdate != "" &&
this.newenddate != "" &&
this.newdate != "" &&
account != ""
) {
var xhttp = new XMLHttpRequest(); var xhttp = new XMLHttpRequest();
var suc; var suc;
this.newstartdate = this.newstartdate + "T" + this.timestart; this.newstartdate = this.newstartdate + "T" + this.timestart;
@ -213,7 +205,6 @@ export default {
}; };
xhttp.open("POST", baseUri + "/records", false); xhttp.open("POST", baseUri + "/records", false);
xhttp.setRequestHeader("Content-Type", "application/json"); xhttp.setRequestHeader("Content-Type", "application/json");
xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt")); xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
xhttp.send( xhttp.send(
"{" + "{" +

13
frontend/src/views/EditTimeTrackAccount.vue
View File

@ -51,7 +51,6 @@ export default {
name: "", name: "",
revenue: "", revenue: "",
description: "", description: "",
newname: "", newname: "",
newrevenue: "", newrevenue: "",
newdescription: "", newdescription: "",
@ -90,23 +89,23 @@ export default {
}, },
}, },
created() { created() {
var userxhttp = new XMLHttpRequest(); var accountxhttp = new XMLHttpRequest();
var account; var account;
userxhttp.onreadystatechange = function() { accountxhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) { if (this.readyState == 4 && this.status == 200) {
account = JSON.parse(userxhttp.responseText); account = JSON.parse(accountxhttp.responseText);
} }
}; };
userxhttp.open( accountxhttp.open(
"GET", "GET",
sessionStorage.getItem("timeTrackAccountEditSelfLink"), sessionStorage.getItem("timeTrackAccountEditSelfLink"),
false false
); );
userxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt")); accountxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
userxhttp.send(null); accountxhttp.send(null);
this.name = account.name; this.name = account.name;
this.revenue = account.revenue; this.revenue = account.revenue;
this.description = account.description; this.description = account.description;

19
frontend/src/views/EditTimerecord.vue
View File

@ -146,7 +146,6 @@ export default {
type: "", type: "",
stardate: "", stardate: "",
enddate: "", enddate: "",
newtype: "", newtype: "",
newstartdate: new Date().toISOString().substr(0, 10), newstartdate: new Date().toISOString().substr(0, 10),
newenddate: new Date().toISOString().substr(0, 10) newenddate: new Date().toISOString().substr(0, 10)
@ -156,11 +155,7 @@ export default {
editRecord() { editRecord() {
var link = sessionStorage.getItem("timeRecordEditSelfLink"); var link = sessionStorage.getItem("timeRecordEditSelfLink");
if ( if (this.newname != this.name || this.newstartdate != this.startdate || this.newenddate != this.enddate) {
this.newname != this.name ||
this.newstartdate != this.startdate ||
this.newenddate != this.enddate
) {
this.newstartdate = this.newstartdate + "T" + this.timestart; this.newstartdate = this.newstartdate + "T" + this.timestart;
this.newenddate = this.newenddate + "T" + this.timeend; this.newenddate = this.newenddate + "T" + this.timeend;
var xhttp = new XMLHttpRequest(); var xhttp = new XMLHttpRequest();
@ -191,23 +186,23 @@ export default {
} }
}, },
created() { created() {
var userxhttp = new XMLHttpRequest(); var recordxhttp = new XMLHttpRequest();
var record; var record;
userxhttp.onreadystatechange = function() { recordxhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) { if (this.readyState == 4 && this.status == 200) {
record = JSON.parse(userxhttp.responseText); record = JSON.parse(recordxhttp.responseText);
} }
}; };
userxhttp.open( recordxhttp.open(
"GET", "GET",
sessionStorage.getItem("timeRecordEditSelfLink"), sessionStorage.getItem("timeRecordEditSelfLink"),
false false
); );
userxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt")); recordxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
userxhttp.send(null); recordxhttp.send(null);
this.type = record.type; this.type = record.type;
this.startdate = record.startdate; this.startdate = record.startdate;

16
frontend/src/views/Home.vue
View File

@ -72,7 +72,7 @@
</template> </template>
<script> <script>
// @ is an alias to /src
import { baseUri } from "../variables.js"; import { baseUri } from "../variables.js";
export default { export default {
@ -123,16 +123,16 @@ export default {
} }
this.todaysRecord = today; this.todaysRecord = today;
//Get Accounts
var timeTrackAccountsTMP; var timeTrackAccountsTMP;
var userxhttp = new XMLHttpRequest(); var accountxhttp = new XMLHttpRequest();
userxhttp.onreadystatechange = function() { accountxhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) { if (this.readyState == 4 && this.status == 200) {
timeTrackAccountsTMP = JSON.parse(userxhttp.responseText); timeTrackAccountsTMP = JSON.parse(accountxhttp.responseText);
timeTrackAccountsTMP = timeTrackAccountsTMP._embedded.accounts; timeTrackAccountsTMP = timeTrackAccountsTMP._embedded.accounts;
} }
}; };
userxhttp.open( accountxhttp.open(
"GET", "GET",
baseUri + baseUri +
"/accounts/search/findByUsername?username=" + "/accounts/search/findByUsername?username=" +
@ -140,9 +140,9 @@ export default {
false false
); );
userxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt")); accountxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
userxhttp.send(null); accountxhttp.send(null);
this.timeTrackAccounts = timeTrackAccountsTMP; this.timeTrackAccounts = timeTrackAccountsTMP;

17
frontend/src/views/Info.vue
View File

@ -1,17 +0,0 @@
<template>
<div>
<h3>info</h3>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>

81
frontend/src/views/Login.vue
View File

@ -1,81 +0,0 @@
<template>
<div class="login">
<form @submit="login">
<p>Username:</p>
<input type="text" name="username" placeholder="Username" v-model="username" required="required" oninvalid="this.setCustomValidity('Username cannot be empty.')" >
<p>Password:</p>
<input type="password" name="password" placeholder="Password" v-model="password" required="required" oninvalid="this.setCustomValidity('Password cannot be empty.')">
<br>
<input type="submit" value="Submit">
<p style="font-size: 10px">No account yet? <router-link to="/register"> Register</router-link></p>
</form>
</div>
</template>
<script>
export default {
name: "Login",
data() {
return {
username: '',
password: ''
}
},
methods: {
login(e) {
e.preventDefault();
}
}
}
</script>
<style scoped>
.login{
color: #EBE7D9;
}
form {
align-items: center;
display: flex;
flex-direction: column;
justify-content: space-around;
}
input[type="text"], input[type=password] {
justify-content: center;
width: 40vw;
height: 20px;
background-color: #131313;
border: 2px solid #0096ff;
color: #EBE7D9;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
box-sizing: content-box;
}
input[type="submit"] {
justify-content: center;
width: 40vw;
height: 20px;
border: 2px solid #0096ff ;
color: #EBE7D9;
background-color: #131313;
border-radius: 3px;
box-sizing: content-box;
padding: 0px;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
}input[type="submit"]:hover {
justify-content: center;
width: 40vw;
height: 20px;
border: 2px solid #0096ff ;
color: #EBE7D9;
background-color: #272727;
border-radius: 3px;
box-sizing: content-box;
padding: 0px;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
}
</style>

111
frontend/src/views/Register.vue
View File

@ -1,111 +0,0 @@
<template>
<div class="register">
<form @submit="login">
<p>Firstname:</p>
<input type="text" name="firstname" placeholder="Firstname" v-model="firstname" required oninvalid="this.setCustomValidity('Firstname cannot be empty.')" oninput="this.setCustomValidity('')">
<p>Lastname:</p>
<input type="text" name="lastname" placeholder="Lastname" v-model="lastname" required oninvalid="this.setCustomValidity('Lastname cannot be empty.')" oninput="this.setCustomValidity('')">
<p>Username:</p>
<input type="text" name="username" placeholder="Username" v-model="username" required oninvalid="this.setCustomValidity('Username cannot be empty.')" oninput="this.setCustomValidity('')">
<p>Password:</p>
<input type="password" name="password" placeholder="Password" v-model="password" required oninvalid="this.setCustomValidity('Password cannot be empty.')" oninput="this.setCustomValidity('')">
<p>Confirm Password:</p>
<input type="password" name="passwordC" placeholder="Password" v-model="passwordC" required oninvalid="this.setCustomValidity('Password cannot be empty.')" oninput="this.setCustomValidity('')">
<br>
<input type="submit" value="Submit">
<p style="font-size: 10px">No account yet? <router-link to="/register"> Register</router-link></p>
</form>
</div>
</template>
<script>
export default {
name: "Register",
data() {
return {
firstname: '',
lastname: '',
username: '',
password: '',
passwordC: ''
}
},
methods: {
login(e) {
e.preventDefault();
if (this.password == this.passwordC) {
//register
}else {
alert("The password confirmation does not match the password");
}
}
}
}
// var password1 = document.getElementsByName('password');
// var password2 = document.getElementsByName('passwordC');
//
// var checkPasswordValidity = function() {
// if (password1.value != password2.value) {
// password2.setCustomValidity('Passwörter müssen übereinstimmen!');
// } else {
// password2.setCustomValidity('');
// }
// };
//
// password1.addEventListener('change', checkPasswordValidity);
// password2.addEventListener('change', checkPasswordValidity);
</script>
<style scoped>
.register{
color: #EBE7D9;
font-size: 10px;
}
form {
align-items: center;
display: flex;
flex-direction: column;
justify-content: space-around;
}
input[type="text"], input[type=password] {
justify-content: center;
width: 40vw;
height: 20px;
background-color: #131313;
border: 2px solid #0096ff;
color: #EBE7D9;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
box-sizing: content-box;
}
input[type="submit"] {
justify-content: center;
width: 40vw;
height: 20px;
border: 2px solid #0096ff ;
color: #EBE7D9;
background-color: #131313;
border-radius: 3px;
box-sizing: content-box;
padding: 0px;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
}input[type="submit"]:hover {
justify-content: center;
width: 40vw;
height: 20px;
border: 2px solid #0096ff ;
color: #EBE7D9;
background-color: #272727;
border-radius: 3px;
box-sizing: content-box;
padding: 0px;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
}
</style>

22
frontend/src/views/TimeTrackAccounts.vue
View File

@ -36,20 +36,20 @@ export default {
}, },
methods: { methods: {
deleteTimeTrackAccount(selfLink) { deleteTimeTrackAccount(selfLink) {
var userxhttp = new XMLHttpRequest(); var accountxhttp = new XMLHttpRequest();
userxhttp.onreadystatechange = function() { accountxhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 204) { if (this.readyState == 4 && this.status == 204) {
location.reload(); location.reload();
} }
}; };
userxhttp.open("DELETE", selfLink , false); accountxhttp.open("DELETE", selfLink , false);
userxhttp.setRequestHeader( accountxhttp.setRequestHeader(
"Authorization", "Authorization",
sessionStorage.getItem("jwt") sessionStorage.getItem("jwt")
); );
userxhttp.send(null); accountxhttp.send(null);
}, },
editTimeTrackAccount(selfLink) { editTimeTrackAccount(selfLink) {
sessionStorage.setItem("timeTrackAccountEditSelfLink", selfLink); sessionStorage.setItem("timeTrackAccountEditSelfLink", selfLink);
@ -64,14 +64,14 @@ export default {
created() { created() {
var accounts; var accounts;
var timeTrackAccountsTMP; var timeTrackAccountsTMP;
var userxhttp = new XMLHttpRequest(); var accountxhttp = new XMLHttpRequest();
userxhttp.onreadystatechange = function() { accountxhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) { if (this.readyState == 4 && this.status == 200) {
accounts = JSON.parse(userxhttp.responseText); accounts = JSON.parse(accountxhttp.responseText);
timeTrackAccountsTMP = accounts._embedded.accounts; timeTrackAccountsTMP = accounts._embedded.accounts;
} }
}; };
userxhttp.open( accountxhttp.open(
"GET", "GET",
baseUri + baseUri +
"/accounts/search/findByUsername?username=" + "/accounts/search/findByUsername?username=" +
@ -79,9 +79,9 @@ export default {
false false
); );
userxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt")); accountxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
userxhttp.send(null); accountxhttp.send(null);
this.timeTrackAccounts = timeTrackAccountsTMP; this.timeTrackAccounts = timeTrackAccountsTMP;
} }

27
frontend/src/views/profile.vue
View File

@ -1,27 +0,0 @@
<template >
<div>
<h3>My profile</h3>
<h4>{{$route.params.id}}</h4>
<router-link :to="{ name: 'Profile', params: {id: 456}, query: {plan: 'private'} }">Another Route</router-link>
<br>
<router-link :to="{ name: 'Info', params: {id: 3} }">Info</router-link>
<h5>{{$route.query}}</h5>
<router-view />
</div>
</template>
<script>
export default {
watch: {
$route(to, from){
console.log('to', to);
console.log('from', from);
}
}
}
</script>
<style lang="css" scoped>
</style>