Skip to content
Snippets Groups Projects
Commit 659e21e0 authored by abdu's avatar abdu
Browse files

fix routing bug, change style, readd methods and buttons previously commented out/removed

parent 8d970610
No related branches found
No related tags found
No related merge requests found
...@@ -28,7 +28,9 @@ export default { ...@@ -28,7 +28,9 @@ export default {
<div class="list-item-header mb-0">{{ title }}</div> <div class="list-item-header mb-0">{{ title }}</div>
<!-- Bottom-left description --> <!-- Bottom-left description -->
<div class="list-item-description mb-0">{{ description }}</div> <div class="list-item-description mb-0">
{{ description.length > 50 ? description.slice(0, 30) + '...' : description }}
</div>
</div> </div>
</template> </template>
......
...@@ -39,17 +39,19 @@ export default { ...@@ -39,17 +39,19 @@ export default {
}, },
methods: { methods: {
async validateSession(){ async validateSession(){
let url = "http://localhost:9876/user/validateSession" if(this.$route.name === 'main') {
let url = "http://localhost:9876/user/validateSession"
const response = await fetch(url, { const response = await fetch(url, {
method: 'GET', method: 'GET',
credentials: 'include' credentials: 'include'
}) })
if(response.status === 401){ if (response.status === 401) {
localStorage.removeItem("userId") localStorage.removeItem("userId")
localStorage.removeItem("isLoggedIn") localStorage.removeItem("isLoggedIn")
await this.$router.push({ name: 'login' }) await this.$router.push({name: 'login'})
}
} }
}, },
showDetails(item) { showDetails(item) {
...@@ -155,16 +157,24 @@ export default { ...@@ -155,16 +157,24 @@ export default {
<b-col class="main-col justify-content-center align-items-center"> <b-col class="main-col justify-content-center align-items-center">
<b-card class="main-card border-1 shadow-lg" title="ToDo-App"> <b-card class="main-card border-1 shadow-lg" title="ToDo-App">
<b-card-body class="main-card-body mt-1"> <b-card-body class="main-card-body mt-1">
<b-row>
<b-button class="mb-4" variant="primary" @click="showAddModal = true"> <b-col>
Hinzufügen <b-button class="mb-4" variant="primary" @click="showAddModal = true">
</b-button> Hinzufügen
</b-button>
</b-col>
<b-col>
<b-button class="mb-4" variant="danger" @click="signout">
Log out
</b-button>
</b-col>
</b-row>
<b-tabs class="tabs mt-2"> <b-tabs class="tabs mt-2">
<b-tab class="tab" title="Active ToDos"> <b-tab class="tab" title="Active ToDos">
<ul class="main-list mt-3" v-if="items.length > 0"> <ul class="main-list mt-3" v-if="items.length > 0">
<li v-for="(item, index) in items" :key="index" class="list-group-item"> <li v-for="(item, index) in items" :key="index" class="list-group-item">
<div class="d-flex justify-content-between align-items-center w-100"> <div class="custom-list-element d-flex justify-content-between align-items-center w-100">
<div class="flex-grow-1"> <div @click="showDetails(item)" class="flex-grow-1">
<CustomListElement :title="item.title" :description="item.description" :completed="item.completed"></CustomListElement> <CustomListElement :title="item.title" :description="item.description" :completed="item.completed"></CustomListElement>
</div> </div>
<div class="badge-container"> <div class="badge-container">
...@@ -179,8 +189,8 @@ export default { ...@@ -179,8 +189,8 @@ export default {
<b-tab class="tab" title="Completed ToDos"> <b-tab class="tab" title="Completed ToDos">
<ul class="main-list mt-3" v-if="completedItems.length > 0"> <ul class="main-list mt-3" v-if="completedItems.length > 0">
<li v-for="(item, index) in completedItems" :key="index" class="list-group-item"> <li v-for="(item, index) in completedItems" :key="index" class="list-group-item">
<div class="d-flex justify-content-between align-items-center w-100"> <div class="custom-list-element d-flex justify-content-between align-items-center w-100">
<div class="flex-grow-1"> <div @click="showDetails(item)" class="flex-grow-1">
<CustomListElement :title="item.title" :description="item.description" :completed="item.completed"></CustomListElement> <CustomListElement :title="item.title" :description="item.description" :completed="item.completed"></CustomListElement>
</div> </div>
<div class="badge-container"> <div class="badge-container">
...@@ -196,7 +206,11 @@ export default { ...@@ -196,7 +206,11 @@ export default {
<!-- details modal --> <!-- details modal -->
<b-modal v-model="showDetailsModal" title="Details" hide-header id="showDetailsModal"> <b-modal v-model="showDetailsModal" title="Details" hide-header id="showDetailsModal">
<p>{{ selectedItem }}</p> <h3>Title: {{ selectedItem.title }}</h3>
<p style="overflow-wrap: break-word"> Description: <br> {{ selectedItem.description }}</p>
<div>Status: <br>
{{selectedItem.completed ? 'completed' : 'not completed'}}
</div>
</b-modal> </b-modal>
<b-modal @ok="deleteTodo(this.todoIdForDeleteModal)" hie-header id="delete-modal"> <b-modal @ok="deleteTodo(this.todoIdForDeleteModal)" hie-header id="delete-modal">
...@@ -248,6 +262,18 @@ export default { ...@@ -248,6 +262,18 @@ export default {
overflow-y: auto; overflow-y: auto;
} }
.custom-list-element {
background-color: #1c1c1c;
border: 1px #fff solid;
padding: 5px;
margin-bottom: 10px;
border-radius: 20px;
}
.custom-list-element:hover {
background-color: #2d2d2d;
}
.badge-container { .badge-container {
display: flex; display: flex;
align-items: center; align-items: center;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment