
<!--suppress JSAnnotator -->
<template>
  <div class="page" data-name="dashboard">
    {{#unless isHideCloseBtn}}
    <div class="navbar">
      <div class="navbar-inner">
        <div class="left"></div>
        <div class="title">
          {{@global.LANGUAGE.HOME_MSG022 }}
        </div>
        <div class="right">
          {{#unless TypeDealer}}
          <p class="segmented segmented-raised no-margin min-width-300 color-white">
            <button @click="changeDisplayDataPeriod" data-period="1"
              class="button button-outline {{#js_if 'this.DisplayDataPeriod === 1'}}button-active{{/js_if}}">{{@global.LANGUAGE.COM_MSG100}}</button>
            <button @click="changeDisplayDataPeriod" data-period="3"
              class="button button-outline {{#js_if 'this.DisplayDataPeriod === 3'}}button-active{{/js_if}}">{{@global.LANGUAGE.COM_MSG101}}</button>
            <button @click="changeDisplayDataPeriod" data-period="7"
              class="button button-outline {{#js_if 'this.DisplayDataPeriod === 7'}}button-active{{/js_if}}">{{@global.LANGUAGE.COM_MSG102}}</button>
          </p>
          {{/unless}}
          {{#unless isHideCloseBtn}}
          <a href="#" class="link popup-close" data-popup=".popup-fullscreen-dashboard">
            <i class="f7-icons">close</i>
          </a>
          {{/unless}}
        </div>
      </div>
    </div>
    {{/unless}}

    <div class="page-content bg-color-lightgray ">

      {{#js_if "this.isHideCloseBtn && !this.TypeDealer" }}
      <div class="row">
        <div class="col">
          <p
            class="segmented segmented-raised color-darkgray min-width-300 width-fit margin-left-auto margin-right-8 margin-bottom-8 margin-top">
            <button @click="changeDisplayDataPeriod" data-period="1"
              class="button button-outline {{#js_if 'this.DisplayDataPeriod === 1'}}button-active{{/js_if}}">{{@global.LANGUAGE.COM_MSG100}}</button>
            <button @click="changeDisplayDataPeriod" data-period="3"
              class="button button-outline {{#js_if 'this.DisplayDataPeriod === 3'}}button-active{{/js_if}}">{{@global.LANGUAGE.COM_MSG101}}</button>
            <button @click="changeDisplayDataPeriod" data-period="7"
              class="button button-outline {{#js_if 'this.DisplayDataPeriod === 7'}}button-active{{/js_if}}">{{@global.LANGUAGE.COM_MSG102}}</button>
          </p>
        </div>
      </div>
      {{/js_if}}

      <div class="row no-gap overflow-hidden position-relative">
        <div class="progressbar-container page-progressbar"></div>
        {{#if TypeDealer}}
        <div key="KeyDDeviceInventory" class="col-50 tablet-25  ">
          <div class="card dashboard-card-type1 elevation-6 elevation-hover-9 elevation-transition">
            <div class="card-header bg-color-darkgray text-color-white">
              {{@global.LANGUAGE.DASHBOARD_PANEL_MSG04 }}
            </div>
            <div class="card-content display-flex align-items-center">
              {{#if DashboardDataLoaded}}
              <div key="KeyDDeviceInventoryList" class="list no-hairlines no-hairlines-between">
                <ul>
                  <li>
                    <div class="item-content tooltip-init"
                      ><!--data-tooltip="{{@global.LANGUAGE.DASHBOARD_PANEL_MSG61}}" @click="getReportData"
                      data-report-type="23"-->
                      <div class="item-inner">
                        <div class="item-title ">
                          {{@global.LANGUAGE.DASHBOARD_PANEL_MSG08}}
                        </div>
                        <div class="item-after">
                          {{DeviceInventory.Installed}}
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="item-content tooltip-init"
                      ><!--data-tooltip="{{@global.LANGUAGE.DASHBOARD_PANEL_MSG64}}" @click="getReportData"
                      data-report-type="27"-->
                      <div class="item-inner">
                        <div class="item-title ">
                          {{@global.LANGUAGE.DASHBOARD_PANEL_MSG63}}
                        </div>
                        <div class="item-after">
                          {{DeviceInventory.DeActivate}}
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="item-content  tooltip-init"
                      ><!--data-tooltip="{{@global.LANGUAGE.DASHBOARD_PANEL_MSG62}}" @click="getReportData"
                      data-report-type="24"-->
                      <div class="item-inner">
                        <div class="item-title ">
                          {{@global.LANGUAGE.DASHBOARD_PANEL_MSG09}}
                        </div>
                        <div class="item-after">
                          {{DeviceInventory.NotInstalled}}
                        </div>
                      </div>
                    </div>
                  </li>
                  <li class="card-content-divider"></li>
                  <li>
                    <div class="item-content cursor-pointer tooltip-init"  @click="getReportData"
						data-report-type="23"
						data-tooltip="{{@global.LANGUAGE.DASHBOARD_PANEL_MSG10}}">
                      <div class="item-inner">
                        <div class="item-title " >
                          {{@global.LANGUAGE.DASHBOARD_PANEL_MSG10}}
                        </div>
                        <div class="item-after">
                          {{DeviceInventory.Total}}
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
              {{else}}
              <div key="KeyDDeviceInventoryListLoader" class="block text-align-center margin-auto">
                <div class="preloader color-red"></div>
              </div>
              {{/if}}
            </div>
          </div>
        </div>
        {{else}}
        {{#if @global.IS_MARINE}}
        <div key="KeyCBilgeAlarmsGraph" class="col-50 tablet-20  ">
          <div class="card dashboard-card-type1 elevation-6 elevation-hover-9 elevation-transition">
            <div class="card-header bg-color-darkgray overflow-hidden no-padding text-color-white bilge-alarm-filter">
              <div class="progressbar-container"></div>
              <span class="padding-horizontal">{{ @global.LANGUAGE.DASHBOARD_PANEL_MSG70 }}</span>
            </div>
            <div class="card-content card-content-padding">
              {{#if DashboardDataLoadedEndUserAlarmLog}}
              <div key="KeyChartBilgeAlarms" id="chart-GBilgeAlarms"></div>
              <div class="chart-total-value">
                <div class="display-flex justify-content-space-between align-content-end">
                  {{@global.LANGUAGE.DASHBOARD_PANEL_MSG71}}<span>{{TotalInput1Alarms}}</span></div>
              </div>
              {{else}}
              <div key="KeyChartBilgeAlarmsLoader" class="absolute-center">
                <div class="preloader color-red"></div>
              </div>
              {{/if}}
            </div>
          </div>
        </div>
        {{else}}
        <div key="KeyCDiverBehaviour" class="col-50 tablet-20  ">
          <div class="card dashboard-card-type1 elevation-6 elevation-hover-9 elevation-transition">
            {{#unless DashboardDataLoadedEndUserDriverBehaviour}}
            <div key="KeyDriverBehaviourLoader" class="absolute-center">
              <div class="preloader color-red"></div>
            </div>
            {{else}}
            <div key="KeyDriverBehaviourHeader"
              class="card-header bg-color-darkgray overflow-hidden no-padding text-color-white driver-behaviour-filter">
              <div class="progressbar-container"></div>
              <div class="list no-hairlines no-hairlines-between" style="width:100%;">
                <ul>
                  {{#unless isDriverBehaviourSupported}}
                  <li key="KeyDriverBehaviourHeaderNoSupport">
                    <div class="item-content">
                      <div class="item-inner">
                        <div class="item-title text-color-white">
                          {{@global.LANGUAGE.DASHBOARD_PANEL_MSG65}}
                        </div>
                      </div>
                    </div>
                  </li>
                  {{else}}
                  <li key="KeyDriverBehaviourHeaderSmartSelect">
                    <a class="item-link smart-select smart-select-init" data-open-in="popover"
                      data-close-on-select="true">
                      <select name="dashboard-driver-behaviour-assets-filter">
                        {{#DriverBehaviourAssets}}
                        <option value="{{IMEI}}">{{Name}}</option>
                        {{/DriverBehaviourAssets}}
                      </select>
                      <div class="item-content">
                        <div class="item-inner">
                          <div class="item-title text-color-white tooltip-init"
                            data-tooltip="{{@global.LANGUAGE.DASHBOARD_PANEL_MSG65 }}">
                            {{@global.LANGUAGE.DASHBOARD_PANEL_MSG65 }}</div>
                          <div class="item-after text-color-white"></div>
                        </div>
                      </div>
                    </a>
                  </li>
                  {{/unless}}
                </ul>
              </div>
            </div>

            <div key="KeyDriverBehaviourContent" class="card-content display-flex align-items-center">
              {{#unless isDriverBehaviourSupported}}
              <div class="block text-align-center">
                <p>{{@global.LANGUAGE.PROMPT_MSG0122}}</p>
              </div>
              {{else}}
              <div key="KeyDriverBehaviourContentList" class="list no-hairlines no-hairlines-between list-li-smaller">
                <ul>
                  <li>
                    <div class="item-content no-padding-left">
                      <div class="item-inner no-padding-right">
                        <div class="item-title margin-auto text-align-center padding-bottom">
                          <div class="item-header " style="color: {{DriverBehaviourCurrentAssetStats.Color}}">
                            {{DriverBehaviourCurrentAssetStats.Points}} of 100 points</div>
                          {{DriverBehaviourCurrentAssetStats.StarsTemplate}}
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="item-content cursor-pointer tooltip-init"
                      data-tooltip="{{@global.LANGUAGE.ASSET_RATING_MSG02}}" @click="getReportData"
                      data-report-type="28">
                      <div class="item-inner">
                        <div class="item-title ">
                          {{@global.LANGUAGE.ASSET_RATING_MSG02}}
                        </div>
                        <div class="item-after">
                          {{DriverBehaviourCurrentAssetStats.HarshBracking}}
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="item-content cursor-pointer tooltip-init"
                      data-tooltip="{{@global.LANGUAGE.ASSET_RATING_MSG03}}" @click="getReportData"
                      data-report-type="28">
                      <div class="item-inner">
                        <div class="item-title ">
                          {{@global.LANGUAGE.ASSET_RATING_MSG03}}
                        </div>
                        <div class="item-after">
                          {{DriverBehaviourCurrentAssetStats.HarshAcceleration}}
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="item-content cursor-pointer tooltip-init"
                      data-tooltip="{{@global.LANGUAGE.ASSET_RATING_MSG04}}" @click="getReportData"
                      data-report-type="28">
                      <div class="item-inner">
                        <div class="item-title ">
                          {{@global.LANGUAGE.ASSET_RATING_MSG04}}
                        </div>
                        <div class="item-after">
                          {{DriverBehaviourCurrentAssetStats.ExcessiveIdling}}
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="item-content cursor-pointer tooltip-init"
                      data-tooltip="{{@global.LANGUAGE.ASSET_RATING_MSG05}}" @click="getReportData"
                      data-report-type="28">
                      <div class="item-inner">
                        <div class="item-title ">
                          {{@global.LANGUAGE.ASSET_RATING_MSG05}}
                        </div>
                        <div class="item-after">
                          {{DriverBehaviourCurrentAssetStats.Speeding}}
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="item-content cursor-pointer tooltip-init"
                      data-tooltip="{{@global.LANGUAGE.REPORT_PANEL_MSG122}}" @click="getReportData"
                      data-report-type="28">
                      <div class="item-inner">
                        <div class="item-title ">
                          {{@global.LANGUAGE.REPORT_PANEL_MSG122}}
                        </div>
                        <div class="item-after">
                          {{DriverBehaviourCurrentAssetStats.MileageFormatted}}
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="item-content cursor-pointer tooltip-init"
                      data-tooltip="{{@global.LANGUAGE.REPORT_PANEL_MSG101}}" @click="getReportData"
                      data-report-type="28">
                      <div class="item-inner">
                        <div class="item-title ">
                          {{@global.LANGUAGE.REPORT_PANEL_MSG101}}
                        </div>
                        <div class="item-after">
                          {{DriverBehaviourCurrentAssetStats.DurationFormatted}}
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
              {{/unless}}
            </div>
            {{/unless}}
          </div>
        </div>
        {{/if}}


        <!--<div key="KeyCDeviceSatus" class="col-50 tablet-20  ">
          <div class="card dashboard-card-type1 elevation-6 elevation-hover-9 elevation-transition">
            <div class="card-header bg-color-darkgray text-color-white">
              {{@global.LANGUAGE.DASHBOARD_PANEL_MSG05 }}
            </div>
            <div class="card-content display-flex align-items-center">
              {{#if DashboardDataLoadedEndUserDeviceStatus}}
              <div key="KeyCDeviceSatusList" class="list no-hairlines no-hairlines-between">
                <ul>
                  <li>
                    <div class="item-content link cursor-pointer tooltip-init" data-tooltip="{{@global.LANGUAGE.DASHBOARD_PANEL_MSG50}}" @click="getReportData" data-report-type="11">
                      <div class="item-inner">
                        <div class="item-title ">
                          {{@global.LANGUAGE.DASHBOARD_PANEL_MSG50}}
                        </div>
                        <div class="item-after">
                          {{EndUserDeviceStatus.InLot}}
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="item-content link cursor-pointer tooltip-init" data-tooltip="{{@global.LANGUAGE.DASHBOARD_PANEL_MSG51}}" @click="getReportData" data-report-type="11">
                      <div class="item-inner">
                        <div class="item-title" >
                          {{@global.LANGUAGE.DASHBOARD_PANEL_MSG51}}
                        </div>
                        <div class="item-after">
                          {{EndUserDeviceStatus.OffLot}}
                        </div>
                      </div>
                    </div>
                  </li>
                  <li class="card-content-divider"></li>
                  <li>
                    <div class="item-content link cursor-pointer tooltip-init" data-tooltip="{{@global.LANGUAGE.DASHBOARD_PANEL_MSG13}}" @click="getReportData" data-report-type="11" >
                      <div class="item-inner">
                        <div class="item-title ">
                          {{@global.LANGUAGE.DASHBOARD_PANEL_MSG13}}
                        </div>
                        <div class="item-after">
                          {{EndUserDeviceStatus.Total}}
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
              {{else}}
              <div key="KeyCDeviceSatusListLoader" class="block text-align-center margin-auto">
                <div class="preloader color-red"></div>
              </div>
              {{/if}}
            </div>
          </div>
        </div>-->
        {{/if}}

        {{#if TypeDealer}}
        <div key="KeyDDeviceSatus" class="col-50 tablet-25  ">
          <div class="card dashboard-card-type1 elevation-6 elevation-hover-9 elevation-transition">
            <div class="card-header bg-color-darkgray text-color-white">
              {{@global.LANGUAGE.DASHBOARD_PANEL_MSG05 }}
            </div>
            <div class="card-content display-flex align-items-center">
              {{#if DashboardDataLoaded}}
              <div key="KeyDDeviceSatusList" class="list no-hairlines no-hairlines-between">
                <ul>
                  <li>
                    <div class="item-content link cursor-pointer tooltip-init"
                      data-tooltip="{{@global.LANGUAGE.DASHBOARD_PANEL_MSG36}}" @click="getReportData"
                      data-report-type="6">
                      <div class="item-inner">
                        <div class="item-title ">
                          <!-- tooltip-init data-tooltip="{{@global.LANGUAGE.DASHBOARD_PANEL_MSG11}}" -->
                          {{@global.LANGUAGE.DASHBOARD_PANEL_MSG11}}
                        </div>
                        <div class="item-after">
                          {{DeviceStatus.InLot}}
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="item-content link cursor-pointer tooltip-init"
                      data-tooltip="{{@global.LANGUAGE.DASHBOARD_PANEL_MSG37}}" @click="getReportData"
                      data-report-type="7">
                      <div class="item-inner">
                        <div class="item-title">
                          <!-- tooltip-init data-tooltip="{{@global.LANGUAGE.DASHBOARD_PANEL_MSG12}}" -->
                          {{@global.LANGUAGE.DASHBOARD_PANEL_MSG12}}
                        </div>
                        <div class="item-after">
                          {{DeviceStatus.OffLot}}
                        </div>
                      </div>
                    </div>
                  </li>
                  <li class="card-content-divider"></li>
                  <li>
                    <div class="item-content link cursor-pointer tooltip-init"
                      data-tooltip="{{@global.LANGUAGE.DASHBOARD_PANEL_MSG35}}" @click="getReportData"
                      data-report-type="10">
                      <div class="item-inner">
                        <div class="item-title ">
                          <!-- tooltip-init data-tooltip="{{@global.LANGUAGE.DASHBOARD_PANEL_MSG13}}" -->
                          {{@global.LANGUAGE.DASHBOARD_PANEL_MSG13}}
                        </div>
                        <div class="item-after">
                          {{DeviceStatus.Total}}
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
              {{else}}
              <div key="KeyDDeviceSatusListLoader" class="block text-align-center margin-auto">
                <div class="preloader color-red"></div>
              </div>
              {{/if}}
            </div>
          </div>
        </div>
        {{else}}
        <div key="KeyCAlarmLog" class="col-50 tablet-20  ">
          <div class="card dashboard-card-type1 elevation-6 elevation-hover-9 elevation-transition">
            <div class="card-header bg-color-darkgray no-padding text-color-white alarm-log-filter">
              <div class="progressbar-container"></div>
              <span class="padding-horizontal">{{ @global.LANGUAGE.DASHBOARD_PANEL_MSG41 }}</span>
            </div>
            <div class="card-content display-flex align-items-center">
              {{#if DashboardDataLoadedEndUserAlarmLog}}
              <div key="KeyCAlarmLogList" class="list no-hairlines no-hairlines-between">
                <ul>
                  <li>
                    <div class="item-content cursor-pointer tooltip-init"
                      data-tooltip="{{@global.LANGUAGE.DASHBOARD_PANEL_MSG45}}" @click="getReportData"
                      data-report-type="9" data-report-alert-type="512">
                      <div class="item-inner">
                        <div class="item-title">
                          {{@global.LANGUAGE.DASHBOARD_PANEL_MSG45}}
                        </div>
                        <div class="item-after">
                          {{EndUserAlarmLogFormatted.LowBattery}}
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="item-content cursor-pointer tooltip-init"
                      data-tooltip="{{@global.LANGUAGE.DASHBOARD_PANEL_MSG46}}" @click="getReportData"
                      data-report-type="9" data-report-alert-type="4">
                      <div class="item-inner">
                        <div class="item-title ">
                          {{@global.LANGUAGE.DASHBOARD_PANEL_MSG46}}
                        </div>
                        <div class="item-after">
                          {{EndUserAlarmLogFormatted.PowerDisconnect}}
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="item-content cursor-pointer tooltip-init"
                      data-tooltip="{{@global.LANGUAGE.DASHBOARD_PANEL_MSG47}}" @click="getReportData"
                      data-report-type="9" data-report-alert-type="32">
                      <div class="item-inner">
                        <div class="item-title ">
                          {{@global.LANGUAGE.DASHBOARD_PANEL_MSG47}}
                        </div>
                        <div class="item-after">
                          {{EndUserAlarmLogFormatted.Speeding}}
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="item-content cursor-pointer tooltip-init"
                      data-tooltip="{{@global.LANGUAGE.DASHBOARD_PANEL_MSG49}}" @click="getReportData"
                      data-report-type="9" data-report-alert-type="">
                      <div class="item-inner">
                        <div class="item-title ">
                          {{@global.LANGUAGE.DASHBOARD_PANEL_MSG49}}
                        </div>
                        <div class="item-after">
                          {{EndUserAlarmLogFormatted.All}}
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
              {{else}}
              <div key="KeyCAlarmLogListLoader" class="block text-align-center margin-auto">
                <div class="preloader color-red"></div>
              </div>
              {{/if}}
            </div>
          </div>
        </div>
        {{/if}}

        {{#if TypeDealer}}
        <div key="KeyDMiscRep" class="col-50 tablet-25  ">
          <div class="card dashboard-card-type1 elevation-6 elevation-hover-9 elevation-transition">
            <div class="card-header bg-color-darkgray text-color-white">
              {{@global.LANGUAGE.DASHBOARD_PANEL_MSG06 }}
            </div>
            <div class="card-content display-flex align-items-center">
              {{#if DashboardDataLoaded}}
              <div key="KeyDMiscRepList" class="list no-hairlines no-hairlines-between">
                <ul>
                  <li>
                    <div class="item-content cursor-pointer tooltip-init"
                      data-tooltip="{{@global.LANGUAGE.DASHBOARD_PANEL_MSG57}}" @click="getReportData"
                      data-report-type="1" data-battery-threshold="10">
                      <div class="item-inner">
                        <div class="item-title">
                          {{@global.LANGUAGE.DASHBOARD_PANEL_MSG18}}
                        </div>
                        <div class="item-after">
                          {{Miscellaneous.LowPowerAlertCount}}
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="item-content cursor-pointer tooltip-init"
                      data-tooltip="{{@global.LANGUAGE.DASHBOARD_PANEL_MSG58}}" @click="getReportData"
                      data-report-type="3">
                      <div class="item-inner">
                        <div class="item-title">
                          {{@global.LANGUAGE.DASHBOARD_PANEL_MSG19}}
                        </div>
                        <div class="item-after">
                          <!--{{Miscellaneous.NotReportingCount}}-->0
                        </div>
                      </div>
                    </div>
                  </li>
                  <!--<li>
                     <div class="item-content">
                      <div class="item-inner">
                        <div class="item-title tooltip-init" data-tooltip="{{@global.LANGUAGE.DASHBOARD_PANEL_MSG20}}">
                          {{@global.LANGUAGE.DASHBOARD_PANEL_MSG20}}
                        </div>
                        <div class="item-after">
                          0
                        </div>
                      </div>
                    </div>
                  </li>-->
                  <li>
                    <div class="item-content cursor-pointer tooltip-init"
                      data-tooltip="{{@global.LANGUAGE.DASHBOARD_PANEL_MSG60}}" @click="getReportData"
                      data-report-type="22">
                      <div class="item-inner">
                        <div class="item-title">
                          {{@global.LANGUAGE.DASHBOARD_PANEL_MSG21}}
                        </div>
                        <div class="item-after">
                          {{Miscellaneous.MissingStockNumber}}
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
              {{else}}
              <div key="KeyDMiscRepListLoader" class="block text-align-center margin-auto">
                <div class="preloader color-red"></div>
              </div>
              {{/if}}
            </div>
          </div>
        </div>
        {{else}}
        <div key="KeyCOverview" class="col-50 tablet-20  ">
          <div class="card dashboard-card-type1 elevation-6 elevation-hover-9 elevation-transition">

            <div
              class="card-header bg-color-darkgray overflow-hidden no-padding text-color-white dashboard-overview-filter">
              <div class="progressbar-container"></div>
              <span class="padding-horizontal">{{ @global.LANGUAGE.DASHBOARD_PANEL_MSG43 }}</span>
              <!--<div class="list no-hairlines no-hairlines-between" style="width:100%;" >
                <ul>
                  <li>
                    <a class="item-link smart-select smart-select-init" data-open-in="popover" data-close-on-select="true">
                      <select name="dashboard-overview-filter">
                        <option value="1" selected>{{@global.LANGUAGE.COM_MSG100}}</option>
                        <option value="3" >{{@global.LANGUAGE.COM_MSG101}}</option>
                        <option value="7">{{@global.LANGUAGE.COM_MSG102}}</option>
                      </select>
                      <div class="item-content">
                        <div class="item-inner">
                          <div class="item-title text-color-white tooltip-init" data-tooltip="{{@global.LANGUAGE.DASHBOARD_PANEL_MSG43 }}">{{@global.LANGUAGE.DASHBOARD_PANEL_MSG43 }}</div>
                          <div class="item-after  text-color-white"></div>
                        </div>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>-->
            </div>
            <div class="card-content card-content-padding">
              {{#if DashboardDataLoadedEndUserOverview}}
              <div key="KeyChartGOverview" id="chart-GOverview"></div>
              {{else}}
              <div key="KeyChartGOverviewLoader" class="absolute-center">
                <div class="preloader color-red"></div>
              </div>
              {{/if}}
            </div>
          </div>
        </div>
        {{/if}}

        {{#if TypeDealer}}
        <div key="KeyDDevicesSold" class="col-50 tablet-25  ">
          <div class="card dashboard-card-type1 elevation-6 elevation-hover-9 elevation-transition">
            <div class="card-header bg-color-darkgray text-color-white">
              {{@global.LANGUAGE.DASHBOARD_PANEL_MSG07 }}
            </div>
            <div class="card-content display-flex align-items-center">
              {{#if DashboardDataLoaded}}
              <div key="KeyDDevicesSoldList" class="list no-hairlines no-hairlines-between">
                <ul>
                  <!-- <li>
                     <div class="item-content">
                      <div class="item-inner">
                        <div class="item-title tooltip-init" data-tooltip="{{@global.LANGUAGE.DASHBOARD_PANEL_MSG14}}">
                          {{@global.LANGUAGE.DASHBOARD_PANEL_MSG14}}
                        </div>
                        <div class="item-after">
                          {{DevicesSold.ToDay}}
                        </div>
                      </div>
                    </div>
                  </li> -->
                  <li>
                    <div class="item-content tooltip-init cursor-pointer"
                      data-tooltip="{{@global.LANGUAGE.DASHBOARD_PANEL_MSG38}}" @click="getReportData"
                      data-report-type="5" data-report-period="11"
                      data-report-period-text="{{@global.LANGUAGE.COM_MSG59}}">
                      <div class="item-inner">
                        <div class="item-title">
                          <!-- tooltip-init" data-tooltip="{{@global.LANGUAGE.DASHBOARD_PANEL_MSG15}}" -->
                          {{@global.LANGUAGE.DASHBOARD_PANEL_MSG15}}
                        </div>
                        <div class="item-after">
                          {{DevicesSold.ThisWeek}}
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="item-content tooltip-init cursor-pointer"
                      data-tooltip="{{@global.LANGUAGE.DASHBOARD_PANEL_MSG39}}" @click="getReportData"
                      data-report-type="5" data-report-period="21"
                      data-report-period-text="{{@global.LANGUAGE.COM_MSG60}}">
                      <div class="item-inner">
                        <div class="item-title">
                          <!-- tooltip-init" data-tooltip="{{@global.LANGUAGE.DASHBOARD_PANEL_MSG16}}" -->
                          {{@global.LANGUAGE.DASHBOARD_PANEL_MSG16}}
                        </div>
                        <div class="item-after">
                          {{DevicesSold.ThisMonth}}
                        </div>
                      </div>
                    </div>
                  </li>

                  <li>
                    <div class="item-content tooltip-init cursor-pointer"
                      data-tooltip="{{@global.LANGUAGE.DASHBOARD_PANEL_MSG40}}" @click="getReportData"
                      data-report-type="5" data-report-period="61"
                      data-report-period-text="{{@global.LANGUAGE.COM_MSG75}}">
                      <div class="item-inner">
                        <div class="item-title ">
                          <!-- data-tooltip="{{@global.LANGUAGE.DASHBOARD_PANEL_MSG17}}" -->
                          {{@global.LANGUAGE.DASHBOARD_PANEL_MSG17}}
                        </div>
                        <div class="item-after">
                          {{DevicesSold.YearToDate}}
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
              {{else}}
              <div key="KeyDDevicesSoldListLoader" class="block text-align-center margin-auto">
                <div class="preloader color-red"></div>
              </div>
              {{/if}}
            </div>
          </div>
        </div>
        {{else}}
        <div key="KeyCMileage" class="col-50 tablet-20  ">
          <div class="card dashboard-card-type1 elevation-6 elevation-hover-9 elevation-transition">
            <div
              class="card-header bg-color-darkgray overflow-hidden no-padding text-color-white dashboard-total-mileage-filter">
              <div class="progressbar-container"></div>
              <span class="padding-horizontal">{{#if @global.IS_MARINE}}{{ @global.LANGUAGE.DASHBOARD_PANEL_MSG68
                }}{{else}}{{ @global.LANGUAGE.DASHBOARD_PANEL_MSG55 }}{{/if}}</span>
              <!--<div class="list no-hairlines no-hairlines-between" style="width:100%;" >
                <ul>
                  <li>
                    <a class="item-link smart-select smart-select-init" data-open-in="popover" data-close-on-select="true">
                      <select name="dashboard-total-mileage-filter">
                        <option value="1" selected>{{@global.LANGUAGE.COM_MSG100}}</option>
                        <option value="3" >{{@global.LANGUAGE.COM_MSG101}}</option>
                        <option value="7">{{@global.LANGUAGE.COM_MSG102}}</option>
                      </select>
                      <div class="item-content">
                        <div class="item-inner">
                          <div class="item-title text-color-white tooltip-init" data-tooltip="{{@global.LANGUAGE.DASHBOARD_PANEL_MSG55 }}">{{@global.LANGUAGE.DASHBOARD_PANEL_MSG55 }}</div>
                          <div class="item-after  text-color-white"></div>
                        </div>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>-->
            </div>
            <div class="card-content card-content-padding">
              {{#if DashboardDataLoadedEndUserOverview}}
              <div key="KeyChartGMileage" id="chart-GMileage"></div>
              <div class="chart-total-value">
                <div class="display-flex justify-content-space-between">
                  {{#if @global.IS_MARINE}}
                  {{ @global.LANGUAGE.DASHBOARD_PANEL_MSG69 }} <span>{{TotalKMTravelled}}
                    {{@global.LANGUAGE.COM_MSG126}}</span>
                  {{else}}
                  {{ @global.LANGUAGE.DASHBOARD_PANEL_MSG66 }} <span>{{TotalKMTravelled}}
                    {{@global.LANGUAGE.COM_MSG79}}</span>
                  {{/if}}
                </div>
              </div>
              {{else}}
              <div key="KeyChartGMileageLoader" class="absolute-center">
                <div class="preloader color-red"></div>
              </div>
              {{/if}}
            </div>
          </div>
        </div>
        {{/if}}

        {{#unless TypeDealer}}
        <div key="KeyCFuel" class="col-100 tablet-20  ">
          <div class="card dashboard-card-type1 elevation-6 elevation-hover-9 elevation-transition">
            <div
              class="card-header bg-color-darkgray overflow-hidden no-padding text-color-white dashboard-total-fuel-filter">
              <div class="progressbar-container"></div>
              <span class="padding-horizontal">{{ @global.LANGUAGE.DASHBOARD_PANEL_MSG56 }}</span>
              <!--<div class="list no-hairlines no-hairlines-between" style="width:100%;" >
                <ul>
                  <li>
                    <a class="item-link smart-select smart-select-init" data-open-in="popover" data-close-on-select="true">
                      <select name="dashboard-total-fuel-filter">
                        <option value="1" selected>{{@global.LANGUAGE.COM_MSG100}}</option>
                        <option value="3" >{{@global.LANGUAGE.COM_MSG101}}</option>
                        <option value="7">{{@global.LANGUAGE.COM_MSG102}}</option>
                      </select>
                      <div class="item-content">
                        <div class="item-inner">
                          <div class="item-title text-color-white tooltip-init" data-tooltip="{{@global.LANGUAGE.DASHBOARD_PANEL_MSG56 }}">{{@global.LANGUAGE.DASHBOARD_PANEL_MSG56 }}</div>
                          <div class="item-after  text-color-white"></div>
                        </div>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>-->
            </div>
            <div class="card-content card-content-padding">
              {{#if DashboardDataLoadedEndUserOverview}}
              <div key="KeyChartGFuel" id="chart-GFuel"></div>
              <div class="chart-total-value">
                <div class="display-flex justify-content-space-between align-content-end">
                  {{@global.LANGUAGE.DASHBOARD_PANEL_MSG67}}<span>{{TotalFuelUsed}}
                    {{@global.LANGUAGE.COM_MSG80}}</span></div>
              </div>
              {{else}}
              <div key="KeyChartGFuelLoader" class="absolute-center">
                <div class="preloader color-red"></div>
              </div>
              {{/if}}
            </div>
          </div>
        </div>
        {{/unless}}

      </div>

      {{#unless TypeDealer}}
      <!--<div class="row no-gap">
        <div class="col-100">
          <div class="card dashboard-card-type1 elevation-6 elevation-hover-9 elevation-transition z-index-999">
            <div class="card-header bg-color-darkgray text-color-white no-padding overflow-hidden ">
              <div class="progressbar-container"></div>
              <div class="list no-hairlines no-hairlines-between" style="width:100%;" >
                <ul>
                  <li>
                    <a class="item-link smart-select smart-select-init" data-open-in="popover" data-close-on-select="true">
                      <select name="dashboard-driver-rating-filter">
                        <option value="1" selected>{{@global.LANGUAGE.COM_MSG100}}</option>
                        <option value="3" >{{@global.LANGUAGE.COM_MSG101}}</option>
                        <option value="7">{{@global.LANGUAGE.COM_MSG102}}</option>
                      </select>
                      <div class="item-content">
                        <div class="item-inner">
                          <div class="item-title text-color-white tooltip-init" data-tooltip="{{@global.LANGUAGE.DASHBOARD_PANEL_MSG65 }}">{{@global.LANGUAGE.DASHBOARD_PANEL_MSG65 }}</div>
                          <div class="item-after  text-color-white"></div>
                        </div>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
            <div class="card-content ">  &lt;!&ndash;under-development-smaller&ndash;&gt;
              {{#if DashboardDataLoadedEndUserDriverRating}}
              <div key="KeyChartGDriverRating" id="chart-GDriverRating"></div>
              {{else}}
              <div key="KeyChartGDriverRatingLoader" class="absolute-center">
                <div class="preloader color-red"></div>
              </div>
              {{/if}}
            </div>
          </div>
        </div>
      </div>-->
      {{/unless}}

      <div class="row no-gap ">
        <div class="col-100 tablet-60">
          <div class="card elevation-6 elevation-hover-9 elevation-transition">
            <div class="card-header bg-color-darkgray text-color-white no-padding  dashboard-assettable-filter">
              <div class="progressbar-container"></div>
              <div class="list no-hairlines no-hairlines-between" style="width:100%;">
                <ul>
                  <li>
                    <a class="item-link smart-select smart-select-init" data-open-in="popover"
                      data-close-on-select="true">
                      <select name="dashboard-assettable-filter">
                        <optgroup label="{{@global.LANGUAGE.DASHBOARD_PANEL_MSG30}}">
                          {{#GroupList}}
                          <option value="{{Code}}">{{Name}}</option>
                          {{/GroupList}}
                        </optgroup>
                      </select>
                      <div class="item-content">
                        <div class="item-inner">
                          <div class="item-title text-color-white">{{@global.LANGUAGE.DASHBOARD_PANEL_MSG02 }}</div>
                          <div class="item-after  text-color-white"></div>
                        </div>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
            <div class="card-content table-no-padding">
              <table id="table-dashboard-assets" class="mdl-data-table " style="width:100%">

              </table>
              {{#unless DashboardAssetDataLoaded}}
              <div key="KeyDatatableLoader" class="loader-overlay">
                <div class="absolute-center">
                  <div class="preloader color-red"></div>
                </div>
              </div>
              {{/unless}}
              <!--<thead>
              <tr>
                <th> GroupCode </th> &lt;!&ndash; hidden  &ndash;&gt;

                <th> {{@global.LANGUAGE.DASHBOARD_PANEL_MSG27}} </th> &lt;!&ndash; Map  &ndash;&gt;
                <th> {{@global.LANGUAGE.DASHBOARD_PANEL_MSG22}} </th> &lt;!&ndash; Asset Name  &ndash;&gt;
                {{#if TypeDealer}}
                <th> {{@global.LANGUAGE.DASHBOARD_PANEL_MSG34}} </th> &lt;!&ndash; Stock Number &ndash;&gt;
                {{/if}}
                <th> {{@global.LANGUAGE.DASHBOARD_PANEL_MSG23}} </th> &lt;!&ndash; Voltage  &ndash;&gt;
                <th> {{@global.LANGUAGE.DASHBOARD_PANEL_MSG24}} </th> &lt;!&ndash; Stationary Time  &ndash;&gt;
                <th> {{@global.LANGUAGE.DASHBOARD_PANEL_MSG25}} </th> &lt;!&ndash; Total Mileage  &ndash;&gt;
                <th> {{@global.LANGUAGE.DASHBOARD_PANEL_MSG26}} </th> &lt;!&ndash; Total Engine Hours  &ndash;&gt;
                <th> {{@global.LANGUAGE.DASHBOARD_PANEL_MSG67}} </th> &lt;!&ndash; Total Fuel Used  &ndash;&gt;

              </tr>
              </thead>
              <tbody>
              {{#DashboardDataTable}}
              <tr data-item-index="{{@index}}" >
                <td>{{GroupCode}}</td>

                <td @click="showOnMap" class="text-color-red cursor-pointer"  ><i class="f7-icons icon-address"></i></td>
                <td>{{Name}}</td>
                {{#if ../TypeDealer}}
                <td>{{StockNumber}}</td>
                {{/if}}
                <td class="text-align-center">{{Voltage}}</td>
                <td class="text-align-center">{{StationaryTime}}</td>
                <td class="text-align-center">{{Mileage}}</td>
                <td class="text-align-center">{{EngineHours}}</td>
                <td class="text-align-center">{{FuelUsed}}</td>

              </tr>
              {{/DashboardDataTable}}
              </tbody>-->
            </div>

          </div>
        </div>
        <div class="col-100 tablet-40  height-100">
          <div class="card elevation-6 elevation-hover-9 elevation-transition dashboard-card-type2 height-100">
            <div class="card-header bg-color-darkgray text-color-white">
              {{#if TypeDealer}} {{ @global.LANGUAGE.DASHBOARD_PANEL_MSG33 }} {{else}} {{
              @global.LANGUAGE.DASHBOARD_PANEL_MSG03 }}{{/if}}
            </div>
            <div class="card-content height-100" style="height:448px;">
              <div id="mapDashboard" class="mapDashboard"></div>
            </div>
            <div class="card-footer">
              {{DashboardAssetData}}
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>


</template>

<script>
  // script must return component object
  return {
    data: function () {
      var self = this;
      var ret = {};
      //console.log(this.$route.query)
      var dashboardData = self.$app.methods.getFromStorage('dashboard');
      if (dashboardData && !self.$app.methods.isObjEmpty(dashboardData)) {
        if (dashboardData.EndUser && !self.$app.methods.isObjEmpty(dashboardData.EndUser)) {
          dashboardData.EndUser.AlarmLogFormatted = self.$app.methods.calculateAlarmsDashboard(dashboardData.EndUser.AlarmLog);
        } else {
          dashboardData.EndUser = {
            DeviceStatus: {
              InLot: 0,
              OffLot: 0,
              Total: 0,
            },
            AlarmLogFormatted: {
              LowBattery: 0,
              PowerDisconnect: 0,
              Speeding: 0,
              All: 0,
            }
          };
        }
        ret = dashboardData;
        ret.DashboardDataLoaded = true;
      }

      ret.DashboardDataTable = [] //self.$app.methods.getDashboardDataTableArray();

      ret.GroupList = self.$app.methods.getGroupNamesList();
      /*console.log(ret.GroupList);*/
      ret.TypeDealer = self.$app.data.CustomerType == 2 || self.$app.data.CustomerType == 6;
      ret.DashboardDataTableEl = false;
      ret.Charts = {
        RealTime: false,
        Overview: false,
        TotalMileage: false,
        FuelUsed: false,
        BilgeAlarms: false,
        //DriverBehaviour: false,
      };
      ret.TrackMarker = false;
      ret.MapTrack = false;
      ret.DashboardAssetData = '';
      ret.PrevCoords = [];
      ret.isHideCloseBtn = this.$route.query && this.$route.query.page && this.$route.query.page === 'dashboard';
      //ret.isHideCloseBtn = true;

      ret.GroupPositionsOnMap = [];
      ret.AllGroupsBoundsArray = [];
      ret.AllMarkersGroup = false;
      ret.DashboardDataLoadedEndUserDriverBehaviour = false;
      ret.DashboardAssetDataLoaded = false;
      ret.DriverBehaviourAssets = [];
      ret.DriverBehaviourCurrentAssetStats = {};
      ret.DriverBehaviour = {};
      ret.isDriverBehaviourSupported = true;
      ret.TotalKMTravelled = '';
      ret.TotalFuelUsed = '';
      ret.TotalInput1Alarms = '';
      ret.DisplayDataPeriod = 1;
      /* ret.EndUser.DriverBehaviour = {};
       ret.EndUser.DriverBehaviourCurrentAsset = {};*/

      //console.log(ret);
      return ret;
    },
    methods: {
      autoUpdateDashboardData: function () {
        var self = this;

        let userInfo = self.$app.methods.getFromStorage('userInfo');
        let data = {
          MinorToken: userInfo.MinorToken,
          MajorToken: userInfo.MajorToken,
        };

        self.$app.request.post(API_URL.GET_DASHBOARD_DATA, data, function (result, xhr, status) {
          //console.log('resp rec');
          if (result && result.MajorCode == '000' && localStorage.ACCOUNT) {
            self.$app.methods.setInStorage({ name: 'dashboard', data: result.Data });
            result.Data.DashboardDataLoaded = true;
            self.$setState(result.Data);
          }
        },
          function (xhr, status) {
            console.log('error in autoUpdateDashboardData')
          },
          'json');


        if (!self.TypeDealer) {
          self.getAlarmLog(self.DisplayDataPeriod)
          self.getDriverBehavior(self.DisplayDataPeriod)
          self.getOverviewDetails2(self.DisplayDataPeriod)
        } else {
          let tableData = self.$app.methods.getDashboardDataTableArray()
          self.updateAssetTable(tableData)
          self.$setState({
            DashboardAssetDataLoaded: true,
          })
        }

      },
      initGraphics: function () {
        let self = this;

        let columnsRealTimeOnline = [
          [LANGUAGE.DASHBOARD_PANEL_MSG28, 0],
          [LANGUAGE.DASHBOARD_PANEL_MSG29, 0],
        ];
        if (self.RealtimeOnline) {
          columnsRealTimeOnline = [
            [LANGUAGE.DASHBOARD_PANEL_MSG28, self.RealtimeOnline.Online],
            [LANGUAGE.DASHBOARD_PANEL_MSG29, self.RealtimeOnline.Offline],
          ];
        }

        if (app.data.CustomerType == 2 || app.data.CustomerType == 6) {
          /*self.buildGraphics({
            GRealTimeOnline: {
              bindto: '#chart-GRealTimeOnline',
              columns: columnsRealTimeOnline,
            },
          });*/
        } else {
          let columnsOverview = [
            [LANGUAGE.DASHBOARD_PANEL_MSG54, 0], //moving
            [LANGUAGE.DASHBOARD_PANEL_MSG52, 0], //stoped
            [LANGUAGE.DASHBOARD_PANEL_MSG53, 0], //idle
          ];
          let columnsTotalMileage = [];
          let columnsFuelUsed = [];
          let TotalKMTravelled = 0;
          let TotalFuelUsed = 0;
          if (self.EndUser && self.EndUser.Overview) {
            let fomattedValues = self.formatGOverviewValues(self.EndUser.Overview);
            columnsOverview = [
              [LANGUAGE.DASHBOARD_PANEL_MSG54, fomattedValues.move],
              [LANGUAGE.DASHBOARD_PANEL_MSG52, fomattedValues.stop],
              [LANGUAGE.DASHBOARD_PANEL_MSG53, fomattedValues.idle],
            ];

            for (var i = self.EndUser.Overview.length - 1; i >= 0; i--) {
              if (POSINFOASSETLIST[self.EndUser.Overview[i].IMEI]) {
                let mileage = parseFloat(self.EndUser.Overview[i].Mileage).toFixed(2);
                if (self.$app.data.AppDetails.isMarine) {
                  mileage = Protocol.Helper.getMileageValue("KT", self.EndUser.Overview[i].Mileage);
                }
                columnsTotalMileage.push([POSINFOASSETLIST[self.EndUser.Overview[i].IMEI].Name, mileage]);
                columnsFuelUsed.push([POSINFOASSETLIST[self.EndUser.Overview[i].IMEI].Name, parseFloat(self.EndUser.Overview[i].Fuel).toFixed(2)]);
                TotalKMTravelled += self.EndUser.Overview[i].Mileage ? parseFloat(mileage) : 0;
                TotalFuelUsed += self.EndUser.Overview[i].Fuel ? parseFloat(parseFloat(self.EndUser.Overview[i].Fuel).toFixed(2)) : 0;
              }
            }
            //console.log(TotalFuelUsed)
            if (TotalKMTravelled) TotalKMTravelled = TotalKMTravelled.toFixed(2)
            if (TotalFuelUsed) TotalFuelUsed = TotalFuelUsed.toFixed(2)
          }

          self.buildGraphics({
            GRealTimeOnline: {
              bindto: '#chart-GRealTimeOnline',
              columns: columnsRealTimeOnline,
            },
            GOverview: {
              bindto: '#chart-GOverview',
              columns: columnsOverview,
            },
            /*GTotalMileage: {
              bindto: '#chart-GTotalMileage',
              columns: columnsTotalMileage,
              name: LANGUAGE.REPORT_PANEL_MSG97+' ('+LANGUAGE.COM_MSG79+')',
            },*/
            GTotalMileage: {
              bindto: '#chart-GMileage',
              columns: columnsTotalMileage,
            },
            GFuelUsed: {
              bindto: '#chart-GFuel',
              columns: columnsFuelUsed,
              //name: LANGUAGE.REPORT_PANEL_MSG98+' ('+LANGUAGE.COM_MSG80+')',
            },
          });
          self.$setState({
            TotalKMTravelled: TotalKMTravelled,
            TotalFuelUsed: TotalFuelUsed,
          })
        }
      },
      initGraphicBilgeAlarm: function (alarms) {
        let self = this;

        let columns = [];
        if (alarms.length) {
          for (var i = alarms.length - 1; i >= 0; i--) {
            columns.push([alarms[i].Name, parseInt(alarms[i].INPUT1)]);
          }
        }
        //console.log('initGraphicBilgeAlarm')
        self.buildGraphics({
          GBilgeAlarms: {
            bindto: '#chart-GBilgeAlarms',
            columns: columns,
          },
        });
      },
      /*initGraphicDriverRating: function(){
        let self = this;

        let columnsDriverRating = [];

        if (self.EndUser && self.EndUser.DriverBehaviour) {
          for (var i = self.EndUser.DriverBehaviour.length - 1; i >= 0; i--) {
            columnsDriverRating.push( [ self.EndUser.DriverBehaviour[i].Name, parseInt(self.EndUser.DriverBehaviour[i].Points) ] );
          }
        }

        self.buildGraphics({
          GDriverBehaviour: {
            bindto: '#chart-GDriverRating',
            columns: columnsDriverRating,
          },
        });

      },*/
      buildGraphics: function (params) {
        //console.log(params);
        var self = this;
        if (params) {
          if (params.GRealTimeOnline && params.GRealTimeOnline.bindto) {
            self.Charts.RealTime = c3.generate({
              bindto: params.GRealTimeOnline.bindto,
              size: {
                height: 180,
              },
              color: {
                pattern: ['#4dc08e', '#f96868',]
              },
              data: {
                columns: params.GRealTimeOnline.columns,
                type: 'pie',
              },
              pie: {
                label: {
                  format: function (value, ratio, id) {
                    //console.log(value, ratio, id);
                    return value;
                  }
                }
              }
            });
          }

          if (params.GOverview && params.GOverview.bindto) {
            self.Charts.Overview = c3.generate({
              bindto: params.GOverview.bindto,
              size: {
                height: 180,
              },
              color: {
                pattern: ['#4dc08e', '#f96868', '#f9b256']
              },
              data: {
                columns: params.GOverview.columns,
                type: 'pie',
              },
              tooltip: {
                format: {
                  //title: function (d) { return 'Data ' + d; },
                  value: function (value, ratio, id) {
                    return TimeSpan(value * 1000).format("^hh:mm:ss");
                  }

                }
              }
            });
          }

          if (params.GTotalMileage && params.GTotalMileage.bindto) {
            self.Charts.TotalMileage = c3.generate({
              bindto: params.GTotalMileage.bindto,
              size: {
                height: 180,
              },
              color: {
                pattern: self.$app.data.ChartCustomization.colors
              },
              legend: {
                show: false
              },
              data: {
                columns: params.GTotalMileage.columns,
                type: 'pie',
              },
              pie: {
                label: {
                  format: function (value, ratio, id) {
                    //console.log(value, ratio, id);
                    return value;
                  }
                }
              },
              tooltip: {
                format: {
                  value: function (value, ratio, id) {
                    let percentege = parseFloat(ratio * 100).toFixed('1')
                    return self.$app.data.AppDetails.isMarine ? value + 'nm (' + percentege + '%)' : value + 'km (' + percentege + '%)';
                  }
                }
              }
            });
          }

          if (params.GFuelUsed && params.GFuelUsed.bindto) {
            self.Charts.FuelUsed = c3.generate({
              bindto: params.GFuelUsed.bindto,
              size: {
                height: 180,
              },
              color: {
                pattern: self.$app.data.ChartCustomization.colors
              },
              legend: {
                show: false
              },
              data: {
                columns: params.GFuelUsed.columns,
                type: 'pie',
              },
              pie: {
                label: {
                  format: function (value, ratio, id) {
                    //console.log(value, ratio, id);
                    return value;
                  }
                }
              },
              tooltip: {
                format: {
                  value: function (value, ratio, id) {
                    let percentege = parseFloat(ratio * 100).toFixed('1')
                    return value + 'L (' + percentege + '%)';
                  }
                }
              }
            });
          }

          if (params.GBilgeAlarms && params.GBilgeAlarms.bindto) {
            //console.log('here')
            self.Charts.BilgeAlarms = c3.generate({
              bindto: params.GBilgeAlarms.bindto,
              size: {
                height: 180,
              },
              color: {
                pattern: self.$app.data.ChartCustomization.colors
              },
              legend: {
                show: false
              },
              data: {
                columns: params.GBilgeAlarms.columns,
                type: 'pie',
              },
              pie: {
                label: {
                  format: function (value, ratio, id) {
                    //console.log(value, ratio, id);
                    return value;
                  }
                }
              },
              /*tooltip: {
                format: {
                  value: function (value, ratio, id) {
                    let percentege = parseFloat(ratio * 100).toFixed('1')
                    return self.$app.data.AppDetails.isMarine ? value + 'nm (' + percentege + '%)' : value + 'km (' + percentege + '%)';
                  }
                }
              }*/
            });
          }
        }
      },
      updateGraphicsOverviewAndRealTime: function () {
        let self = this;
        if (self.Charts.Overview && self.EndUser.Overview) {
          let overviewFiletrEl = self.$el.find('[name="dashboard-overview-filter"]');

          //update if overview selected for 1 day
          if (overviewFiletrEl && overviewFiletrEl.length && overviewFiletrEl.val() == '1') {
            let fomattedValues = self.formatGOverviewValues(self.EndUser.Overview);

            self.Charts.Overview.load({
              columns: [
                [LANGUAGE.DASHBOARD_PANEL_MSG54, fomattedValues.move],
                [LANGUAGE.DASHBOARD_PANEL_MSG52, fomattedValues.stop],
                [LANGUAGE.DASHBOARD_PANEL_MSG53, fomattedValues.idle],
              ]
            });
          }
        }
        /*if (self.Charts.RealTime && self.RealtimeOnline) {
          self.Charts.RealTime.load({
            columns: [
              [LANGUAGE.DASHBOARD_PANEL_MSG28, self.RealtimeOnline.Online],
              [LANGUAGE.DASHBOARD_PANEL_MSG29, self.RealtimeOnline.Offline]
            ]
          });
        }*/
      },
      updateAssetTable(array) {
        this.DashboardDataTableEl.clear();
        this.DashboardDataTableEl.rows.add(array).draw(false);

        this.DashboardDataTable = array;
      },
      changeGraphicData: function (data = [], selectName) {
        let self = this;
        //console.log(data)
        if (data.length && selectName) {
          let columns = [];
          switch (selectName) {
            case 'dashboard-total-mileage-filter':
              let TotalKMTravelled = 0;
              for (var i = data.length - 1; i >= 0; i--) {
                let mileage = parseFloat(data[i].Mileage).toFixed(2);
                if (self.$app.data.AppDetails.isMarine) {
                  mileage = Protocol.Helper.getMileageValue("KT", data[i].Mileage);
                }
                columns.push([POSINFOASSETLIST[data[i].IMEI].Name, parseFloat(mileage).toFixed(2)]);
                TotalKMTravelled += parseFloat(parseFloat(mileage).toFixed(2));
              }
              self.Charts.TotalMileage.load({
                columns: columns
              });
              if (TotalKMTravelled) TotalKMTravelled = TotalKMTravelled.toFixed(2)
              self.$setState({
                TotalKMTravelled: TotalKMTravelled,
              })
              break;

            case 'dashboard-total-fuel-filter':
              let TotalFuelUsed = 0;
              for (var i = data.length - 1; i >= 0; i--) {
                columns.push([POSINFOASSETLIST[data[i].IMEI].Name, parseFloat(data[i].Fuel).toFixed(2)]);
                TotalFuelUsed += parseFloat(parseFloat(data[i].Fuel).toFixed(2));
              }
              self.Charts.FuelUsed.load({
                columns: columns
              });
              if (TotalFuelUsed) TotalFuelUsed = TotalFuelUsed.toFixed(2)
              self.$setState({
                TotalFuelUsed: TotalFuelUsed,
              })
              break;

            case 'dashboard-bilge-pump-filter':
              console.log(data)
              if (data.length) {
                for (var i = data.length - 1; i >= 0; i--) {
                  columns.push([data[i].Name, parseInt(data[i].INPUT1)]);
                }
              }
              self.Charts.BilgeAlarms.load({
                columns: columns
              });
              break;
            /*case 'dashboard-driver-rating-filter':
              for (var i = data.length - 1; i >= 0; i--) {
                columns.push( [  data[i].Name, parseInt(data[i].Points) ] );
              }
              self.Charts.DriverBehaviour.load({
                columns: columns
              });
              break;*/

            case 'dashboard-overview-filter':
              let fomattedValues = self.formatGOverviewValues(data);

              self.Charts.Overview.load({
                columns: [
                  [LANGUAGE.DASHBOARD_PANEL_MSG54, fomattedValues.move],
                  [LANGUAGE.DASHBOARD_PANEL_MSG52, fomattedValues.stop],
                  [LANGUAGE.DASHBOARD_PANEL_MSG53, fomattedValues.idle],
                ]
              });
              break;
          }
        }
      },
      formatGOverviewValues: function (arr) {
        let ret = {
          stop: 0,
          move: 0,
          idle: 0,
          //mileage: 0,
          //fuel: 0
        }

        if (arr && arr.length) {
          for (var i = arr.length - 1; i >= 0; i--) {
            ret.stop += arr[i].Stop;
            ret.move += arr[i].Move;
            ret.idle += arr[i].Idle;
            //ret.fuel += arr[i].fuel;
            //ret.mileage += arr[i].mileage;
          }
        }

        return ret;
      },
      /*getDriverBehaviourDetails(days = 1, selectName){
        let self = this;
        let userInfo = self.$app.methods.getFromStorage('userInfo');
        let data = {
          MajorToken: userInfo.MajorToken,
          MinorToken: userInfo.MinorToken,
          beginTime: moment().subtract(days, 'days').utc().format(window.COM_TIMEFORMAT),
          endtime: moment().utc().format(window.COM_TIMEFORMAT),
        };
        let progressbarContainer = self.$el.find('select[name = '+selectName+']').closest('.card').find('.progressbar-container');

        self.$app.progressbar.show(progressbarContainer, 'red');
        self.$app.request.post(API_URL.GET_REPORT_DRIVER_BEHAVIOUR, data, function (result, xhr, status) {
            self.$app.progressbar.hide(progressbarContainer);

            console.log(result);
            if (result && result.MajorCode == '000' && selectName) {
              self.changeGraphicData(result.Data, selectName);
            }
          },
          function (xhr, status) {
            self.$app.progressbar.hide(progressbarContainer);
            self.$app.dialog.alert('Error occured at getDriverBehaviourDetails');
          },
          'json');
      },*/
      /*getOverviewDetails: function(days = 1, selectName){
        let self = this;
        let userInfo = self.$app.methods.getFromStorage('userInfo');
        let data = {
          MajorToken: userInfo.MajorToken,
          MinorToken: userInfo.MinorToken,
          Days: days
        };
        let progressbarContainer = self.$el.find('select[name = '+selectName+']').closest('.card').find('.progressbar-container');

        self.$app.progressbar.show(progressbarContainer, 'red');
        self.$app.request.post(API_URL.GET_DASHBOARD_OVERVIEW_INFO, data, function (result, xhr, status) {
            self.$app.progressbar.hide(progressbarContainer);

            console.log(result);
            if (result && result.MajorCode == '000' && selectName) {
              self.changeGraphicData(result.Data, selectName);
            }
          },
          function (xhr, status) {
            self.$app.progressbar.hide(progressbarContainer);
            self.$app.dialog.alert('Error occured at getOverviewDetails');
          },
          'json');
      },*/
      getAlarmLog: function (days = 1, containerNames) {
        let self = this;
        let userInfo = self.$app.methods.getFromStorage('userInfo');
        let data = {
          MajorToken: userInfo.MajorToken,
          MinorToken: userInfo.MinorToken,

          DateFrom: moment().utc().subtract(days, 'days').format(window.COM_TIMEFORMAT),
          DateTo: moment().utc().format(window.COM_TIMEFORMAT),
          AsIds: [],
          AlertIds: [],
          OnlyActiveAlarm: true
        };
        let url = API_URL.GET_REPORT_BY_ALERT;

        let assetList = self.$app.methods.getAssetsByGroups({ NoGroupToBottom: true });
        for (var i = assetList.length - 1; i >= 0; i--) {
          if (assetList[i].Assets && assetList[i].Assets.length) {
            for (var j = assetList[i].Assets.length - 1; j >= 0; j--) {
              data.AsIds.push(assetList[i].Assets[j].Id);
            }
          }
        }
        let alertList = self.$app.methods.getFromStorage('alertList');
        if (alertList && alertList.length) {
          for (var i = alertList.length - 1; i >= 0; i--) {
            data.AlertIds.push(alertList[i].AlertId);
          }
        }

        let progressbarContainers = [];
        if (containerNames && containerNames.length) {
          for (let i = 0; i < containerNames.length; i++) {
            progressbarContainers.push(self.$el.find('.' + containerNames[i] + ' .progressbar-container')[0])
          }
        }

        if (progressbarContainers.length) {
          for (let i = 0; i < progressbarContainers.length; i++) {
            self.$app.progressbar.show(progressbarContainers[i], 'red');
          }
        }
        self.$app.request.post(url, data, function (result, xhr, status) {
          if (progressbarContainers.length) {
            for (let i = 0; i < progressbarContainers.length; i++) {
              self.$app.progressbar.hide(progressbarContainers[i]);
            }
          }
          if (result.MajorCode === '000') {
            let alarmLog = {};
            let bilgeAlarms = [];
            let TotalInput1Alarms = 0;
            const map = new Map();
            if (result.Data && result.Data.length) {
              for (const item of result.Data) {
                if (!alarmLog[item.AlertID]) {
                  alarmLog[item.AlertID] = 1;
                } else {
                  alarmLog[item.AlertID]++
                }

                if (item.AlertID === Protocol.PositionAlerts.INPUT1) {
                  TotalInput1Alarms++
                  if (!map.has(item.IMEI)) {
                    map.set(item.IMEI, true);    // set any value to Map
                    bilgeAlarms.push({
                      IMEI: item.IMEI,
                      Name: item.AssetName,
                      INPUT1: 1,
                    });
                  } else {
                    let itm = bilgeAlarms.find(el => el.IMEI === item.IMEI);
                    itm.INPUT1++
                  }
                }

              }
            }
            /*if(result.Data && result.Data.length){
              for (let i = 0; i < result.Data.length; i++) {
                if(!alarmLog[result.Data[i].AlertID]){
                  alarmLog[result.Data[i].AlertID] = 1;
                }else{
                  alarmLog[result.Data[i].AlertID]++
                }
              }
            }*/
            //console.log(result.Data)
            //console.log(bilgeAlarms)
            //console.log(alarmLog)


            self.$setState({
              DashboardDataLoadedEndUserAlarmLog: true,
              EndUserAlarmLogFormatted: self.$app.methods.calculateAlarmsDashboard(alarmLog),
              TotalInput1Alarms: TotalInput1Alarms,
            })
            //console.log(self.EndUserAlarmLogFormatted)
            //console.log(self.Charts.BilgeAlarms)
            if (self.Charts.BilgeAlarms) {
              self.changeGraphicData(bilgeAlarms, 'dashboard-bilge-pump-filter')

            } else {
              self.initGraphicBilgeAlarm(bilgeAlarms)
            }
          }
        },
          function (xhr, status) {
            if (progressbarContainers.length) {
              for (let i = 0; i < progressbarContainers.length; i++) {
                self.$app.progressbar.hide(progressbarContainers[i]);
              }
            }
            self.$app.dialog.alert('Error occurred during request');
          },
          'json');
      },
      getOverviewDetails2: function (days = 1, selectNames) {
        let self = this;
        let userInfo = self.$app.methods.getFromStorage('userInfo');
        let data = {
          MajorToken: userInfo.MajorToken,
          MinorToken: userInfo.MinorToken,
          Days: days
        };

        let progressbarContainers = [];
        if (selectNames && selectNames.length) {
          for (let i = 0; i < selectNames.length; i++) {
            progressbarContainers.push(self.$el.find('.' + selectNames[i] + ' .progressbar-container')[0])
          }
        }

        if (progressbarContainers.length) {
          for (let i = 0; i < progressbarContainers.length; i++) {
            self.$app.progressbar.show(progressbarContainers[i], 'red');
          }
        }
        self.$app.request.post(API_URL.GET_DASHBOARD_OVERVIEW_INFO, data, function (result, xhr, status) {
          if (progressbarContainers.length) {
            for (let i = 0; i < progressbarContainers.length; i++) {
              self.$app.progressbar.hide(progressbarContainers[i]);
            }
          }

          if (result && result.MajorCode === '000') {
            let wasDataAlreadyLoaded = self.DashboardDataLoadedEndUserOverview;
            self.$setState({
              DashboardDataLoadedEndUserOverview: true,
              DashboardAssetDataLoaded: true,
              EndUser: { Overview: result.Data }
            });
            if (wasDataAlreadyLoaded) {
              self.updateGraphicsOverviewAndRealTime();
              if (selectNames && selectNames.length) {
                for (let i = 0; i < selectNames.length; i++) {
                  self.changeGraphicData(result.Data, selectNames[i]);
                }
              }
            } else {
              self.initGraphics();
            }

            let tableData = self.$app.methods.formatDashboardDataTableArray(result.Data)
            self.updateAssetTable(tableData)
          }
        },
          function (xhr, status) {
            if (progressbarContainers.length) {
              for (let i = 0; i < progressbarContainers.length; i++) {
                self.$app.progressbar.hide(progressbarContainers[i]);
              }
            }
            self.$app.dialog.alert('Error occured at getOverviewDetails');
          },
          'json');
      },
      showDriverBehaviourByAsset: function (imei) {
        let data = this.DriverBehaviour.find(asset => asset.IMEI === imei);

        this.$setState({
          DriverBehaviourCurrentAssetStats: {
            ...data,
            Color: this.$app.methods.getGaugeRaitingDetails(data.Points).borderColor,
            StarsTemplate: this.$app.methods.getStars(data.Points).template,
            Points: parseInt(data.Points),
            MileageFormatted: data.Mileage ? Protocol.Helper.getMileageValue(POSINFOASSETLIST[imei].Unit, data.Mileage) + '&nbsp;' + Protocol.Helper.getMileageUnit(POSINFOASSETLIST[imei].Unit) : data.Mileage,
            DurationFormatted: data.Duration ? TimeSpan(parseFloat(data.Duration) * 60000 * 60).format("^hh:mm:ss") : data.Duration,
          }
        })
      },

      /*showOnMap: function(e){
        let self = this;
        let wrapper = $$(e.target).closest('[role="row"]');
        let index = wrapper.data('item-index');
        let IMEI = self.DashboardDataTable[index].IMEI;

        if (IMEI && POSINFOASSETLIST && POSINFOASSETLIST[IMEI] && POSINFOASSETLIST[IMEI].markerIdDashboard) {
          var marker = self.AllMarkersGroup.getLayer(POSINFOASSETLIST[IMEI].markerIdDashboard);
          self.AllMarkersGroup.zoomToShowLayer(marker, function() {
            if (self.MapTrack.getZoom() < 15) {
              self.MapTrack.setView(marker.getLatLng(),15)
            }
            marker.openPopup();
          });
        }else{
          self.$app.methods.customNotification({
            title: self.DashboardDataTable[index].AssetName ? self.DashboardDataTable[index].AssetName : IMEI,
            text: LANGUAGE.PROMPT_MSG031
          });
        }
      },*/
      showOnMap: function (data) {
        let self = this;

        if (data.IMEI && POSINFOASSETLIST && POSINFOASSETLIST[data.IMEI] && POSINFOASSETLIST[data.IMEI].markerIdDashboard) {
          var marker = self.AllMarkersGroup.getLayer(POSINFOASSETLIST[data.IMEI].markerIdDashboard);
          self.AllMarkersGroup.zoomToShowLayer(marker, function () {
            if (self.MapTrack.getZoom() < 15) {
              self.MapTrack.setView(marker.getLatLng(), 15)
            }
            marker.openPopup();
          });
        } else {
          self.$app.methods.customNotification({
            title: data.Name ? data.Name : data.IMEI,
            text: LANGUAGE.PROMPT_MSG031
          });
        }
      },
      getAddress: function (IMEI) {
        let self = this;
        Protocol.Helper.getAddressByGeocoder({ lat: POSINFOASSETLIST[IMEI].posInfo.lat, lng: POSINFOASSETLIST[IMEI].posInfo.lng }, function (address) {
          POSINFOASSETLIST[IMEI].posInfo.customAddress = address;
          self.$setState({ DashboardAssetData: self.getDashboardAssetData(IMEI) });
          self.PrevCoords.push({
            IMEI,
            lat: POSINFOASSETLIST[IMEI].posInfo.lat,
            lng: POSINFOASSETLIST[IMEI].posInfo.lng
          });
        });
      },
      changeDisplayDataPeriod(e) {
        let period = parseInt($$(e.target).data('period'));
        this.$setState({
          DisplayDataPeriod: period
        })
        this.getOverviewDetails2(period, ['dashboard-overview-filter', 'dashboard-total-mileage-filter', 'dashboard-total-fuel-filter', 'dashboard-assettable-filter'])
        this.getAlarmLog(period, ['alarm-log-filter', 'bilge-alarm-filter'])
        this.getDriverBehavior(period, 'driver-behaviour-filter')
      },
      getDriverBehavior: function (days, containerName) {
        let self = this;
        let userInfo = self.$app.methods.getFromStorage('userInfo');
        let progressbarContainer = false;
        if (containerName) progressbarContainer = self.$el.find('.' + containerName + ' .progressbar-container');

        if (progressbarContainer) {
          self.$app.progressbar.show(progressbarContainer, 'red');
        }
        self.$app.request.post(API_URL.GET_REPORT_DRIVER_BEHAVIOUR,
          {
            MinorToken: userInfo.MinorToken,
            MajorToken: userInfo.MajorToken,
            beginTime: moment().subtract(days, 'days').utc().format(window.COM_TIMEFORMAT),
            endTime: moment().utc().format(window.COM_TIMEFORMAT)
          }, function (result, xhr, status) {
            if (result && typeof (result) === "string") {
              result = self.$app.methods.isJsonString(result);
            }
            if (result && result.MajorCode === '000' && localStorage.ACCOUNT) {
              let supportedAssets = [];
              if (Array.isArray(result.Data) && result.Data.length) {
                result.Data.sort(function (a, b) {
                  if (a.Name < b.Name) return -1;
                  if (a.Name > b.Name) return 1;
                  return 0;
                });
                for (let i = 0; i < result.Data.length; i++) {
                  supportedAssets.push({ IMEI: result.Data[i].IMEI, Name: result.Data[i].Name })
                }
              }

              self.$app.utils.nextFrame(() => {
                self.$setState({
                  DashboardDataLoadedEndUserDriverBehaviour: true,
                  DriverBehaviour: Array.isArray(result.Data) && result.Data.length ? result.Data : [],
                  DriverBehaviourAssets: supportedAssets,
                  isDriverBehaviourSupported: Array.isArray(result.Data) && result.Data.length
                });
                if (Array.isArray(result.Data) && result.Data.length) {
                  self.showDriverBehaviourByAsset(result.Data[0].IMEI)
                }
              });
            }
            if (progressbarContainer) {
              self.$app.progressbar.hide(progressbarContainer, 'red');
            }
          }, function () {
            if (progressbarContainer) {
              self.$app.progressbar.hide(progressbarContainer, 'red');
            }
          });
      },
      getDashboardAssetData: function (IMEI) {
        let self = this;
        let ret = '';
        if (IMEI && POSINFOASSETLIST[IMEI]) {
          let asset = POSINFOASSETLIST[IMEI];
          let assetFeaturesStatus = Protocol.Helper.getAssetStateInfo(asset);
          if (assetFeaturesStatus && assetFeaturesStatus.stats) {
            let speed = 0;
            let mileage = '-';
            let launchHours = '';
            let positionType = Protocol.Helper.getPositionType(parseInt(asset.posInfo.positionType));
            deirectionCardinal = Protocol.Helper.getDirectionCardinal(asset.posInfo.direct);
            if (typeof asset.Unit !== "undefined" && typeof asset.posInfo.speed !== "undefined") {
              speed = Protocol.Helper.getSpeedValue(asset.Unit, asset.posInfo.speed) + ' ' + Protocol.Helper.getSpeedUnit(asset.Unit);
            }
            if (typeof asset.Unit !== "undefined" && typeof asset.posInfo.mileage !== "undefined" && asset.posInfo.mileage != '-') {
              mileage = Protocol.Helper.getMileage(asset, asset.posInfo.mileage);
            }
            if (typeof asset.posInfo.launchHours !== "undefined") {
              launchHours = Protocol.Helper.getEngineHours(asset, asset.posInfo.launchHours);
            }
            let direction = deirectionCardinal + ' (' + asset.posInfo.direct + '&deg;)';
            customAddress = !asset.posInfo.customAddress ? LANGUAGE.COM_MSG08 : asset.posInfo.customAddress;

            ret = `
							<table cellpadding="0" cellspacing="0" border="0" class="marker-data-table marker-data-table-dashboard">
								<tr>
									<td class="marker-data-caption">${LANGUAGE.HOME_MSG001}</td>
									<td class="marker-data-value">${asset.Name}</td>
									<td class="marker-data-caption">${LANGUAGE.HOME_MSG002}</td>
									<td class="marker-data-value">${self.$app.methods.capitalize(assetFeaturesStatus.status.value)}</td>
								</tr>
								<tr>
									<td class="marker-data-caption">${LANGUAGE.HOME_MSG003}</td>
									<td class="marker-data-value">${asset.posInfo.positionTime.format(window.COM_TIMEFORMAT)}</td>
									<td class="marker-data-caption">${LANGUAGE.HOME_MSG004}</td>
									<td class="marker-data-value">${mileage}</td>
								</tr>
								<tr>
									<td class="marker-data-caption">${LANGUAGE.HOME_MSG019}</td>
									<td class="marker-data-value">${launchHours ? launchHours : '-'}</td>
									<td class="marker-data-caption">${LANGUAGE.HOME_MSG005}</td>
									<td class="marker-data-value">${speed}</td>
								</tr>
								<tr>
									<td class="marker-data-caption">${LANGUAGE.HOME_MSG006}</td>
									<td class="marker-data-value">${assetFeaturesStatus.acc ? assetFeaturesStatus.acc.value : '-'}</td>
									<td class="marker-data-caption">${LANGUAGE.HOME_MSG024}</td>
									<td class="marker-data-value">${assetFeaturesStatus.voltage ? assetFeaturesStatus.voltage.value : '-'}</td>
								</tr>
								<tr>
									<td class="marker-data-caption">${LANGUAGE.HOME_MSG010}</td>
									<td class="marker-data-value">${direction}</td>
									<td class="marker-data-caption">${LANGUAGE.HOME_MSG009}</td>
									<td class="marker-data-value">${assetFeaturesStatus.fuel ? assetFeaturesStatus.fuel.value : '-'}</td>
								</tr>

								<tr>
									<td class="marker-data-caption">${LANGUAGE.HOME_MSG012}</td>
									<td colspan="3" class="marker-data-value address-${asset.IMEI}'" data-address-for="${asset.IMEI}">${customAddress}</td>
								</tr>
							</table>
						`;
          }
        }
        return ret;
      },
      addLotsToMap: function () {
        let self = this;

        let list = self.$app.methods.getFromStorage('groupList');

        if (list && list.length) {
          var groupPolygon, groupDetails, grouLabel;

          for (var i = list.length - 1; i >= 0; i--) {
            groupPolygon = '';

            if (list[i].Lat && list[i].Lng && list[i].Radius) {
              grouLabel = `${LANGUAGE.DASHBOARD_PANEL_MSG31}: ${list[i].Name} <br> ${LANGUAGE.DASHBOARD_PANEL_MSG32}: `;
              if (list[i].Assets && list[i].Assets.length) {
                grouLabel += list[i].Assets.length;
              } else {
                grouLabel += '0';
              }

              groupPolygon = L.circle([list[i].Lat, list[i].Lng], {
                color: '#AA5959',
                fillColor: '#FF0000',
                fillOpacity: 0.25,
                radius: list[i].Radius,

                groupCode: list[i].Code,
              })
                .bindTooltip(grouLabel, { permanent: false, direction: 'right' })
                .on('click', function (e) {
                  self.$el.find('[name="dashboard-assettable-filter"]').val(e.target.options.groupCode).change();

                });

              self.AllGroupsBoundsArray.push([list[i].Lat, list[i].Lng]);
            }

            groupDetails = {
              Name: list[i].Name,
              Code: list[i].Code,
            };

            if (groupPolygon) {
              groupDetails.polygon = groupPolygon;
              groupDetails.polygon.addTo(self.MapTrack);
            }

            self.GroupPositionsOnMap.push(groupDetails);
          }
          if (self.AllGroupsBoundsArray.length) {
            self.MapTrack.fitBounds(self.AllGroupsBoundsArray, { padding: [16, 16] });
          }
        }
      },
      addAllMarkers: function () {
        var self = this;
        var assetList = self.$app.methods.getFromStorage('assetList');
        self.AllMarkersGroup = L.markerClusterGroup({ 'maxClusterRadius': 35 });

        if (assetList) {
          var point = '';
          var markerData = '';

          $.each(assetList, function (key, value) {
            point = '';
            markerData = '';
            var asset = POSINFOASSETLIST[value.IMEI];
					  var assetFeaturesStatus = Protocol.Helper.getAssetStateInfo(asset);
            if (POSINFOASSETLIST[key] && POSINFOASSETLIST[key].posInfo && parseFloat(POSINFOASSETLIST[key].posInfo.lat) !== 0 && parseFloat(POSINFOASSETLIST[key].posInfo.lng) !== 0) {
              var dynamicIcon = null;
              var rotationOptions = 0
              let timeInactive = POSINFOASSETLIST[key].posInfo.positionTime && (+moment.duration(Protocol.Helper.getDifferenceBTtwoDates(POSINFOASSETLIST[key].posInfo.positionTime, moment()), "milliseconds")) > 86400000         
						

              if (POSINFOASSETLIST[key].posInfo.speed > 20 && assetFeaturesStatus.acc && assetFeaturesStatus.acc.value === "ON") {
							dynamicIcon = Protocol.MarkerIcon[11]
							rotationOptions = +POSINFOASSETLIST[key].posInfo.direct 
						}
						 else if (POSINFOASSETLIST[key].posInfo.speed == 0 && assetFeaturesStatus.acc && assetFeaturesStatus.acc.value === "OFF" && timeInactive ) {
							dynamicIcon = Protocol.MarkerIcon[0]
						}   else if (POSINFOASSETLIST[key].posInfo.speed == 0 && assetFeaturesStatus.acc && assetFeaturesStatus.acc.value === "ON") {
							dynamicIcon = Protocol.MarkerIcon[14]
						} else if (POSINFOASSETLIST[key].posInfo.speed == 0 && assetFeaturesStatus.acc && assetFeaturesStatus.acc.value === "OFF") {
							dynamicIcon = Protocol.MarkerIcon[2]
						} else {
							dynamicIcon = Protocol.MarkerIcon[2]
						}





              point = L.marker([POSINFOASSETLIST[key].posInfo.lat, POSINFOASSETLIST[key].posInfo.lng], 
              { icon: !self.$app.data.AppDetails.customMapMarker ? dynamicIcon : self.$app.data.AppDetails.customMapMarker, rotationAngle: rotationOptions });

              markerData = self.$app.methods.getMarkerDataTable(POSINFOASSETLIST[key]);
              point
                .bindPopup(markerData, { maxWidth: self.$app.data.MaxMapPopupWidth, closeButton: false })
                .on('popupopen', function (e) {
                  if (!POSINFOASSETLIST[key].posInfo.customAddress) {
                    Protocol.Helper.getAddressByGeocoder({ lat: POSINFOASSETLIST[key].posInfo.lat, lng: POSINFOASSETLIST[key].posInfo.lng }, function (address) {
                      POSINFOASSETLIST[key].posInfo.customAddress = address;
                      markerData = self.$app.methods.getMarkerDataTable(POSINFOASSETLIST[key]);
                      e.target.setPopupContent(markerData);
                      e.popup.update();
                    });
                  }
                });
              if (app.device.desktop) {
                point.bindTooltip(POSINFOASSETLIST[key].Name, { permanent: false, direction: 'right' });
              }
              point._custom_asset_imei = key;

              point.addTo(self.AllMarkersGroup);
              POSINFOASSETLIST[key].markerIdDashboard = self.AllMarkersGroup.getLayerId(point);
            }
          });

          if (self.AllMarkersGroup.getBounds().isValid()) {
            self.AllMarkersGroup.addTo(self.MapTrack);
            self.MapTrack.fitBounds(self.AllMarkersGroup.getBounds(), { padding: [16, 16] });
          }
        }


      },
      getGoefenceList: function () {
        var self = this;

        var userInfo = self.$app.methods.getFromStorage('userInfo');
        //GET_GROUP_LIST
        var data = {
          MinorToken: userInfo.MinorToken,
          MajorToken: userInfo.MajorToken,
        };

        //self.$app.preloader.show();
        self.$app.request.post(API_URL.GET_GEOFENCE_LIST, data, function (result, xhr, status) {
          //self.$app.preloader.hide();
          //console.log(result);
          if (result && result.MajorCode == '000') {
            if (result.Data) {
              self.$app.methods.setInStorage({ name: 'geofenceList', data: result.Data });
            }

          } else {
            self.$app.dialog.alert('Something wrong at getGeofenceList');
          }

        },
          function (xhr, status) {
            //self.$app.preloader.hide();
            self.$app.dialog.alert('Error occured at getGeofenceList');
          },
          'json');
      },

      getReportData: function (e) {
        let self = this;

        let container = $$(e.target).closest('.item-content');
        let type = container.data('report-type');

        let assetList = self.$app.methods.getAssetsByGroups({ NoGroupToBottom: true });
        let userInfo = self.$app.methods.getFromStorage('userInfo');
        let data = {
          MajorToken: userInfo.MajorToken,
          MinorToken: userInfo.MinorToken,
          //GroupCodes:
        };
        let url = '';
        if (type == '1') {
          url = API_URL.GET_REPORT_LOW_BATTERY;
          data.Battery = container.data('battery-threshold');
        } else if (type == '3') {
          url = API_URL.GET_REPORT_BY_NOTREPORTING;
          data.DateFrom = moment().utc().subtract(self.DisplayDataPeriod, 'days').format(window.COM_TIMEFORMAT);
          data.DateTo = moment().utc().format(window.COM_TIMEFORMAT);

          data.Types = [];
          let solutions = self.$app.methods.getFromStorage('solutions');
          for (let i = 0; i < solutions.length; i++) {
            data.Types.push(solutions[i].Code);
          }


        } else if (type == '5') {
          url = API_URL.GET_REPORT_BY_DEVICESOLD2;

          data.Time = container.data('report-period');
          data.timePeriodText = container.data('report-period-text');;
        } else if (type == '6' || type == '7' || type == '10') {
          url = API_URL.GET_REPORT_BY_GEOGROUP_COUNT;
          if (assetList && assetList.length) {
            for (var i = assetList.length - 1; i >= 0; i--) {
              if (assetList[i].Code != '000000') {
                data.GroupCodes += assetList[i].Code + ',';
              }
            }
            if (data.GroupCodes) {
              data.GroupCodes = data.GroupCodes.slice(0, -1);
            }
          }
          if (type == '6' || type == '7') {
            data.Type = type == '6' ? 'in' : 'out';
            data.splitby = '2'; // 2 = by group, 1 = by asset
          }
        } else if (type == '9') {
          var alertType = container.data('report-alert-type');
          url = API_URL.GET_REPORT_BY_ALERT;

          data.DateFrom = moment().utc().subtract(self.DisplayDataPeriod, 'days').format(window.COM_TIMEFORMAT);
          data.DateTo = moment().utc().format(window.COM_TIMEFORMAT);
          data.AsIds = [];
          data.AlertIds = [];
          data.OnlyActiveAlarm = true;

          for (var i = assetList.length - 1; i >= 0; i--) {
            if (assetList[i].Assets && assetList[i].Assets.length) {
              for (var j = assetList[i].Assets.length - 1; j >= 0; j--) {
                data.AsIds.push(assetList[i].Assets[j].Id);
              }
            }
          }
          if (alertType) {
            data.AlertIds = [alertType];
          } else {
            var alertList = self.$app.methods.getFromStorage('alertList');
            if (alertList && alertList.length) {
              for (var i = alertList.length - 1; i >= 0; i--) {
                data.AlertIds.push(alertList[i].AlertId);
              }
            }
          }
        } else if (type == '11') {
          url = API_URL.GET_REPORT_BY_GEOFENCE_COUNT;

          data.GetGeofenceCodes = '';

          let geofenceList = self.$app.methods.getFromStorage('geofenceList');
          if (!self.$app.methods.isObjEmpty(geofenceList)) {
            data.GetGeofenceCodes = Object.keys(geofenceList);
          }
        } else if (type == '21' || type == '22') {
          url = false;
          data.MissedParam = type == '21' ? '' : 'StockNumber';
        } else if (type == '23' || type == '24' || type == '27') {
          url = false;
        } else if (type == '28') {
          //console.log('here')
          url = API_URL.GET_REPORT_DRIVER_BEHAVIOUR;
          data.beginTime = moment().utc().subtract(self.DisplayDataPeriod, 'days').format(window.COM_TIMEFORMAT);
          data.endTime = moment().utc().format(window.COM_TIMEFORMAT);
          //data.timePeriodText = fixedPeriodEl[0].options[fixedPeriodEl[0].selectedIndex].text;
        }

        if (url) {
          self.$app.preloader.show();
          self.$app.request.post(url, data, function (result, xhr, status) {
            self.$app.preloader.hide();
            console.log(result);
            if (result.MajorCode == '000') {
              if (result.Data && result.Data.length ||
                type == '5' && result.Data && result.Data.Datails && result.Data.Datails.length) {

                self.$app.methods.setInStorage({ name: 'reportData', data: result.Data });
                app.popup.open('.popup-fullscreen-report');
                let reportTemplateName = 'report-show';
                let query = {
                  type: type,
                  splitby: data.splitby ? data.splitby : '',
                };

                switch (type) {
                  case '5':
                    reportTemplateName = 'report-show-device-sold';
                    query.timePeriod = data.Time ? data.Time : '';
                    query.timePeriodText = data.timePeriodText ? data.timePeriodText : '';
                    break;

                  case '8':
                    reportTemplateName = 'report-show-drive-off';
                    query.timePeriod = data.Time ? data.Time : '';
                    query.timePeriodText = data.timePeriodText ? data.timePeriodText : '';
                    break;

                  case '10':
                    reportTemplateName = 'report-show-lot-overview';
                    break;

                  case '11':
                    reportTemplateName = 'report-show-lot-overview';
                    break;

                  case '28':
                    reportTemplateName = 'report-show-driver-behaviour';
                    query.from = data.beginTime;
                    query.to = data.endTime;
                    query.timePeriodText = data.timePeriodText;
                    break;
                }

                reportView.router.navigate({
                  name: reportTemplateName,
                  query: query,
                  /*context: {
                    ReportData: result.Data
                  }   */
                });

              } else {
                switch (type) {
                  case '1':   // Low Battery
                    self.$app.methods.customDialog({ title: Protocol.Helper.getReportTypeName(self.Type), text: LANGUAGE.PROMPT_MSG088 });
                    break;
                  case '5':   //Device Sold Type
                    self.$app.methods.customDialog({ title: Protocol.Helper.getReportTypeName(self.Type), text: LANGUAGE.PROMPT_MSG062 });
                    break;

                  case '6':   // In Lot
                    self.$app.methods.customDialog({ title: Protocol.Helper.getReportTypeName(self.Type), text: LANGUAGE.PROMPT_MSG063 });
                    break;

                  case '7':   // Off Lot
                    self.$app.methods.customDialog({ title: Protocol.Helper.getReportTypeName(self.Type), text: LANGUAGE.PROMPT_MSG064 });
                    break;

                  case '8':   // DRIVE OFF
                    self.$app.methods.customDialog({ title: Protocol.Helper.getReportTypeName(self.Type), text: LANGUAGE.PROMPT_MSG065 });
                    break;

                  case '9':   // Alarm
                    self.$app.methods.customDialog({ title: Protocol.Helper.getReportTypeName(self.Type), text: LANGUAGE.PROMPT_MSG066 });
                    break;

                  case '10':  // LOT OVERVIEW
                    self.$app.methods.customDialog({ title: Protocol.Helper.getReportTypeName(self.Type), text: LANGUAGE.PROMPT_MSG069 });
                    break;

                  case '11':  // GEOFENCE OVERVIEW
                    self.$app.methods.customDialog({ title: Protocol.Helper.getReportTypeName(self.Type), text: LANGUAGE.PROMPT_MSG085 });
                    break;

                  case '12':
                    self.$app.methods.customDialog({ title: Protocol.Helper.getReportTypeName(self.Type), text: LANGUAGE.PROMPT_MSG087 });
                    break;

                  case '13':
                    self.$app.methods.customDialog({ title: Protocol.Helper.getReportTypeName(self.Type), text: LANGUAGE.PROMPT_MSG092 });
                    break;

                  default:
                    self.$app.methods.customDialog({ title: Protocol.Helper.getReportTypeName(self.Type), text: LANGUAGE.PROMPT_MSG055 });
                }
              }
            } else if (result.MajorCode == '100' && result.MinorCode == '1002' && result.Data && result.Data == 'MajorToken_Error') {
              self.$app.methods.customDialog({ title: Protocol.Helper.getReportTypeName(type), text: LANGUAGE.PROMPT_MSG061 });
            } else if (result.MajorCode == '100' && result.MinorCode == '1002') {
              self.$app.methods.customDialog({ title: Protocol.Helper.getReportTypeName(type), text: LANGUAGE.PROMPT_MSG056 });
            } else {
              self.$app.dialog.alert(LANGUAGE.PROMPT_MSG0121);
            }

          },
            function (xhr, status) {
              self.$app.preloader.hide();
              self.$app.dialog.alert('Error occurred during request');
            },
            'json');

        } else {
          let reportData = false;
          switch (type) {
            case '21': case '22':
              reportData = self.$app.methods.getAssetsWithMissingParam(data.MissedParam);
              break;

            case '23':
              reportData = self.$app.methods.getAssetsListByCriteria('installed');
              break;

            case '24':
              reportData = self.$app.methods.getAssetsListByCriteria('inInventory');
              break;
            case '27':
              reportData = self.$app.methods.getAssetsListByCriteria('deactivated');
              break;
          }

          //console.log(reportData);
          if (reportData && reportData.length) {
            self.$app.methods.setInStorage({ name: 'reportData', data: reportData });
            self.$app.popup.open('.popup-fullscreen-report');
            let reportTemplateName = 'report-show';
            let query = {
              type: type,
            };
            reportView.router.navigate({
              name: reportTemplateName,
              query: query,
            });
          } else {
            self.$app.methods.customDialog({ title: Protocol.Helper.getReportTypeName(self.Type), text: LANGUAGE.COM_MSG35 });
          }

        }

      },

    },

    on: {
      pageInit: function (e, page) {
        let self = this;
        let assettableFiletrEl = page.$el.find('[name="dashboard-assettable-filter"]');


        let columns = [
          { title: "GroupCode" },
          { title: LANGUAGE.DASHBOARD_PANEL_MSG27 },  //Map
          { title: LANGUAGE.DASHBOARD_PANEL_MSG22 },  //Asset Name
          { title: LANGUAGE.DASHBOARD_PANEL_MSG34 },  //Stock Number
          { title: LANGUAGE.DASHBOARD_PANEL_MSG23 },  //Voltage
          { title: LANGUAGE.DASHBOARD_PANEL_MSG24 },  //Stationary Time
          { title: LANGUAGE.REPORT_PANEL_MSG122 },    //Mileage
          { title: LANGUAGE.REPORT_PANEL_MSG129 },    //Engine Hours
          { title: LANGUAGE.DASHBOARD_PANEL_MSG56 },  //Fuel Used
          { title: "dataObj" }
        ]

        let hiddenRows = { // hide group codes, which will be used for filtering
          targets: [0, 9],
          visible: false
        };
        if (self.TypeDealer) {
          hiddenRows.targets.push(8)
        }

        self.DashboardDataTableEl = $('#table-dashboard-assets').DataTable({
          columns: columns,
          order: [[6, 'desc']],
          columnDefs: [
            hiddenRows,
            { // remove orederable arrows from column with pin
              targets: [1],
              data: null,
              orderable: false,
              render: function (data, type, row) {
                let params = row[9];
                return `<div class="${Template7.global.DEALER_TEXT_COLOR_CLASS ? Template7.global.DEALER_TEXT_COLOR_CLASS : 'text-color-red'} cursor-pointer showOnMap" data-imei="${params.IMEI}" data-name="${params.AssetName}" ><i class="f7-icons icon-address"></i></div>`
              }
            },
            { // hide group codes, which will be used for filtering
              targets: [3],
              visible: self.TypeDealer
            },
          ],
          lengthMenu: [5, 10, 25],
          pageLength: 5,
        });

        assettableFiletrEl.on('change', function (e) {
          let selected = e.target.value == '000' ? '' : e.target.value;
          self.DashboardDataTableEl.column(0)
            .search(selected)
            .draw();

          if (selected) {
            let groupOnMapIndex = self.GroupPositionsOnMap.findIndex(x => x.Code == selected);

            if (groupOnMapIndex != -1) {
              self.MapTrack.fitBounds(self.GroupPositionsOnMap[groupOnMapIndex].polygon.getBounds(), { padding: [16, 16] });
            }
          } else {
            self.MapTrack.fitBounds(self.AllGroupsBoundsArray, { padding: [16, 16] });

          }
        });

        /*totalmileageFiletrEl.on('change', function(e){
          self.getOverviewDetails(e.target.value, e.target.name);
        });

        totalfuelFiletrEl.on('change', function(e){
          self.getOverviewDetails(e.target.value, e.target.name);
        });

        overviewFiletrEl.on('change', function(e){
          self.getOverviewDetails(e.target.value, e.target.name);
        });*/

        page.$el.on('change', '[name="dashboard-driver-behaviour-assets-filter"]', function (e) {
          //self.getOverviewDetails(e.target.value, e.target.name);

          self.showDriverBehaviourByAsset(e.target.value)
        });

        page.$el.on('click', '.showOnMap', function (e) {
          let imei = $$(this).data('imei')
          let name = $$(this).data('name')
          self.showOnMap({ IMEI: imei, Name: name })
        });

        /*driverRatingFiletrEl.on('change', function(e){
          self.getDriverBehaviourDetails(e.target.value, e.target.name);
        });*/


      },
      pageAfterIn: function () {
        var self = this;

        self.MapTrack = Protocol.Helper.createMap({ target: 'mapDashboard', latLng: [38.530015, -101.649213], zoom: 4 });

        if (self.DashboardDataLoaded) {
          self.initGraphics();
        }

        self.addLotsToMap();
        self.addAllMarkers();
        self.getGoefenceList();
        self.autoUpdateDashboardData();

        AutoUpdateDashboardDataTimer = setInterval(self.autoUpdateDashboardData, 3 * 60 * 1000);

      },
      pageAfterOut: function () {
        // page has left the view

      },
      pageBeforeRemove: function () {
        //console.log('here');
      }

    }
  };
</script>