FreeDATA/gui/src/components/dynamic_components2.vue

<script setup lang="ts">
import { ref, onMounted, reactive, nextTick } from "vue";
import {Modal} from "bootstrap"
import { setActivePinia } from "pinia";
import pinia from "../store/index";
setActivePinia(pinia);
import "../../node_modules/gridstack/dist/gridstack.min.css"
import { GridStack } from "gridstack";
import { settingsStore as settings } from "../store/settingsStore.js";

import hsl from "./main_active_heard_stations.vue"
import stats from "./main_active_stats.vue"
import audio from "./main_active_audio_level.vue"
import rigctl from "./main_active_rig_control.vue"
import beacon from "./main_active_broadcasts.vue"
import { stateDispatcher } from "../js/eventHandler";
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([]);

    onMounted(() => {
            grid = GridStack.init({ // DO NOT user grid.value = GridStack.init(), see above
              float: true,
              cellHeight: "70px",
              minRow: 12,
            });

            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) {
            const node = items[count.value] || { x: 0, y: 0, w: 3, h: 3 };
            node.id = 'w_'+ (count.value++);
            node.component2=componentToAdd;
            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() {
            addNewWidget2(hsl);
            addNewWidget2(stats);
            addNewWidget2(audio);
            addNewWidget2(rigctl);
            addNewWidget2(beacon);
          }
</script>

<template>
    <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">
          <button @click="remove(w)"  class="btn-close grid-stack-floaty-btn"><i style="font-size: x-small;" class="bi bi-trash3 h3"></i></button>
          <component :is="w.component2" v-bind="w" />
        </div>
      </div>
    </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" @click=addNewWidget2(hsl) class="btn btn-outline-secondary" data-bs-dismiss="modal">Heard station list</button>
        <button type="button" @click=addNewWidget2(stats) class="btn btn-outline-secondary" data-bs-dismiss="modal">Stats (waterfall, etc)</button>
        <button type="button" @click=addNewWidget2(audio) class="btn btn-outline-secondary" data-bs-dismiss="modal">Audio</button>
        <button type="button" @click=addNewWidget2(beacon) class="btn btn-outline-secondary" data-bs-dismiss="modal">Broadcasts</button>
        <button type="button" @click=addNewWidget2(rigctl) 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>
    </div>
  </div>
</div>
</template>
<style>
.grid-stack-item {

  text-align: center;
  overflow: auto;
  z-index: 50;
}
.grid-stack-floaty-btn{
position: absolute;
    right:0px;
    z-index:1000;
    float: right;
    top: 3px;
    opacity: 50%;
}
</style>