Commit 84d444f0 authored by A. Koch's avatar A. Koch

added formerly external lib and components

parent c828e545
<template lang="pug">
form.column.md-gutter.justify-between.items-around(v-on:submit.prevent="handleSubmit")
.row.md-gutter.justify-between.items-between
template(v-if="loaded", v-for="(field, key) in fields")
form-row-checkbox.col-sm-12.no-margin(
v-if="isType(field.type, 'checkbox')",
v-model="local[key]",
:type="field.type",
:validation="$v.local[key]",
:attributes="field.attributes",
:label="$t(field.label)",
:helper-label="$t(field.helperLabel)",
:error-label="$t(field.errorLabel)",
:class="{ 'col-xl-6': !field.fullWidth, 'col-12': field.fullWidth }"
)
form-row.col-sm-12.no-margin(
v-else,
v-model="local[key]",
:type="field.type",
:select-options="field.options",
:validation="field.validators ? $v.local[key] : undefined",
:attributes="field.attributes",
:label="$t(field.label)",
:helper-label="$t(field.helperLabel)",
:error-label="$t(field.errorLabel)",
:class="{ 'col-xl-6': !field.fullWidth, 'col-12': field.fullWidth }"
)
.row.xs-gutter.full-width.justify-end.items-end
slot(name="form-buttons-add")
slot(name="form-buttons")
submit-button(
:active="maySubmit",
) {{ $t(schema.submit.label) || $t('buttons.submit') }}
mb-notification-service
</template>
<script>
import Vue from 'vue'
import Vuelidate from 'vuelidate'
import Promise from 'bluebird'
import {
Loading,
QSpinnerPuff
} from 'quasar-framework'
import FormRow from './FormRow'
import FormRowCheckbox from './FormRowCheckbox'
import SubmitButton from './SubmitButton'
Vue.use(Vuelidate)
export default {
components: {
FormRow,
FormRowCheckbox,
SubmitButton,
Loading,
QSpinnerPuff
},
props: ['value', 'schema'],
data () {
return {
typemap: {
'password': 'text'
},
local: undefined,
loaded: false
}
},
mounted () {
this.initForm()
},
computed: {
initial () {
const initial = {}
for (let key in this.fields) {
if (this.fields[key].initial) {
initial[key] = this.fields[key].initial
}
}
return this.$store.state.forms[this.schema.state] || initial
},
fields: function () {
return this.schema && this.schema.fields
? this.schema.fields : {}
},
validators () {
const validators = {}
for (let key in this.fields) {
if (this.fields[key].validators) {
validators[key] = this.fields[key].validators
}
}
return validators
},
isDirty () {
let dirty = false
if (this.$v && this.$v.local) {
for (let key in this.local) {
if (this.$v.local[key] && this.$v.local[key].$dirty) {
dirty = true
}
}
return dirty
}
},
maySubmit () {
return (!this.$v && !this.$v.local) ||
(!this.$v.local.$invalid && this.isDirty)
}
},
methods: {
initForm () {
const ctx = this
if (this.value && this.value.then) {
this.value.then(data => {
ctx.local = data
ctx.loaded = true
})
}
else {
this.local = this.initial
this.loaded = true
}
},
handleSubmit () {
if (this.maySubmit &&
typeof this.schema.submit.handler === 'function') {
const { $store, schema } = this
Loading.show({
spinner: QSpinnerPuff,
spinnerSize: 200,
spinnerColor: 'grey'
})
Promise.resolve()
.then(schema.submit.handler)
.then(function (res) {
let message = schema.submit ? schema.submit.message : undefined
message = message || (res ? res.message() : 'messages.submit_success')
Loading.hide()
$store.commit('notifications/addMessage', {
body: message,
type: 'success'
})
if (schema.state) {
$store.commit(`forms/${schema.state}`, null)
}
})
.catch(function (err) {
Loading.hide()
console.debug(err)
$store.commit('notifications/addMessage', {
body: err.message
? `${err.message}${err.code
? ' (' + err.code + ')' : ''}`
: 'messages.submit_error',
mode: 'alert',
type: 'error'
})
})
}
},
isType (type, test) {
return this.typemap[type]
? this.typemap[type] === test : type === test
}
},
watch: {
local: {
handler (data) {
if (!data) {
this.initForm()
}
this.$emit('input', data)
if (this.schema.state) {
this.$store.commit(`forms/${this.schema.state}`, data)
}
},
deep: true
}
},
validations () {
return { local: this.validators }
}
}
</script>
<style></style>
<template lang="pug">
q-input(v-if="type === 'hidden'", :type="type", v-model="local")
q-field(v-else, :dark="true", :label="fieldLabel", :error="validation ? validation.$error : undefined",
:error-label="errorLabel", :helper="helperLabel || ''")
q-select(v-if="type === 'select'", :float-label="label", :dark="true", v-model="local", :options="selectOptions")
q-input(v-else, :dark="true", :float-label="label", :type="type", v-model="local", :attributes="attributes")
</template>
<script>
import {
QSelect,
QInput,
QField
} from 'quasar-framework'
export default {
components: {
QSelect,
QInput,
QField
},
props: [
'value',
'attributes',
'validation',
'type',
'label',
'fieldLabel',
'errorLabel',
'helperLabel',
'selectOptions'
],
data () {
return {
local: undefined
}
},
computed: {
error () {
if (this.type === 'hidden') return
return this.validation && this.validation.$error
}
},
watch: {
local (val) {
if (this.type === 'hidden') return
if (this.validation) {
this.validation.$touch()
}
this.$emit('input', val)
}
},
created () {
this.local = this.value
if (this.type === 'hidden') return
if (this.validation) {
this.validation.$reset()
}
}
}
</script>
<style></style>
<template lang="pug">
q-field(:dark="true", :error="validation ? validation.$error : undefined")
q-checkbox(:dark="true", :label="label", color="primary", v-model="local")
</template>
<script>
import {
QCheckbox,
QField
} from 'quasar-framework'
export default {
components: {
QCheckbox,
QField
},
props: ['value', 'validation', 'type', 'label'],
data () {
return {
local: false
}
},
computed: {
error () {
return this.validation && this.validation.$error
}
},
watch: {
local (val) {
if (this.validation) {
this.validation.$touch()
}
this.$emit('input', val)
}
},
created () {
this.local = typeof this.value === 'boolean' ? this.value : false
}
}
</script>
<style></style>
<template lang="pug">
q-btn(:dark="true", outline, icon-right="forward", :color="active ? 'primary' : 'light'",
@click="clickHandler", type="submit", :disabled="!active")
slot
</template>
<script>
import {
QBtn
} from 'quasar-framework'
export default {
components: {
QBtn
},
props: ['active', 'click'],
methods: {
clickHandler (...args) {
if (typeof this.click === 'function') {
this.click(args)
}
}
}
}
</script>
<style></style>
import FormMain from './FormMain.vue'
export {
FormMain
}
import forms from './forms'
import layouts from './layouts'
import partials from './partials'
import routes from './routes'
export default {
forms,
layouts,
partials,
routes
}
<template lang="pug">
.row.fullscreen.vertical-middle.justify-center.items-center
.column.col-12.sm-gutter
q-card.full-width(color="dark")
.layout-padding
q-card-main.no-margin
.row.justify-between.content-stretch
.column.width-3of4
h4.caption.light-paragraph.no-margin
slot(name="form-title")
slot(name="form-caption")
slot(name="form-logo")
a.gt-md.logo(@click="openURL('http://www.motionbank.org')")
img.responsive(src="~assets/motionbank-logo.png")
q-card-main.no-margin
slot
site-footer
</template>
<script>
import {
QCard,
QCardMain,
QLayout,
openURL
} from 'quasar-framework'
import SiteFooter from '../partials/SiteFooter'
export default {
components: {
QCard,
QCardMain,
QLayout,
SiteFooter
},
data: function () {
return {
openURL
}
}
}
</script>
<style></style>
<template lang="pug">
.row.fullscreen.vertical-middle.justify-center.items-center
.column.col-9.sm-gutter
q-card.full-width(color="dark")
.layout-padding
q-card-main.no-margin
.row.justify-between.content-stretch
.column.width-3of4
h4.caption.light-paragraph.no-margin
slot(name="form-title")
slot(name="form-caption")
slot(name="form-logo")
a.gt-md.logo(@click="openURL('http://www.motionbank.org')")
img.responsive(src="~assets/motionbank-logo.png")
q-card-main.no-margin
slot
site-footer
</template>
<script>
import {
QCard,
QCardMain,
QLayout,
openURL
} from 'quasar-framework'
import SiteFooter from '../partials/SiteFooter'
export default {
components: {
QCard,
QCardMain,
QLayout,
SiteFooter
},
data: function () {
return {
openURL
}
}
}
</script>
<style></style>
import CenterCardFull from './CenterCardFull.vue'
import CenterCardThreeQuarter from './CenterCardThreeQuarter.vue'
export default {
CenterCardFull,
CenterCardThreeQuarter
}
<template lang="pug">
video-player(class="video-player-box vjs-big-play-centered",
ref="videoPlayer",
:options="playerOptions",
:playsinline="true",
customEventName="customstatechangedeventname",
@play="onPlayerEvent('play', $event)",
@pause="onPlayerEvent('pause', $event)",
@ended="onPlayerEvent('ended', $event)",
@waiting="onPlayerEvent('waiting', $event)",
@playing="onPlayerEvent('playing', $event)",
@loadeddata="onPlayerEvent('data', $event)",
@timeupdate="onPlayerEvent('time', $event.currentTime())",
@canplay="onPlayerEvent('canplay', $event)",
@canplaythrough="onPlayerEvent('canplaythrough', $event)",
@statechanged="playerStateChange($event)",
@ready="onPlayerReady")
</template>
<script>
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
require('videojs-youtube')
require('videojs-vimeo/src/Vimeo')
import { videoPlayer } from 'vue-video-player'
export default {
components: {
videoPlayer
},
data () {
return {
playerOptions: {
fluid: true,
width: 640,
techOrder: ['html5'],
language: 'en',
playbackRates: [0.25, 0.5, 1.0, 1.5, 2.0],
sources: [],
poster: undefined,
controlBar: {
remainingTime: true
}
}
}
},
props: ['src', 'type'],
mounted () {
if (!this.src) return
if (!this.type) {
this.guessType()
}
if (this.type === 'video/youtube') {
this.playerOptions.techOrder = ['youtube']
}
else if (this.type === 'video/vimeo') {
this.playerOptions.techOrder = ['vimeo']
}
this.setSources([{ type: this.type, src: this.src }])
},
watch: {
src (val) {
if (val) {
if (!this.type) {
this.guessType()
}
const _this = this
this.setSources([{type: _this.type, src: val}])
}
}
},
computed: {
player () {
return this.$refs.videoPlayer.player
}
},
methods: {
guessType () {
if (this.src.indexOf('youtube.com') > -1) {
this.type = 'video/youtube'
}
else if (this.src.indexOf('vimeo.com') > -1) {
this.type = 'video/vimeo'
}
},
onPlayerReady (player) {
this.$emit('ready', player)
},
onPlayerEvent (type, player) {
this.$emit(type, player)
},
onPlayerStateChange (player) {
this.$emit('state-change', player)
},
setSources (sources, poster = undefined) {
if (!Array.isArray(sources)) {
sources = [sources]
}
this.playerOptions.sources = sources
this.playerOptions.poster = poster
}
}
}
</script>
<style lang="stylus">
.video-js .vjs-time-control { display: block }
</style>
<template lang="pug">
.row.justify-center.items-center.full-width
.column.items-center.full-height
video#main-video.video-js.vjs-default-skin
</template>
<script>
// import vjs from 'video.js/dist/video.es'
// import * as record from 'videojs-record'
const videojs = require('video.js/dist/video.es').default
global.MRecordRTC = require('recordrtc').MRecordRTC
require('videojs-record')
export default {
mounted: function () {
const player = videojs('main-video', {
controls: true,
width: 320,
height: 240,
plugins: {
record: {
audio: true,
video: true,
maxLength: 10,
debug: true
}
}
})
// error handling
player.on('deviceError', function () {
console.log('device error:', player.deviceErrorCode)
})
player.on('error', function (error) {
console.log('error:', error)
})
// user clicked the record button and started recording
player.on('startRecord', function () {
console.log('started recording!')
})
// user completed recording and stream is available
player.on('finishRecord', function () {
// the blob object contains the recorded data that
// can be downloaded by the user, stored on server etc.
console.log('finished recording: ', player.recordedData)
})
}
}
</script>
<style>
@import "~video.js/dist/video-js.css";
@import "~videojs-record/src/css/videojs.record.css";
</style>
import WebRtcRecorder from './WebRTCRecorder'
export default {
WebRtcRecorder
}
<template lang="pug">
q-transition(appear, enter="fadeIn", leave="fadeOut")
vue-particles.mobile-hide.fullscreen.no-pointer-events(
v-if="show",
color="#474C55",
:particleOpacity="0.3",
:particlesNumber="particlesNumber",
shapeType="edge",
:particleSize="particleSize",
linesColor="#A3ADC2",
:linesWidth="1",
:lineLinked="true",