Commit 154f333b authored by Anton Koch's avatar Anton Koch
Browse files

Merge branch 'mosys-maintenance-update---mosys' into 'release_2_1'

Mosys maintenance update   mosys

See merge request !57
See milestone at https://gitlab.rlp.net/motionbank/applications/systems-frontend/-/milestones/6
parents 8f48e31e 816acea1
Pipeline #59881 passed with stage
in 6 minutes and 48 seconds
......@@ -132,7 +132,7 @@
<style scoped lang="stylus">
.cell-item-inner
padding 0 1px 1px 0
// padding 0 1px 1px 0
.custom-preview
opacity 0
transition opacity ease 500ms
......
......@@ -97,9 +97,18 @@
v-model="cell.source._value[spec.path]",
:label="spec.label",
@input="value => handleItemChanged(value, cell, spec.path)")
//-------------------------------------------------------------------------------------------- features (optional)
template(v-if="cell.configuration._value.component === 'CellImage'")
cell-style-editor(:cell="cell")
//-------------------------------------------------------------------------------------- style features (optional)
template(v-if="itemSpecs[cell.configuration._value.component].styleFeatures")
q-item.native.cursor-pointer.q-py-none.q-mb-xs.q-pr-none.q-mt-lg(@click.native="toggleStyleFeatures()")
q-item-main.text-grey-3
strong Style features
q-item-side
q-btn.text-grey-3(flat)
q-icon(v-if="!show.styleFeatures", name="keyboard_arrow_down")
q-icon(v-else, name="keyboard_arrow_up")
template(v-if="show.styleFeatures")
cell-style-editor(:cell="cell", :annotation="storeEditingCell")
</template>
......@@ -114,7 +123,7 @@
},
data () {
return {
show: {features: true},
show: {features: true, styleFeatures: true},
isMobile: undefined,
cells: [],
cell: undefined,
......@@ -147,7 +156,8 @@
errorMessage: 'Needs to be a valid URL',
value: '',
path: 'link'
}]
}],
styleFeatures: false
},
'CellText': {
inputType: 'textarea',
......@@ -158,7 +168,8 @@
errorMessage: '',
value: '',
path: 'content',
features: []
features: [],
styleFeatures: false
},
'CellPiecemaker': {
inputType: 'url',
......@@ -190,7 +201,8 @@
value: 0,
path: 'duration'
}
]
],
styleFeatures: false
},
'CellMedia': {
inputType: 'url',
......@@ -222,7 +234,8 @@
value: 0,
path: 'duration'
}
]
],
styleFeatures: false
},
'CellImage': {
inputType: 'url',
......@@ -244,7 +257,8 @@
value: '',
path: 'link'
}
]
],
styleFeatures: true
},
/*
'CellInternalLink': {
......@@ -268,7 +282,8 @@
errorMessage: 'Needs to be a valid URL',
value: '',
path: 'content',
features: []
features: [],
styleFeatures: false
},
'CellAnnotationList': {
inputType: 'text',
......@@ -354,7 +369,8 @@
path: 'displayType'
}
*/
]
],
styleFeatures: false
}
}
}
......@@ -377,6 +393,9 @@
this.getCell(this.storeEditingCell)
},
methods: {
toggleStyleFeatures () {
this.show.styleFeatures = !this.show.styleFeatures
},
toggleFeatures () {
this.show.features = !this.show.features
},
......
<template lang="pug">
div
| cell style editor
q-btn(@click="testStyle()") testSyle
.q-caption {{ cell.stylesheet }}
//--------------------------------------------------------------------------------------------------- image position
q-item.q-pa-none(style="border-bottom: 1px solid rgba(255,255,255,0.04);")
q-item-main.q-pa-md.bg-grey-9(style="border-radius: .15rem;")
q-tooltip.z-max.shadow-6.bg-grey-9(anchor="center left", self="center right", :offset="[8, 0]",
style="border: 1px solid rgba(255,255,255,0.1);") Set image position in cell
q-item-tile.q-caption.text-grey-6.q-mb-sm Image position
q-item-tile.text-center
template(v-for="(position, index) in css.backgroundPositions")
q-btn.q-ma-xs(@click="setCssAttribute('backgroundPosition', position)", round, size="sm", flat,
:class="[updatedCell && position === updatedCell.configuration._value.backgroundPosition ? 'bg-blue' : 'bg-grey-8']")
br(v-if="index === 2 || index === 5")
//------------------------------------------------------------------------------------------------------- image size
q-item.q-pa-none(style="border-bottom: 1px solid rgba(255,255,255,0.04);")
q-item-main.bg-grey-9(style="border-radius: .15rem;")
q-tooltip.z-max.shadow-6.bg-grey-9(anchor="center left", self="center right", :offset="[8, 0]",
style="border: 1px solid rgba(255,255,255,0.1);")
| The image can be left to its natural size, stretched, or constrained to fit the available space.
q-item-tile
q-select(
v-model="model.backgroundSize",
float-label="Image size",
:options="css.backgroundSizes",
hide-underline, dark,
@input="value => setCssAttribute('backgroundSize', value)")
</template>
<script>
export default {
name: 'CellStyleEditor',
props: ['cell'],
props: ['cell', 'annotation'],
data () {
return {
updatedCell: undefined,
model: {
backgroundPosition: undefined,
backgroundSize: this.cell.configuration._value.backgroundSize
},
css: {
backgroundPositions: ['top left', 'top', 'top right', 'left', 'center', 'right', 'bottom left', 'bottom', 'bottom right'],
backgroundSizes: [
{ label: 'Contain', value: 'contain' },
{ label: 'Cover', value: 'cover' },
{ label: 'Unset', value: 'unset' }
]
},
cssAttributes: {
backgroundSize: 'background-size',
backgroundPosition: 'background-position'
}
}
},
async mounted () {
if (this.annotation) this.updatedCell = await this.$store.dispatch('cells/get', this.annotation.body.source.id)
},
methods: {
async testStyle () {
console.log('testStyle')
let _cell = this.cell
if (_cell.id) {
async setCssAttribute (attr, val) {
if (this.cell.id) {
try {
await this.$store.dispatch('cells/patch', [_cell.id, { stylesheet: {value: 'opacity-50'} }])
console.log('worked', this.cell)
if (this.annotation) this.updatedCell = await this.$store.dispatch('cells/get', this.annotation.body.source.id)
let obj = {}
obj[attr] = val
this.updatedCell.configuration.value = Object.assign({}, this.updatedCell.configuration._value, obj)
let cell = await this.$store.dispatch('cells/patch', [this.cell.id, { configuration: this.updatedCell.configuration }])
this.setStylesheetCss(cell)
}
catch (err) {
console.log('error: ', err)
}
}
}
/*
async updateCellContent (value, cell, path) {
if (cell.id) {
const sourceValue = Object.assign({}, cell.source._value)
sourceValue[path] = value
cell.source.value = sourceValue
this.cell = await this.$store.dispatch('cells/patch', [cell.id, { source: cell.source }])
// await this.getCell(this.storeEditingCell)
this.$store.commit('mosys/setUpdatedCell', this.cell)
},
async setStylesheetCss (updatedCell) {
let
entries = Object.entries(updatedCell.configuration._value),
stylesheetCss = ''
for (const [key, value] of entries) {
if (key !== 'component' && typeof value !== 'object') {
let attr = this.cssAttributes[key]
if (attr) {
stylesheetCss += attr + ': ' + value + '; '
}
}
}
let cell = await this.$store.dispatch('cells/patch', [this.cell.id, { stylesheet: { value: stylesheetCss } }])
this.$store.commit('mosys/setUpdatedCell', cell)
this.updatedCell = cell
}
*/
}
}
</script>
......
......@@ -30,10 +30,12 @@
Cell,
StyleTag
},
props: ['gridUuid'],
props: {
gridUuid: String,
locked: { type: Boolean, default: false }
},
data () {
return {
locked: false,
data: {},
grid: undefined,
annotations: [],
......@@ -45,8 +47,7 @@
},
computed: {
...mapGetters({
isMobile: 'globalSettings/getIsMobile',
scrollPositionCache: 'mosys/getScrollPositionCache'
isMobile: 'globalSettings/getIsMobile'
}),
queryPositionX () {
if (this.$route.query.x) return parseInt(this.$route.query.x)
......@@ -61,19 +62,30 @@
await this.loadGrid(val)
},
queryPositionX (val) {
if (typeof val === 'number') this.scrollToGridCoordinates(val)
if (typeof val === 'number') return this.scrollToGridCoordinates(val)
},
globalTime (val) {
if (typeof val === 'string') this.broadcastDateTime(DateTime.fromISO(val, { setZone: true }))
}
},
async mounted () {
await this.loadGrid(this.$route.params.uuid)
this.$el.scrollLeft = this.scrollPositionCache
this.$q.loading.show()
try {
await this.loadGrid(this.$route.params.uuid)
}
catch (err) {
this.$handleError(this, err, 'errors.load_grid_failed')
}
this.$q.loading.hide()
},
methods: {
onScroll () {
onScroll (val) {
if (this.$route.query.x) this.$router.push({ query: {} })
if (!this.locked) {
if (val && this.data && this.data.grid) {
this.$store.commit('mosys/setScrollConfig', [this.data.grid.id, val.originalTarget.scrollLeft])
}
}
},
async loadGrid (uuid) {
this.data = await this.$store.dispatch('mosys/getGrid', uuid)
......@@ -92,10 +104,16 @@
this.styles = [this.data.grid.stylesheet.value]
}
}
this.updateGridDimensions()
await this.updateGridDimensions()
if (this.$route.query.x) this.scrollToGridCoordinates(parseInt(this.$route.query.x))
else this.scrollToGridCoordinates(0)
if (this.$route.query.x) await this.scrollToGridCoordinates(parseInt(this.$route.query.x))
else {
if (this.$store.state.mosys && this.$store.state.mosys.currentScrollConfig.id === this.data.grid.id) {
this.$refs.gridContainer.scrollTo(this.$store.state.mosys.currentScrollConfig.offset, 0)
await this.$nextTick()
}
else await this.scrollToGridCoordinates(0)
}
if (this.$route.query.datetime) this.broadcastDateTime(this.$route.query.datetime)
},
scrollToGridCoordinates (x = 0, y = 0) {
......@@ -103,6 +121,7 @@
Math.round(x * this.gridDimensions.full.cell.width),
Math.round(y * this.gridDimensions.full.cell.height)
)
return this.$nextTick()
},
broadcastDateTime (datetime) {
if (typeof datetime === 'string') datetime = DateTime.fromISO(datetime)
......@@ -167,6 +186,7 @@
}
}
*/
return this.$nextTick()
},
getAnnotationStyle (annotation) {
const parsed = annotation.target.selector._value
......
<template lang="pug">
div.cell-grid-container.bg-dark(style="overflow-y: hidden; scroll-behavior: smooth;")
div.cell-grid-container.bg-dark.scroll(style="overflow-y: hidden; scroll-behavior: smooth;" @scroll="onScroll")
q-window-resize-observable(@resize="updateGridDimensions")
//----- modal for existing cell editing
......@@ -292,7 +291,6 @@
// isMobile: 'globalSettings/getIsMobile',
// editingCells: 'mosys/getEditingCells',
showEditingCells: 'mosys/getShowEditingCells',
scrollPositionCache: 'mosys/getScrollPositionCache',
editGrid: 'mosys/getEditGrid'
}),
countColumns () {
......@@ -370,25 +368,27 @@
}
},
async mounted () {
this.data = await this.$store.dispatch('mosys/getGrid', this.gridUuid)
if (this.data && this.data.grid) {
try {
this.$q.loading.show()
try {
this.data = await this.$store.dispatch('mosys/getGrid', this.gridUuid)
if (this.data && this.data.grid) {
const acl = await this.$store.dispatch('acl/isAllowed',
{ id: this.data.grid.id, permission: 'get' })
this.mayEdit = !!(acl || {}).get
}
catch (err) {
this.$handleError(err)
}
}
if (this.mayEdit) this.$store.commit('mosys/setMayEdit', true)
else this.$store.commit('mosys/setMayEdit', false)
if (this.mayEdit) this.$store.commit('mosys/setMayEdit', true)
else this.$store.commit('mosys/setMayEdit', false)
this.updateGridDimensions()
this.resetScrollPosition()
this.updateAnnotationUIStates()
document.addEventListener('keydown', this.keyHandler)
await this.updateGridDimensions()
await this.updateAnnotationUIStates()
await this.resetScrollPosition()
document.addEventListener('keydown', this.keyHandler)
}
catch (err) {
this.$handleError(this, err, 'errors.load_grid_failed')
}
this.$q.loading.hide()
},
watch: {
cachedNewCell (obj) {
......@@ -402,54 +402,17 @@
editCellModal (val) {
if (!val) this.modal = false
},
/*
'pannedCell': {
handler: function (cursor) {
let
pannedCell = this.pannedCell,
gridRows = this.data.configuration.rows,
gridColumns = this.data.configuration.columns,
cellTop = pannedCell.y - pannedCell.offset.y - 1,
cellBottom = (pannedCell.y - pannedCell.offset.y) + pannedCell.h - 1,
cellLeft = pannedCell.x - pannedCell.offset.y - 1,
cellRight = (pannedCell.x - pannedCell.offset.x) + pannedCell.w - 1
let x
if (cellRight > gridColumns) x = gridColumns - pannedCell.w + 1
else if (cellLeft < 0) x = 0
else x = cursor.x - pannedCell.offset.x
let y
if (cellBottom > gridRows) y = gridRows - pannedCell.h + 1
else if (cellTop < 0) y = 0
else y = cursor.y - pannedCell.offset.y
if (pannedCell) {
this.setCellPosition(pannedCell.annotation, x, y)
}
},
deep: true
},
*/
/*
annotations () {
this.updateAnnotationUIStates()
},
*/
gridMetadata () {
this.updateGridDimensions()
},
async gridUuid () {
this.data = await this.$store.dispatch('mosys/getGrid', this.gridUuid)
},
showEditingCells (val) {
if (val === false) {
this.cellHandler.hidden = true
this.updateAnnotationUIStates()
return this.updateAnnotationUIStates()
}
},
tabsAreOpen () {
this.resetScrollPosition()
return this.resetScrollPosition()
}
},
beforeDestroy () {
......@@ -457,6 +420,11 @@
document.removeEventListener('mousemove', this.mouseMoveListener)
},
methods: {
onScroll (val) {
if (val && this.data && this.data.grid) {
this.$store.commit('mosys/setScrollConfig', [this.data.grid.id, val.originalTarget.scrollLeft])
}
},
toggleAxis () {
this.editingGrid.axis = !this.editingGrid.axis
},
......@@ -833,7 +801,6 @@
this.annotationUIStates[annotation._uuid].editing = !this.annotationUIStates[annotation._uuid].editing
// this.updateEditingCells()
this.$root.$emit('mosys_saveScrollPosition')
}
// set temp cell position
......@@ -853,6 +820,7 @@
this.selectedCell.annotation = annotation
this.getCellType(annotation)
}
this.$store.commit('mosys/toggleSources', true)
},
setHandlerPosition (annotation) {
let
......@@ -887,7 +855,7 @@
let
cell = await this.$store.dispatch('cells/get', annotation.body.source.id),
cellType = cell.configuration._value.component
this.selectedCell.type = cellType.substr(4, cellType.length - 4)
if (cellType) this.selectedCell.type = cellType.substr(4, cellType.length - 4)
}
},
async setCellPosition (annotation, x, y) {
......@@ -999,6 +967,7 @@
this.annotationUIStates = newAnnotationUIStates
// this.updateSelectedCells()
// this.updateEditingCells()
return this.$nextTick()
},
//
......@@ -1013,8 +982,8 @@
annotation = this.data.annotations.find(a => a.id === cachedNewCell.id),
target = this.data.grid.get2DArea([tempCell.x, tempCell.y], [tempCell.width, tempCell.height])
const
{ source, configuration } = cachedNewCell,
cell = await this.$store.dispatch('cells/post', { source, configuration })
{ source, configuration, stylesheet } = cachedNewCell,
cell = await this.$store.dispatch('cells/post', { source, configuration, stylesheet })
console.debug('Created new cell', cell ? cell.toObject() : undefined)
annotation = await this.$store.dispatch('annotations/post', {
......@@ -1030,7 +999,7 @@
console.debug('Created new cell annotation', annotation ? annotation.toObject() : undefined)
await this.$store.dispatch('acl/clone', { source: annotation.id, target: cell.id })
this.data.annotations.push(annotation)
this.updateAnnotationUIStates()
await this.updateAnnotationUIStates()
}
this.$store.commit('mosys/setSourceCellInput', undefined)
this.clearHandler('temp cell')
......@@ -1111,7 +1080,7 @@
}
this.data.configuration.columns++
await this.$store.dispatch('mosys/updateGridMetadataStore', [this.data.grid, this.data.configuration])
this.updateGridDimensions()
return this.updateGridDimensions()
},
async handleGridContextMenuDeleteColumn (pos) {
let position
......@@ -1130,7 +1099,7 @@
}
this.data.configuration.columns = Math.max(1, this.data.configuration.columns - 1)
await this.$store.dispatch('mosys/updateGridMetadataStore', [this.data.grid, this.data.configuration])
this.updateGridDimensions()
return this.updateGridDimensions()
},
async handleGridContextMenuInsertRowAbove (pos) {
let position
......@@ -1149,7 +1118,7 @@
}
this.data.configuration.rows++
await this.$store.dispatch('mosys/updateGridMetadataStore', [this.data.grid, this.data.configuration])
this.updateGridDimensions()
return this.updateGridDimensions()
},
async handleGridContextMenuDeleteRow (pos) {
let position
......@@ -1168,7 +1137,7 @@
}
this.data.configuration.rows = Math.max(1, this.data.configuration.rows - 1)
await this.$store.dispatch('mosys/updateGridMetadataStore', [this.data.grid, this.data.configuration])
this.updateGridDimensions()
return this.updateGridDimensions()
},
//
......@@ -1245,24 +1214,29 @@
}
}
}
return this.$nextTick()
},
getCellStyle (obj) {
let x, y, w, h
if (!obj) return {}
let x = 0, y = 0, w = 0, h = 0
// ----- existing cell
if (obj.id) {
if (obj.id && obj.target && obj.target.selector) {
const parsed = obj.target.selector._value
x = parsed.xywh[0]
y = parsed.xywh[1]
w = parsed.xywh[2]
h = parsed.xywh[3]
if (Array.isArray(parsed.xywh) && parsed.xywh.length === 4) {
x = parsed.xywh[0]
y = parsed.xywh[1]
w = parsed.xywh[2]
h = parsed.xywh[3]
}
}
// ----- temp cell
else {
x = obj.x
y = obj.y
w = obj.width
h = obj.height
x = obj.x || x
y = obj.y || y
w = obj.width || w
h = obj.height || h
}
return {
'grid-column-start': x,
......@@ -1294,7 +1268,11 @@
else return {}
},
resetScrollPosition () {
this.$el.scrollLeft = this.scrollPositionCache
if (this.$store.state.mosys.currentScrollConfig.id === this.data.grid.id) {
this.$el.scroll(this.$store.state.mosys.currentScrollConfig.offset, 0)
}
else this.$el.scroll(0, 0)
return this.$nextTick()
}
}
}
......
......@@ -4,7 +4,10 @@
//----------------------------------------------------------------------------------------------------- display mode
template(v-if="display")
template(v-if="video && video.body")
template(v-if="loading")
q-spinner.q-ma-sm.text-white
// strong Loading annotations
template(v-else-if="video && video.body")
//--------------------------------------------------------------------------------------------------------------
template(v-if="cell.displayType === 'tabs'")
.annotation-tabs-container.column
......@@ -56,8 +59,8 @@
@onDelete="fetchAnnotations")