@golstats/gsc-reports 1.0.0

package/src/components/template-report-maker/ReportView.vue

@@ -0,0 +1,66 @@
+<script setup>
+const props = defineProps({
+  title: {
+    type: String,
+    default: 'Item name'
+  },
+  isEmpty: {
+    type: Boolean,
+    default: false
+  },
+  isRival: {
+    type: Boolean,
+    default: false
+  }
+})
+</script>
+
+<template>
+  <div class="report-view">
+    <div class="report-view__header">
+      <div class="report-view__header__name">
+        {{ title }}
+      </div>
+      <div role="button" class="report-view__header__actions">
+        <svg width="17" height="13" viewBox="0 0 17 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M3.56953 6.28672C3.56953 7.19972 2.83253 7.93672 1.91953 7.93672C1.00653 7.93672 0.269531 7.19972 0.269531 6.28672C0.269531 5.37372 1.00653 4.63672 1.91953 4.63672C2.83253 4.63672 3.56953 5.37372 3.56953 6.28672ZM8.51953 4.63672C7.60653 4.63672 6.86953 5.37372 6.86953 6.28672C6.86953 7.19972 7.60653 7.93672 8.51953 7.93672C9.43253 7.93672 10.1695 7.19972 10.1695 6.28672C10.1695 5.37372 9.43253 4.63672 8.51953 4.63672ZM15.1195 4.63672C14.2065 4.63672 13.4695 5.37372 13.4695 6.28672C13.4695 7.19972 14.2065 7.93672 15.1195 7.93672C16.0325 7.93672 16.7695 7.19972 16.7695 6.28672C16.7695 5.37372 16.0325 4.63672 15.1195 4.63672Z" fill="white"/>
+        </svg>
+      </div>
+    </div>
+    <div class="report-view__content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.report-view {
+  height: 100%;
+  width: 100%;
+  border-radius: 5px;
+  background-color: #1D2A35;
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    border-bottom: solid 1.1px rgba(255, 255, 255, 0.2);
+    padding: 0 16px;
+
+    &__name {
+      font-family: Poppins-Medium, sans-serif;
+      font-size: 12px;
+      font-weight: 500;
+      font-stretch: normal;
+      font-style: normal;
+      line-height: normal;
+      letter-spacing: normal;
+      text-align: left;
+      color: #fff;
+    }
+
+    &__actions {
+      cursor: pointer;
+    }
+  }
+}
+</style>

package/src/components/template-report-maker/TemplateReportPage.vue

@@ -0,0 +1,398 @@
+<script setup lang="ts">
+import '@@/@golstats/gsc-volumetric-field/dist/gsc-volumetric-field.css'
+import { GSCVolumetricField } from '@golstats/gsc-volumetric-field'
+import 'gridstack/dist/gridstack.min.css'
+import { computed, nextTick, onMounted, ref } from 'vue'
+import ReportView from '@/components/template-report-maker/ReportView.vue'
+import emitter from 'tiny-emitter/instance'
+import { GridStack, GridStackEngine, GridStackMoveOpts, GridStackNode } from 'gridstack'
+
+
+const templatePage = ref(null)
+
+class CustomEngine extends GridStackEngine {
+
+  /** refined this to move the node to the given new location */
+  public override moveNode(node: GridStackNode, o: GridStackMoveOpts): boolean {
+    console.log('CustomEngine.moveNode', node, o)
+    const item = itemsMap.get(node.id)
+    // keep the same original X and Width and let base do it all...
+    if (item) {
+      if (o.w > item.maxWidth) {
+        o.w = item.maxWidth
+      }
+      if (o.h > item.maxHeight) {
+        o.h = item.maxHeight
+      }
+      if (o.w < item.minWidth) {
+        o.w = item.minWidth
+      }
+      if (o.h < item.minHeight) {
+        o.h = item.minHeight
+      }
+      item.x = o.x
+      item.y = o.y
+      item.w = o.w
+      item.h = o.h
+    }
+
+    return super.moveNode(node, o)
+  }
+}
+
+console.log('beforeeeeeeeeeeeeeeeeeeeeeeeeeeee')
+GridStack.registerEngine(CustomEngine) // globally set our custom class
+let grid = null
+const props = defineProps({
+  game: {
+    type: Object,
+    default: () => null
+  },
+  id: {
+    type: [String, Number],
+    default: () => String(Date.now())
+  },
+  page: {
+    type: Object,
+    default: () => ({
+      title: 'Page 1',
+      items: [
+        {
+          name: 'Tabla jugadores',
+          id: `w-${String(Date.now())}`,
+          x: 0,
+          y: 0,
+          w: 4,
+          h: 4,
+          maxWidth: 4,
+          maxHeight: 4,
+          noResize: false,
+          noMove: false,
+          componentProps: {}
+        }
+      ]
+    })
+  },
+  isPostMatch: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(
+  ['intersection-changed']
+)
+
+
+const itemsMap = props.page.items.reduce((acc, item) => {
+  acc.set(item.id, item)
+  return acc
+}, new Map())
+
+const teamsInfo = computed(() => {
+  if (props.game) {
+    return {
+      homeTeam: {
+        name: 'LOC'
+      },
+      awayTeam: {
+        name: 'VIS'
+      }
+    }
+  }
+  return {
+    homeTeam: {
+      name: 'LOC'
+    },
+    awayTeam: {
+      name: 'VIS'
+    }
+  }
+})
+
+const callback = (entries, observer) => {
+  entries.forEach(entry => {
+
+    emit('intersection-changed', entry.isIntersecting)
+    /*if (entry.isIntersecting) {
+      console.log('Element is in the viewport!');
+      emit('intersection-changed', true)
+      // Perform actions when the element is visible
+    } else {
+      console.log('Element is out of the viewport!');
+      // Perform actions when the element is not visible
+      emit('intersection-changed', entry.isIntersecting && entry.isVisible)
+    }*/
+  })
+}
+
+
+let observer = null
+
+function setUpIntersectionObserver() {
+  const options = {
+    root: null, // Use the viewport as the root
+    rootMargin: '0px', // Margin around the root
+    threshold: 0.7 // Trigger when 50% of the element is visible
+  }
+
+  observer = new IntersectionObserver(callback, options)
+
+// Step 3: Select the target element and start observing
+  const target = templatePage.value
+  if (target) {
+    observer.observe(target)
+  }
+}
+
+onMounted(async () => {
+  await nextTick()
+  grid = GridStack.init({
+    column: 12,     // number of columns
+    row: 12,      // number of rows
+    maxRow: 12, // max number of rows
+    cellHeight: 60, // height of each cell
+    float: true,    // allow overlapping
+    resizable: {
+      handles: 'e, se, s, sw, w'
+    }
+  }, `#grid-stack-${props.id}`)
+  setUpIntersectionObserver()
+})
+
+emitter.on('add-view', (pageId) => {
+  console.log('add-view', pageId, props.page)
+  if (props.page.id === pageId) {
+    console.log('add-view', props.page.id)
+    if (grid) {
+      const newWidget = {
+        w: 4,
+        h: 4
+      }
+      const willFit = grid.willItFit(0, 0, newWidget.w, newWidget.h, true)
+      console.log('------------------------------------------------------------')
+      console.log('willFit', willFit)
+      if (willFit) {
+        const widget = grid.addWidget(
+          newWidget
+        )
+        const x = Number(widget.getAttribute('gs-x') || 0)
+        const y = Number(widget.getAttribute('gs-y') || 0)
+        grid.removeWidget(widget)
+        emitter.emit('add-page-view', {
+          pageId,
+          grid,
+          view: {
+            name: 'Tabla jugadores',
+            id: `w-${String(Date.now())}`,
+            x,
+            y,
+            w: 4,
+            h: 4,
+            maxWidth: 4,
+            maxHeight: 4,
+            noResize: false,
+            noMove: false,
+            componentProps: {}
+          }
+        })
+        console.log('widget:', widget)
+        console.log('widget.gs-x', widget.getAttribute('gs-x'))
+        console.log('widget.gs-y', widget.getAttribute('gs-y'))
+      } else {
+        console.warn('No space to add new widget')
+      }
+      // grid.addWidget({
+      //   w: 3,
+      //   h: 2,
+      // });
+    }
+  }
+})
+</script>
+
+<template>
+  <div ref="templatePage" class="template-page">
+    <div class="template-page__header">
+      <div class="template-page__header__name">
+        <div>
+          <svg width="19" height="21" viewBox="0 0 19 21" fill="none"
+               xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M11.2986 12.9994C7.62909 14.8341 4.11744 16.0178 1.35547 16.4518L9.18763 20.0029C9.34545 20.0818 9.60192 20.0818 9.74002 20.0029L17.8878 16.3137C18.0457 16.2348 18.164 16.0572 18.164 15.8797V8.75781C16.2898 10.2177 13.9422 11.6776 11.2986 12.9994Z"
+              fill="white" />
+            <path
+              d="M4.7152 8.89735C4.7152 8.89735 10.9494 3.76802 16.8482 1.20335C15.0529 0.946887 11.3637 0.43395 9.3711 0.453678C4.41928 0.493135 1.06546 1.34145 1.06546 1.34145C0.90763 1.3809 0.769531 1.55846 0.769531 1.71629V8.12795C3.01857 6.56942 5.34651 5.56329 5.34651 5.56329C5.34651 5.56329 2.72264 7.06263 0.769531 8.81844V9.41028V14.1648C3.09748 13.9675 6.62886 12.7641 10.3575 10.7321C13.6719 8.91707 16.4733 6.84562 18.17 5.05035V2.40677C14.3032 3.37346 4.7152 8.89735 4.7152 8.89735Z"
+              fill="white" />
+          </svg>
+        </div>
+        <div class="separator" />
+        <input
+          v-model="page.title"
+          type="text"
+          class="page-title-input"
+          onclick="this.select()"
+        >
+      </div>
+      <div class="template-page__header__details">
+        <div class="template-page__header__details__teams">
+          <div class="template-page__header__details__teams__team">
+            <div v-if="teamsInfo.homeTeam.logo">
+
+            </div>
+            <svg v-else width="25" height="25" viewBox="0 0 25 25" fill="none"
+                 xmlns="http://www.w3.org/2000/svg">
+              <path opacity="0.4"
+                    d="M12.0153 0.261719C12.0153 0.261719 13.6664 1.94994 17.7355 2.06744C21.149 2.16638 22.3796 1.30063 22.3796 1.30063C22.3796 1.30063 25.4902 10.2488 20.3822 17.7005C17.6983 21.615 12.5533 24.1504 12.0091 24.2617C11.4711 24.1504 6.31984 21.615 3.636 17.7005C-1.4596 10.2488 1.65094 1.30063 1.65094 1.30063C1.65094 1.30063 2.88155 2.16638 6.2951 2.06744C10.3642 1.94994 12.0153 0.261719 12.0153 0.261719Z"
+                    fill="#54728B" />
+            </svg>
+
+            <span>{{ teamsInfo.homeTeam.name }}</span>
+          </div>
+          <div class="template-page__header__details__teams__vs">
+            VS
+          </div>
+          <div class="template-page__header__details__teams__team">
+            <span>{{ teamsInfo.awayTeam.name }}</span>
+            <div v-if="teamsInfo.awayTeam.logo">
+            </div>
+            <svg v-else width="25" height="25" viewBox="0 0 25 25" fill="none"
+                 xmlns="http://www.w3.org/2000/svg">
+              <path opacity="0.4"
+                    d="M12.0153 0.261719C12.0153 0.261719 13.6664 1.94994 17.7355 2.06744C21.149 2.16638 22.3796 1.30063 22.3796 1.30063C22.3796 1.30063 25.4902 10.2488 20.3822 17.7005C17.6983 21.615 12.5533 24.1504 12.0091 24.2617C11.4711 24.1504 6.31984 21.615 3.636 17.7005C-1.4596 10.2488 1.65094 1.30063 1.65094 1.30063C1.65094 1.30063 2.88155 2.16638 6.2951 2.06744C10.3642 1.94994 12.0153 0.261719 12.0153 0.261719Z"
+                    fill="#54728B" />
+            </svg>
+
+          </div>
+        </div>
+        <div class="template-page__header__details__options">
+          <svg width="17" height="13" viewBox="0 0 17 13" fill="none"
+               xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M3.56953 6.28672C3.56953 7.19972 2.83253 7.93672 1.91953 7.93672C1.00653 7.93672 0.269531 7.19972 0.269531 6.28672C0.269531 5.37372 1.00653 4.63672 1.91953 4.63672C2.83253 4.63672 3.56953 5.37372 3.56953 6.28672ZM8.51953 4.63672C7.60653 4.63672 6.86953 5.37372 6.86953 6.28672C6.86953 7.19972 7.60653 7.93672 8.51953 7.93672C9.43253 7.93672 10.1695 7.19972 10.1695 6.28672C10.1695 5.37372 9.43253 4.63672 8.51953 4.63672ZM15.1195 4.63672C14.2065 4.63672 13.4695 5.37372 13.4695 6.28672C13.4695 7.19972 14.2065 7.93672 15.1195 7.93672C16.0325 7.93672 16.7695 7.19972 16.7695 6.28672C16.7695 5.37372 16.0325 4.63672 15.1195 4.63672Z"
+              fill="white" />
+          </svg>
+        </div>
+      </div>
+    </div>
+    <div class="template-page__content">
+      <div :id="`grid-stack-${id}`" class="grid-stack">
+        <div
+          class="grid-stack-item"
+          v-for="(item, index) of page.items"
+          :key="item.id"
+          :gs-id="item.id"
+          :gs-x="item.x"
+          :gs-y="item.y"
+          :gs-w="item.w"
+          :gs-h="item.h"
+          :gs-no-resize="item.noResize"
+          :gs-no-move="item.noMove"
+          gs-auto-position="true"
+        >
+          <div class="grid-stack-item-content">
+            <ReportView :title="item.title">
+              <template #default>
+                <GSCVolumetricField
+                  :is-game-pre-match="!isPostMatch"
+                  :are-teams-visible="false"
+                  :is-title-visible="false"
+                  :is-ghost-effect="item.isTemplateMode"
+                />
+              </template>
+            </ReportView>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped lang="scss">
+.page-title-input {
+  &:focus {
+    outline: none;
+    border-radius: 3.1px;
+    border: solid 1px #216ea5;
+    background-color: #17212a;
+    padding: 0 12px;
+  }
+}
+
+.template-page {
+  width: 100%;
+  height: 776px;
+  padding: 12px 16px;
+  display: flex;
+  flex-direction: column;
+  background-color: #1d2a35;
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    border-bottom: solid 1.1px rgba(255, 255, 255, 0.2);
+    padding-bottom: 6px;
+
+    &__name {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+
+      & > div.separator {
+        width: 1px;
+        height: 18px;
+        background-color: #87878f;
+      }
+
+      & > input {
+        margin-left: 10px;
+        font-family: Poppins-Medium, sans-serif;
+        font-size: 14px;
+        font-weight: 500;
+        font-stretch: normal;
+        font-style: normal;
+        line-height: normal;
+        letter-spacing: normal;
+        text-align: left;
+        color: #fff;
+        background-color: #1d2a35;
+        border: 0;
+      }
+    }
+
+    &__details {
+      display: flex;
+      align-items: center;
+      gap: 14px;
+      font-size: 13.7px;
+      font-weight: 500;
+      font-stretch: normal;
+      font-style: normal;
+      line-height: normal;
+      letter-spacing: normal;
+      text-align: right;
+      color: #fff;
+
+      &__teams {
+        display: flex;
+        align-items: center;
+        gap: 24px;
+        font-family: Poppins-Medium, sans-serif;
+
+        &__team {
+          display: flex;
+          align-items: center;
+          gap: 5px;
+        }
+
+        &__vs {
+          font-family: Poppins-Light, sans-serif;
+        }
+      }
+
+      &__options {
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>