@twab/visualization 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/visualization.js +4 -4
- package/package.json +1 -1
package/dist/visualization.js
CHANGED
|
@@ -2614,14 +2614,14 @@ var __vue_render__$1 = function () {
|
|
|
2614
2614
|
),
|
|
2615
2615
|
_vm._v(" "),
|
|
2616
2616
|
_c(
|
|
2617
|
-
"
|
|
2617
|
+
"visualization-row",
|
|
2618
2618
|
{
|
|
2619
2619
|
staticClass: "visualization-row",
|
|
2620
2620
|
staticStyle: { "justify-content": "center" },
|
|
2621
2621
|
},
|
|
2622
2622
|
_vm._l(_vm.items, function (item, index) {
|
|
2623
2623
|
return _c(
|
|
2624
|
-
"
|
|
2624
|
+
"visualization-col",
|
|
2625
2625
|
{
|
|
2626
2626
|
key: index,
|
|
2627
2627
|
staticClass: "visualization-col",
|
|
@@ -3024,11 +3024,11 @@ __vue_render__$1._withStripped = true;
|
|
|
3024
3024
|
/* style */
|
|
3025
3025
|
const __vue_inject_styles__$1 = function (inject) {
|
|
3026
3026
|
if (!inject) return
|
|
3027
|
-
inject("data-v-29b1922f_0", { source: "\ndialog[data-v-29b1922f] {\r\n max-width: 60vw;\r\n /* padding: 12px; */\r\n border: none;\r\n background: white;\r\n border-radius: 6px;\r\n box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\r\n 0 1px 5px 0 rgba(0, 0, 0, 0.12);\r\n position: fixed;\r\n top: 50%;\r\n left: 50%;\r\n transform: translateY(-50%) translateX(-50%);\n}\r\n", map: {"version":3,"sources":["C:\\workspace\\visualization\\src\\components\\Settings.vue"],"names":[],"mappings":";AAmZA;EACA,eAAA;EACA,mBAAA;EACA,YAAA;EACA,iBAAA;EACA,kBAAA;EACA;mCACA;EACA,eAAA;EACA,QAAA;EACA,SAAA;EACA,4CAAA;AACA","file":"Settings.vue","sourcesContent":["<template>\r\n <div>\r\n <GlobalEvents\r\n v-if=\"dialogsVisibility.frames\"\r\n @keydown.37=\"prevFormat\"\r\n @keydown.39=\"nextFormat\"\r\n />\r\n <!-- Formato da grelha -->\r\n <dialog ref=\"frames\">\r\n <div\r\n class=\"visualization-row\"\r\n style=\"\r\n padding: 5px;\r\n font-weight: bold;\r\n background-color: var(--visualization-primary);\r\n border-color: var(--visualization-primary);\r\n height: 40px;\r\n color: white;\r\n display: flex;\r\n justify-content: center;\r\n padding-top: 10px;\r\n \"\r\n >\r\n {{ $t('infoBar.gridForm') }}\r\n </div>\r\n <v-row class=\"visualization-row\" style=\"justify-content: center\">\r\n <v-col\r\n v-for=\"(item, index) in items\"\r\n :key=\"index\"\r\n class=\"visualization-col\"\r\n style=\"min-width: 200px; max-width: 200px\"\r\n >\r\n <img\r\n @click=\"() => (framesValue = item.value)\"\r\n :src=\"`data:image/svg+xml;base64,${item.image}`\"\r\n width=\"100%\"\r\n :style=\"framesValue !== item.value ? 'filter: grayscale(1)' : ''\"\r\n />\r\n </v-col>\r\n </v-row>\r\n <div class=\"visualization-divider\" />\r\n <div\r\n class=\"visualization-row\"\r\n style=\"\r\n display: flex;\r\n justify-content: center;\r\n margin-top: 10px;\r\n margin-bottom: 10px;\r\n \"\r\n >\r\n <button\r\n style=\"\r\n border-radius: 4px;\r\n height: 35px;\r\n width: 70px;\r\n background-color: var(--visualization-primary);\r\n border-color: var(--visualization-primary);\r\n color: white;\r\n \"\r\n @click=\"$emit('close', 'frames')\"\r\n >\r\n Ok\r\n </button>\r\n </div>\r\n </dialog>\r\n\r\n <!-- Frequencia das Imagens -->\r\n <dialog ref=\"secondsPerFrame\">\r\n <div\r\n class=\"visualization-row\"\r\n style=\"\r\n padding: 5px;\r\n font-weight: bold;\r\n background-color: var(--visualization-primary);\r\n border-color: var(--visualization-primary);\r\n height: 40px;\r\n color: white;\r\n display: flex;\r\n justify-content: center;\r\n padding-top: 10px;\r\n \"\r\n >\r\n {{ $t('infoBar.secondImage') }}\r\n </div>\r\n <div class=\"visualization-row\" style=\"margin: 25px; height: 20px\">\r\n <input\r\n ref=\"secondsPerFrameInput\"\r\n v-model=\"secondsPerFrameValue\"\r\n type=\"range\"\r\n step=\"1\"\r\n max=\"5\"\r\n min=\"1\"\r\n style=\"height: 30px; width: 300px\"\r\n />\r\n <span style=\"padding-left: 20px; font-size: 16px\">\r\n {{ secondsPerFrame + ' s' }}</span\r\n >\r\n </div>\r\n <div class=\"visualization-divider\" style=\"margin: 10px\" />\r\n <div\r\n class=\"visualization-row\"\r\n style=\"display: flex; justify-content: center; margin-top: 10px\"\r\n >\r\n <button\r\n style=\"\r\n border-radius: 4px;\r\n height: 35px;\r\n width: 70px;\r\n background-color: var(--visualization-primary);\r\n border-color: var(--visualization-primary);\r\n color: white;\r\n margin-bottom: 8px;\r\n \"\r\n @click=\"$emit('close', 'secondsPerFrame')\"\r\n >\r\n Ok\r\n </button>\r\n </div>\r\n </dialog>\r\n\r\n <!-- Go To -->\r\n <dialog ref=\"goTo\">\r\n <div\r\n style=\"\r\n padding: 5px;\r\n font-weight: bold;\r\n background-color: var(--visualization-primary);\r\n border-color: var(--visualization-primary);\r\n height: 35px;\r\n color: white;\r\n display: flex;\r\n justify-content: center;\r\n padding-top: 8px;\r\n \"\r\n >\r\n {{ $t('infoBar.goTo') }}\r\n </div>\r\n <div class=\"visualization-row\" style=\"margin: 25px; height: 20px\">\r\n <input\r\n v-model=\"goToValue\"\r\n type=\"text\"\r\n placeholder=\"hh:mm:ss\"\r\n v-mask=\"'##:##:##'\"\r\n style=\"\r\n height: 30px;\r\n width: 300px;\r\n border: 0.1px solid #c2c9d6;\r\n border-radius: 3px;\r\n padding: 5px;\r\n \"\r\n />\r\n </div>\r\n <div class=\"visualization-divider\" style=\"margin-top: 40px\" />\r\n <div\r\n class=\"visualization-row\"\r\n style=\"\r\n display: flex;\r\n justify-content: center;\r\n margin-top: 10px;\r\n margin-bottom: 10px;\r\n \"\r\n >\r\n <button\r\n style=\"\r\n border-radius: 4px;\r\n height: 35px;\r\n width: 70px;\r\n background-color: var(--visualization-primary);\r\n border-color: var(--visualization-primary);\r\n color: white;\r\n \"\r\n @click=\"\r\n () => {\r\n $emit('close', 'goTo')\r\n $emit('change-go-to', goToValue)\r\n goToValue = ''\r\n }\r\n \"\r\n >\r\n Ok\r\n </button>\r\n </div>\r\n </dialog>\r\n\r\n <!-- Velocidade Reprodução -->\r\n <GlobalEvents\r\n @keydown.107=\"changePlaybackRate(1)\"\r\n @keydown.109=\"changePlaybackRate(-1)\"\r\n />\r\n <dialog ref=\"playbackRate\">\r\n <div\r\n class=\"visualization-row\"\r\n style=\"\r\n padding: 5px;\r\n font-weight: bold;\r\n background-color: var(--visualization-primary);\r\n border-color: var(--visualization-primary);\r\n height: 35px;\r\n color: white;\r\n display: flex;\r\n justify-content: center;\r\n padding-top: 8px;\r\n \"\r\n >\r\n {{ $t('infoBar.playbackSpeed') }}\r\n </div>\r\n <div\r\n class=\"visualization-row\"\r\n style=\"margin: 25px; height: 20px; width: 380px\"\r\n >\r\n <input\r\n ref=\"playbackRateInput\"\r\n v-model=\"playbackRateValue\"\r\n type=\"range\"\r\n step=\"0.25\"\r\n max=\"3\"\r\n min=\"1\"\r\n style=\"height: 30px; width: 300px\"\r\n />\r\n <span\r\n style=\"padding-left: 20px; padding-right: 20px; font-size: 16px\"\r\n >{{ playbackRate + 'x' }}</span\r\n >\r\n </div>\r\n <div class=\"visualization-divider\" style=\"margin-top: 40px\" />\r\n <div\r\n class=\"visualization-row\"\r\n style=\"\r\n display: flex;\r\n justify-content: center;\r\n margin-top: 10px;\r\n margin-bottom: 10px;\r\n \"\r\n >\r\n <button\r\n @click=\"$emit('close', 'playbackRate')\"\r\n style=\"\r\n border-radius: 4px;\r\n height: 35px;\r\n width: 70px;\r\n background-color: var(--visualization-primary);\r\n border-color: var(--visualization-primary);\r\n color: white;\r\n \"\r\n >\r\n Ok\r\n </button>\r\n </div>\r\n </dialog>\r\n </div>\r\n</template>\r\n<script>\r\nimport GridImages from '../assets/grid/index.js'\r\n\r\nexport default {\r\n props: {\r\n dialogsVisibility: {\r\n type: Object,\r\n required: false,\r\n },\r\n playbackRate: {\r\n type: Number,\r\n required: true,\r\n },\r\n secondsPerFrame: {\r\n type: Number,\r\n required: true,\r\n },\r\n framesPerRow: {\r\n type: Number,\r\n required: true,\r\n },\r\n numberOfRows: {\r\n type: Number,\r\n required: true,\r\n },\r\n },\r\n data() {\r\n return {\r\n openBlocksDialog: false,\r\n time: '',\r\n rangeBlocks: {\r\n ini: null,\r\n end: null,\r\n date: null,\r\n },\r\n items: [\r\n { text: '2x1', value: 1, image: GridImages['2x1'] },\r\n { text: '3x1', value: 2, image: GridImages['3x1'] },\r\n { text: '3x2', value: 3, image: GridImages['3x2'] },\r\n { text: '4x1', value: 4, image: GridImages['4x1'] },\r\n { text: '4x2', value: 5, image: GridImages['4x2'] },\r\n { text: '5x1', value: 6, image: GridImages['5x1'] },\r\n { text: '5x2', value: 7, image: GridImages['5x2'] },\r\n { text: '6x1', value: 8, image: GridImages['6x1'] },\r\n { text: '6x2', value: 9, image: GridImages['6x2'] },\r\n ],\r\n\r\n // NEW\r\n goToValue: '',\r\n }\r\n },\r\n mounted() {\r\n this.toogleDialogs()\r\n },\r\n computed: {\r\n secondsPerFrameValue: {\r\n get() {\r\n return this.secondsPerFrame\r\n },\r\n set(val) {\r\n this.$emit('change-seconds-per-frame', parseInt(val))\r\n },\r\n },\r\n playbackRateValue: {\r\n get() {\r\n return this.playbackRate\r\n },\r\n set(val) {\r\n this.$emit('change-playback-rate', parseFloat(val))\r\n },\r\n },\r\n framesValue: {\r\n get() {\r\n return this.items.find(\r\n (item) => item.text === `${this.framesPerRow}x${this.numberOfRows}`\r\n ).value\r\n },\r\n set(value) {\r\n this.$emit('set-frames-selection', value)\r\n },\r\n },\r\n timeRules() {\r\n return [\r\n (time) =>\r\n (time >= '02:30:00' && time <= '26:29:59') ||\r\n this.$i18n.t('form.mustBeBetween'),\r\n ]\r\n },\r\n },\r\n methods: {\r\n toogleDialogs() {\r\n for (const dialog of Object.values(this.$refs)) {\r\n dialog.close?.()\r\n }\r\n\r\n const openDialog = Object.keys(this.dialogsVisibility).find(\r\n (key) => this.dialogsVisibility[key]\r\n )\r\n\r\n if (openDialog) {\r\n this.$refs[openDialog].showModal()\r\n }\r\n },\r\n prevFormat() {\r\n if (this.items.find((format) => format.value === this.framesValue - 1)) {\r\n this.framesValue--\r\n }\r\n },\r\n nextFormat() {\r\n if (this.items.find((format) => format.value === this.framesValue + 1)) {\r\n this.framesValue++\r\n }\r\n },\r\n changePlaybackRate(direction = 1) {\r\n if (direction === 1) {\r\n this.$refs.playbackRateInput.stepUp()\r\n } else if (direction === -1) {\r\n this.$refs.playbackRateInput.stepDown()\r\n }\r\n this.playbackRateValue = this.$refs.playbackRateInput.value\r\n },\r\n closeBlocksDialog() {\r\n Object.entries(this.rangeBlocks).forEach(([key, value]) => {\r\n if (!value || key == 'date') return\r\n var res = value.replace(/\\D/g, '')\r\n if (res.length < 6) {\r\n for (let i = res.length; i < 6; i++) {\r\n res += '0'\r\n }\r\n }\r\n res.match(/.{1,2}/g)\r\n let a = res.substring(0, 2)\r\n let b = res.substring(2, 4)\r\n let c = res.substring(4, 6)\r\n this.rangeBlocks[key] = a + ':' + b + ':' + c\r\n })\r\n\r\n this.openBlocksDialog = false\r\n this.$emit('goToBlockInterval', this.rangeBlocks)\r\n },\r\n },\r\n watch: {\r\n dialogsVisibility: {\r\n handler() {\r\n this.toogleDialogs()\r\n },\r\n deep: true,\r\n },\r\n },\r\n}\r\n</script>\r\n<style scoped>\r\ndialog {\r\n max-width: 60vw;\r\n /* padding: 12px; */\r\n border: none;\r\n background: white;\r\n border-radius: 6px;\r\n box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\r\n 0 1px 5px 0 rgba(0, 0, 0, 0.12);\r\n position: fixed;\r\n top: 50%;\r\n left: 50%;\r\n transform: translateY(-50%) translateX(-50%);\r\n}\r\n</style>\r\n"]}, media: undefined });
|
|
3027
|
+
inject("data-v-8016888e_0", { source: "\ndialog[data-v-8016888e] {\r\n max-width: 60vw;\r\n /* padding: 12px; */\r\n border: none;\r\n background: white;\r\n border-radius: 6px;\r\n box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\r\n 0 1px 5px 0 rgba(0, 0, 0, 0.12);\r\n position: fixed;\r\n top: 50%;\r\n left: 50%;\r\n transform: translateY(-50%) translateX(-50%);\n}\n.visualization-row[data-v-8016888e] {\r\n display: flex;\r\n flex-wrap: wrap;\r\n flex: 1 1 auto;\n}\n.visualization-col[data-v-8016888e] {\r\n flex-basis: 0;\r\n flex-grow: 1;\r\n max-width: 100%;\r\n padding: 12px;\n}\r\n", map: {"version":3,"sources":["C:\\workspace\\visualization\\src\\components\\Settings.vue"],"names":[],"mappings":";AAsZA;EACA,eAAA;EACA,mBAAA;EACA,YAAA;EACA,iBAAA;EACA,kBAAA;EACA;mCACA;EACA,eAAA;EACA,QAAA;EACA,SAAA;EACA,4CAAA;AACA;AACA;EACA,aAAA;EACA,eAAA;EACA,cAAA;AACA;AAEA;EACA,aAAA;EACA,YAAA;EACA,eAAA;EACA,aAAA;AACA","file":"Settings.vue","sourcesContent":["<template>\r\n <div>\r\n <GlobalEvents\r\n v-if=\"dialogsVisibility.frames\"\r\n @keydown.37=\"prevFormat\"\r\n @keydown.39=\"nextFormat\"\r\n />\r\n <!-- Formato da grelha -->\r\n <dialog ref=\"frames\">\r\n <div\r\n class=\"visualization-row\"\r\n style=\"\r\n padding: 5px;\r\n font-weight: bold;\r\n background-color: var(--visualization-primary);\r\n border-color: var(--visualization-primary);\r\n height: 40px;\r\n color: white;\r\n display: flex;\r\n justify-content: center;\r\n padding-top: 10px;\r\n \"\r\n >\r\n {{ $t('infoBar.gridForm') }}\r\n </div>\r\n <visualization-row\r\n class=\"visualization-row\"\r\n style=\"justify-content: center\"\r\n >\r\n <visualization-col\r\n v-for=\"(item, index) in items\"\r\n :key=\"index\"\r\n class=\"visualization-col\"\r\n style=\"min-width: 200px; max-width: 200px\"\r\n >\r\n <img\r\n @click=\"() => (framesValue = item.value)\"\r\n :src=\"`data:image/svg+xml;base64,${item.image}`\"\r\n width=\"100%\"\r\n :style=\"framesValue !== item.value ? 'filter: grayscale(1)' : ''\"\r\n />\r\n </visualization-col>\r\n </visualization-row>\r\n <div class=\"visualization-divider\" />\r\n <div\r\n class=\"visualization-row\"\r\n style=\"\r\n display: flex;\r\n justify-content: center;\r\n margin-top: 10px;\r\n margin-bottom: 10px;\r\n \"\r\n >\r\n <button\r\n style=\"\r\n border-radius: 4px;\r\n height: 35px;\r\n width: 70px;\r\n background-color: var(--visualization-primary);\r\n border-color: var(--visualization-primary);\r\n color: white;\r\n \"\r\n @click=\"$emit('close', 'frames')\"\r\n >\r\n Ok\r\n </button>\r\n </div>\r\n </dialog>\r\n\r\n <!-- Frequencia das Imagens -->\r\n <dialog ref=\"secondsPerFrame\">\r\n <div\r\n class=\"visualization-row\"\r\n style=\"\r\n padding: 5px;\r\n font-weight: bold;\r\n background-color: var(--visualization-primary);\r\n border-color: var(--visualization-primary);\r\n height: 40px;\r\n color: white;\r\n display: flex;\r\n justify-content: center;\r\n padding-top: 10px;\r\n \"\r\n >\r\n {{ $t('infoBar.secondImage') }}\r\n </div>\r\n <div class=\"visualization-row\" style=\"margin: 25px; height: 20px\">\r\n <input\r\n ref=\"secondsPerFrameInput\"\r\n v-model=\"secondsPerFrameValue\"\r\n type=\"range\"\r\n step=\"1\"\r\n max=\"5\"\r\n min=\"1\"\r\n style=\"height: 30px; width: 300px\"\r\n />\r\n <span style=\"padding-left: 20px; font-size: 16px\">\r\n {{ secondsPerFrame + ' s' }}</span\r\n >\r\n </div>\r\n <div class=\"visualization-divider\" style=\"margin: 10px\" />\r\n <div\r\n class=\"visualization-row\"\r\n style=\"display: flex; justify-content: center; margin-top: 10px\"\r\n >\r\n <button\r\n style=\"\r\n border-radius: 4px;\r\n height: 35px;\r\n width: 70px;\r\n background-color: var(--visualization-primary);\r\n border-color: var(--visualization-primary);\r\n color: white;\r\n margin-bottom: 8px;\r\n \"\r\n @click=\"$emit('close', 'secondsPerFrame')\"\r\n >\r\n Ok\r\n </button>\r\n </div>\r\n </dialog>\r\n\r\n <!-- Go To -->\r\n <dialog ref=\"goTo\">\r\n <div\r\n style=\"\r\n padding: 5px;\r\n font-weight: bold;\r\n background-color: var(--visualization-primary);\r\n border-color: var(--visualization-primary);\r\n height: 35px;\r\n color: white;\r\n display: flex;\r\n justify-content: center;\r\n padding-top: 8px;\r\n \"\r\n >\r\n {{ $t('infoBar.goTo') }}\r\n </div>\r\n <div class=\"visualization-row\" style=\"margin: 25px; height: 20px\">\r\n <input\r\n v-model=\"goToValue\"\r\n type=\"text\"\r\n placeholder=\"hh:mm:ss\"\r\n v-mask=\"'##:##:##'\"\r\n style=\"\r\n height: 30px;\r\n width: 300px;\r\n border: 0.1px solid #c2c9d6;\r\n border-radius: 3px;\r\n padding: 5px;\r\n \"\r\n />\r\n </div>\r\n <div class=\"visualization-divider\" style=\"margin-top: 40px\" />\r\n <div\r\n class=\"visualization-row\"\r\n style=\"\r\n display: flex;\r\n justify-content: center;\r\n margin-top: 10px;\r\n margin-bottom: 10px;\r\n \"\r\n >\r\n <button\r\n style=\"\r\n border-radius: 4px;\r\n height: 35px;\r\n width: 70px;\r\n background-color: var(--visualization-primary);\r\n border-color: var(--visualization-primary);\r\n color: white;\r\n \"\r\n @click=\"\r\n () => {\r\n $emit('close', 'goTo')\r\n $emit('change-go-to', goToValue)\r\n goToValue = ''\r\n }\r\n \"\r\n >\r\n Ok\r\n </button>\r\n </div>\r\n </dialog>\r\n\r\n <!-- Velocidade Reprodução -->\r\n <GlobalEvents\r\n @keydown.107=\"changePlaybackRate(1)\"\r\n @keydown.109=\"changePlaybackRate(-1)\"\r\n />\r\n <dialog ref=\"playbackRate\">\r\n <div\r\n class=\"visualization-row\"\r\n style=\"\r\n padding: 5px;\r\n font-weight: bold;\r\n background-color: var(--visualization-primary);\r\n border-color: var(--visualization-primary);\r\n height: 35px;\r\n color: white;\r\n display: flex;\r\n justify-content: center;\r\n padding-top: 8px;\r\n \"\r\n >\r\n {{ $t('infoBar.playbackSpeed') }}\r\n </div>\r\n <div\r\n class=\"visualization-row\"\r\n style=\"margin: 25px; height: 20px; width: 380px\"\r\n >\r\n <input\r\n ref=\"playbackRateInput\"\r\n v-model=\"playbackRateValue\"\r\n type=\"range\"\r\n step=\"0.25\"\r\n max=\"3\"\r\n min=\"1\"\r\n style=\"height: 30px; width: 300px\"\r\n />\r\n <span\r\n style=\"padding-left: 20px; padding-right: 20px; font-size: 16px\"\r\n >{{ playbackRate + 'x' }}</span\r\n >\r\n </div>\r\n <div class=\"visualization-divider\" style=\"margin-top: 40px\" />\r\n <div\r\n class=\"visualization-row\"\r\n style=\"\r\n display: flex;\r\n justify-content: center;\r\n margin-top: 10px;\r\n margin-bottom: 10px;\r\n \"\r\n >\r\n <button\r\n @click=\"$emit('close', 'playbackRate')\"\r\n style=\"\r\n border-radius: 4px;\r\n height: 35px;\r\n width: 70px;\r\n background-color: var(--visualization-primary);\r\n border-color: var(--visualization-primary);\r\n color: white;\r\n \"\r\n >\r\n Ok\r\n </button>\r\n </div>\r\n </dialog>\r\n </div>\r\n</template>\r\n<script>\r\nimport GridImages from '../assets/grid/index.js'\r\n\r\nexport default {\r\n props: {\r\n dialogsVisibility: {\r\n type: Object,\r\n required: false,\r\n },\r\n playbackRate: {\r\n type: Number,\r\n required: true,\r\n },\r\n secondsPerFrame: {\r\n type: Number,\r\n required: true,\r\n },\r\n framesPerRow: {\r\n type: Number,\r\n required: true,\r\n },\r\n numberOfRows: {\r\n type: Number,\r\n required: true,\r\n },\r\n },\r\n data() {\r\n return {\r\n openBlocksDialog: false,\r\n time: '',\r\n rangeBlocks: {\r\n ini: null,\r\n end: null,\r\n date: null,\r\n },\r\n items: [\r\n { text: '2x1', value: 1, image: GridImages['2x1'] },\r\n { text: '3x1', value: 2, image: GridImages['3x1'] },\r\n { text: '3x2', value: 3, image: GridImages['3x2'] },\r\n { text: '4x1', value: 4, image: GridImages['4x1'] },\r\n { text: '4x2', value: 5, image: GridImages['4x2'] },\r\n { text: '5x1', value: 6, image: GridImages['5x1'] },\r\n { text: '5x2', value: 7, image: GridImages['5x2'] },\r\n { text: '6x1', value: 8, image: GridImages['6x1'] },\r\n { text: '6x2', value: 9, image: GridImages['6x2'] },\r\n ],\r\n\r\n // NEW\r\n goToValue: '',\r\n }\r\n },\r\n mounted() {\r\n this.toogleDialogs()\r\n },\r\n computed: {\r\n secondsPerFrameValue: {\r\n get() {\r\n return this.secondsPerFrame\r\n },\r\n set(val) {\r\n this.$emit('change-seconds-per-frame', parseInt(val))\r\n },\r\n },\r\n playbackRateValue: {\r\n get() {\r\n return this.playbackRate\r\n },\r\n set(val) {\r\n this.$emit('change-playback-rate', parseFloat(val))\r\n },\r\n },\r\n framesValue: {\r\n get() {\r\n return this.items.find(\r\n (item) => item.text === `${this.framesPerRow}x${this.numberOfRows}`\r\n ).value\r\n },\r\n set(value) {\r\n this.$emit('set-frames-selection', value)\r\n },\r\n },\r\n timeRules() {\r\n return [\r\n (time) =>\r\n (time >= '02:30:00' && time <= '26:29:59') ||\r\n this.$i18n.t('form.mustBeBetween'),\r\n ]\r\n },\r\n },\r\n methods: {\r\n toogleDialogs() {\r\n for (const dialog of Object.values(this.$refs)) {\r\n dialog.close?.()\r\n }\r\n\r\n const openDialog = Object.keys(this.dialogsVisibility).find(\r\n (key) => this.dialogsVisibility[key]\r\n )\r\n\r\n if (openDialog) {\r\n this.$refs[openDialog].showModal()\r\n }\r\n },\r\n prevFormat() {\r\n if (this.items.find((format) => format.value === this.framesValue - 1)) {\r\n this.framesValue--\r\n }\r\n },\r\n nextFormat() {\r\n if (this.items.find((format) => format.value === this.framesValue + 1)) {\r\n this.framesValue++\r\n }\r\n },\r\n changePlaybackRate(direction = 1) {\r\n if (direction === 1) {\r\n this.$refs.playbackRateInput.stepUp()\r\n } else if (direction === -1) {\r\n this.$refs.playbackRateInput.stepDown()\r\n }\r\n this.playbackRateValue = this.$refs.playbackRateInput.value\r\n },\r\n closeBlocksDialog() {\r\n Object.entries(this.rangeBlocks).forEach(([key, value]) => {\r\n if (!value || key == 'date') return\r\n var res = value.replace(/\\D/g, '')\r\n if (res.length < 6) {\r\n for (let i = res.length; i < 6; i++) {\r\n res += '0'\r\n }\r\n }\r\n res.match(/.{1,2}/g)\r\n let a = res.substring(0, 2)\r\n let b = res.substring(2, 4)\r\n let c = res.substring(4, 6)\r\n this.rangeBlocks[key] = a + ':' + b + ':' + c\r\n })\r\n\r\n this.openBlocksDialog = false\r\n this.$emit('goToBlockInterval', this.rangeBlocks)\r\n },\r\n },\r\n watch: {\r\n dialogsVisibility: {\r\n handler() {\r\n this.toogleDialogs()\r\n },\r\n deep: true,\r\n },\r\n },\r\n}\r\n</script>\r\n<style scoped>\r\ndialog {\r\n max-width: 60vw;\r\n /* padding: 12px; */\r\n border: none;\r\n background: white;\r\n border-radius: 6px;\r\n box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\r\n 0 1px 5px 0 rgba(0, 0, 0, 0.12);\r\n position: fixed;\r\n top: 50%;\r\n left: 50%;\r\n transform: translateY(-50%) translateX(-50%);\r\n}\r\n.visualization-row {\r\n display: flex;\r\n flex-wrap: wrap;\r\n flex: 1 1 auto;\r\n}\r\n\r\n.visualization-col {\r\n flex-basis: 0;\r\n flex-grow: 1;\r\n max-width: 100%;\r\n padding: 12px;\r\n}\r\n</style>\r\n"]}, media: undefined });
|
|
3028
3028
|
|
|
3029
3029
|
};
|
|
3030
3030
|
/* scoped */
|
|
3031
|
-
const __vue_scope_id__$1 = "data-v-
|
|
3031
|
+
const __vue_scope_id__$1 = "data-v-8016888e";
|
|
3032
3032
|
/* module identifier */
|
|
3033
3033
|
const __vue_module_identifier__$1 = undefined;
|
|
3034
3034
|
/* functional template */
|