@twab/visualization 1.0.1 → 1.1.0
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 +87 -92
- package/package.json +1 -1
package/dist/visualization.js
CHANGED
|
@@ -2590,103 +2590,98 @@ var __vue_render__$1 = function () {
|
|
|
2590
2590
|
})
|
|
2591
2591
|
: _vm._e(),
|
|
2592
2592
|
_vm._v(" "),
|
|
2593
|
-
_c(
|
|
2594
|
-
|
|
2595
|
-
|
|
2596
|
-
|
|
2597
|
-
|
|
2598
|
-
|
|
2599
|
-
|
|
2600
|
-
|
|
2601
|
-
|
|
2602
|
-
|
|
2603
|
-
|
|
2604
|
-
|
|
2605
|
-
|
|
2606
|
-
|
|
2607
|
-
|
|
2608
|
-
display: "flex",
|
|
2609
|
-
"justify-content": "center",
|
|
2610
|
-
"padding-top": "10px",
|
|
2611
|
-
},
|
|
2612
|
-
},
|
|
2613
|
-
[_vm._v("\n " + _vm._s(_vm.$t("infoBar.gridForm")) + "\n ")]
|
|
2614
|
-
),
|
|
2615
|
-
_vm._v(" "),
|
|
2616
|
-
_c(
|
|
2617
|
-
"visualization-row",
|
|
2618
|
-
{
|
|
2619
|
-
staticClass: "visualization-row",
|
|
2620
|
-
staticStyle: { "justify-content": "center" },
|
|
2593
|
+
_c("dialog", { ref: "frames" }, [
|
|
2594
|
+
_c(
|
|
2595
|
+
"div",
|
|
2596
|
+
{
|
|
2597
|
+
staticClass: "visualization-row",
|
|
2598
|
+
staticStyle: {
|
|
2599
|
+
padding: "5px",
|
|
2600
|
+
"font-weight": "bold",
|
|
2601
|
+
"background-color": "var(--visualization-primary)",
|
|
2602
|
+
"border-color": "var(--visualization-primary)",
|
|
2603
|
+
height: "40px",
|
|
2604
|
+
color: "white",
|
|
2605
|
+
display: "flex",
|
|
2606
|
+
"justify-content": "center",
|
|
2607
|
+
"padding-top": "10px",
|
|
2621
2608
|
},
|
|
2622
|
-
|
|
2623
|
-
|
|
2624
|
-
|
|
2625
|
-
|
|
2626
|
-
|
|
2627
|
-
|
|
2628
|
-
|
|
2629
|
-
|
|
2630
|
-
|
|
2631
|
-
|
|
2632
|
-
|
|
2633
|
-
|
|
2634
|
-
|
|
2635
|
-
|
|
2636
|
-
|
|
2637
|
-
|
|
2638
|
-
|
|
2639
|
-
},
|
|
2640
|
-
on: {
|
|
2641
|
-
click: function () {
|
|
2642
|
-
return (_vm.framesValue = item.value)
|
|
2643
|
-
},
|
|
2644
|
-
},
|
|
2645
|
-
}),
|
|
2646
|
-
]
|
|
2647
|
-
)
|
|
2648
|
-
}),
|
|
2649
|
-
1
|
|
2650
|
-
),
|
|
2651
|
-
_vm._v(" "),
|
|
2652
|
-
_c("div", { staticClass: "visualization-divider" }),
|
|
2653
|
-
_vm._v(" "),
|
|
2654
|
-
_c(
|
|
2655
|
-
"div",
|
|
2656
|
-
{
|
|
2657
|
-
staticClass: "visualization-row",
|
|
2658
|
-
staticStyle: {
|
|
2659
|
-
display: "flex",
|
|
2660
|
-
"justify-content": "center",
|
|
2661
|
-
"margin-top": "10px",
|
|
2662
|
-
"margin-bottom": "10px",
|
|
2609
|
+
},
|
|
2610
|
+
[_vm._v("\n " + _vm._s(_vm.$t("infoBar.gridForm")) + "\n ")]
|
|
2611
|
+
),
|
|
2612
|
+
_vm._v(" "),
|
|
2613
|
+
_c(
|
|
2614
|
+
"div",
|
|
2615
|
+
{
|
|
2616
|
+
staticClass: "visualization-row",
|
|
2617
|
+
staticStyle: { "justify-content": "center" },
|
|
2618
|
+
},
|
|
2619
|
+
_vm._l(_vm.items, function (item, index) {
|
|
2620
|
+
return _c(
|
|
2621
|
+
"div",
|
|
2622
|
+
{
|
|
2623
|
+
key: index,
|
|
2624
|
+
staticClass: "visualization-col",
|
|
2625
|
+
staticStyle: { "min-width": "200px", "max-width": "200px" },
|
|
2663
2626
|
},
|
|
2664
|
-
|
|
2665
|
-
|
|
2666
|
-
|
|
2667
|
-
|
|
2668
|
-
|
|
2669
|
-
|
|
2670
|
-
|
|
2671
|
-
|
|
2672
|
-
width: "
|
|
2673
|
-
"background-color": "var(--visualization-primary)",
|
|
2674
|
-
"border-color": "var(--visualization-primary)",
|
|
2675
|
-
color: "white",
|
|
2627
|
+
[
|
|
2628
|
+
_c("img", {
|
|
2629
|
+
style:
|
|
2630
|
+
_vm.framesValue !== item.value
|
|
2631
|
+
? "filter: grayscale(1)"
|
|
2632
|
+
: "",
|
|
2633
|
+
attrs: {
|
|
2634
|
+
src: "data:image/svg+xml;base64," + item.image,
|
|
2635
|
+
width: "100%",
|
|
2676
2636
|
},
|
|
2677
2637
|
on: {
|
|
2678
|
-
click: function (
|
|
2679
|
-
return _vm
|
|
2638
|
+
click: function () {
|
|
2639
|
+
return (_vm.framesValue = item.value)
|
|
2680
2640
|
},
|
|
2681
2641
|
},
|
|
2642
|
+
}),
|
|
2643
|
+
]
|
|
2644
|
+
)
|
|
2645
|
+
}),
|
|
2646
|
+
0
|
|
2647
|
+
),
|
|
2648
|
+
_vm._v(" "),
|
|
2649
|
+
_c("div", { staticClass: "visualization-divider" }),
|
|
2650
|
+
_vm._v(" "),
|
|
2651
|
+
_c(
|
|
2652
|
+
"div",
|
|
2653
|
+
{
|
|
2654
|
+
staticClass: "visualization-row",
|
|
2655
|
+
staticStyle: {
|
|
2656
|
+
display: "flex",
|
|
2657
|
+
"justify-content": "center",
|
|
2658
|
+
"margin-top": "10px",
|
|
2659
|
+
"margin-bottom": "10px",
|
|
2660
|
+
},
|
|
2661
|
+
},
|
|
2662
|
+
[
|
|
2663
|
+
_c(
|
|
2664
|
+
"button",
|
|
2665
|
+
{
|
|
2666
|
+
staticStyle: {
|
|
2667
|
+
"border-radius": "4px",
|
|
2668
|
+
height: "35px",
|
|
2669
|
+
width: "70px",
|
|
2670
|
+
"background-color": "var(--visualization-primary)",
|
|
2671
|
+
"border-color": "var(--visualization-primary)",
|
|
2672
|
+
color: "white",
|
|
2682
2673
|
},
|
|
2683
|
-
|
|
2684
|
-
|
|
2685
|
-
|
|
2686
|
-
|
|
2687
|
-
|
|
2688
|
-
|
|
2689
|
-
)
|
|
2674
|
+
on: {
|
|
2675
|
+
click: function ($event) {
|
|
2676
|
+
return _vm.$emit("close", "frames")
|
|
2677
|
+
},
|
|
2678
|
+
},
|
|
2679
|
+
},
|
|
2680
|
+
[_vm._v("\n Ok\n ")]
|
|
2681
|
+
),
|
|
2682
|
+
]
|
|
2683
|
+
),
|
|
2684
|
+
]),
|
|
2690
2685
|
_vm._v(" "),
|
|
2691
2686
|
_c("dialog", { ref: "secondsPerFrame" }, [
|
|
2692
2687
|
_c(
|
|
@@ -3024,11 +3019,11 @@ __vue_render__$1._withStripped = true;
|
|
|
3024
3019
|
/* style */
|
|
3025
3020
|
const __vue_inject_styles__$1 = function (inject) {
|
|
3026
3021
|
if (!inject) return
|
|
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 });
|
|
3022
|
+
inject("data-v-9c5e6ad0_0", { source: "\ndialog[data-v-9c5e6ad0] {\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-9c5e6ad0] {\r\n display: flex;\r\n flex-wrap: wrap;\r\n flex: 1 1 auto;\n}\n.visualization-col[data-v-9c5e6ad0] {\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":";AAmZA;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 <div class=\"visualization-row\" style=\"justify-content: center\">\r\n <div\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 </div>\r\n </div>\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
3023
|
|
|
3029
3024
|
};
|
|
3030
3025
|
/* scoped */
|
|
3031
|
-
const __vue_scope_id__$1 = "data-v-
|
|
3026
|
+
const __vue_scope_id__$1 = "data-v-9c5e6ad0";
|
|
3032
3027
|
/* module identifier */
|
|
3033
3028
|
const __vue_module_identifier__$1 = undefined;
|
|
3034
3029
|
/* functional template */
|