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

Merge branch '120-frontend-code-cleanup' into 'master'

Browse Source 
Resolve "Frontend code cleanup"

Closes #120

See merge request marcel.schwarz/2020ss-qbc-geofence-timetracking!99
This commit is contained in:
Tim Zieger 2020-06-03 14:44:54 +00:00
commit aab586a4c8
11 changed files with 38 additions and 328 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/App.vue
View File

@ -93,14 +93,6 @@
<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-spacer></v-spacer>
@ -162,8 +154,7 @@ export default {
source: String
},
data: () => ({
drawer: null,
login: true,
drawer: null,
dialog: false,
menu: false,
loggedIn: sessionStorage.getItem("loggedin"),

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

@ -1,13 +1,9 @@
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import Profile from "../views/profile.vue";
import missing from "../views/missing.vue";
import Info from "../views/Info.vue";
import TimeRecords from "../views/TimeRecords.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 Users from "../views/Users.vue";
import EditUser from "../views/EditUser.vue";
@ -29,33 +25,7 @@ const routes = [
name: "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",
name: "About",

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

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

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

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

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

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

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

@ -72,7 +72,7 @@
</template>
<script>
// @ is an alias to /src
import { baseUri } from "../variables.js";
export default {
@ -123,16 +123,16 @@ export default {
}
this.todaysRecord = today;
//Get Accounts
var timeTrackAccountsTMP;
var userxhttp = new XMLHttpRequest();
userxhttp.onreadystatechange = function() {
var accountxhttp = new XMLHttpRequest();
accountxhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
timeTrackAccountsTMP = JSON.parse(userxhttp.responseText);
timeTrackAccountsTMP = JSON.parse(accountxhttp.responseText);
timeTrackAccountsTMP = timeTrackAccountsTMP._embedded.accounts;
}
};
userxhttp.open(
accountxhttp.open(
"GET",
baseUri +
"/accounts/search/findByUsername?username=" +
@ -140,9 +140,9 @@ export default {
false
);
userxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
accountxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
userxhttp.send(null);
accountxhttp.send(null);
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: {
deleteTimeTrackAccount(selfLink) {
var userxhttp = new XMLHttpRequest();
userxhttp.onreadystatechange = function() {
var accountxhttp = new XMLHttpRequest();
accountxhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 204) {
location.reload();
}
};
userxhttp.open("DELETE", selfLink , false);
accountxhttp.open("DELETE", selfLink , false);
userxhttp.setRequestHeader(
accountxhttp.setRequestHeader(
"Authorization",
sessionStorage.getItem("jwt")
);
userxhttp.send(null);
accountxhttp.send(null);
},
editTimeTrackAccount(selfLink) {
sessionStorage.setItem("timeTrackAccountEditSelfLink", selfLink);
@ -64,14 +64,14 @@ export default {
created() {
var accounts;
var timeTrackAccountsTMP;
var userxhttp = new XMLHttpRequest();
userxhttp.onreadystatechange = function() {
var accountxhttp = new XMLHttpRequest();
accountxhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
accounts = JSON.parse(userxhttp.responseText);
accounts = JSON.parse(accountxhttp.responseText);
timeTrackAccountsTMP = accounts._embedded.accounts;
}
};
userxhttp.open(
accountxhttp.open(
"GET",
baseUri +
"/accounts/search/findByUsername?username=" +
@ -79,9 +79,9 @@ export default {
false
);
userxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
accountxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
userxhttp.send(null);
accountxhttp.send(null);
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>