From 7e24102347f85ace6ad65b8f22c5e07462e8afd6 Mon Sep 17 00:00:00 2001
From: John Cardinal <support@ayanova.com>
Date: Wed, 5 Feb 2020 00:47:42 +0000
Subject: [PATCH]

---
 ayanova/devdocs/todo.txt                 |   5 +-
 ayanova/src/components/gz-data-table.vue | 443 +----------------------
 2 files changed, 15 insertions(+), 433 deletions(-)

diff --git a/ayanova/devdocs/todo.txt b/ayanova/devdocs/todo.txt
index 6509870f..f97b2cc2 100644
--- a/ayanova/devdocs/todo.txt
+++ b/ayanova/devdocs/todo.txt
@@ -48,10 +48,7 @@ CURRENT TODOs
 SHELL / NAV / MENUS / LAYOUT
 
 
-TODO: Mobile view nav on 360px (our smallest supported size) isn't dismissable if you just want to go back to what you were working on 
-	- This is becuase the nav is 350 and 10px isn't enough apparently to click on
-	- Maybe decrease the nav slightly
-
+TODO: Make sure scroll position is respected and saved when editing a widget and coming back to the list
 TODO: toolbar above grid for filters, refresh etc (make it a standard component?)
 TODO: main.js filters need to be finished
 TODO: SEARCH UI
diff --git a/ayanova/src/components/gz-data-table.vue b/ayanova/src/components/gz-data-table.vue
index 0748153f..351bcbe2 100644
--- a/ayanova/src/components/gz-data-table.vue
+++ b/ayanova/src/components/gz-data-table.vue
@@ -90,12 +90,12 @@
       >
         <template v-slot:header="props">
           <!-- Mimic the full width data table select all toggle -->
-          <div @click="props.toggleSelectAll(!props.everyItem)">
-            <v-icon v-if="!props.someItems" x-large>far fa-square</v-icon>
-            <v-icon v-if="props.someItems && !props.everyItem" x-large
+          <div @click="props.toggleSelectAll(!props.everyItem)" class="pl-2 pt-2">
+            <v-icon v-if="!props.someItems" large>far fa-square</v-icon>
+            <v-icon v-if="props.someItems && !props.everyItem" large
               >far fa-minus-square</v-icon
             >
-            <v-icon v-if="props.everyItem" x-large>far fa-check-square</v-icon>
+            <v-icon v-if="props.everyItem" large>far fa-check-square</v-icon>
           </div>
         </template>
 
@@ -110,11 +110,6 @@
               lg="3"
             >
               <v-card elevation="4" tile>
-                <!-- <v-card-title class="subheading font-weight-bold">{{
-                  item.columns.c1.v
-                }}</v-card-title>
-
-                <v-divider></v-divider> -->
                 <template v-if="showSelect">
                   <v-card-title class="subheading font-weight-bold">
                     <v-checkbox
@@ -196,9 +191,7 @@ export default {
       records: [],
       rowsPerPageItems: [5, 10, 25, 50, 100],
       selected: [],
-      narrowFormat: this.$vuetify.breakpoint.xs,
-      narrowDataCellColumns: 7,
-      narrowHeaderCellColumns: 3
+      narrowFormat: this.$vuetify.breakpoint.xs
     };
   },
   props: {
@@ -232,10 +225,11 @@ export default {
       if (newValue.length != oldValue.length) {
         this.handleSelectChange();
       }
-    },
-    "$vuetify.breakpoint.xs": function(value) {
-      this.narrowFormat = value;
     }
+    // ,
+    // "$vuetify.breakpoint.xs": function(value) {
+    //   this.narrowFormat = value;
+    // }
   },
   methods: {
     //Used by narrow view to get the "header" text for a column based on the column key
@@ -256,7 +250,8 @@ export default {
       //emit event to parent form of selected rows
       //this.$emit("update:selected", this.selected);
       //Note that this bubbles up all the columns of all the selected rows
-      //could be more efficient if it just sends the ID's instead:
+
+      //so, to be more efficient for now will just send the ID's until I see a need for other shit
       this.$emit("update:selected", window.$gz._.map(this.selected, "id"));
     },
 
@@ -275,20 +270,14 @@ export default {
     ltFormat() {
       return window.$gz.locale.format();
     },
-    // mini() {
-    //   //https://vuetifyjs.com/en/customization/breakpoints#breakpoint-service-object
-    //   return this.$vuetify.breakpoint.xs;
-    // },
-    getDataFromApi() {
-      //debugger;
-      var that = this;
 
-      //DataList/list?DataListKey=TestWidgetDataList&Offset=0&Limit=999&DataFilterId=1&mini=true
+    getDataFromApi() {
+      var that = this;
 
       //start with defaults
       var listOptions = {
         DataListKey: that.dataListKey,
-        Limit: 100,
+        Limit: 5,
         Offset: 0
       };
       //calculate paging based on settings
@@ -302,12 +291,6 @@ export default {
       if (that.dataFilterId != 0) {
         listOptions["DataFilterID"] = that.dataFilterId;
       }
-      //Mini?
-      //OK, seems as though the datatable has a built in ability to handle small viewports by displaying each record vertically instead so maybe I only need
-      //mini for picklists
-      // if (that.$vuetify.breakpoint.xs) {
-      //   listOptions["Mini"] = true;
-      // }
 
       that.loading = true;
 
@@ -373,21 +356,7 @@ function buildHeaders(columnData) {
     h.value = "columns.c" + i.toString(); //+".v";
     ret.push(h);
   }
-  /*
-{https://vuetifyjs.com/en/components/data-tables#api  see headers property for this info:
-  text: string
-  value: string
-  align?: 'start' | 'center' | 'end'
-  sortable?: boolean
-  filterable?: boolean
-  divider?: boolean
-  class?: string | string[]
-  width?: string | number
-  filter?: (value: any, search: string, item: any) => boolean
-  sort?: (a: any, b: any) => number
-}
 
-*/
   return ret;
 }
 
@@ -461,20 +430,6 @@ function buildRecords(listData, columndefinitions, filters) {
   return ret;
 }
 
-/*UiDataTypes
- NoType = 0,
-        DateTime = 1,
-        Date = 2,
-        Time = 3,
-        Text = 4,
-        Integer = 5,
-        Bool = 6,
-        Decimal = 7,
-        Currency = 8,
-        Tags = 9,
-        Enum = 10,
-        EmailAddress = 11
-*/
 //////////////////////////////////////////////////////////
 //
 // Ensures column names are present in locale table
@@ -499,374 +454,4 @@ async function fetchLocalizedHeaderNames(columnData) {
       window.$gz.errorHandler.handleFormError(err);
     });
 }
-
-//DataTable component
-//https://vuetifyjs.com/en/components/data-tables#paginate-and-sort-server-side
-/*
-TODO:
-This handles fetching and displaying the data, the parent form handles all other aspects:
-    - error message display
-    - opening items
-    - selecting filters and adding editing templates
-    
- What is required to be sent to server:
-    - example full request: DataList/list?DataListKey=TestWidgetDataList&Offset=0&Limit=999&DataFilterId=1
-    - example mini request: DataList/list?DataListKey=TestWidgetDataList&Offset=0&Limit=999&DataFilterId=1&mini=true   
-    - Offset        
-    - Limit
-    - DatafilterId
-    - mini=true if XS otherwise nothing
-        
-
-
-What it needs from it's parent form:
-    - form key for saving / getting persistent grid settings
-    - api list url (maybe, or if all from datalist then no)
-    - DataListKey value
-    - filter id
-    - refresh command
-    - rows per page
-
-What it needs to provide TO it's parent form
-  - Custom event for this: https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier
-    - Item click info to trigger opening edit form
-    - Selected items list for mass ops
-    - error event and message in case of server error or other error so parent can handle it 
-        - Grid is responsible ONLY for showing data, nothing else
-    
-
-What will be delivered by the server:
-Example request: http://localhost:7575/api/v8/DataList/List?Offset=2&Limit=2&DataListKey=TestWidgetDataList
-Full response object:
-{
-  "data": [
-    [
-      {
-        "v": 3
-      },
-      {
-        "v": "Handcrafted Fresh Keyboard 27",
-        "i": 3
-      },
-      {
-        "v": 3
-      },
-      {
-        "v": 697.34
-      },
-      {
-        "v": 128
-      },
-      {
-        "v": "2020-01-28T12:10:46.212435Z"
-      },
-      {
-        "v": true
-      },
-      {
-        "v": "Doug Effertz 17 - OpsAdminFull",
-        "i": 18
-      }
-    ],
-    [
-      {
-        "v": 4
-      },
-      {
-        "v": "Unbranded Fresh Shoes 28",
-        "i": 4
-      },
-      {
-        "v": 4
-      },
-      {
-        "v": 219.09
-      },
-      {
-        "v": 16
-      },
-      {
-        "v": "2020-01-28T12:33:14.347243Z"
-      },
-      {
-        "v": true
-      },
-      {
-        "v": "Samuel Powlowski 14 - CustomerLimited",
-        "i": 15
-      }
-    ]
-  ],
-  "paging": {
-    "count": 100,
-    "offset": 2,
-    "limit": 2,
-    "first": "http://localhost:7575/api/v8/DataList/List?DataListKey=TestWidgetDataList&pageNo=1&pageSize=2",
-    "previous": "http://localhost:7575/api/v8/DataList/List?DataListKey=TestWidgetDataList&pageNo=1&pageSize=2",
-    "next": "http://localhost:7575/api/v8/DataList/List?DataListKey=TestWidgetDataList&pageNo=3&pageSize=2",
-    "last": "http://localhost:7575/api/v8/DataList/List?DataListKey=TestWidgetDataList&pageNo=50&pageSize=2"
-  },
-  "columns": [
-    {
-      "cm": "df",
-      "dt": 0,
-      "ay": 2
-    },
-    {
-      "cm": "WidgetName",
-      "dt": 4,
-      "ay": 2
-    },
-    {
-      "cm": "WidgetSerial",
-      "dt": 5
-    },
-    {
-      "cm": "WidgetDollarAmount",
-      "dt": 8
-    },
-    {
-      "cm": "WidgetRoles",
-      "dt": 10
-    },
-    {
-      "cm": "WidgetStartDate",
-      "dt": 1
-    },
-    {
-      "cm": "Active",
-      "dt": 6
-    },
-    {
-      "cm": "User",
-      "dt": 4,
-      "ay": 3
-    }
-  ]
-}
-
-MINI Response object:
-{
-  "data": [
-    [
-      {
-        "v": 3
-      },
-      {
-        "v": "Handmade Soft Towels 27",
-        "i": 3
-      },
-      {
-        "v": 3
-      }
-    ],
-    [
-      {
-        "v": 4
-      },
-      {
-        "v": "Handcrafted Cotton Cheese 28",
-        "i": 4
-      },
-      {
-        "v": 4
-      }
-    ]
-  ],
-  "paging": {
-    "count": 100,
-    "offset": 2,
-    "limit": 2,
-    "first": "http://localhost:7575/api/v8/DataList/List?DataListKey=TestWidgetDataList&Mini=True&pageNo=1&pageSize=2",
-    "previous": "http://localhost:7575/api/v8/DataList/List?DataListKey=TestWidgetDataList&Mini=True&pageNo=1&pageSize=2",
-    "next": "http://localhost:7575/api/v8/DataList/List?DataListKey=TestWidgetDataList&Mini=True&pageNo=3&pageSize=2",
-    "last": "http://localhost:7575/api/v8/DataList/List?DataListKey=TestWidgetDataList&Mini=True&pageNo=50&pageSize=2"
-  },
-  "columns": [
-    {
-      "cm": "df",
-      "dt": 0,
-      "ay": 2
-    },
-    {
-      "cm": "Widget",
-      "dt": 4,
-      "ay": 2
-    }
-  ]
-}
-
-What this grid needs to do:
-    - On created or refresh or change of filter
-        - set Loading property to true on data object
-        - send the get request to the server based on filter, viewport etc
-            - On receipt of successful response
-                - update the paging values
-                - update the persistent form settings with the current grid selections for paging etc
-                - generate the column headers 
-                    - They will have locale keys so this grid fetches the keys as necessary at this point as it could change dynamically almost
-                - Generate the Item slot template (which I've never done in code before but only in the template itself so needs research)
-                    - set the property names in the incoming data to the correct matching headers
-                    - set display filters based on locale settings (i.e. currency, datetime filter which converts to local time offset etc)              
-                - fill the rows
-                    - format?
-            - On fail
-                - Do something
-        - set loading property to false
-
-
-
-TODO:
-     - Start coding grid here with vue component parameters and handlers first and in conjunction with test-widgets.vue
-     - Once it's parent / component properties are set then get into the details
-
-
-
-
-Headers: [ 
-  { 
-    "text": "Name", 
-"value": "c1" }, { 
-  "text": "Serial #", 
-  "value": "c2" }, { "text": "Price", "value": "c3" }, { "text": "Roles", "value": "c4" }, { "text": "Start", "value": "c5" }, { "text": "Active", "value": "c6" }, { "text": "User", "value": "c7" } ]
-Records: [ { "c1": "Awesome Steel Table 25", "c2": 1, "c3": 676.64, "c4": 0, "c5": "2020-01-28T16:50:29.371098Z", "c6": true, "c7": "Cameron Marvin 1 - BizAdminLimited" }, { "c1": "Fantastic Concrete Soap 26", "c2": 2, "c3": 310.6, "c4": 32768, "c5": "2020-01-28T15:56:47.362545Z", "c6": true, "c7": "Becky Parker 9 - TechFull" }, { "c1": "Handmade Soft Towels 27", "c2": 3, "c3": 463.7, "c4": 8, "c5": "2020-01-28T16:55:51.487005Z", "c6": true, "c7": "Zachary Renner 14 - CustomerLimited" }, { "c1": "Handcrafted Cotton Cheese 28", "c2": 4, "c3": 934.95, "c4": 1, "c5": "2020-01-28T16:55:23.324561Z", "c6": true, "c7": "Zachary Renner 14 - CustomerLimited" }, { "c1": "Refined Concrete Salad 29", "c2": 5, "c3": 758.3, "c4": 32, "c5": "2020-01-28T16:00:46.703856Z", "c6": true, "c7": "Terri Paucek 2 - BizAdminFull" }, { "c1": "Licensed Concrete Chips 30", "c2": 6, "c3": 580.73, "c4": 2048, "c5": "2020-01-28T16:44:29.601375Z", "c6": true, "c7": "Virginia Friesen 17 - OpsAdminFull" }, { "c1": "Handmade Cotton Pants 31", "c2": 7, "c3": 880.37, "c4": 1024, "c5": "2020-01-28T16:43:44.380156Z", "c6": true, "c7": "Bernadette Denesik 12 - SubContractorLimited" }, { "c1": "Refined Cotton Sausages 32", "c2": 8, "c3": 615.32, "c4": 1, "c5": "2020-01-28T16:33:10.667606Z", "c6": true, "c7": "Alberta Gleichner 22 - fr" }, { "c1": "Tasty Soft Hat 33", "c2": 9, "c3": 273.68, "c4": 512, "c5": "2020-01-28T16:19:12.318658Z", "c6": true, "c7": "Sadie Stehr 15 - CustomerFull" }, { "c1": "Refined Frozen Bike 35", "c2": 11, "c3": 538.56, "c4": 32, "c5": "2020-01-28T16:46:25.906627Z", "c6": true, "c7": "Sadie Stehr 15 - CustomerFull" } ]
-
- headers: [
-          {
-            text: 'Dessert (100g serving)',
-            align: 'left',
-            sortable: false,
-            value: 'name',
-          },
-          { text: 'c2', value: 'c2' },
-          { text: 'c3 (g)', value: 'c3' },
-          { text: 'c4 (g)', value: 'c4' },
-          { text: 'c5 (g)', value: 'c5' },
-          { text: 'Iron (%)', value: 'c6' },
-        ],
-
-        [
-          {
-            name: 'Frozen Yogurt',
-            c2: 159,
-            c3: 6.0,
-            c4: 24,
-            c5: 4.0,
-            c6: '1%',
-          },
-          {
-            name: 'Ice cream sandwich',
-            c2: 237,
-            c3: 9.0,
-            c4: 37,
-            c5: 4.3,
-            c6: '1%',
-          },
-          {
-            name: 'Eclair',
-            c2: 262,
-            c3: 16.0,
-            c4: 23,
-            c5: 6.0,
-            c6: '7%',
-          },
-          {
-            name: 'Cupcake',
-            c2: 305,
-            c3: 3.7,
-            c4: 67,
-            c5: 4.3,
-            c6: '8%',
-          },
-          {
-            name: 'Gingerbread',
-            c2: 356,
-            c3: 16.0,
-            c4: 49,
-            c5: 3.9,
-            c6: '16%',
-          },
-          {
-            name: 'Jelly bean',
-            c2: 375,
-            c3: 0.0,
-            c4: 94,
-            c5: 0.0,
-            c6: '0%',
-          },
-          {
-            name: 'Lollipop',
-            c2: 392,
-            c3: 0.2,
-            c4: 98,
-            c5: 0,
-            c6: '2%',
-          },
-          {
-            name: 'Honeycomb',
-            c2: 408,
-            c3: 3.2,
-            c4: 87,
-            c5: 6.5,
-            c6: '45%',
-          },
-          {
-            name: 'Donut',
-            c2: 452,
-            c3: 25.0,
-            c4: 51,
-            c5: 4.9,
-            c6: '22%',
-          },
-          {
-            name: 'KitKat',
-            c2: 518,
-            c3: 26.0,
-            c4: 65,
-            c5: 7,
-            c6: '6%',
-          },
-        ]
-      },
-    },
-  }
-
-
-  MOBILE VIEW
-  https://github.com/vuetifyjs/vuetify/blob/088a5093ea6396d1ff12e0d62143f89572c667d6/packages/vuetify/src/components/VDataTable/MobileRow.ts
-<div class="v-data-table__wrapper">
-<table><colgroup><col class=""><col class=""><col class=""><col class=""><col class=""><col class=""></colgroup>
-<thead class="v-data-table-header v-data-table-header-mobile"><tr><th><div class="v-data-table-header-mobile__wrapper"><div class="v-input v-input--hide-details v-input--is-focused theme--light v-text-field v-text-field--is-booted v-select primary--text"><div class="v-input__control"><div role="button" aria-haspopup="listbox" aria-expanded="false" aria-owns="list-6106" class="v-input__slot"><div class="v-select__slot"><label for="input-6106" class="v-label v-label--active theme--light primary--text" style="left: 0px; right: auto; position: absolute;">Sort by</label><div class="v-select__selections"><input id="input-6106" readonly="readonly" type="text" aria-readonly="true" autocomplete="off"></div><div class="v-input__append-inner"><div class="v-input__icon v-input__icon--append"><i aria-hidden="true" class="v-icon notranslate mdi mdi-menu-down theme--light primary--text"></i></div></div><input type="hidden">
-</div><div class="v-menu"><div class="v-menu__content theme--light " style="max-height: 304px; min-width: 0px; top: 12px; left: 0px; transform-origin: left top 0px; z-index: 0; display: none;"></div></div></div></div></div></div></th></tr></thead>
-<tbody>
-<tr class="v-data-table__mobile-table-row">
-
-<td class="v-data-table__mobile-row">
-<div class="v-data-table__mobile-row__header">Dessert (100g serving)</div>
-<div class="v-data-table__mobile-row__cell">Frozen Yogurt</div>
-</td>
-
-<td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Calories</div><div class="v-data-table__mobile-row__cell">159</div></td>
-<td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Fat (g)</div><div class="v-data-table__mobile-row__cell">6</div></td>
-<td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Carbs (g)</div><div class="v-data-table__mobile-row__cell">24</div></td>
-<td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Protein (g)</div><div class="v-data-table__mobile-row__cell">4</div></td>
-<td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Iron (%)</div><div class="v-data-table__mobile-row__cell">1%</div></td></tr>
-<tr class="v-data-table__mobile-table-row"><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Dessert (100g serving)</div><div class="v-data-table__mobile-row__cell">Ice cream sandwich</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Calories</div><div class="v-data-table__mobile-row__cell">237</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Fat (g)</div><div class="v-data-table__mobile-row__cell">9</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Carbs (g)</div><div class="v-data-table__mobile-row__cell">37</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Protein (g)</div><div class="v-data-table__mobile-row__cell">4.3</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Iron (%)</div><div class="v-data-table__mobile-row__cell">1%</div></td></tr><tr class="v-data-table__mobile-table-row"><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Dessert (100g serving)</div><div class="v-data-table__mobile-row__cell">Eclair</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Calories</div><div class="v-data-table__mobile-row__cell">262</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Fat (g)</div><div class="v-data-table__mobile-row__cell">16</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Carbs (g)</div><div class="v-data-table__mobile-row__cell">23</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Protein (g)</div><div class="v-data-table__mobile-row__cell">6</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Iron (%)</div><div class="v-data-table__mobile-row__cell">7%</div></td></tr><tr class="v-data-table__mobile-table-row"><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Dessert (100g serving)</div><div class="v-data-table__mobile-row__cell">Cupcake</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Calories</div><div class="v-data-table__mobile-row__cell">305</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Fat (g)</div><div class="v-data-table__mobile-row__cell">3.7</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Carbs (g)</div><div class="v-data-table__mobile-row__cell">67</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Protein (g)</div><div class="v-data-table__mobile-row__cell">4.3</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Iron (%)</div><div class="v-data-table__mobile-row__cell">8%</div></td></tr><tr class="v-data-table__mobile-table-row"><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Dessert (100g serving)</div><div class="v-data-table__mobile-row__cell">Gingerbread</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Calories</div><div class="v-data-table__mobile-row__cell">356</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Fat (g)</div><div class="v-data-table__mobile-row__cell">16</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Carbs (g)</div><div class="v-data-table__mobile-row__cell">49</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Protein (g)</div><div class="v-data-table__mobile-row__cell">3.9</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Iron (%)</div><div class="v-data-table__mobile-row__cell">16%</div></td>
-</tr>
-</tbody>
-</table>
-</div>
-
-Mobile Checkbox row
-<td class="v-data-table__mobile-row">
-<div class="v-data-table__mobile-row__header"></div>
-<div class="v-data-table__mobile-row__cell">
-<div class="v-data-table__checkbox v-simple-checkbox">
-<div class="v-input--selection-controls__ripple"></div>
-<i aria-hidden="true" class="v-icon notranslate mdi mdi-checkbox-blank-outline theme--light">
-</i>
-</div>
-</div>
-</td>
-*/
 </script>