<!--suppress JSAnnotator -->
<template>
	<!-- Page, data-name contains page name which can be used in callbacks -->
	<div class="page " data-name="home">
		<!-- page-with-subnavbar -->
		<!-- Top Navbar -->
		<div class="navbar">
			<div class="navbar-inner">
				<div class="left">
					<a href="#" class="link icon-only panel-open panel-open-menu" data-panel="left">
						<i class="icon material-icons">menu</i>
					</a>
				</div>
				<div class="title sliding no-margin">
					<div class="segmented segmented-custom">
						<button @click="activateSerachAssetField" class="button tooltip-init button-active"
							data-tooltip="{{@global.LANGUAGE.HOME_MSG020}}">
							{{#if @global.IS_MARINE}}
							<i class="f7-icons icon icon-boat"></i>
							{{else}}
							<i class="f7-icons icon icon-header-tracking"></i>
							{{/if}}
						</button>
						{{#js_if "USERROLE == 1 || USERROLE == 2 || USERROLE == 3 || USERROLE == 8 || USERROLE == 11"}} 
						<button class="button tooltip-init popup-open" data-popup=".popup-fullscreen-dashboard"
							data-tooltip="{{@global.LANGUAGE.HOME_MSG022}}">
							<i class="f7-icons icon icon-header-dashboard"></i>
						</button>
						<button class="button tooltip-init popup-open" data-popup=".popup-fullscreen-cctv"
							data-tooltip="{{@global.LANGUAGE.HOME_MSG047}}">
							<i class="f7-icons icon icon-cctv-cam"></i>
						</button>
						{{/js_if}}
						<!--<button @click="toggleCCTV"
                                  class="button tooltip-init"
                                  data-tooltip="{{@global.LANGUAGE.HOME_MSG047}}"
                          >
                            <i class="f7-icons icon icon-cctv-cam"></i>
                          </button>-->
					</div>

				</div>
				<div class="right">
					<a @click="openNotificationsPage" href="#" class="link openNotificationsPageLink ">
						<i class="f7-icons size-25  icon icon-notification tooltip-init"
							data-tooltip="{{@global.LANGUAGE.NOTIFICATIONS_MSG00}}">
							<!-- <span class="badge color-red">5</span>  -->
						</i>
					</a>
					<!--<a @click="showUserGuideList" href="#" class="link icon-only">
						<i class="f7-icons icon icon-user-manual tooltip-init"
							data-tooltip="{{@global.LANGUAGE.HOME_MSG027}}"></i>
					</a>-->
					<a href="#"
						class="button button-fill color-white text-color-black elevation-2 margin-right-16 margin-left-16"
						onclick="app.methods.logout();">{{@global.LANGUAGE.MENU_MSG04}}</a>
				</div>

			</div>
		</div>

		<div @click="viewAll" class="fab fab-right-bottom fab-custom fab-viewall ">
			<a href="#" class="bg-color-darkgray elevation-hover-10">
				<i class="f7-icons icon-view-all"></i>
				<div class="fab-text">{{@global.LANGUAGE.COM_MSG28}}</div>
			</a>
		</div>

		<div @click="shwoMapSetings" class="fab fab-right fab-custom fab-map-settings">
			<a href="#" class="bg-color-darkgray elevation-hover-10">
				<i class="f7-icons icon-admin-settings"></i>
				<div class="fab-text">{{@global.LANGUAGE.HOME_MSG025}}</div>
			</a>
		</div>

		<!-- Scrollable page content-->
		<div class="page-content overflow-hidden">

			<div id="map" class="home-map">
				<div class="asset-alarms-widget {{#if isTopsWidgetShowed}}show{{/if}} elevation-6">

					<div class="row no-gap widget-list overflow-auto">
					{{#js_if 'USERROLE != 5 && USERROLE != 9 && USERROLE != 10'}}
						{{#TopWidgetInfo}}
						<div class="col widget-item">
							<div class="item-header bg-color-darkgray text-color-{{ color }} tooltip-init"
								data-tooltip="{{ name }}">

								{{#if editName}}
								<a href="/account-alarm-settings/"
									class="text-color-white panel-open header-link-wrapper link" data-view=".view-left"
									data-panel="left">
									{{ name }}


								</a>
								{{else}}
								{{#if icon}}
								<i class="  icon-{{ icon }} size-16 f7-icons icon"></i>
								{{else}}
								{{ name }}
								{{/if}}

								{{/if}}
							</div>
							<div class="item-content {{#if other}}other{{/if}}" @click="getReportData"
								data-report-type="9" data-report-alert-type="{{ alertType }}">
								{{ value}}
							</div>
						</div>
						{{/TopWidgetInfo}}
						{{/js_if}}
					</div>
					<div class="show-control bg-color-white" @click="toggleTopWidget">
						<i class="icon f7-icons text-color-black size-18">chevron_down</i>
					</div>
				</div>

			</div>

			<div class="asset-details-widget elevation-6 {{#if isAssetDetailsWidgetShowed}}show{{/if}}">
				<div class="show-control bg-color-darkgray" @click="toggleAssetDetailsWidget">
					<i class="icon f7-icons text-color-white size-18">chevron_up</i>
				</div>
				<ul class="widget-list">
					{{#if BottomWidgetInfo}}
					<li class="widget-item big">
						<div class="item-header bg-color-darkgray text-color-white">{{@global.LANGUAGE.HOME_MSG032}}
						</div>
						<div class="item-content">
							<div class="list no-margin no-hairlines media-list">
								<ul>
									<li class="item-content padding-top-8">
										<div class="item-inner">
											<div class="item-title-row">
												<div class="item-title">
													<span
														class="text-color-black">{{BottomWidgetInfo.general.name}}</span>
													<div class="item-footer">
														<i
															class="icon-asset-status vertical-middle margin-right-4 size-8 {{BottomWidgetInfo.general.statusState}}"></i>{{BottomWidgetInfo.general.statusValue}}
														{{#if
														BottomWidgetInfo.general.statusStopped}}({{BottomWidgetInfo.general.statusStopped}}){{/if}}
													</div>
												</div>
												<div class="item-after">
													<a href="#" @click="showAssetMenu"
														class="link bigger-touch-area "><i
															class="f7-icons icon-menu-asset size-18"></i></a>
												</div>
											</div>
											<div class="divider"></div>
											<div class="item-text">
												<div class="row no-gutter">
													<div class="col-50 tooltip-init"
														data-tooltip="{{@global.LANGUAGE.ASSET_EDIT_MSG01}}">
														<i
															class="f7-icons size-16 icon-imei asset_list_icon text-color-lightgray vertical-middle"></i>
														<!--<span class="size-12 vertical-middle">Model:</span>-->
														<span
															class="size-12 vertical-middle text-color-black">{{BottomWidgetInfo.general.imei}}</span>
													</div>
													<div class="col-50 tooltip-init"
														data-tooltip="{{#if @global.IS_MARINE}}{{@global.LANGUAGE.ASSET_EDIT_MSG24}}{{else}}{{@global.LANGUAGE.ASSET_EDIT_MSG23}}{{/if}}">
														<i
															class="f7-icons size-16 icon-driver asset_list_icon text-color-lightgray vertical-middle"></i>
														<span
															class="size-12 vertical-middle text-color-black">{{BottomWidgetInfo.general.driver}}</span>
													</div>
													<div class="col-50 tooltip-init"
														data-tooltip="{{@global.LANGUAGE.ASSET_EDIT_MSG02}}">
														<i
															class="f7-icons size-16 icon-device asset_list_icon text-color-lightgray vertical-middle"></i>
														<span
															class="size-12 vertical-middle text-color-black">{{BottomWidgetInfo.general.deviceType}}</span>
													</div>
													<div class="col-50 tooltip-init"
														data-tooltip="{{@global.LANGUAGE.ASSET_EDIT_MSG22}}">
														<i
															class="f7-icons size-16  icon-name asset_list_icon text-color-lightgray vertical-middle"></i>
														<span
															class="size-12 vertical-middle text-color-black">{{BottomWidgetInfo.general.assetType}}</span>
													</div>
													<div class="col-50 tooltip-init"
														data-tooltip="{{@global.LANGUAGE.ASSET_EDIT_MSG15}}">
														<i
															class="f7-icons size-16 {{#if BottomWidgetInfo.general.solutionTypeIcon}}{{BottomWidgetInfo.general.solutionTypeIcon}}{{else}}icon-solution{{/if}} asset_list_icon text-color-lightgray vertical-middle"></i>
														<span
															class="size-12 vertical-middle text-color-black">{{BottomWidgetInfo.general.solutionType}}</span>
													</div>
													<div class="col-50 tooltip-init"
														data-tooltip="{{@global.LANGUAGE.ASSET_EDIT_MSG05}}">
														<i
															class="f7-icons size-16  icon-name asset_list_icon text-color-lightgray vertical-middle"></i>
														<span
															class="size-12 vertical-middle text-color-black">{{BottomWidgetInfo.general.describe1}}</span>
													</div>
												</div>
											</div>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</li>
					{{#if BottomWidgetInfo.location}}
					<li class="widget-item big">
						<div class="item-header bg-color-darkgray text-color-white">{{@global.LANGUAGE.HOME_MSG033}}
						</div>
						<div class="item-content padding-vertical-half padding-horizontal-half-half">
							<div class="row no-gap margin-bottom-8">
								<div class="col-20 tooltip-init" data-tooltip="{{@global.LANGUAGE.COM_MSG124}}">
									<i
										class="f7-icons size-16 icon-signal asset_list_icon {{BottomWidgetInfo.location.gsmState}} vertical-middle"></i>
									<span
										class="size-12 vertical-middle text-color-black ">{{BottomWidgetInfo.location.gsmValue}}</span>
								</div>
								<div class="col-20 tooltip-init" data-tooltip="{{@global.LANGUAGE.COM_MSG125}}">
									<i
										class="f7-icons size-16 icon-gps asset_list_icon {{BottomWidgetInfo.location.gpsState}} vertical-middle"></i>
									<span
										class="size-12 vertical-middle text-color-black ">{{BottomWidgetInfo.location.gpsValue}}</span>
								</div>
								<div class="col-20 tooltip-init" data-tooltip="{{@global.LANGUAGE.HOME_MSG013}}">
									<i
										class="f7-icons size-16 icon-address asset_list_icon text-color-lightgray vertical-middle"></i>
									<span
										class="size-12 vertical-middle text-color-black ">{{BottomWidgetInfo.location.positionType}}</span>
								</div>
								<div class="col-40 tooltip-init" data-tooltip="{{@global.LANGUAGE.HOME_MSG010}}">
									<i
										class="f7-icons size-16 icon-coordinates asset_list_icon text-color-lightgray vertical-middle"></i>
									<span
										class="size-12 vertical-middle text-color-black">{{BottomWidgetInfo.location.direction}}</span>
								</div>
							</div>
							<div class="row ">
								<div class="col-100 tooltip-init line-height-16 only-2-rows"
									data-tooltip="{{@global.LANGUAGE.HOME_MSG012}}">
									<i
										class="f7-icons size-16 icon-address asset_list_icon text-color-lightgray vertical-middle"></i>
									<span
										class="size-12 vertical-middle text-color-black">{{BottomWidgetInfo.location.address}}</span>
								</div>
								<div class="col-100 tooltip-init" data-tooltip="{{@global.LANGUAGE.HOME_MSG011}}">
									<i
										class="f7-icons size-16 icon-coordinates asset_list_icon text-color-lightgray vertical-middle"></i>
									<span
										class="size-12 vertical-middle text-color-black">{{BottomWidgetInfo.location.coords}}</span>
								</div>
							</div>

							<div class="divider"></div>

							<div class="row">
								{{#if BottomWidgetInfo.input1name}}
								<div class="col-50">
									<i
										class="f7-icons size-16 asset_list_icon vertical-middle {{BottomWidgetInfo.input1name.icon}} {{BottomWidgetInfo.input1name.state}}"></i>
									<span
										class="size-12 vertical-middle text-color-black ">{{BottomWidgetInfo.input1name.name}}:
										{{BottomWidgetInfo.input1name.value}}</span>
								</div>
								{{/if}}
								{{#if BottomWidgetInfo.input2name}}
								<div class="col-50">
									<i
										class="f7-icons size-16 asset_list_icon vertical-middle {{BottomWidgetInfo.input2name.icon}} {{BottomWidgetInfo.input2name.state}}"></i>
									<span
										class="size-12 vertical-middle text-color-black ">{{BottomWidgetInfo.input2name.name}}:
										{{BottomWidgetInfo.input2name.value}}</span>
								</div>
								{{/if}}
							</div>
						</div>
					</li>
					<li class="widget-item small3">
						<div class="item-header bg-color-darkgray text-color-white">{{@global.LANGUAGE.HOME_MSG034}}
						</div>
						<div
							class="item-content display-flex	justify-content-center align-content-center align-items-center padding-horizontal-half">
							<button @click="ShowStreetView"
								class="button street-view-btn button-fill button-raised {{@global.DEALER_BG_COLOR_CLASS}} {{#unless BottomWidgetInfo.location.SVExist}}disabled{{/unless}}">
								<i class="f7-icons icon-street-view-10 size-20"></i></button>
						</div>
					</li>

					<li class="widget-item">
						<div class="item-header bg-color-darkgray text-color-white">{{@global.LANGUAGE.HOME_MSG035}} /
							{{@global.LANGUAGE.HOME_MSG019}}</div>
						<div
							class="item-content display-flex	justify-content-center align-content-center align-items-center padding-horizontal-half">
							<div class="row ">
								<div class="col-100 tooltip-init" data-tooltip="{{@global.LANGUAGE.HOME_MSG036}}">
									<i
										class="f7-icons size-16 icon-mileage asset_list_icon text-color-lightgray vertical-middle"></i>
									<span
										class="size-12 vertical-middle text-color-gray">{{@global.LANGUAGE.HOME_MSG036}}:</span>
									<span
										class="size-12 vertical-middle text-color-black">{{BottomWidgetInfo.odometer.initial}}</span>
								</div>
								<div class="col-100 tooltip-init" data-tooltip="{{@global.LANGUAGE.HOME_MSG037}}">
									<i
										class="f7-icons size-16 icon-mileage asset_list_icon text-color-lightgray vertical-middle"></i>
									<span
										class="size-12 vertical-middle text-color-gray">{{@global.LANGUAGE.HOME_MSG037}}:</span>
									<span
										class="size-12 vertical-middle text-color-black">{{BottomWidgetInfo.odometer.total}}</span>
								</div>
								<div class="col-100 tooltip-init margin-top-8"
									data-tooltip="{{@global.LANGUAGE.HOME_MSG038}}">
									<i
										class="f7-icons size-16 icon-engine asset_list_icon text-color-lightgray vertical-middle"></i>
									<span
										class="size-12 vertical-middle text-color-gray">{{@global.LANGUAGE.HOME_MSG038}}:</span>
									<span
										class="size-12 vertical-middle text-color-black">{{BottomWidgetInfo.engine.initial}}</span>
								</div>
								<div class="col-100 tooltip-init"
									data-tooltip="{{@global.LANGUAGE.DASHBOARD_PANEL_MSG26}}">
									<i
										class="f7-icons size-16 icon-engine asset_list_icon text-color-lightgray vertical-middle"></i>
									<span
										class="size-12 vertical-middle text-color-gray">{{@global.LANGUAGE.HOME_MSG019}}:</span>
									<span
										class="size-12 vertical-middle text-color-black">{{BottomWidgetInfo.engine.total}}</span>
								</div>
							</div>
						</div>
					</li>
					<!--<li class="widget-item">
                      <div class="item-header bg-color-darkgray text-color-white">{{@global.LANGUAGE.HOME_MSG019}}</div>
                      <div class="item-content display-flex	justify-content-center align-content-center align-items-center padding-horizontal-half">
                        <div class="row ">
                          <div class="col-100 tooltip-init" data-tooltip="{{@global.LANGUAGE.HOME_MSG038}}">
                            <i class="f7-icons size-16 icon-engine asset_list_icon text-color-lightgray vertical-middle"></i>
                            <span class="size-12 vertical-middle text-color-gray">{{@global.LANGUAGE.HOME_MSG038}}:</span>
                            <span class="size-12 vertical-middle text-color-black">{{BottomWidgetInfo.engine.initial}}</span>
                          </div>
                          <div class="col-100 tooltip-init" data-tooltip="{{@global.LANGUAGE.DASHBOARD_PANEL_MSG26}}">
                            <i class="f7-icons size-16 icon-engine asset_list_icon text-color-lightgray vertical-middle"></i>
                            <span class="size-12 vertical-middle text-color-gray">{{@global.LANGUAGE.HOME_MSG019}}:</span>
                            <span class="size-12 vertical-middle text-color-black">{{BottomWidgetInfo.engine.total}}</span>
                          </div>
                        </div>
                      </div>
                    </li>-->

					{{#if BottomWidgetInfo.powerSupply}}
					<li class="widget-item small">
						<div class="item-header bg-color-darkgray text-color-white">{{@global.LANGUAGE.HOME_MSG039}}
						</div>
						<div
							class="item-content display-flex	justify-content-center align-content-center align-items-center padding-horizontal-half">
							<div class="row ">
								{{#if BottomWidgetInfo.powerSupply.battery}}
								<div class="col-100 tooltip-init" data-tooltip="{{@global.LANGUAGE.HOME_MSG040}}">
									<i
										class="f7-icons size-16 icon-battery asset_list_icon text-color-lightgray vertical-middle"></i>
									<span
										class="size-12 vertical-middle text-color-gray">{{@global.LANGUAGE.HOME_MSG040}}:</span>
									<span
										class="size-12 vertical-middle text-color-black">{{BottomWidgetInfo.powerSupply.battery}}</span>
								</div>
								{{/if}}
								{{#if BottomWidgetInfo.powerSupply.voltage}}
								<div class="col-100 tooltip-init" data-tooltip="{{@global.LANGUAGE.HOME_MSG041}}">
									<i
										class="f7-icons size-16 icon-voltage asset_list_icon text-color-lightgray vertical-middle"></i>
									<span
										class="size-12 vertical-middle text-color-gray">{{@global.LANGUAGE.HOME_MSG041}}:</span>
									<span
										class="size-12 vertical-middle text-color-black">{{BottomWidgetInfo.powerSupply.voltage}}</span>
								</div>
								{{/if}}
							</div>
						</div>
					</li>
					{{/if}}

					{{#if BottomWidgetInfo.fuel}}
					<li class="widget-item small">
						<div class="item-header bg-color-darkgray text-color-white">{{@global.LANGUAGE.HOME_MSG009}}
						</div>
						<div
							class="item-content display-flex	justify-content-center align-content-center align-items-center padding-horizontal-half">
							<div class="row ">
								<div class="col-100 tooltip-init" data-tooltip="{{@global.LANGUAGE.COM_MSG126}}">
									<i
										class="f7-icons size-16 icon-fuel asset_list_icon text-color-lightgray vertical-middle"></i>
									<span
										class="size-12 vertical-middle text-color-gray">{{@global.LANGUAGE.COM_MSG126}}:</span>
									<span
										class="size-12 vertical-middle text-color-black">{{BottomWidgetInfo.fuel.value}}</span>
								</div>
							</div>
						</div>
					</li>
					{{/if}}

					{{#if BottomWidgetInfo.temperature}}
					<li class="widget-item small2 ">
						<div class="item-header bg-color-darkgray text-color-white">{{@global.LANGUAGE.HOME_MSG042}}
						</div>
						<div
							class="item-content display-flex	justify-content-center align-content-center align-items-center padding-horizontal-half">
							<div class="row ">
								<div class="col-100 tooltip-init" data-tooltip="{{@global.LANGUAGE.COM_MSG127}}">
									<i
										class="f7-icons size-16 icon-fuel asset_list_icon text-color-lightgray vertical-middle"></i>
									<span
										class="size-12 vertical-middle text-color-gray">{{@global.LANGUAGE.COM_MSG127}}:</span>
									<span
										class="size-12 vertical-middle text-color-black">{{BottomWidgetInfo.temperature.value}}</span>
								</div>
							</div>
						</div>
					</li>
					{{/if}}

					{{#if BottomWidgetInfo.temp1}}
					<li class="widget-item small2 ">
						<div class="item-header bg-color-darkgray text-color-white">{{@global.LANGUAGE.HOME_MSG042}}
						</div>
						<div
							class="item-content display-flex	justify-content-center align-content-center align-items-center padding-horizontal-half">
							<div class="row ">
								<div class="col-50 tooltip-init" data-tooltip="Temp1">
									<i
										class="f7-icons size-16 icon-temperature asset_list_icon text-color-lightgray vertical-middle"></i>
									<span
										class="size-12 vertical-middle text-color-black">{{BottomWidgetInfo?.temp1?.value}}</span>
								</div>

								<div class="col-50 tooltip-init" data-tooltip="Temp2">
									<i
										class="f7-icons size-16 icon-temperature asset_list_icon text-color-lightgray vertical-middle"></i>
									<span
										class="size-12 vertical-middle text-color-black">{{BottomWidgetInfo?.temp2?.value}}</span>
								</div>

								<div class="col-50 tooltip-init" data-tooltip="Temp3">
									<i
										class="f7-icons size-16 icon-temperature asset_list_icon text-color-lightgray vertical-middle"></i>
									<span
										class="size-12 vertical-middle text-color-black">{{BottomWidgetInfo?.temp3?.value}}</span>
								</div>

								<div class="col-50 tooltip-init" data-tooltip="Temp4">
									<i
										class="f7-icons size-16 icon-temperature asset_list_icon text-color-lightgray vertical-middle"></i>
									<span
										class="size-12 vertical-middle text-color-black">{{BottomWidgetInfo?.temp4?.value}}</span>
								</div>

								<div class="col-50 tooltip-init" data-tooltip="Temp5">
									<i
										class="f7-icons size-16 icon-temperature asset_list_icon text-color-lightgray vertical-middle"></i>
									<span
										class="size-12 vertical-middle text-color-black">{{BottomWidgetInfo?.temp5?.value}}</span>
								</div>

								<div class="col-50 tooltip-init" data-tooltip="Temp6">
									<i
										class="f7-icons size-16 icon-temperature asset_list_icon text-color-lightgray vertical-middle"></i>
									<span
										class="size-12 vertical-middle text-color-black">{{BottomWidgetInfo?.temp6?.value}}</span>
								</div>

								<div class="col-50 tooltip-init" data-tooltip="Temp7">
									<i
										class="f7-icons size-16 icon-temperature asset_list_icon text-color-lightgray vertical-middle"></i>
									<span
										class="size-12 vertical-middle text-color-black">{{BottomWidgetInfo?.temp7?.value}}</span>
								</div>

								<div class="col-50 tooltip-init" data-tooltip="Temp8">
									<i
										class="f7-icons size-16 icon-temperature asset_list_icon text-color-lightgray vertical-middle"></i>
									<span
										class="size-12 vertical-middle text-color-black">{{BottomWidgetInfo?.temp8?.value}}</span>
								</div>
							</div>
						</div>
					</li>
					{{/if}}

					{{else}}
					<li class="widget-item small">
						<div class="item-header bg-color-darkgray text-color-white">{{@global.LANGUAGE.HOME_MSG033}}
						</div>
						<div
							class="item-content display-flex	justify-content-center align-content-center align-items-center padding-horizontal-half">
							<div class="row ">
								<div class="col-100">
									<span
										class="size-12 vertical-middle text-color-gray">{{@global.LANGUAGE.PROMPT_MSG0124}}</span>
								</div>
							</div>
						</div>
					</li>
					{{/if}}

					{{else}}
					<li class="widget-item">
						<div class="item-header bg-color-darkgray text-color-white">{{@global.LANGUAGE.HOME_MSG032}}
						</div>
						<div
							class="item-content display-flex	justify-content-center align-content-center align-items-center padding-horizontal-half">
							<div class="row ">
								<div class="col-100 text-align-center">
									<span
										class="size-12 vertical-middle text-color-gray text-align-center">{{@global.LANGUAGE.PROMPT_MSG0124}}</span>
								</div>
							</div>
						</div>
					</li>
					{{/if}}

				</ul>
			</div>

			<!--<div class="cctv-overlay">

                </div>-->

		</div>


	</div>
</template>


<script>
	// script must return component object
	return {
		data: function () {
			let mapSettingsObg = this.$app.methods.getFromStorage('mapSettings');
			var installationOptionsInput1 = Protocol.Helper.getInstallationOptionsInput1();
			var installationOptionsInput2 = Protocol.Helper.getInstallationOptionsInput2();
			var installationOptionsInput3 = Protocol.Helper.getInstallationOptionsInput3();
			var installationOptionsInput4 = Protocol.Helper.getInstallationOptionsInput4();
			var installationOptionsInput5 = Protocol.Helper.getInstallationOptionsInput5();
			var installationOptionsInput6 = Protocol.Helper.getInstallationOptionsInput6();


			var ret = {
				DynamicReportsPopup: false,
				DynamicMenuPopup: false,
				isTopWidgetShowed: !!mapSettingsObg.isTopsWidgetShowed,
				isAssetDetailsWidgetShowed: !!mapSettingsObg.isAssetDetailsWidgetShowed,
				StreetViewService: null,
				BottomWidgetInfo: null,
				TopWidgetInfo: [],
				AlertsReportDataPeriod: 1,
				InstallationOptionsInput1: installationOptionsInput1,
				InstallationOptionsInput2: installationOptionsInput2,
				InstallationOptionsInput3: installationOptionsInput3,
				InstallationOptionsInput4: installationOptionsInput4,
				InstallationOptionsInput5: installationOptionsInput5,
				InstallationOptionsInput6: installationOptionsInput6,
			};
			//app.methods.storageSetupTime();

			return ret;
		},
		methods: {
			toggleCCTV: function () {
				$$('.cctv-overlay').toggleClass('show');
			},
			showUserGuideList: function (e) {
				let self = this;

				var userType = 'enduser';
				if (self.$app.data.CustomerType == 2 || self.$app.data.CustomerType == 6) {
					userType = 'dealer';
				}
				var content = `<div class="popover menu-popover" >
                                        <div class="popover-inner">
                                            <div class="list no-hairlines no-hairlines-between">
                                                <ul>`;
				for (var i = 0; i < self.$app.data.AppDetails.manuals[userType].length; i++) {
					content += `                    <li>
                                                        <a href="${self.$app.data.AppDetails.manuals[userType][i].url}" target="_blank" class="item-link list-button popover-close external" >${self.$app.data.AppDetails.manuals[userType][i].name}</a>
                                                    </li>`;
				}
				content += `                     </ul>
                                            </div>
                                        </div>
                                    </div>`;
				self.$app.popover.create({
					backdrop: false,
					closeByOutsideClick: true,
					targetEl: e.target,
					content: content,
					on: {
						opened: function (popover) {
							//console.log(popover);
						},
						closed: function (popover) {
							popover.destroy();
						}
					}
				}).open();
			},
			openNotificationsPage: function () {
				var self = this;

				self.$app.methods.getNewNotifications({
					loadPageNotification: true,
					openLeftPanel: true,
					//showLoader: true,
				});
			},
			viewAll: function () {
				var self = this;

				if (!self.$app.methods.isObjEmpty(AllMarkersGroup.getBounds())) {
					MapTrack.fitBounds(AllMarkersGroup.getBounds(), { padding: [16, 16] });
				}
			},
			shwoMapSetings: function (e) {
				var self = this;

				var mapSettingsObg = app.methods.getFromStorage('mapSettings');

				self.$app.popover.create({
					backdrop: false,
					closeByOutsideClick: true,
					targetEl: e.target.closest('.fab'),
					content: `<div class="popover map-settings-popover" >
                                        <div class="popover-inner">
                                            <div class="list no-hairlines no-hairlines-between">
                                                <ul>
                                                    <li>
                                                        <label class="item-checkbox item-content popover-close">
                                                            <input type="checkbox" name="checkbox-map-settings" value="showGeofences" ${mapSettingsObg && mapSettingsObg.showGeofences ? 'checked' : ''}/>
                                                            <i class="icon icon-checkbox"></i>
                                                            <div class="item-inner">
                                                                <div class="item-title">${LANGUAGE.HOME_MSG026}</div>
                                                            </div>
                                                        </label>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>`,
					on: {
						opened: function (popover) {
							popover.$el.on('change', 'input[name="checkbox-map-settings"]', function () {
								mapSettingsObg[this.value] = this.checked;
								app.methods.setInStorage({ name: 'mapSettings', data: mapSettingsObg });

								switch (this.value) {
									case 'showGeofences':
										this.checked ? MapControls.showGeofences() : MapControls.hideGeofences();
										break;

								}
							});

						},
						closed: function (popover) {
							popover.destroy();
						}
					}
				}).open();
			},
			activateSerachAssetField: function () {
				leftView.router.back('/panel-left/', { force: true });
				this.$app.utils.nextFrame(() => {
					this.$app.searchbar.get('.searchbarAssetList').inputEl.focus();
				});
			},

			toggleAssetDetailsWidget: function () {
				let mapSettingsObg = this.$app.methods.getFromStorage('mapSettings');
				mapSettingsObg.isAssetDetailsWidgetShowed = !this.isAssetDetailsWidgetShowed
				this.$app.methods.setInStorage({ name: 'mapSettings', data: mapSettingsObg });

				this.$setState({
					isAssetDetailsWidgetShowed: !this.isAssetDetailsWidgetShowed
				})

			},
			toggleTopWidget: function () {

				let mapSettingsObg = this.$app.methods.getFromStorage('mapSettings');

				mapSettingsObg.isTopsWidgetShowed = !this.isTopsWidgetShowed
				this.$app.methods.setInStorage({ name: 'mapSettings', data: mapSettingsObg });

				this.$setState({
					isTopsWidgetShowed: !this.isTopsWidgetShowed
				})

			},
			bottomWidgetShowAssetDetails: function (imei) {
				let self = this;
				let assetList = this.$app.methods.getFromStorage('assetList');
				var contactList = self.$app.methods.getFromStorage('contactList');
				let asset = POSINFOASSETLIST[imei];
				let assetFeaturesStatus = Protocol.Helper.getAssetStateInfo(asset);
				//let assetImg = this.$app.methods.getAssetImg(val, {'assetList':true});
				let solutiontype = assetList[imei]?.SolutionType ? assetList[imei].SolutionType : LANGUAGE.PROMPT_MSG068;
				let solutionTypeIcon = Protocol.Helper.getSolutionTypeIcon(solutiontype);
				var positionType = Protocol.Helper.getPositionType(parseInt(asset.posInfo.positionType));
				deirectionCardinal = Protocol.Helper.getDirectionCardinal(asset.posInfo.direct);

				let driver = LANGUAGE.COM_MSG128;
				if (asset.DriverCode) {
					let index = contactList.findIndex((item) => item.Code === asset.DriverCode)
					if (index !== -1) {
						driver = contactList[index].FirstName + ' ' + contactList[index].SubName
					}
				}


				this.$app.data.BottomWidgetAssetImei = imei;

				let bottomWidgetInfo = {
					general: {
						name: assetList[imei].Name,
						imei: imei,
						assetType: assetList[imei].AssetType ? assetList[imei].AssetType : LANGUAGE.COM_MSG103,
						deviceType: assetList[imei].PRDTName,
						describe1: assetList[imei].Describe1 ? assetList[imei].Describe1 : LANGUAGE.COM_MSG103,
						driver: driver,
						solutionType: solutiontype,
						solutionTypeIcon: solutionTypeIcon,
						describe2: assetList[imei].Describe2 ? assetList[imei].Describe2 : LANGUAGE.COM_MSG103,
						statusState: asset && assetFeaturesStatus && assetFeaturesStatus.stats ? assetFeaturesStatus.status.state : LANGUAGE.COM_MSG103,
						statusValue: asset && assetFeaturesStatus && assetFeaturesStatus.stats ? assetFeaturesStatus.status.value : LANGUAGE.COM_MSG103,
						statusStopped: asset && assetFeaturesStatus && assetFeaturesStatus.stats && assetFeaturesStatus.stopped ? assetFeaturesStatus.stopped.duration : false
					}
				}

				if (asset && assetFeaturesStatus && assetFeaturesStatus.stats) {
					if (!asset.customGSMValue) asset.customGSMValue = assetFeaturesStatus.GSM.value;
					if (!asset.customGPSValue) asset.customGPSValue = assetFeaturesStatus.GPS.value;
					bottomWidgetInfo.location = {
						address: asset.posInfo.customAddress ? asset.posInfo.customAddress : LANGUAGE.COM_MSG08,
						lat: asset.posInfo.lat,
						lng: asset.posInfo.lng,
						coords: Protocol.Helper.convertDMS(asset.posInfo.lat, asset.posInfo.lng),
						gsmValue: asset.customGSMValue,
						gsmState: assetFeaturesStatus.GSM.state,
						gpsValue: asset.customGPSValue,
						gpsState: assetFeaturesStatus.GPS.state,
						positionType: positionType,
						direction: deirectionCardinal + ' (' + asset.posInfo.direct + '&deg;)',
						SVExist: false
					}

					bottomWidgetInfo.odometer = {
						initial: asset.InitMileage,
						total: typeof asset.Unit !== "undefined" && typeof asset.posInfo.mileage !== "undefined" && asset.posInfo.mileage !== '-' ? Protocol.Helper.getMileage(asset, asset.posInfo.mileage) : LANGUAGE.COM_MSG103
					}

					bottomWidgetInfo.engine = {
						initial: parseInt(asset.InitAcconHours),
						total: typeof asset.posInfo.launchHours !== "undefined" ? Protocol.Helper.getEngineHours(asset, asset.posInfo.launchHours) : LANGUAGE.COM_MSG103
					}

					if (assetFeaturesStatus.battery || assetFeaturesStatus.voltage) {
						bottomWidgetInfo.powerSupply = {}
						if (assetFeaturesStatus.battery) bottomWidgetInfo.powerSupply.battery = assetFeaturesStatus.battery.value
						if (assetFeaturesStatus.voltage) bottomWidgetInfo.powerSupply.voltage = assetFeaturesStatus.voltage.value
					}

					if (assetFeaturesStatus.fuel) {
						bottomWidgetInfo.fuel = {
							value: assetFeaturesStatus.fuel.value
						}
					}


					if (assetFeaturesStatus.temp1) {
						bottomWidgetInfo.temp1 = {
							value: assetFeaturesStatus?.temp1?.value
						}
						bottomWidgetInfo.temp2 = {
							value: assetFeaturesStatus?.temp2?.value
						}
						bottomWidgetInfo.temp3 = {
							value: assetFeaturesStatus?.temp3?.value
						}
						bottomWidgetInfo.temp4 = {
							value: assetFeaturesStatus?.temp4?.value
						}
						bottomWidgetInfo.temp5 = {
							value: assetFeaturesStatus?.temp5?.value
						}
						bottomWidgetInfo.temp6 = {
							value: assetFeaturesStatus?.temp6?.value
						}
						bottomWidgetInfo.temp7 = {
							value: assetFeaturesStatus?.temp7?.value
						}
						bottomWidgetInfo.temp8 = {
							value: assetFeaturesStatus?.temp8?.value
						}

					} else if (assetFeaturesStatus.temperature) {
						bottomWidgetInfo.temperature = {
							value: assetFeaturesStatus.temperature.value
						}
					}


					if ((assetList[imei].PRDTFeatures & Protocol.ProductInputFeatures.Input1) > 0 && assetList[imei].Input1Name && assetList[imei].Input1Name !== "NONE") {
						let option = self.InstallationOptionsInput1.find(itm => itm.value === assetList[imei].Input1Name)
						if (option && option.name && option.icon) {
							bottomWidgetInfo.input1name = {
								name: option ? option.name : '',
								icon: option ? option.icon : '',
								value: assetFeaturesStatus.installation.input1name.value,
								state: assetFeaturesStatus.installation.input1name.state,
							}
						}
					}
					if ((assetList[imei].PRDTFeatures & Protocol.ProductInputFeatures.Input2) > 0 && assetList[imei].Input2Name && assetList[imei].Input2Name !== "NONE") {
						let option = self.InstallationOptionsInput2.find(itm => itm.value === assetList[imei].Input2Name)
						if (option && option.name && option.icon) {
							bottomWidgetInfo.input2name = {
								name: option ? option.name : '',
								icon: option ? option.icon : '',
								value: assetFeaturesStatus.installation.input2name.value,
								state: assetFeaturesStatus.installation.input2name.state,
							}
						}
					}

					if ((assetList[imei].PRDTFeatures & Protocol.ProductInputFeatures.Input3) > 0 && assetList[imei].Input3Name && assetList[imei].Input3Name !== "NONE") {
						let option = self.InstallationOptionsInput3.find(itm => itm.value === assetList[imei].Input3Name)
						if (option && option.name && option.icon) {
							bottomWidgetInfo.input3name = {
								name: option ? option.name : '',
								icon: option ? option.icon : '',
								value: assetFeaturesStatus.installation.input3name.value,
								state: assetFeaturesStatus.installation.input3name.state,
							}
						}
					}
					if ((assetList[imei].PRDTFeatures & Protocol.ProductInputFeatures.Input4) > 0 && assetList[imei].Input4Name && assetList[imei].Input4Name !== "NONE") {
						let option = self.InstallationOptionsInput4.find(itm => itm.value === assetList[imei].Input4Name)
						if (option && option.name && option.icon) {
							bottomWidgetInfo.input4name = {
								name: option ? option.name : '',
								icon: option ? option.icon : '',
								value: assetFeaturesStatus.installation.input4name.value,
								state: assetFeaturesStatus.installation.input4name.state,
							}
						}
					}
					if ((assetList[imei].PRDTFeatures & Protocol.ProductInputFeatures.Input5) > 0 && assetList[imei].Input1Name && assetList[imei].Input5Name !== "NONE") {
						let option = self.InstallationOptionsInput5.find(itm => itm.value === assetList[imei].Input5Name)
						if (option && option.name && option.icon) {
							bottomWidgetInfo.input5name = {
								name: option ? option.name : '',
								icon: option ? option.icon : '',
								value: assetFeaturesStatus.installation.input5name.value,
								state: assetFeaturesStatus.installation.input5name.state,
							}
						}
					}
					if ((assetList[imei].PRDTFeatures & Protocol.ProductInputFeatures.Input6) > 0 && assetList[imei].Input6Name && assetList[imei].Input6Name !== "NONE") {
						let option = self.InstallationOptionsInput6.find(itm => itm.value === assetList[imei].Input6Name)
						if (option && option.name && option.icon) {
							bottomWidgetInfo.input6name = {
								name: option ? option.name : '',
								icon: option ? option.icon : '',
								value: assetFeaturesStatus.installation.input6name.value,
								state: assetFeaturesStatus.installation.input6name.state,
							}
						}
					}


					/*if (assetFeaturesStatus.battery) {
					  markerData +=   '<tr>';
					  markerData +=       '<td class="marker-data-caption">'+LANGUAGE.HOME_MSG007+'</td>';
					  markerData +=       '<td class="marker-data-value">'+assetFeaturesStatus.battery.value+'</td>';
					  markerData +=   '</tr>';
					}
					if (assetFeaturesStatus.power) {
					  markerData +=   '<tr>';
					  markerData +=       '<td class="marker-data-caption">'+LANGUAGE.HOME_MSG008+'</td>';
					  markerData +=       '<td class="marker-data-value">'+assetFeaturesStatus.power.value+'</td>';
					  markerData +=   '</tr>';
					}
					if (assetFeaturesStatus.fuel) {
					  markerData +=   '<tr>';
					  markerData +=       '<td class="marker-data-caption">'+LANGUAGE.HOME_MSG009+'</td>';
					  markerData +=       '<td class="marker-data-value">'+assetFeaturesStatus.fuel.value+'</td>';
					  markerData +=   '</tr>';
					}*/

					Protocol.Helper.getAddressByGeocoder({ lat: asset.posInfo.lat, lng: asset.posInfo.lng }, function (address) {
						asset.posInfo.customAddress = address;
						let currentBottomWidgetInfo = self.BottomWidgetInfo;
						currentBottomWidgetInfo.location.address = address;
						self.$setState({
							BottomWidgetInfo: currentBottomWidgetInfo
						})
					});
					this.PanoButtonUpdate([asset.posInfo.lat, asset.posInfo.lng])
				} else {
					bottomWidgetInfo.location = false;
				}
				this.$setState({
					BottomWidgetInfo: bottomWidgetInfo
				})


			},
			ShowStreetView() {
				let self = this;

				let content = `
                        <div class="popup" >
                            <div class="view">
                                <div class="page">
                                    <div class="page-content">
                                        <div class="fab fab-left-top fab-pano-close popup-close">
                                            <a href="#">
                                                <i class="f7-icons">close</i>
                                            </a>
                                        </div>
                                        <div id="pano" class="pano" ></div>
                                    </div>
                                </div>
                            </div>
                        </div>`;

				self.DynamicMenuPopup = self.$app.popup.create({
					content: content,
					on: {
						open: function (popup) {
							let panoramaOptions = {
								position: new google.maps.LatLng(self.BottomWidgetInfo.location.lat, self.BottomWidgetInfo.location.lng),
								pov: {
									heading: 0,
									pitch: 0
								},
								linksControl: false,
								panControl: false,
								enableCloseButton: false,
								addressControl: false
							};
							let panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);

						},
						closed: function (popup) {
							popup.$el.remove();
							popup.destroy();
						},
					}
				}).open();
			},
			PanoButtonUpdate: function (latlng = []) {
				if (!latlng.length) {
					return false
				}
				this.StreetViewService.getPanorama({ location: new google.maps.LatLng(latlng[0], latlng[1]), radius: 50 }, this.ProcessSVData);
			},
			ProcessSVData: function (data, status) {
				let currentBottomWidgetInfo = this.BottomWidgetInfo;
				currentBottomWidgetInfo.location.SVExist = status === 'OK'
				this.$setState({
					BottomWidgetInfo: currentBottomWidgetInfo
				})
			},
			onLoggedOff: function () {
				this.$setState({
					BottomWidgetInfo: null
				})
			},
			showAssetMenu: function (e) {
				var imei = this.BottomWidgetInfo.general.imei;

				var assetList = this.$app.methods.getFromStorage('assetList');
				var content = '';

				if (!assetList || !assetList[imei]) {
					console.log('no asset list or no such asset in list');
					return;
				}
				var asset = POSINFOASSETLIST[imei];
				var assetFeaturesStatus = Protocol.Helper.getAssetStateInfo(asset);
				var imsi = assetList[imei].IMSI;

				content = `<div class="popover menu-popover">
                                        <div class="popover-inner">
                                            <div class="list assetMenuList">
                                                <ul>
                                                    <a href="/asset-alarm/${imei}/" data-view=".view-left" class="item-link list-button popover-close">${LANGUAGE.ASSET_LIST_MSG03}</a>
                                                    <a href="/asset-assign-driver/${imei}/" data-view=".view-left" class="item-link list-button popover-close">${LANGUAGE.HOME_MSG043}</a>`;
				if (assetFeaturesStatus.istDriverRatingSupported) {
					content += `<a href="/asset-rating/?imei=${imei}" data-view=".view-left" class="item-link list-button popover-close">${LANGUAGE.ASSET_LIST_MSG38}</a>`;
				}
				content += `<a href="/asset-edit/${imei}/" data-view=".view-left" class="item-link list-button popover-close">${LANGUAGE.ASSET_LIST_MSG05}</a>
                                                    <a href="/asset-playback/${imei}/" data-view=".view-left" class="item-link list-button popover-close">${LANGUAGE.ASSET_LIST_MSG08}</a>
                                                    <a href="#" class="item-link list-button popover-close" onclick="app.methods.sendCommandPosition('${imsi}');" >${LANGUAGE.ASSET_LIST_MSG02}</a>
                                                    <a href="/asset-remote-control/${imei}/" data-view=".view-left" class="item-link list-button popover-close">${LANGUAGE.ASSET_LIST_MSG06}</a>
                                                    <a href="#" class="item-link list-button popover-close" onclick="app.methods.sendCommandStatus('${imsi}');" >${LANGUAGE.ASSET_LIST_MSG01}</a>
													
                                                </ul>
                                            </div>
                                        </div>
                                    </div>`;


				this.$app.popover.create({
					backdrop: false,
					closeByOutsideClick: true,
					targetEl: e.target,
					content: content,
					on: {
						closed: function (popover) {
							popover.destroy();
						}
					}
				}).open();
			},
		
			getAlarmLog: function (days = this.AlertsReportDataPeriod) {

				let self = this;
				let userInfo = self.$app.methods.getFromStorage('userInfo');
				var userAlarmSettings = self.$app.methods.getFromStorage('userAlarmSettings');


				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),
					//timePeriodText: '6 Hours',
					AsIds: [],
					AlertIds: [],
					//OnlyActiveAlarm: true
				};
				let url = API_URL.GET_REPORT_BY_ALERT;

				let assetList = self.$app.methods.getAssetsByGroups({ NoGroupToBottom: true });
				for (let i = assetList.length - 1; i >= 0; i--) {
					if (assetList[i].Assets && assetList[i].Assets.length) {
						for (let 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 (let i = alertList.length - 1; i >= 0; i--) {
					data.AlertIds.push(alertList[i].AlertId);
				  }
				}*/
				for (const alert in Protocol.PositionAlerts) {
					if (Protocol.PositionAlerts.hasOwnProperty(alert)) {
						data.AlertIds.push(Protocol.PositionAlerts[alert]);
					}
				}


				self.$app.request.post(url, data, function (result, xhr, status) {
					if (result.MajorCode === '000') {
						let alarmLog = {};

						if (result.Data && result.Data.length) {
							for (const item of result.Data) {
								if (!alarmLog[item.AlertID]) {
									alarmLog[item.AlertID] = 1;
								} else {
									alarmLog[item.AlertID]++
								}
							}
						}

						let calculatedAlarms = self.$app.methods.calculateAlarmsDashboard(alarmLog)
						self.$setState({
							TopWidgetInfo: [
								{
									name: LANGUAGE.HOME_MSG044,
									icon: 'all',
									value: calculatedAlarms.All,
									color: 'white'
								},
								{
									name: LANGUAGE.REPORT_PANEL_MSG01,
									icon: 'power-disconnect',
									value: calculatedAlarms.PowerDisconnect,
									alertType: Protocol.PositionAlerts.ElectricCutoff,
									color: 'orange'
								},
								{
									name: LANGUAGE.REPORT_PANEL_MSG00,
									icon: 'low-battery-color',
									value: calculatedAlarms.LowBattery,
									alertType: Protocol.PositionAlerts.LowPower,
									color: 'white'
								},
								{
									name: userAlarmSettings && userAlarmSettings.Input1High ? userAlarmSettings.Input1High : LANGUAGE.REPORT_PANEL_MSG203,
									icon: 'input1', //input 1 
									value: calculatedAlarms.Input1,
									alertType: Protocol.PositionAlerts.INPUT1,
									editName: false,
									color: 'yellow'
								},
								{
									name: userAlarmSettings && userAlarmSettings.Input2 ? userAlarmSettings.Input2 : LANGUAGE.REPORT_PANEL_MSG204,
									icon: 'input2', //input 2
									value: calculatedAlarms.Input2,
									alertType: Protocol.PositionAlerts.INPUT2,
									editName: false,
									color: 'yellow'
								},								
								{
									name: LANGUAGE.REPORT_PANEL_MSG234,
									icon: 'input3', //input 3 
									value: calculatedAlarms.Input3,
									alertType: Protocol.PositionAlerts.INPUT3,
									editName: false,
									color: 'yellow'
								},
								{
									name: LANGUAGE.REPORT_PANEL_MSG235,
									icon: 'driver-fatigue', // 
									value: calculatedAlarms.FatigueDriving,
									alertType: Protocol.PositionAlerts.FatigueDriving,
									editName: false,
									color: 'white'
								},
								{
									name: parsedDealer == 'smartostrich' ? 'Tilt' : LANGUAGE.REPORT_PANEL_MSG225,
									icon: 'vibration', //Vibration Impact
									value: calculatedAlarms.Vibrate,
									alertType: Protocol.PositionAlerts.Vibrate,
									editName: false,
									color: 'white'
								},
								{
									name: LANGUAGE.REPORT_PANEL_MSG229,
									icon: 'report-sold', //ACC ON
									value: calculatedAlarms.ACCON,
									alertType: Protocol.PositionAlerts.ACCON,
									editName: false,
									color: 'state1'
								},
								{
									name: LANGUAGE.REPORT_PANEL_MSG230,
									icon: 'report-sold', //ACC OFF
									value: calculatedAlarms.ACCOFF,
									alertType: Protocol.PositionAlerts.ACCOFF,
									editName: false,
									color: 'red'
								},
								{
									name: LANGUAGE.REPORT_PANEL_MSG223,
									icon: 'speeding',
									value: calculatedAlarms.Speeding,
									alertType: Protocol.PositionAlerts.HighSpeed,
									editName: false,
									color: 'white'
								},
								{
									name: LANGUAGE.REPORT_PANEL_MSG227,
									icon: 'in-geofence',
									value: calculatedAlarms.InGeoFance,
									alertType: Protocol.PositionAlerts.InGeoFance,
									editName: false,
									color: 'state1'
								},	
								{
									name: LANGUAGE.REPORT_PANEL_MSG228,
									icon: 'out-geofence',
									value: calculatedAlarms.OutGeoFance,
									alertType: Protocol.PositionAlerts.OutGeoFance,
									editName: false,
									color: 'red'
								},
								{
									name: LANGUAGE.REPORT_PANEL_MSG231,
									icon: 'high-temp', //High Temp
									value: calculatedAlarms.LowTemp,
									alertType: Protocol.PositionAlerts.LowTemp,
									editName: false,
									color: 'red'
								},
								{
									name: LANGUAGE.REPORT_PANEL_MSG232,
									icon: 'low-temp', //Low Temp
									value: calculatedAlarms.HighTemp,
									alertType: Protocol.PositionAlerts.HighTemp,
									editName: false,
									color: 'blue'
								},
								{
									name: LANGUAGE.REPORT_PANEL_MSG233,
									icon: 'input', //other
									value: calculatedAlarms.Other,
									color: 'white',
									other: true
								},
								/*{
									name: userAlarmSettings && userAlarmSettings.FatigueDriving ? userAlarmSettings.FatigueDriving : LANGUAGE.REPORT_PANEL_MSG224,
									icon: 'icon-voltage',
									value: calculatedAlarms.FatigueDriving,
									alertType: Protocol.PositionAlerts.FatigueDriving,
									editName: false
								},*/

							],
						})
					}
				},
					function (xhr, status) {
					//	self.$app.dialog.alert('Error occurred during request Alarms stats request');
					},
					'json');
			},
			getReportData(e) {

				let self = this;
				let container = $$(e.target).closest('.item-content');
				let alertType = container.data('report-alert-type');
				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 other = $$(e.target).closest('.other');

				let url = API_URL.GET_REPORT_BY_ALERT;

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

				for (let i = assetList.length - 1; i >= 0; i--) {
					if (assetList[i].Assets && assetList[i].Assets.length) {
						for (let j = assetList[i].Assets.length - 1; j >= 0; j--) {
							data.AsIds.push(assetList[i].Assets[j].Id);
						}
					}
				}
				if (other.length) {
					data.AlertIds = [
						"1073741824",
						"536870912",
						"268435456", 
						"67108864",
						"33554432",
						"16777216", 
						"2097152",
						"1048576",
						"524288",	 
						"16384",
						"8192",
						"4096",
						"2048",
						"1024",	 
						"128",
						"64",
						"2",
						"1",
						"0"
					]
				} else {
					if (alertType) {
						data.AlertIds = alertType.split(',');
					} else {
						var alertList = self.$app.methods.getFromStorage('alertList');
						if (alertList && alertList.length) {
							for (let i = alertList.length - 1; i >= 0; i--) {
								data.AlertIds.push(alertList[i].AlertId);
							}
						}
					}
				}

				console.log(data.AlertIds)

				self.$app.preloader.show();
				self.$app.request.post(url, data, function (result, xhr, status) {
					self.$app.preloader.hide();

					if (result.MajorCode == '000') {
						if (!result.Data || !result.Data.length) {

							self.$app.methods.customDialog({ text: LANGUAGE.PROMPT_MSG055 });
						} else {

							self.$app.methods.setInStorage({ name: 'reportData', data: result.Data });
							self.$app.popup.open('.popup-fullscreen-report');

							reportView.router.navigate({
								name: 'report-show',
								query: {
									type: type,
									timePeriodText: moment().subtract(self.AlertsReportDataPeriod, 'days').format(window.COM_TIMEFORMAT5) + ' - ' + moment().format(window.COM_TIMEFORMAT5)
								},
							});

						}

					} 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');
			},
			onLoggedIn() {

				this.getAlarmLog()
			},
			onPosInfoUpdate() {



				//this.getAlarmLog()
			},
			onAlarmsNameChange(newAlarmNames) {

				for (const alarmName in newAlarmNames) {
					if (newAlarmNames.hasOwnProperty(alarmName) && newAlarmNames[alarmName]) {
						switch (alarmName) {
							case 'Input2':
								this.TopWidgetInfo.find(itm => itm.alertType === Protocol.PositionAlerts.INPUT2).name = newAlarmNames[alarmName]

								break;
							case 'Input1High':
								this.TopWidgetInfo.find(itm => itm.alertType === Protocol.PositionAlerts.INPUT1).name = newAlarmNames[alarmName]
								break
						}
					}
				}
				this.$setState({
					TopWidgetInfo: this.TopWidgetInfo
				})
			}

		},

		on: {
			pageInit: function (e, page) {
				var self = this;



				///console.log('localStorage.ACCOUNT', localStorage.ACCOUNT)
				if (this.$route.query.login && this.$route.query.password || this.$route.query.majortoken && this.$route.query.minortoken || this.$route.query.account && this.$route.query.password) {
					if (this.$route.query.login && this.$route.query.password) {
						localStorage.ACCOUNT = decodeURIComponent(this.$route.query.login);
						localStorage.PASSWORD = decodeURIComponent(this.$route.query.password);
					} else if (this.$route.query.account && this.$route.query.password) {
						localStorage.ACCOUNT = decodeURIComponent(this.$route.query.account);
						localStorage.PASSWORD = decodeURIComponent(this.$route.query.password);
					} else {
						localStorage.ACCOUNT = decodeURIComponent(this.$route.query.majortoken);
						localStorage.PASSWORD = decodeURIComponent(this.$route.query.minortoken);
					}
					let urlParams = '?';
					this.$route.query.page ? urlParams += `page=${this.$route.query.page}` : '';
					window.history.replaceState({}, document.title, urlParams);
					self.$app.methods.login(this.$route.query.page ? { page: decodeURIComponent(this.$route.query.page) } : {});
				} else if (localStorage.ACCOUNT && localStorage.PASSWORD) {
					self.$app.methods.login();
				}
				else {
					self.$app.methods.logout();
				}

				MapTrack = Protocol.Helper.createMap({ target: 'map', latLng: [9.675228, -171.364896], zoom: 2 });





				var searchControl = new GeoSearchControl({
					provider: MapProvider,           // required
					style: 'button',                   // optional: bar|button  - default button
					autoClose: true,
					keepResult: true,
					searchLabel: LANGUAGE.COM_MSG116,
					marker: {
						icon: Protocol.MarkerIcon[9],
						draggable: false,
					},
					popupFormat: ({ query, result }) => result.label,   // optional: function    - default returns result label
				});
				MapTrack.addControl(searchControl);

				MapTrack.on('popupopen', function (e) {
					var px = MapTrack.project(e.target._popup._latlng); // find the pixel location on the map where the popup anchor is
					px.y -= e.target._popup._container.clientHeight / 2; // find the height of the popup container, divide by 2, subtract from the Y axis of marker location
					MapTrack.panTo(MapTrack.unproject(px), { animate: true }); // pan to new center
				});

				this.StreetViewService = new google.maps.StreetViewService();

				this.$app.on('bottomWidgetShowAssetDetails', this.bottomWidgetShowAssetDetails)
				this.$app.on('loggedOff', this.onLoggedOff)
				this.$app.on('loggedIn', this.onLoggedIn)
				this.$app.on('assetPosInfoUpdateReceived', this.onPosInfoUpdate)
				this.$app.on('accountAlarmsNameChanged', this.onAlarmsNameChange)

			},
			pageAfterIn: function () {

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

				this.$app.off('bottomWidgetShowAssetDetails', this.bottomWidgetShowAssetDetails)
				this.$app.off('loggedOff', this.onLoggedOff)
				this.$app.off('loggedIn', this.onLoggedIn)
				this.$app.off('assetPosInfoUpdateReceived', this.onPosInfoUpdate)
				this.$app.off('accountAlarmsNameChanged', this.onAlarmsNameChange)
			},

		}
	};
</script>