PublicWebStatistic

src/components/Widgets/Statictic/PublicWebStatistic/OptionPanel.vue

@@ -0,0 +1,164 @@
+<template>
+  <option-panel-tabs v-model:options="localOptions">
+    <template #main-tab>
+      <div class="option-panel-container">
+        <div class="row q-col-gutter-md">
+          <div class="input-container col-12 q-mt-md">
+
+            <div class="outsideLabel">آدرس فایل عکس</div>
+            <q-input v-model="localOptions.imageSource"
+                     label="image" />
+          </div>
+          <!--          <div class="input-container q-py-md">-->
+          <!--            <div class="outsideLabel">height</div>-->
+          <!--            <q-input v-model="localOptions.height"-->
+          <!--                     label="image" />-->
+          <!--          </div>-->
+          <div class="input-container col-4">
+            <div class="outsideLabel">size</div>
+            <q-select v-model="size"
+                      :options="sizeOptions"
+                      label="page size" />
+          </div>
+          <div class="input-container col-4">
+
+            <div class="outsideLabel">عرض در سایز {{size}}</div>
+            <q-input v-model="localOptions[size].width"
+                     label="width" />
+          </div>
+          <div class="input-container col-4">
+
+            <div class="outsideLabel">ارتفاع در سایز {{size}}</div>
+            <q-input v-model="localOptions[size].height"
+                     label="height" />
+          </div>
+          <div class="input-container col-12">
+            <div class="outsideLabel">لینک عکس در سایز {{size}}</div>
+            <q-input v-model="localOptions[size].src"
+                     label="image link" />
+          </div>
+          <div class="action col-md-12">
+            <div class="cehckBox">
+              <q-checkbox v-model="localOptions.useAEEEvent"
+                          label="استفاده از ایونت GTM"
+                          right-label />
+            </div>
+            <div v-if="localOptions.useAEEEvent"
+                 class="action-container q-gutter-lg-md">
+              <div>فیلد های مورد نظر ایونت GTM :</div>
+              <div class="col-9">
+                <div class="outsideLabel">id</div>
+                <q-input v-model="localOptions.AEEEventBody.id"
+                         label="id" />
+              </div>
+              <div class="col-6">
+                <div class="outsideLabel">name</div>
+                <q-input v-model="localOptions.AEEEventBody.name"
+                         label="name" />
+              </div>
+              <div class="col-6">
+                <div class="outsideLabel">creative</div>
+                <q-input v-model="localOptions.AEEEventBody.creative"
+                         label="creative" />
+              </div>
+              <div class="col-6">
+                <div class="outsideLabel">position</div>
+                <q-input v-model="localOptions.AEEEventBody.position"
+                         label="position" />
+              </div>
+            </div>
+            <div class="cehckBox">
+              <q-checkbox v-model="localOptions.hasAction"
+                          label="hasAction"
+                          right-label />
+            </div>
+            <div v-if="localOptions.hasAction"
+                 class="action-container">
+              <div>
+                <q-select v-model="localOptions.action.name"
+                          :options="actionTypes" />
+              </div>
+              <div v-if="localOptions.action.name === 'link'">
+                <q-input v-model="localOptions.action.route"
+                         label="route" />
+              </div>
+              <div v-if="localOptions.action.name === 'event'">
+                <q-input v-model="localOptions.action.eventName"
+                         label="event name" />
+                <q-input v-model="localOptions.action.eventArgs"
+                         label="event args" />
+              </div>
+              <div v-if="localOptions.action.name === 'scroll'">
+                <q-input v-model="localOptions.action.scrollTo"
+                         label="scrollTo class" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </option-panel-tabs>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import { mixinOptionPanel } from 'quasar-ui-q-page-builder'
+import OptionPanelTabs from 'quasar-ui-q-page-builder/src/components/OptionPanelComponents/OptionPanelTabs.vue'
+
+export default defineComponent({
+  name: 'OptionPanel',
+  components: { OptionPanelTabs },
+  mixins: [mixinOptionPanel],
+  data() {
+    return {
+      size: 'xs',
+      sizeOptions: ['xs', 'sm', 'md', 'lg', 'xl'],
+      actionTypes: ['event', 'scroll', 'link'],
+      defaultOptions: {
+        imageSource: null,
+        ratio: null,
+        hasAction: false,
+        useAEEEvent: false,
+        AEEEventBody: {
+          id: '-',
+          name: '-',
+          creative: null,
+          position: null
+        },
+        action: {
+          name: null,
+          route: null,
+          scrollTo: null,
+          eventName: null,
+          eventArgs: null
+        },
+        xs: {
+          height: null,
+          width: null,
+          src: null
+        },
+        sm: {
+          height: null,
+          width: null,
+          src: null
+        },
+        md: {
+          height: null,
+          width: null,
+          src: null
+        },
+        lg: {
+          height: null,
+          width: null,
+          src: null
+        },
+        xl: {
+          height: null,
+          width: null,
+          src: null
+        }
+      }
+    }
+  }
+})
+</script>

src/components/Widgets/Statictic/PublicWebStatistic/PublicWebStatistic.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="PublicWebStatistic">
+    <div class="PublicWebStatistic-title">
+      <div>
+        <q-banner class="banner">
+          آمار بنیاد
+        </q-banner>
+      </div>
+    </div>
+    <div class="PublicWebStatistic-boxes row">
+      <div class="PublicWebStatistic-boxes row" />
+    </div>
+  </div>
+</template>
+
+<script>
+import 'vue3-carousel/dist/carousel.css'
+import { User } from 'src/models/User.js'
+// import ShamsiDate from 'src/assets/ShamsiDate.js'
+// import { APIGateway } from 'src/api/APIGateway.js'
+import { ClassroomList } from 'src/models/Classroom.js'
+import { ClassroomRegistrationList } from 'src/models/ClassroomRegistration.js'
+
+export default {
+  name: 'PublicWebStatistic',
+  data: () => ({
+    loading: false,
+    user: new User(),
+    classroomsKey: Date.now(),
+    userRegistrations: new ClassroomRegistrationList(),
+    slide: 0,
+    classrooms: new ClassroomList(),
+    breakpoints: {
+      // 1024 and up
+      1024: {
+        itemsToShow: 3,
+        snapAlign: 'start'
+      },
+      // 700px and up
+      700: {
+        itemsToShow: 3.5,
+        snapAlign: 'center'
+      },
+      // 300px and up
+      300: {
+        itemsToShow: 1.5,
+        snapAlign: 'center'
+      }
+    },
+    maximizedToggle: true,
+    dialog: false
+  })
+}
+</script>
+
+<style scoped lang="scss">
+.PublicWebStatistic {
+  padding: 60px 0;
+  .PublicWebStatistic-title {
+    display: flex;
+    flex-flow: row;
+    justify-content: space-between;
+    padding-bottom: 33px;
+  }
+  :deep(.carousel__prev),
+  :deep(.carousel__next) {
+    width: 48px;
+    height: 48px;
+    background-color: #475F4A;
+    border-radius: 8px;
+    &.carousel__prev--in-active {
+      background-color: #DEDEDE;
+    }
+    &:after {
+    }
+    svg {
+      //display: none;
+    }
+  }
+  :deep(.carousel__prev) {
+    right: auto;
+    left: 0;
+    transform: translate(-100%, -50%);
+  }
+  :deep(.carousel__next) {
+    left: auto;
+    right: 0;
+    transform: translate(100%, -50%);
+  }
+  .carousel__slide {
+    padding: 0 12px;
+    .PublicWebStatistic-item {
+      width: 100%;
+      &.isRegistered {
+        .thumbnail {
+          position: relative;
+          z-index: 1;
+          .RegisteredSign {
+            position: absolute;
+            right: 5px;
+            top: 7px;
+            z-index: 2;
+            display: block;
+          }
+        }
+      }
+      .thumbnail {
+        padding-top: 17px;
+        padding-left: 22px;
+        padding-right: 22px;
+        padding-bottom: 26px;
+        .RegisteredSign {
+          display: none;
+        }
+      }
+      .title {
+        text-align: left;
+        padding-top: 0;
+        padding-left: 46px;
+        padding-right: 46px;
+        padding-bottom: 33px;
+      }
+      .attribute {
+        padding-top: 0;
+        padding-left: 46px;
+        padding-right: 46px;
+        padding-bottom: 44px;
+        .attribute-item {
+          margin-bottom: 21px;
+          display: flex;
+          flex-flow: row;
+          .attribute-logo {
+            margin-right: 15px;
+          }
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+      }
+      .action-section {
+        padding: 0;
+        .btn-show-classroom {
+          width: 100%;
+          height: 60px;
+          border-top-right-radius: 0;
+          border-top-left-radius: 0;
+        }
+      }
+    }
+  }
+}
+</style>