janishutz/libreevent
1
0
Fork 0
mirror of https://github.com/janishutz/libreevent.git synced 2025-11-25 13:24:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

add save indicator

Browse Source
This commit is contained in:
Janis Hutz
2023-06-18 13:51:06 +02:00
parent 5ecd2d3f17
commit 6c3434c05c
1 changed files with 39 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/webapp/src/components/seatplan/editor/window.vue
View File

@@ -36,7 +36,10 @@
<button title="Add component [Ctrl + I]" @click="addNewElement()"><span class="material-symbols-outlined">add</span></button> <button title="Add component [Ctrl + I]" @click="addNewElement()"><span class="material-symbols-outlined">add</span></button>
<button title="Remove selected component [Delete]" @click="deleteSelected()"><span class="material-symbols-outlined">delete</span></button> <button title="Remove selected component [Delete]" @click="deleteSelected()"><span class="material-symbols-outlined">delete</span></button>
<!-- TODO: Create real save function --> <!-- TODO: Create real save function -->
<button title="Save this seatplan as a draft" @click="save()"><span class="material-symbols-outlined">save</span></button> <div class="save-wrapper">
<button title="Save this seatplan as a draft" @click="save()"><span class="material-symbols-outlined">save</span></button>
<div class="saved" v-if="saved">Saved!</div>
</div>
<button title="Deploy this seatplan (save it for use)" @click="save()"><span class="material-symbols-outlined">system_update_alt</span></button> <button title="Deploy this seatplan (save it for use)" @click="save()"><span class="material-symbols-outlined">system_update_alt</span></button>
</div> </div>
</div> </div>
@@ -74,6 +77,7 @@
zoomFactor: 1, zoomFactor: 1,
historyPos: 0, historyPos: 0,
generalSettings: { 'namingScheme': 'numeric' }, generalSettings: { 'namingScheme': 'numeric' },
saved: false,
} }
}, },
methods: { methods: {
@@ -255,6 +259,10 @@
}, },
save () { save () {
sessionStorage.setItem( 'seatplan', JSON.stringify( this.scaleDown( this.draggables ) ) ); sessionStorage.setItem( 'seatplan', JSON.stringify( this.scaleDown( this.draggables ) ) );
this.saved = true;
setTimeout( () => {
this.saved = false;
}, 5000 )
}, },
addNewElement () { addNewElement () {
this.draggables[ Object.keys( this.draggables ).length + 1 ] = { 'x': 100, 'y':100, 'h': 100, 'w': 250, 'active': false, 'draggable': true, 'resizable': true, 'id': Object.keys( this.draggables ).length + 1, 'origin': 1, 'shape':'rectangular', 'type': 'seat', 'startingRow': 1, 'seatCountingStartingPoint': 0 }; this.draggables[ Object.keys( this.draggables ).length + 1 ] = { 'x': 100, 'y':100, 'h': 100, 'w': 250, 'active': false, 'draggable': true, 'resizable': true, 'id': Object.keys( this.draggables ).length + 1, 'origin': 1, 'shape':'rectangular', 'type': 'seat', 'startingRow': 1, 'seatCountingStartingPoint': 0 };
@@ -362,4 +370,34 @@
.toolbar button:disabled { .toolbar button:disabled {
cursor: default; cursor: default;
} }
.save-wrapper {
position: relative;
}
.saved {
transition: all 0.5s;
position: absolute;
top: 20%;
left: 150%;
width: 7vw;
height: 3vh;
display: flex;
justify-content: center;
align-items: center;
background-color: var( --accent-background );
color: white;
border-radius: 5px;
}
.saved::before {
content: " ";
position: absolute;
bottom: 13%;
left: -10%;
margin-left: -5px;
border-width: 10px;
border-style: solid;
border-color: transparent var( --accent-background ) transparent transparent;
}
</style> </style>