Changeset View
Changeset View
Standalone View
Standalone View
src/resources/vue/Meet/RoomOptions.vue
<template> | <template> | ||||
<div v-if="config"> | <modal-dialog v-if="config" id="room-options-dialog" ref="dialog" :title="$t('meet.options')"> | ||||
<div id="room-options-dialog" class="modal" tabindex="-1" role="dialog"> | |||||
<div class="modal-dialog" role="document"> | |||||
<div class="modal-content"> | |||||
<div class="modal-header"> | |||||
<h5 class="modal-title">{{ $t('meet.options') }}</h5> | |||||
<btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn> | |||||
</div> | |||||
<div class="modal-body"> | |||||
<form id="room-options-password"> | <form id="room-options-password"> | ||||
<div id="password-input" class="input-group input-group-activable mb-2"> | <div id="password-input" class="input-group input-group-activable mb-2"> | ||||
<span class="input-group-text label">{{ $t('meet.password') }}:</span> | <span class="input-group-text label">{{ $t('meet.password') }}:</span> | ||||
<span v-if="config.password" id="password-input-text" class="input-group-text">{{ config.password }}</span> | <span v-if="config.password" id="password-input-text" class="input-group-text">{{ config.password }}</span> | ||||
<span v-else id="password-input-text" class="input-group-text text-muted">{{ $t('meet.password-none') }}</span> | <span v-else id="password-input-text" class="input-group-text text-muted">{{ $t('meet.password-none') }}</span> | ||||
<input type="text" :value="config.password" name="password" class="form-control rounded-start activable"> | <input type="text" :value="config.password" name="password" class="form-control rounded-start activable"> | ||||
<btn @click="passwordSave" id="password-save-btn" class="btn-outline-primary activable rounded-end">{{ $t('btn.save') }}</btn> | <btn @click="passwordSave" id="password-save-btn" class="btn-outline-primary activable rounded-end">{{ $t('btn.save') }}</btn> | ||||
<btn v-if="config.password" id="password-clear-btn" @click="passwordClear" class="btn-outline-danger rounded">{{ $t('meet.password-clear') }}</btn> | <btn v-if="config.password" id="password-clear-btn" @click="passwordClear" class="btn-outline-danger rounded">{{ $t('meet.password-clear') }}</btn> | ||||
<btn v-else @click="passwordSet" id="password-set-btn" class="btn-outline-primary rounded">{{ $t('meet.password-set') }}</btn> | <btn v-else @click="passwordSet" id="password-set-btn" class="btn-outline-primary rounded">{{ $t('meet.password-set') }}</btn> | ||||
</div> | </div> | ||||
<small class="text-muted"> | <small class="text-muted"> | ||||
{{ $t('meet.password-text') }} | {{ $t('meet.password-text') }} | ||||
</small> | </small> | ||||
</form> | </form> | ||||
<hr> | <hr> | ||||
<form id="room-options-lock"> | <form id="room-options-lock"> | ||||
<div id="room-lock" class="mb-2"> | <div id="room-lock" class="mb-2"> | ||||
<label for="room-lock-input">{{ $t('meet.lock') }}:</label> | <label for="room-lock-input">{{ $t('meet.lock') }}:</label> | ||||
<input type="checkbox" id="room-lock-input" name="lock" value="1" :checked="config.locked" @click="lockSave"> | <input type="checkbox" id="room-lock-input" name="lock" value="1" :checked="config.locked" @click="lockSave"> | ||||
</div> | </div> | ||||
<small class="text-muted"> | <small class="text-muted"> | ||||
{{ $t('meet.lock-text') }} | {{ $t('meet.lock-text') }} | ||||
</small> | </small> | ||||
</form> | </form> | ||||
<hr> | <hr> | ||||
<form id="room-options-nomedia"> | <form id="room-options-nomedia"> | ||||
<div id="room-nomedia" class="mb-2"> | <div id="room-nomedia" class="mb-2"> | ||||
<label for="room-nomedia-input">{{ $t('meet.nomedia') }}:</label> | <label for="room-nomedia-input">{{ $t('meet.nomedia') }}:</label> | ||||
<input type="checkbox" id="room-nomedia-input" name="lock" value="1" :checked="config.nomedia" @click="nomediaSave"> | <input type="checkbox" id="room-nomedia-input" name="lock" value="1" :checked="config.nomedia" @click="nomediaSave"> | ||||
</div> | </div> | ||||
<small class="text-muted"> | <small class="text-muted"> | ||||
{{ $t('meet.nomedia-text') }} | {{ $t('meet.nomedia-text') }} | ||||
</small> | </small> | ||||
</form> | </form> | ||||
</div> | </modal-dialog> | ||||
<div class="modal-footer"> | |||||
<btn class="btn-secondary modal-action" data-bs-dismiss="modal">{{ $t('btn.close') }}</btn> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</template> | </template> | ||||
<script> | <script> | ||||
import ModalDialog from '../Widgets/ModalDialog' | |||||
export default { | export default { | ||||
components: { | |||||
ModalDialog | |||||
}, | |||||
props: { | props: { | ||||
config: { type: Object, default: () => null }, | config: { type: Object, default: () => null }, | ||||
room: { type: String, default: () => null } | room: { type: String, default: () => null } | ||||
}, | }, | ||||
mounted() { | mounted() { | ||||
$('#room-options-dialog')[0].addEventListener('show.bs.modal', e => { | $('#room-options-dialog')[0].addEventListener('show.bs.modal', e => { | ||||
$(e.target).find('.input-group-activable.active').removeClass('active') | $(e.target).find('.input-group-activable.active').removeClass('active') | ||||
}) | }) | ||||
Show All 36 Lines | export default { | ||||
e.preventDefault() | e.preventDefault() | ||||
} else if (e.which == 27) { | } else if (e.which == 27) { | ||||
// On ESC escape from the input, but not the dialog | // On ESC escape from the input, but not the dialog | ||||
$('#password-input').removeClass('active') | $('#password-input').removeClass('active') | ||||
e.stopPropagation() | e.stopPropagation() | ||||
} | } | ||||
}) | }) | ||||
.focus() | .focus() | ||||
}, | |||||
show() { | |||||
this.$refs.dialog.show() | |||||
} | } | ||||
} | } | ||||
} | } | ||||
</script> | </script> |