2023-11-25 06:17:45 +00:00
< script setup lang = "ts" >
2023-11-26 06:02:16 +00:00
import { ref , onMounted , reactive , nextTick , shallowRef } from "vue" ;
2023-11-25 06:18:18 +00:00
import { Modal } from "bootstrap" ;
2023-11-25 06:17:45 +00:00
import { setActivePinia } from "pinia" ;
import pinia from "../store/index" ;
setActivePinia ( pinia ) ;
2023-11-25 06:18:18 +00:00
import "../../node_modules/gridstack/dist/gridstack.min.css" ;
2023-11-25 06:17:45 +00:00
import { GridStack } from "gridstack" ;
import { settingsStore as settings } from "../store/settingsStore.js" ;
2023-11-26 03:33:30 +00:00
import active _heard _stations from "./main_active_heard_stations.vue" ;
import active _stats from "./main_active_stats.vue" ;
import active _audio _level from "./main_active_audio_level.vue" ;
import active _rig _control from "./main_active_rig_control.vue" ;
import active _broadcats from "./main_active_broadcasts.vue" ;
2023-11-25 06:17:45 +00:00
import { stateDispatcher } from "../js/eventHandler" ;
2023-11-26 06:02:16 +00:00
2023-11-25 06:17:45 +00:00
let count = ref ( 0 ) ;
let info = ref ( "" ) ;
let gridFloat = ref ( false ) ;
let color = ref ( "black" ) ;
let gridInfo = ref ( "" ) ;
let grid = null ; // DO NOT use ref(null) as proxies GS will break all logic when comparing structures... see https://github.com/gridstack/gridstack.js/issues/2115
let items = ref ( [ ] ) ;
2023-11-26 06:07:52 +00:00
class gridWidget {
2023-11-26 06:02:16 +00:00
component2 ;
size ;
text ;
constructor ( component , size , text ) {
this . component2 = component ;
this . size = size ;
this . text = text ;
}
}
const gridWidgets = [
2023-11-26 06:07:52 +00:00
new gridWidget (
active _heard _stations ,
{ x : 0 , y : 0 , w : 7 , h : 20 } ,
"Heard stations" ,
) ,
new gridWidget (
active _stats ,
{ x : 0 , y : 0 , w : 5 , h : 28 } ,
"Stats (waterfall, etc)" ,
) ,
new gridWidget ( active _audio _level , { x : 0 , y : 0 , w : 5 , h : 12 } , "Audio" ) ,
new gridWidget (
active _rig _control ,
{ x : 0 , y : 0 , w : 6 , h : 12 } ,
"Rig control" ,
) ,
new gridWidget ( active _broadcats , { x : 1 , y : 1 , w : 5 , h : 12 } , "Broadcats" ) ,
2023-11-26 06:02:16 +00:00
] ;
2023-11-25 06:18:18 +00:00
onMounted ( ( ) => {
grid = GridStack . init ( {
// DO NOT user grid.value = GridStack.init(), see above
float : true ,
2023-11-26 06:02:16 +00:00
cellHeight : "10px" ,
minRow : 50 ,
margin : 5 ,
2023-11-25 06:18:18 +00:00
} ) ;
2023-11-25 06:17:45 +00:00
2023-11-25 06:18:18 +00:00
grid . on ( "dragstop" , function ( event , element ) {
const node = element . gridstackNode ;
info . value = ` you just dragged node # ${ node . id } to ${ node . x } , ${ node . y } – good job! ` ;
} ) ;
grid . on ( "change" , onChange ) ;
// gridFloat.value = grid.float();
} ) ;
function changeFloat ( ) {
gridFloat . value = ! gridFloat . value ;
grid . float ( gridFloat . value ) ;
}
function onChange ( event , changeItems ) {
updateInfo ( ) ;
// update item position
changeItems . forEach ( ( item ) => {
var widget = items . value . find ( ( w ) => w . id == item . id ) ;
if ( ! widget ) {
alert ( "Widget not found: " + item . id ) ;
return ;
}
widget . x = item . x ;
widget . y = item . y ;
widget . w = item . w ;
widget . h = item . h ;
} ) ;
}
function addNewWidget2 ( componentToAdd ) {
2023-11-26 06:07:52 +00:00
const node = items [ count . value ] || { ... componentToAdd . size } ;
2023-11-25 06:18:18 +00:00
node . id = "w_" + count . value ++ ;
2023-11-26 06:07:52 +00:00
node . component2 = shallowRef ( { ... componentToAdd . component2 } ) ;
2023-11-25 06:18:18 +00:00
items . value . push ( node ) ;
nextTick ( ( ) => {
grid . makeWidget ( node . id ) ;
updateInfo ( ) ;
} ) ;
}
function removeLastWidget ( ) {
if ( count . value == 0 ) return ;
var id = ` w_ ${ count . value - 1 } ` ;
var index = items . value . findIndex ( ( w ) => w . id == id ) ;
if ( index < 0 ) return ;
var removed = items . value [ index ] ;
remove ( removed ) ;
}
function remove ( widget ) {
var index = items . value . findIndex ( ( w ) => w . id == widget . id ) ;
items . value . splice ( index , 1 ) ;
const selector = ` # ${ widget . id } ` ;
grid . removeWidget ( selector , false ) ;
updateInfo ( ) ;
}
function updateInfo ( ) {
color . value =
grid . engine . nodes . length == items . value . length ? "black" : "red" ;
gridInfo . value = ` Grid engine: ${ grid . engine . nodes . length } , widgets: ${ items . value . length } ` ;
}
function showModal ( ) {
new Modal ( "#tileModal" , { } ) . show ( ) ;
}
function quickfill ( ) {
2023-11-26 06:02:16 +00:00
gridWidgets . forEach ( async ( gw ) => {
await addNewWidget2 ( gw ) ;
2023-11-26 06:07:52 +00:00
} ) ;
2023-11-25 06:18:18 +00:00
}
2023-11-25 06:17:45 +00:00
< / script >
< template >
2023-11-25 06:18:18 +00:00
< button type = "button" @click ="showModal" > Add Widget pos [ 0 , 0 ] < / button >
< button type = "button" @click ="quickfill" > Quickfill < / button >
< div class = "grid-stack" >
< div
v - for = "(w, indexs) in items"
class = "grid-stack-item"
: gs - x = "w.x"
: gs - y = "w.y"
: gs - w = "w.w"
: gs - h = "w.h"
: gs - id = "w.id"
: id = "w.id"
: key = "w.id"
: gs - auto - position = "true"
>
< div class = "grid-stack-item-content" >
2023-11-26 06:07:52 +00:00
< button
@ click = "remove(w)"
class = "btn-close grid-stack-floaty-btn"
> < / button >
2023-11-26 06:02:16 +00:00
< component :is = "w.component2" / >
2023-11-25 06:17:45 +00:00
< / div >
< / div >
2023-11-25 06:18:18 +00:00
< / div >
< div class = "modal fade" id = "tileModal" tabindex = "-1" >
< div class = "modal-dialog" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title" > Add grid tile < / h5 >
< button
type = "button"
class = "btn-close"
data - bs - dismiss = "modal"
aria - label = "Close"
> < / button >
< / div >
< div class = "modal-body" >
< div
class = "btn-group"
role = "group"
aria - label = "Basic outlined example"
>
< button
type = "button"
2023-11-26 06:02:16 +00:00
@ click = "addNewWidget2(gridWidgets[0])"
2023-11-25 06:18:18 +00:00
class = "btn btn-outline-secondary"
data - bs - dismiss = "modal"
>
Heard station list
< / button >
< button
type = "button"
2023-11-26 06:02:16 +00:00
@ click = "addNewWidget2(gridWidgets[1])"
2023-11-25 06:18:18 +00:00
class = "btn btn-outline-secondary"
data - bs - dismiss = "modal"
>
Stats ( waterfall , etc )
< / button >
< button
type = "button"
2023-11-26 06:02:16 +00:00
@ click = "addNewWidget2(gridWidgets[2])"
2023-11-25 06:18:18 +00:00
class = "btn btn-outline-secondary"
data - bs - dismiss = "modal"
>
Audio
< / button >
< button
type = "button"
2023-11-26 06:02:16 +00:00
@ click = "addNewWidget2(gridWidgets[3])"
2023-11-25 06:18:18 +00:00
class = "btn btn-outline-secondary"
data - bs - dismiss = "modal"
>
Broadcasts
< / button >
< button
type = "button"
2023-11-26 06:02:16 +00:00
@ click = "addNewWidget2(gridWidgets[4])"
2023-11-25 06:18:18 +00:00
class = "btn btn-outline-secondary"
data - bs - dismiss = "modal"
>
Rig Control
< / button >
< / div >
< / div >
< div class = "modal-footer" >
< button
type = "button"
class = "btn btn-secondary"
data - bs - dismiss = "modal"
>
Close
< / button >
< button type = "button" class = "btn btn-primary" > Save changes < / button >
< / div >
2023-11-25 06:17:45 +00:00
< / div >
< / div >
< / div >
< / template >
< style >
. grid - stack - item {
text - align : center ;
overflow : auto ;
z - index : 50 ;
}
2023-11-25 06:18:18 +00:00
. grid - stack - floaty - btn {
position : absolute ;
right : 0 px ;
z - index : 1000 ;
float : right ;
top : 3 px ;
opacity : 50 % ;
2023-11-25 06:17:45 +00:00
}
2023-11-25 06:18:18 +00:00
< / style >