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 {
<div class="list-item-header mb-0">{{ title }}</div>
<!-- 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>
</template>
......
......@@ -39,17 +39,19 @@ export default {
},
methods: {
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, {
method: 'GET',
credentials: 'include'
})
const response = await fetch(url, {
method: 'GET',
credentials: 'include'
})
if(response.status === 401){
localStorage.removeItem("userId")
localStorage.removeItem("isLoggedIn")
await this.$router.push({ name: 'login' })
if (response.status === 401) {
localStorage.removeItem("userId")
localStorage.removeItem("isLoggedIn")
await this.$router.push({name: 'login'})
}
}
},
showDetails(item) {
......@@ -155,16 +157,24 @@ export default {
<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-body class="main-card-body mt-1">
<b-button class="mb-4" variant="primary" @click="showAddModal = true">
Hinzufügen
</b-button>
<b-row>
<b-col>
<b-button class="mb-4" variant="primary" @click="showAddModal = true">
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-tab class="tab" title="Active ToDos">
<ul class="main-list mt-3" v-if="items.length > 0">
<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="flex-grow-1">
<div class="custom-list-element d-flex justify-content-between align-items-center w-100">
<div @click="showDetails(item)" class="flex-grow-1">
<CustomListElement :title="item.title" :description="item.description" :completed="item.completed"></CustomListElement>
</div>
<div class="badge-container">
......@@ -179,8 +189,8 @@ export default {
<b-tab class="tab" title="Completed ToDos">
<ul class="main-list mt-3" v-if="completedItems.length > 0">
<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="flex-grow-1">
<div class="custom-list-element d-flex justify-content-between align-items-center w-100">
<div @click="showDetails(item)" class="flex-grow-1">
<CustomListElement :title="item.title" :description="item.description" :completed="item.completed"></CustomListElement>
</div>
<div class="badge-container">
......@@ -196,7 +206,11 @@ export default {
<!-- details modal -->
<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 @ok="deleteTodo(this.todoIdForDeleteModal)" hie-header id="delete-modal">
......@@ -248,6 +262,18 @@ export default {
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 {
display: flex;
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