@simitgroup/simpleapp-generator 1.2.7 → 1.3.0-alpha

package/templates/nuxt/components/header/button/HeaderButtonProfile.vue.eta

@@ -6,14 +6,13 @@ import {ref} from 'vue'
 
 
 const { locale,setLocale,locales } = useI18n()
+const colorMode = useColorMode()
+const modelValue = defineModel<boolean>()
 const mylocale = ref(locale)
-const userprofileoverlay = ref();
-const colors = [{value:'light', name:'Light'},{value:'dark', name:'Dark'}]
-const toggle = (event:any) => {
-    userprofileoverlay.value.toggle(event);   
-}
+const colors = [{value:'light', name:t('light')},{value:'dark', name:t('dark')}]
+
 const toProfile = ()=>{    
-    userprofileoverlay.value.toggle();   
+    modelValue.value=false
 
     if(getCurrentXorg()){
         navigateTo(`/${getCurrentXorg()}/profile`)
@@ -22,10 +21,6 @@ const toProfile = ()=>{
     }
     
 }
-const toFrontpage = () =>{
-    userprofileoverlay.value.toggle();   
-    navigateTo('/')
-}
 const saveLocale=async (v:string)=>{    
     await setLocale(v)
 } 
@@ -34,50 +29,40 @@ const saveLocale=async (v:string)=>{
 
 </script>
 
-<template>
-    <div>
-        <div class=" w-[120px] truncate ...">
-            
-            <div class="flex flex-row-reverse  cursor-pointer border-none w-full" @click="toggle">                    
-                <p>{{ getProfileFullName() }}</p>
-                <!-- <Avatar :image="getUserStore().getAvatarLink(32)" class="" size="normal" shape="circle" />                 -->
-                <div class="w-8 h-8 bg-cover bg-center rounded-md">
-                    <img :src="getAvatarLink(getProfileEmail(),32)" alt="" class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white dark:border-gray-700 shadow" />
-                </div>
-            </div>
-            
-        </div>
-        <OverlayPanel :pt="{root:{class:'w w-80'}}" ref="userprofileoverlay">                    
-            <div>
-                <div class="py-2 transition duration-150 ease-in-out z-10 absolute top-0 right-0 bottom-0 left-0" id="modal">
-                    <div role="alert" class="container mx-auto w-full md:w-full max-w-lg">
-                        <div class="relative p-4 md:p-8 bg-white dark:bg-gray-800 shadow-md rounded border border-gray-400">
+<template>          
+        <!-- <div class="bg-cover bg-center rounded-md p-3  cursor-pointer profile-button"  @click="toggle">
+            <i class="pi pi-user dark:text-white"></i> -->
+            <!-- <img  :src="getAvatarLink(<string>getProfileEmail(),32)" alt="" class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white dark:border-gray-700 shadow" /> -->
+        <!-- </div> -->
+    
+        <Dialog appendTo="body" ref="userprofileoverlay" v-model:visible="modelValue" close-on-escape :header="t('profile')">
+            <!-- <div> -->
+                <!-- <div class="py-2 transition duration-150 ease-in-out z-10 absolute top-0 right-0 bottom-0 left-0" id="modal"> -->
+                    <div  class="p-4">
+                        <!-- <div class="relative p-4 md:p-8 bg-white dark:bg-gray-800 shadow-md rounded border border-gray-400"> -->
                             <div class="w-full flex items-center justify-start text-gray-600 dark:text-gray-400 mb-5" >
                                 <div class="w-12 h-12 bg-cover bg-center rounded-md">
-                                    <img :src="getAvatarLink(getProfileEmail(),32)" alt="" class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white dark:border-gray-700 shadow" />
+                                    <img :src="getAvatarLink(<string>getProfileEmail(),32)" alt="" class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white dark:border-gray-700 shadow" />
                                 </div>
                                 <div class="flex flex-col" >
-                                    <h1 class="text-left text-gray-800 dark:text-gray-100 font-lg font-bold tracking-normal leading-tight ml-2">{{ getUserProfile().fullName }}</h1>
-                                    <p  class="text-gray-400 dark:text-gray-100 font-normal text-base tracking-normal ml-2 mr-4">{{getUserProfile().group }}</p>
+                                    <h1 class="text-left text-gray-800 dark:text-gray-100 font-lg font-bold tracking-normal leading-tight ml-2">{{ getUserProfile()?.fullName }}</h1>
+                                    <p  class="text-gray-400 dark:text-gray-100 font-normal text-base tracking-normal ml-2 mr-4">{{getUserProfile()?.group }}</p>
                                 </div>
                                 
                             </div>
-                            <!-- language -->
                             <div class="col-span-full">
                                 <label for="pick-lang" class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-300">{{ t('language') }}</label>
                                 <div class="mt-2">
                                     <Dropdown inputId="pick-lang" @update:model-value="saveLocale" v-model="mylocale" option-value="code" option-label="name" :options="locales" >                                    
-                                    </Dropdown>
-                                    <!-- <select v-model="$colorMode.preference" id="picklang">
-                                        <option value="light">Light</option>
-                                        <option value="dark">Dark</option>
-                                    </select> -->
+                                    </Dropdown>                                   
                                 </div>
                             </div>
                             <div class="mt-3 col-span-full">
                                 <label for="pick-theme" class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-300">{{ t('theme') }}</label>
                                 <div class="mt-2">
-                                    <Dropdown inputId="pick-theme" v-model="$colorMode.preference" option-value="value" option-label="name" :options="colors" >                                    
+                                    <h1>Color mode: {{ $colorMode.value }}</h1>
+
+                                    <Dropdown inputId="pick-theme" v-model="colorMode.preference" option-value="value" option-label="name" :options="colors" >                                    
                                     </Dropdown>
                                    
                                 </div>
@@ -86,15 +71,13 @@ const saveLocale=async (v:string)=>{
                             
                             <div class="mt-3 flex items-center justify-start w-full">
                                 <button class="focus:outline-none transition duration-150 ease-in-out hover:bg-gray-600 bg-gray-700 rounded text-white px-8 py-2 text-sm" @click="toProfile">{{ t('profile') }}</button>
-                                <!-- <button class="focus:outline-none transition duration-150 ease-in-out bg-gray-600  rounded text-white px-8 py-2 text-sm" @click="toFrontpage">Pick Tenant</button> -->
-                                <button class="focus:outline-none ml-3 bg-warning-100 dark:bg-warning-700 dark:border-warning-700 dark:hover:bg-warning-600 transition duration-150 text-gray-600 dark:text-gray-400 ease-in-out hover:border-gray-400 hover:bg-gray-300 border rounded px-8 py-2 text-sm" @click="logout()">{{ t('logout') }}</button>
+                                <button class="focus:outline-none ml-3 bg-warning-100 dark:bg-warning-700 dark:border-warning-700 dark:hover:bg-warning-600 transition duration-150 text-gray-600 dark:text-white ease-in-out hover:border-gray-400 hover:bg-gray-300 border rounded px-8 py-2 text-sm" @click="logout()">{{ t('logout') }}</button>
                             </div>                            
-                        </div>
+                        <!-- </div> -->
                     </div>
-                </div>
+                <!-- </div> -->
                 
-            </div>
-
-        </OverlayPanel>
-    </div>
+            <!-- </div> -->
+        </Dialog>
+    
 </template>

package/templates/nuxt/components/list/ListDocument.vue.eta

@@ -0,0 +1,25 @@
+<template>
+  <ListView
+    :list="recordlist as T[]"
+    with-filter
+    :title-field="documentTitle"
+    :sub-title-field="uniqueKey"
+    #default="{ item, index }"
+  >
+    <div class="cursor-pointer flex flex-row gap-2" @click="emits('click', item)">
+      <slot name="default" :index="index" :item="item">      
+        <TextTitle class="flex-1">{{ item[(documentTitle as  keyof typeof item) ] }}</TextTitle>
+        <TextSubtitle >{{ item[uniqueKey as  keyof typeof item] }}</TextSubtitle>
+      </slot>
+    </div>
+  </ListView>
+</template>
+<script setup lang="ts" generic="T extends { [key: string]: any }">
+import { SearchBody } from "~/types";
+const emits = defineEmits(["click"]);
+const props = defineProps<{
+  recordlist: T[];  
+  uniqueKey?: string;
+  documentTitle?: string;
+}>();
+</script>

package/templates/nuxt/components/list/ListDocumentTable.vue.eta

@@ -0,0 +1,77 @@
+<template>
+  <DataTable
+    v-bind="$attrs"
+    stripedRows
+    dataKey="_id"
+    :showGridlines="true"
+    size="small"
+    :pt="{
+      header: { class: '' },
+      headerRow: { class: ' bg-gray-200' },
+    }"
+    v-on:row-click="clickRow"
+    :value="value"
+    :filters="filters"
+    :paginator="true"
+    :rows="20"
+    :rowsPerPageOptions="[20, 40, 60, 100]"
+  >
+    <!-- header -->
+    <template #header>
+      <div class="flex flex-row w-full text-right justify-content-end">
+        <div class="flex-1">
+          <slot name="toolbar"></slot>
+        </div>
+        <div class="flex-1">
+          <slot name="title">
+            <h1 class="text text-2xl pt-2 text-center dark:text-white">
+              {{ t(title) }}
+            </h1>
+          </slot>
+        </div>
+        <span class="p-input-icon-left flex-1">
+          <i class="pi pi-search mt-4 ml-2 text-gray-400 absolute" />
+          <InputText
+            type="search"
+            v-model="filters['global'].value"
+            class="text-right"
+            placeholder="Keyword Search"
+          />
+        </span>
+      </div>
+    </template>
+    <!-- no data found -->
+    <template #empty>
+      <div class="text-center">
+        <div class="text-3xl text-gray-400 pi pi-exclamation-circle"></div>
+        <div class="text-3xl text-gray-400">{{ t("noDataFound") }}</div>
+      </div>
+    </template>    
+      <slot name="default">
+        <Column header="undefineColumns"></Column>
+      </slot>    
+  </DataTable>
+</template>
+<script setup lang="ts" generic="T">
+// import { CellSetting } from "~/types";
+import { FilterMatchMode } from "primevue/api";
+import DataTable from "primevue/datatable";
+import Column from "primevue/column";
+import renderComponent from "~/components/renderer";
+import { emit } from "process";
+const props = defineProps<{
+  value: T[]
+  title: string
+  columns: string[]
+  uniqueKey: string
+  documentTitle: string
+}>();
+const emits = defineEmits(["selectRow"]);
+const clickRow = (eventdata: any) => {
+  emits("selectRow", eventdata.data);
+};
+
+const filters = ref({
+  global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+});
+</script>

package/templates/nuxt/components/list/ListView.vue.eta

@@ -1,66 +1,137 @@
 <template>
-    <div>
-        <div v-if="withFilter">
-            <input 
-                autofocus
-                placeholder="search" 
-                v-model="searchvalue"                    
-                class="w-full border  p-2" 
-                type="search" />
-        </div>
-        <div class="max-h-screen overflow-auto">
-            <ul >            
-                <li v-for="(item,index) in filterlist">                    
-                    <div  :class="getSelectedCSS(item)">
-                        <NuxtLink :to="url ? `${url}/${item[idField]}`:undefined">
-                            <slot :item="item" :index="index">
-                                <div class="mr-2">{{item[titleField??'']  }}</div>
-                                <div class="font font-bold text-right">{{item[subTitleField??'']}}</div>
-                            </slot>
-                        </NuxtLink>
-                    </div>
-                
-                </li>
-            </ul>
+  <div class="relative  ">
+    <div v-if="withFilter" class="flex flex-row  ">
+      <InputText
+        placeholder="search"
+        v-model="searchvalue"
+        class="w-full dark:text-white"
+        type="search"
+      />
+      <ButtonPrimary v-if="withAddNew" @click="emits('add')"
+        ><i class="pi pi-plus"></i
+      ></ButtonPrimary>
+    </div>
+    <div v-if="showIndex" class="flex flex-col text-sm fixed  left-1 top-1/5 text-primary-600 dark:text-primary-400 p-1 z-10 rounded border bg-white dark:bg-black opacity-90">
+      <A :href="'#'+l" v-for="l in allLetters">{{ l }}</A>
+    </div>
+    
+    <div  v-if="filterlist && filterlist.length > 0">
+      <div >
+        <div v-for="(item, index) in filterlist" :class="isMobile() ? '' : 'overflow overflow-y-scroll overflow-auto '">          
+          <div class="w-full bg-gray-400 dark:bg-gray-500 p-1 pl-2 top-0 sticky opacity-90" v-if="showIndex && titleField &&  showCategoryBar(item[titleField][0])">
+            <a :id="item[titleField][0]">{{ item[titleField][0] }}</a></div>
+          <div :class="getSelectedCSS(item)">
+            <NuxtLink :to="url ? `${url}/${item[idField]}` : undefined">
+              
+              <slot name="default" :item="item" :index="index">
+                <div class="flex flex-row">
+                  <div class="flex-1 mr-2 dark:text-white">
+                    {{ item[titleField ?? ""] }}
+                  </div>
+                  <div class="text-right dark:text-gray-400 text-gray-600">
+                    {{ item[subTitleField ?? ""] }}
+                  </div>
+                </div>
+              </slot>
+            </NuxtLink>
+          </div>
         </div>
+      </div>
     </div>
+    <div v-else>
+      <div
+        class="w-full h-20 p-2 border-l-none border-r-none hover-list-primary"
+      >
+        <slot name="nodata">
+          <div class="border-round border-1 surface-border p-4 surface-card">
+            {{ t("noDataFound") }}
+          </div>
+        </slot>
+      </div>
+    </div>
+  </div>
 </template>
-<script setup lang="ts" generic="T extends {[key:string]:any}">
-import {ref} from 'vue'
-import {ListItem} from '~/types/listview'
-const props = withDefaults(defineProps<{
-    list:T[],
-    url?:string,
-    titleField?:string
-    idField?:string
-    subTitleField?:string
-    withFilter?:boolean
-}>(),{
-    idField:'_id'
-})
-// const emit = defineEmits(['clickitem'])
-const searchvalue = ref('')
-const selecteditem =ref('')
-const clickRow=(item:ListItem)=>{
-    // emit('clickitem',item)
-    // selecteditem.value = item.code
-}
-const filterlist =  computed(()=>{    
-    const newlist =props.list.filter((item:any)=>
-    {
-     return   String(item[props.titleField??'']).toLowerCase().includes(searchvalue.value.toLowerCase()) ||
-            String(item[props.subTitleField??'']).toLowerCase().includes(searchvalue.value.toLowerCase())
-    }) 
+<script setup lang="ts" generic="T extends { [key: string]: any }">
+import { ref } from "vue";
+import { ListItem } from "~/types/listview";
+const props = withDefaults(
+  defineProps<{
+    list: T[];
+    url?: string;
+    titleField?: string;
+    idField?: string;
+    subTitleField?: string;
+    withFilter?: boolean;
+    withAddNew?: boolean;
+    showIndex?:boolean
+  }>(),
+  {
+    idField: "_id",
+  },
+);
+const letters =ref<string[]> ([])
+let lastchar=''
+
+const emits = defineEmits(["add"]);
+const searchvalue = ref("");
+const selecteditem = ref("");
+const clickRow = (item: ListItem) => {
+  // emit('clickitem',item)
+  // selecteditem.value = item.code
+};
+const filterlist = computed(() => {
+  let newlist: T[] = [];
+  if (!Array.isArray(props.list)) {
+    return [];
+  }
+  if (props.list !== undefined) {
+    newlist = props.list.filter((item: T) => {
+      return (
+        String(item[props.titleField ?? ""])
+          .toLowerCase()
+          .includes(searchvalue.value.toLowerCase()) ||
+        String(item[props.subTitleField ?? ""])
+          .toLowerCase()
+          .includes(searchvalue.value.toLowerCase())
+      );
+    });
+  }
+
+  return newlist;
+});
+const getSelectedCSS = (item: T) => {
+  if (selecteditem.value == item.code) {
+    return "p-2 border-l-none border-r-none bg-sky-200 border-t-2";
+  } else {
+    return "p-2 border-l-none border-r-none hover-list-primary border-t-2 dark:border-t-gray-700";
+  }
+};
+
+
+const allLetters = computed(()=>{
+  console.log('props.titleFieldprops.titleField',props.titleField,props.list)
+  if(props.titleField && props.list){
+
+    return props.list.filter((item)=>{
+      const titlevalue:string = item[props.titleField as keyof typeof item]
+      if(titlevalue[0]!=lastchar){
+        lastchar = item[props.titleField as keyof typeof item][0]
+        return true
+      }
+    }).map(item=>item[props.titleField  as keyof typeof item][0])
+    
+  }else{
+    return []
+  }
 
-    return newlist
 })
-const getSelectedCSS= (item:T)=>{
-    if(selecteditem.value == item.code){
-        return "p-2 border bg-sky-200"
-    }else{
-        return "p-2 border hover-list-primary"
-    }
 
+const showCategoryBar=(letter:string)=>{
+  if(lastchar!=letter){
+    lastchar=letter
+    return true
+  }else{
+    return false
+  }
 }
-
-</script>
+</script>

package/templates/nuxt/components/mobile/MobileToolbar.vue.eta

@@ -0,0 +1,10 @@
+<template>
+  <div
+    class="w-full dark:bg-gray-800 z-20 bg-white justify justify-between absolute h h-14 flex flex-row place-items-center opacity-90 dark:text-white"
+  >
+    <div class="w-full text-left"><slot name="start"></slot></div>
+    <div class="w-full text-center"><slot name="center"></slot></div>
+    <div class="w-full text-right"><slot name="end"></slot></div>
+  </div>
+  <div class="h-14"></div>  
+</template>

package/templates/nuxt/components/overlay/OverlaySideBarCrud.vue.eta

@@ -0,0 +1,21 @@
+<template>
+  <Sidebar
+    position="right"
+    v-if="showDialog"
+    v-model:visible="showDialog"
+    modal
+    :show-close-icon="false"
+    #container
+  >
+    <div class="overflow-y-scroll">
+      <slot name="default"></slot>
+    </div>
+  </Sidebar>
+</template>
+<script lang="ts" setup>
+const showDialog = defineModel<boolean>({ required: true });
+const props = defineProps<{ closeEventName: string }>();
+useNuxtApp().$listen("CloseDialog", (closeEventName: string) => {
+  if (props.closeEventName == closeEventName) showDialog.value = false;
+});
+</script>

package/templates/nuxt/components/overlay/OverlayViewer.vue.eta

@@ -0,0 +1,20 @@
+<template>
+  <Sidebar
+    position="bottom"
+    v-if="showDialog"
+    v-model:visible="showDialog"
+    modal
+    :show-close-icon="false"
+    #container
+  >
+    <div class="overflow-y-scroll">
+      <slot name="default"></slot>
+    </div>
+  </Sidebar>
+</template>
+<script lang="ts" setup>
+const showDialog = defineModel<boolean>({ required: true });
+useNuxtApp().$listen("CloseDialog", (closeEventName: string) => {
+  if (closeEventName=='viewer') showDialog.value = false;
+});
+</script>

package/templates/nuxt/components/page/PageDocList.vue.eta

@@ -0,0 +1,170 @@
+<template>
+  <title v-if="!id">{{ t(doc.getDocName()) }}</title>
+  <div v-if="isMobile()" class="w-full">
+    <div class="p-2 flex flex-row justify-end place-items-center h-14">
+      <div class="flex-1">
+        <TextTitle>{{ t(doc.getDocName()) }}</TextTitle>
+      </div>
+      <div>
+        <ButtonText
+          @click="goTo(doc.getDocName(), 'new')"
+          class="pi pi-plus"
+        ></ButtonText>
+      </div>
+    </div>
+    <ListDocument
+      v-if="recordlist"
+      @click="showDialogForm"
+      :recordlist="recordlist as T[]"
+      :unique-key="uniqueKey"
+      :document-title="documentTitle"
+    >
+      <template #default="{ index, item }">
+        <slot name="mobileList" :index="index" :item="item as T"></slot>
+      </template>
+    </ListDocument>
+  </div>
+  <div v-else class="simpleapp-crudsimple">
+    <ListDocumentTable
+      v-if="recordlist"
+      :value="recordlist as T[]"
+      :title="doc.getDocName()"
+      :unique-key="<string>uniqueKey"
+      :document-title="<string>documentTitle"
+      :columns="columns"
+    >
+      <template #toolbar>
+        <div class="w-full text-left">
+          <ButtonPrimary
+            class="pi pi-plus"
+            @click="newData"
+            v-tooltip="t('new')"
+            v-if="canPerform(resourcename, 'create')"
+          ></ButtonPrimary>
+        </div>
+      </template>
+      <template #default>
+        <slot name="dataTableColumns">
+          <Column v-for="col in columns.filter((item,index)=>index<6)" :header="t(col)" class="min-w-[5rem]" #body="{index,data}">                        
+              <RendererLink   v-if="uniqueKey === col || documentTitle === col"
+                  :value="data" :setting="{ path: resourcename.toLocaleLowerCase() }"
+                  :fields="[col]" >
+                  {{ data[col] }}
+              </RendererLink>
+            <span v-else-if="data[col]?.label !==undefined">{{ data[col].label }}</span>
+            <span v-else>{{ data[col] }}</span>              
+          </Column>
+
+        </slot> 
+      </template>
+    </ListDocumentTable>
+  </div>
+  <OverlaySideBarCrud
+    v-model="showDialog"
+    :closeEventName="doc.getDocName()"
+    #default
+    ><slot name="default">
+      <NuxtPage :_id="id"></NuxtPage>
+    </slot>
+  </OverlaySideBarCrud>
+</template>
+
+<script setup lang="ts" generic="T extends { [key: string]: any }">
+/**
+ * This file was automatically generated by simpleapp generator during initialization.
+ * DO NOT MODIFY IT BY HAND.
+ * last change 2024-02-04
+ * author: Ks Tan
+ */
+import { ref } from "vue";
+import _ from "lodash";
+import { SearchBody } from "~/types";
+import { SimpleAppClient } from "~/simpleapp/generate/clients/SimpleAppClient";
+const props = defineProps<{
+  document: SimpleAppClient<any, any>;
+  data: T;
+  columns: string[];
+  mobileColumns?: string[];
+  sorts?: string[][];
+}>();
+
+const emits = defineEmits(["selectRow"]);
+const id = computed(() => getPathPara("id"));
+const resourcename = ref(_.upperFirst(props.document.getDocName()));
+const visible = ref(false);
+const showDialog = ref(false);
+const op = ref();
+const doc = props.document;
+const disabled = ref(false);
+
+const router = useRouter();
+const route = useRoute();
+const filters = ref();
+const popuptitle = ref(t(doc.getDocName()));
+const systemwindows = ref(false);
+const { $event, $listen } = useNuxtApp();
+const recordlist = ref<T[]>();
+const uniqueKey = doc.getSchema()["x-simpleapp-config"].uniqueKey;
+const documentTitle = doc.getSchema()["x-simpleapp-config"].documentTitle;
+
+const refresh = () => {
+  const searchbody: SearchBody = {
+    fields: props.columns,
+    sorts: props.sorts,
+  };
+  doc.search(searchbody).then((res: any) => {
+    recordlist.value = res;
+    disabled.value = false;
+  });
+};
+const newData = () => {
+  router.push({ path: getDocumentUrl(doc.getDocName(), "new") });
+  popuptitle.value = t(doc.getDocName());
+  doc.setNew();
+  visible.value = true;
+};
+
+onMounted(() => {
+  refresh();
+});
+$listen("RefreshDocumentList", (data) => {
+  if (data.documentName == doc.getDocName()) {
+    refresh();
+  }
+});
+const showDialogForm = (item: T) => {
+  goTo(doc.getDocName(), item._id);
+  popuptitle.value = <string>item[documentTitle as keyof T];
+};
+
+watch(showDialog, () => {
+  if (!showDialog.value) {
+    goTo(props.document.getDocName());
+  }
+});
+watch(
+  () => useRoute().path,
+  async () => {
+    if (getPathPara("id")) {
+      showDialog.value = true;
+    } else {
+      showDialog.value = false;
+    }
+  },
+);
+
+onMounted(() => {
+  if (id.value) {
+    showDialog.value = true;
+  } else {
+    showDialog.value = false;
+  }
+
+  useNuxtApp().$listen("CloseDialog", (documentName: string) => {
+    if (documentName == doc.getDocName()) {
+      goTo(resourcename.value);
+      showDialog.value = false;
+    }
+  });
+});
+</script>