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

work on popups

Browse Source
This commit is contained in:
Janis Hutz
2023-06-27 19:49:27 +02:00
parent 89008df6cc
commit a22305f814
2 changed files with 63 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/webapp/src/components/notifications/popups.vue
View File

@@ -2,42 +2,62 @@
<div id="popup-backdrop">
<div class="popup-container">
<div class="popup" :class="size">
<div class="close-wrapper"><span class="material-symbols-outlined close-button" @click="closePopup();">close</span></div>
<div class="close-wrapper"><span class="material-symbols-outlined close-button" @click="closePopup( 'cancel' );">close</span></div>
<div class="message-container">
{{ data }}
<div v-if="contentType === 'string'">{{ data.message }}</div>
<div v-else-if="contentType === 'html'" v-html="data.message"></div>
<div v-else-if="contentType === 'settings'">
<settings v-model:settings="data.settings"></settings>
</div>
<div v-else-if="contentType === 'confirm'" class="confirm">
{{ data.message }}
<div style="width: 100%; margin-top: 3%;">
<button @click="closePopup( 'ok' )">Ok</button>
<button @click="closePopup( 'cancel' )">Cancel</button>
</div>
</div>
<div v-else-if="contentType === 'radio'">
<form>
<div v-for="selectOption in data.radio">
<input type="radio" value="selectOption.value" name="group1" id="selectOption.id">
<label for="selectOption.id">selectOption.displayName</label>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</template>
<!-- Options to be passed in: html, settings (for settings component), strings, numbers, confirm, radio, dropdowns, selection -->
<!-- Options to be passed in: html, settings (for settings component), strings, confirm, radio, dropdowns, selection -->
<script>
import settings from '@/components/settings/settings.vue';
export default {
name: 'popups',
components: {
settings,
},
props: {
size: {
type: String,
'default': 'normal',
},
contentType: {
type: String,
'default': 'string'
},
data: {
type: Object,
'default': {}
}
},
data () {
return {
status: 'hidden',
contentType: 'dropdown',
data: { 'message': 'No message defined on method call' }
}
},
methods: {
closePopup() {
closePopup( message ) {
$( '#popup-backdrop' ).fadeOut( 300 );
if ( message ) {
this.$emit( 'data', message );
}
},
openPopup () {
$( '#popup-backdrop' ).fadeIn( 300 );
@@ -113,4 +133,35 @@
width: 80%;
height: 80%;
}
.message-container {
height: 90%;
width: 90%;
margin-left: 5%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.confirm {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
flex-direction: column;
}
.confirm button {
padding: 1% 2%;
display: inline-block;
background-color: var( --accent-background );
color: var( --secondary-color );
cursor: pointer;
}
.confirm button:hover {
background-color: var( --accent-background-hover );
}
</style>

6
src/webapp/src/views/admin/locations/LocationEditView.vue
View File

@@ -69,12 +69,6 @@
notifications,
popups,
},
created () {
if ( !sessionStorage.getItem( 'selectedTicket' ) ) {
this.$router.push( '/admin/events' );
}
this.eventID = sessionStorage.getItem( 'selectedTicket' );
},
data() {
return {
event: { 'name': 'TestEvent', 'description': 'This is a description for the TestEvent to test multiline support and proper positioning of the Fields', 'freeSeats': 2, 'maxSeats': 2, 'date':'TestDate', 'startingPrice':15, 'location': 'TestLocation', 'eventID': 'test', 'currency': 'CHF', 'logo': 'logo.png', 'categories': { '1': { 'price': { '1': { 'price':25, 'name':'Child (0-15.99 years)'}, '2': { 'price':35, 'name':'Adult'} }, 'bg': 'black', 'fg': 'white', 'name': 'Category 1' }, '2': { 'price': { '1': { 'price':25, 'name':'Child (0-15.99 years)' }, '2': { 'price':35, 'name':'Adult'} }, 'bg': 'green', 'fg': 'white', 'name': 'Category 2' } } },