jay.chang/ibms-dome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
95e2780568
ibms-dome/Frontend/index.html

2753 lines
159 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<!--
Template Name: SmartAdmin Responsive WebApp - Template build with Twitter Bootstrap 4
Version: 4.5.1
Author: Sunnyat A.
Website: http://gootbootstrap.com
Purchase: https://wrapbootstrap.com/theme/smartadmin-responsive-webapp-WB0573SK0?ref=myorange
License: You must have a valid license purchased only from wrapbootstrap.com (link above) in order to legally use this theme for your project.
-->
<html lang="zh-hant-TW" class="root-text-lg">
<head>
<meta charset="utf-8">
<title>
Marketing Dashboard - Application Intel - SmartAdmin v4.5.1
</title>
<meta name="description" content="Marketing Dashboard">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, minimal-ui">
<!-- Call App Mode on ios devices -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- Remove Tap Highlight on Windows Phone IE -->
<meta name="msapplication-tap-highlight" content="no">
<!-- base css -->
<link id="vendorsbundle" rel="stylesheet" media="screen, print" href="lib/vendors.bundle.css">
<link id="appbundle" rel="stylesheet" media="screen, print" href="lib/app.bundle.css">
<link id="mytheme" rel="stylesheet" media="screen, print" href="#">
<link id="myskin" rel="stylesheet" media="screen, print" href="lib/skins/skin-master.css">
<link rel="stylesheet" href="lib/notifications/toastr/toastr.min.css" />
<link rel="stylesheet" href="lib/dropzone/dropzone.css" />
<!-- Place favicon.ico in the root directory -->
<link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png">
<link rel="mask-icon" href="img/favicon/safari-pinned-tab.svg" color="#5bbad5">
<!-- Font Awesome -->
<link href="lib/fontawesome-free/css/all.min.css" rel="stylesheet" />
<link href="lib/chart.js/Chart.min.css" rel="stylesheet" />
<link href="lib/jstree-master/themes/default/style.min.css" rel="stylesheet" />
<link href="lib/jstree-master/themes/default-dark/style.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" media="screen, print" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" media="screen, print" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="css/site.css" />
<link rel="stylesheet" href="css/yourteam/plugins/yt-tooltip/yt-tooltip.css" />
<link rel="stylesheet" href="css/yourteam/plugins/yt-alert/ytpop-alert.css" />
<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css">
</head>
<!-- BEGIN Body -->
<!-- Possible Classes
* 'header-function-fixed' - header is in a fixed at all times
* 'nav-function-fixed' - left panel is fixed
* 'nav-function-minify' - skew nav to maximize space
* 'nav-function-hidden' - roll mouse on edge to reveal
* 'nav-function-top' - relocate left pane to top
* 'mod-main-boxed' - encapsulates to a container
* 'nav-mobile-push' - content pushed on menu reveal
* 'nav-mobile-no-overlay' - removes mesh on menu reveal
* 'nav-mobile-slide-out' - content overlaps menu
* 'mod-bigger-font' - content fonts are bigger for readability
* 'mod-high-contrast' - 4.5:1 text contrast ratio
* 'mod-color-blind' - color vision deficiency
* 'mod-pace-custom' - preloader will be inside content
* 'mod-clean-page-bg' - adds more whitespace
* 'mod-hide-nav-icons' - invisible navigation icons
* 'mod-disable-animation' - disables css based animations
* 'mod-hide-info-card' - hides info card from left panel
* 'mod-lean-subheader' - distinguished page header
* 'mod-nav-link' - clear breakdown of nav links
>>> more settings are described inside documentation page >>>
-->
<body class="mod-bg-1 mod-nav-link mod-skin-dark mod-hide-info-card nav-function-top nav-function-fixed mod-lean-subheader desktop chrome webkit pace-done blur">
<!-- DOC: script to save and load page settings -->
<script>
/**
* This script should be placed right after the body tag for fast execution
* Note: the script is written in pure javascript and does not depend on thirdparty library
**/
'use strict';
var classHolder = document.getElementsByTagName("BODY")[0],
/**
* Load from localstorage
**/
themeSettings = (localStorage.getItem('themeSettings')) ? JSON.parse(localStorage.getItem('themeSettings')) :
{},
themeURL = themeSettings.themeURL || '',
themeOptions = themeSettings.themeOptions || '';
/**
* Load theme options
**/
if (themeSettings.themeOptions) {
classHolder.className = themeSettings.themeOptions;
console.log("%c✔ Theme settings loaded", "color: #148f32");
}
else {
console.log("%c✔ Heads up! Theme settings is empty or does not exist, loading default settings...", "color: #ed1c24");
}
if (themeSettings.themeURL && !document.getElementById('mytheme')) {
var cssfile = document.createElement('link');
cssfile.id = 'mytheme';
cssfile.rel = 'stylesheet';
cssfile.href = themeURL;
document.getElementsByTagName('head')[0].appendChild(cssfile);
}
else if (themeSettings.themeURL && document.getElementById('mytheme')) {
document.getElementById('mytheme').href = themeSettings.themeURL;
}
/**
* Save to localstorage
**/
var saveSettings = function () {
themeSettings.themeOptions = String(classHolder.className).split(/[^\w-]+/).filter(function (item) {
return /^(nav|header|footer|mod|display)-/i.test(item);
}).join(' ');
if (document.getElementById('mytheme')) {
themeSettings.themeURL = document.getElementById('mytheme').getAttribute("href");
};
localStorage.setItem('themeSettings', JSON.stringify(themeSettings));
}
/**
* Reset settings
**/
var resetSettings = function () {
localStorage.setItem("themeSettings", "");
}
</script>
<!-- BEGIN Page Wrapper -->
<div class="page-wrapper">
<div class="page-inner">
<!-- BEGIN Left Aside -->
<aside class="page-sidebar hidden-lg-up">
<div class="page-logo">
<a href="javascript:;" name="topFunBtn" data-page="dashboard" class="page-logo-link press-scale-down d-flex align-items-center position-relative">
<img src="img/logo.png" alt="SmartAdmin WebApp" aria-roledescription="logo">
<span class="page-logo-text mr-1">System</span>
<span class="position-absolute text-white opacity-50 small pos-top pos-right mr-2 mt-n2"></span>
<i class="fal fa-angle-down d-inline-block ml-1 fs-lg color-primary-300"></i>
</a>
</div>
<!-- BEGIN PRIMARY NAVIGATION -->
<nav id="js-primary-nav" class="primary-nav" role="navigation">
<div class="nav-filter">
<div class="position-relative">
<input type="text" id="nav_filter_input" placeholder="Filter menu" class="form-control"
tabindex="0">
<a href="#" onclick="return false;" class="btn-primary btn-search-close js-waves-off"
data-action="toggle" data-class="list-filter-active" data-target=".page-sidebar">
<i class="fal fa-chevron-up"></i>
</a>
</div>
</div>
<div class="info-card">
<img src="img/demo/avatars/avatar-admin.png" class="profile-image rounded-circle"
alt="Dr. Codex Lantern">
<div class="info-card-text">
<a href="#" class="d-flex align-items-center text-white">
<span class="text-truncate text-truncate-sm d-inline-block">
Dr. Codex Lantern
</span>
</a>
<span class="d-inline-block text-truncate text-truncate-sm">Toronto, Canada</span>
</div>
<img src="img/card-backgrounds/cover-2-lg.png" class="cover" alt="cover">
<a href="#" onclick="return false;" class="pull-trigger-btn" data-action="toggle"
data-class="list-filter-active" data-target=".page-sidebar" data-focus="nav_filter_input">
<i class="fal fa-angle-down"></i>
</a>
</div>
<ul id="js-nav-menu" class="nav-menu">
<li class="active open">
<a href="#" title="Application Intel" data-filter-tags="application intel">
<i class="fal fa-info-circle"></i>
<span class="nav-link-text" data-i18n="nav.application_intel">Application Intel</span>
</a>
<ul>
<li>
<a href="intel_analytics_dashboard.html" title="Analytics Dashboard"
data-filter-tags="application intel analytics dashboard">
<span class="nav-link-text"
data-i18n="nav.application_intel_analytics_dashboard">
Analytics
Dashboard
</span>
</a>
</li>
<li class="active">
<a href="intel_marketing_dashboard.html" title="Marketing Dashboard"
data-filter-tags="application intel marketing dashboard">
<span class="nav-link-text"
data-i18n="nav.application_intel_marketing_dashboard">
Marketing
Dashboard
</span>
</a>
</li>
<li>
<a href="intel_introduction.html" title="Introduction"
data-filter-tags="application intel introduction">
<span class="nav-link-text"
data-i18n="nav.application_intel_introduction">Introduction</span>
</a>
</li>
<li>
<a href="intel_privacy.html" title="Privacy"
data-filter-tags="application intel privacy">
<span class="nav-link-text"
data-i18n="nav.application_intel_privacy">Privacy</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#" title="Theme Settings" data-filter-tags="theme settings">
<i class="fal fa-cog"></i>
<span class="nav-link-text" data-i18n="nav.theme_settings">Theme Settings</span>
</a>
<ul>
<li>
<a href="settings_how_it_works.html" title="How it works"
data-filter-tags="theme settings how it works">
<span class="nav-link-text" data-i18n="nav.theme_settings_how_it_works">
How it
works
</span>
</a>
</li>
<li>
<a href="settings_layout_options.html" title="Layout Options"
data-filter-tags="theme settings layout options">
<span class="nav-link-text" data-i18n="nav.theme_settings_layout_options">
Layout
Options
</span>
</a>
</li>
<li>
<a href="settings_theme_modes.html" title="Theme Modes (beta)"
data-filter-tags="theme settings theme modes (beta)">
<span class="nav-link-text"
data-i18n="nav.theme_settings_theme_modes_(beta)">Theme Modes (beta)</span>
</a>
</li>
<li>
<a href="settings_skin_options.html" title="Skin Options"
data-filter-tags="theme settings skin options">
<span class="nav-link-text" data-i18n="nav.theme_settings_skin_options">
Skin
Options
</span>
</a>
</li>
<li>
<a href="settings_saving_db.html" title="Saving to Database"
data-filter-tags="theme settings saving to database">
<span class="nav-link-text"
data-i18n="nav.theme_settings_saving_to_database">Saving to Database</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#" title="Documentation" data-filter-tags="documentation">
<i class="fal fa-book"></i>
<span class="nav-link-text" data-i18n="nav.documentation">Documentation</span>
</a>
<ul>
<li>
<a href="docs_general.html" title="General Docs"
data-filter-tags="documentation general docs">
<span class="nav-link-text" data-i18n="nav.documentation_general_docs">
General
Docs
</span>
</a>
</li>
<li>
<a href="docs_project_structure.html" title="Project Structure"
data-filter-tags="documentation project structure">
<span class="nav-link-text"
data-i18n="nav.documentation_project_structure">Project Structure</span>
</a>
</li>
<li>
<a href="docs_flavors_editions.html" title="Flavors & Editions"
data-filter-tags="documentation flavors & editions">
<span class="nav-link-text"
data-i18n="nav.documentation_flavors_&_editions">Flavors & Editions</span>
</a>
</li>
<li>
<a href="docs_community_support.html" title="Community Support"
data-filter-tags="documentation community support">
<span class="nav-link-text"
data-i18n="nav.documentation_community_support">Community Support</span>
</a>
</li>
<li>
<a href="docs_premium_support.html" title="Premium Support"
data-filter-tags="documentation premium support">
<span class="nav-link-text"
data-i18n="nav.documentation_premium_support">Premium Support</span>
</a>
</li>
<li>
<a href="docs_licensing.html" title="Licensing"
data-filter-tags="documentation licensing">
<span class="nav-link-text"
data-i18n="nav.documentation_licensing">Licensing</span>
</a>
</li>
<li>
<a href="docs_buildnotes.html" title="Build Notes"
data-filter-tags="documentation build notes">
<span class="nav-link-text" data-i18n="nav.documentation_build_notes">
Build
Notes
</span>
<span class="">v4.5.1</span>
</a>
</li>
</ul>
</li>
<li class="nav-title">Tools & Components</li>
<li>
<a href="#" title="UI Components" data-filter-tags="ui components">
<i class="fal fa-window"></i>
<span class="nav-link-text" data-i18n="nav.ui_components">UI Components</span>
</a>
<ul>
<li>
<a href="ui_alerts.html" title="Alerts" data-filter-tags="ui components alerts">
<span class="nav-link-text" data-i18n="nav.ui_components_alerts">Alerts</span>
</a>
</li>
<li>
<a href="ui_accordion.html" title="Accordions"
data-filter-tags="ui components accordions">
<span class="nav-link-text"
data-i18n="nav.ui_components_accordions">Accordions</span>
</a>
</li>
<li>
<a href="ui_badges.html" title="Badges" data-filter-tags="ui components badges">
<span class="nav-link-text" data-i18n="nav.ui_components_badges">Badges</span>
</a>
</li>
<li>
<a href="ui_breadcrumbs.html" title="Breadcrumbs"
data-filter-tags="ui components breadcrumbs">
<span class="nav-link-text"
data-i18n="nav.ui_components_breadcrumbs">Breadcrumbs</span>
</a>
</li>
<li>
<a href="ui_buttons.html" title="Buttons" data-filter-tags="ui components buttons">
<span class="nav-link-text" data-i18n="nav.ui_components_buttons">Buttons</span>
</a>
</li>
<li>
<a href="ui_button_group.html" title="Button Group"
data-filter-tags="ui components button group">
<span class="nav-link-text" data-i18n="nav.ui_components_button_group">
Button
Group
</span>
</a>
</li>
<li>
<a href="ui_cards.html" title="Cards" data-filter-tags="ui components cards">
<span class="nav-link-text" data-i18n="nav.ui_components_cards">Cards</span>
</a>
</li>
<li>
<a href="ui_carousel.html" title="Carousel"
data-filter-tags="ui components carousel">
<span class="nav-link-text"
data-i18n="nav.ui_components_carousel">Carousel</span>
</a>
</li>
<li>
<a href="ui_collapse.html" title="Collapse"
data-filter-tags="ui components collapse">
<span class="nav-link-text"
data-i18n="nav.ui_components_collapse">Collapse</span>
</a>
</li>
<li>
<a href="ui_dropdowns.html" title="Dropdowns"
data-filter-tags="ui components dropdowns">
<span class="nav-link-text"
data-i18n="nav.ui_components_dropdowns">Dropdowns</span>
</a>
</li>
<li>
<a href="ui_list_filter.html" title="List Filter"
data-filter-tags="ui components list filter">
<span class="nav-link-text" data-i18n="nav.ui_components_list_filter">
List
Filter
</span>
</a>
</li>
<li>
<a href="ui_modal.html" title="Modal" data-filter-tags="ui components modal">
<span class="nav-link-text" data-i18n="nav.ui_components_modal">Modal</span>
</a>
</li>
<li>
<a href="ui_navbars.html" title="Navbars" data-filter-tags="ui components navbars">
<span class="nav-link-text" data-i18n="nav.ui_components_navbars">Navbars</span>
</a>
</li>
<li>
<a href="ui_panels.html" title="Panels" data-filter-tags="ui components panels">
<span class="nav-link-text" data-i18n="nav.ui_components_panels">Panels</span>
</a>
</li>
<li>
<a href="ui_pagination.html" title="Pagination"
data-filter-tags="ui components pagination">
<span class="nav-link-text"
data-i18n="nav.ui_components_pagination">Pagination</span>
</a>
</li>
<li>
<a href="ui_popovers.html" title="Popovers"
data-filter-tags="ui components popovers">
<span class="nav-link-text"
data-i18n="nav.ui_components_popovers">Popovers</span>
</a>
</li>
<li>
<a href="ui_progress_bars.html" title="Progress Bars"
data-filter-tags="ui components progress bars">
<span class="nav-link-text" data-i18n="nav.ui_components_progress_bars">
Progress
Bars
</span>
</a>
</li>
<li>
<a href="ui_scrollspy.html" title="ScrollSpy"
data-filter-tags="ui components scrollspy">
<span class="nav-link-text"
data-i18n="nav.ui_components_scrollspy">ScrollSpy</span>
</a>
</li>
<li>
<a href="ui_side_panel.html" title="Side Panel"
data-filter-tags="ui components side panel">
<span class="nav-link-text" data-i18n="nav.ui_components_side_panel">
Side
Panel
</span>
</a>
</li>
<li>
<a href="ui_spinners.html" title="Spinners"
data-filter-tags="ui components spinners">
<span class="nav-link-text"
data-i18n="nav.ui_components_spinners">Spinners</span>
</a>
</li>
<li>
<a href="ui_tabs_pills.html" title="Tabs & Pills"
data-filter-tags="ui components tabs & pills">
<span class="nav-link-text" data-i18n="nav.ui_components_tabs_&_pills">
Tabs &
Pills
</span>
</a>
</li>
<li>
<a href="ui_toasts.html" title="Toasts" data-filter-tags="ui components toasts">
<span class="nav-link-text" data-i18n="nav.ui_components_toasts">Toasts</span>
</a>
</li>
<li>
<a href="ui_tooltips.html" title="Tooltips"
data-filter-tags="ui components tooltips">
<span class="nav-link-text"
data-i18n="nav.ui_components_tooltips">Tooltips</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#" title="Utilities" data-filter-tags="utilities">
<i class="fal fa-bolt"></i>
<span class="nav-link-text" data-i18n="nav.utilities">Utilities</span>
</a>
<ul>
<li>
<a href="utilities_borders.html" title="Borders"
data-filter-tags="utilities borders">
<span class="nav-link-text" data-i18n="nav.utilities_borders">Borders</span>
</a>
</li>
<li>
<a href="utilities_clearfix.html" title="Clearfix"
data-filter-tags="utilities clearfix">
<span class="nav-link-text" data-i18n="nav.utilities_clearfix">Clearfix</span>
</a>
</li>
<li>
<a href="utilities_color_pallet.html" title="Color Pallet"
data-filter-tags="utilities color pallet">
<span class="nav-link-text" data-i18n="nav.utilities_color_pallet">
Color
Pallet
</span>
</a>
</li>
<li>
<a href="utilities_display_property.html" title="Display Property"
data-filter-tags="utilities display property">
<span class="nav-link-text" data-i18n="nav.utilities_display_property">
Display
Property
</span>
</a>
</li>
<li>
<a href="utilities_fonts.html" title="Fonts" data-filter-tags="utilities fonts">
<span class="nav-link-text" data-i18n="nav.utilities_fonts">Fonts</span>
</a>
</li>
<li>
<a href="utilities_flexbox.html" title="Flexbox"
data-filter-tags="utilities flexbox">
<span class="nav-link-text" data-i18n="nav.utilities_flexbox">Flexbox</span>
</a>
</li>
<li>
<a href="utilities_helpers.html" title="Helpers"
data-filter-tags="utilities helpers">
<span class="nav-link-text" data-i18n="nav.utilities_helpers">Helpers</span>
</a>
</li>
<li>
<a href="utilities_position.html" title="Position"
data-filter-tags="utilities position">
<span class="nav-link-text" data-i18n="nav.utilities_position">Position</span>
</a>
</li>
<li>
<a href="utilities_responsive_grid.html" title="Responsive Grid"
data-filter-tags="utilities responsive grid">
<span class="nav-link-text" data-i18n="nav.utilities_responsive_grid">
Responsive
Grid
</span>
</a>
</li>
<li>
<a href="utilities_sizing.html" title="Sizing" data-filter-tags="utilities sizing">
<span class="nav-link-text" data-i18n="nav.utilities_sizing">Sizing</span>
</a>
</li>
<li>
<a href="utilities_spacing.html" title="Spacing"
data-filter-tags="utilities spacing">
<span class="nav-link-text" data-i18n="nav.utilities_spacing">Spacing</span>
</a>
</li>
<li>
<a href="utilities_typography.html" title="Typography"
data-filter-tags="utilities typography fonts headings bold lead colors sizes link text states list styles truncate alignment">
<span class="nav-link-text"
data-i18n="nav.utilities_typography">Typography</span>
</a>
</li>
<li>
<a href="javascript:void(0);" title="Menu child"
data-filter-tags="utilities menu child">
<span class="nav-link-text" data-i18n="nav.utilities_menu_child">
Menu
child
</span>
</a>
<ul>
<li>
<a href="javascript:void(0);" title="Sublevel Item"
data-filter-tags="utilities menu child sublevel item">
<span class="nav-link-text"
data-i18n="nav.utilities_menu_child_sublevel_item">
Sublevel
Item
</span>
</a>
</li>
<li>
<a href="javascript:void(0);" title="Another Item"
data-filter-tags="utilities menu child another item">
<span class="nav-link-text"
data-i18n="nav.utilities_menu_child_another_item">
Another
Item
</span>
</a>
</li>
</ul>
</li>
<li class="disabled">
<a href="javascript:void(0);" title="Disabled item"
data-filter-tags="utilities disabled item">
<span class="nav-link-text" data-i18n="nav.utilities_disabled_item">
Disabled
item
</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#" title="Font Icons" data-filter-tags="font icons">
<i class="fal fa-map-marker-alt"></i>
<span class="nav-link-text" data-i18n="nav.font_icons">Font Icons</span>
<span class="dl-ref bg-primary-500 hidden-nav-function-minify hidden-nav-function-top">7,500+</span>
</a>
<ul>
<li>
<a href="javascript:void(0);" title="FontAwesome"
data-filter-tags="font icons fontawesome">
<span class="nav-link-text" data-i18n="nav.font_icons_fontawesome">
FontAwesome
Pro
</span>
</a>
<ul>
<li>
<a href="icons_fontawesome_light.html" title="Light"
data-filter-tags="font icons fontawesome light">
<span class="nav-link-text"
data-i18n="nav.font_icons_fontawesome_light">Light</span>
</a>
</li>
<li>
<a href="icons_fontawesome_regular.html" title="Regular"
data-filter-tags="font icons fontawesome regular">
<span class="nav-link-text"
data-i18n="nav.font_icons_fontawesome_regular">Regular</span>
</a>
</li>
<li>
<a href="icons_fontawesome_solid.html" title="Solid"
data-filter-tags="font icons fontawesome solid">
<span class="nav-link-text"
data-i18n="nav.font_icons_fontawesome_solid">Solid</span>
</a>
</li>
<li>
<a href="icons_fontawesome_duotone.html" title="Duotone"
data-filter-tags="font icons fontawesome duotone">
<span class="nav-link-text"
data-i18n="nav.font_icons_fontawesome_duotone">Duotone</span>
</a>
</li>
<li>
<a href="icons_fontawesome_brand.html" title="Brand"
data-filter-tags="font icons fontawesome brand">
<span class="nav-link-text"
data-i18n="nav.font_icons_fontawesome_brand">Brand</span>
</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" title="NextGen Icons"
data-filter-tags="font icons nextgen icons">
<span class="nav-link-text" data-i18n="nav.font_icons_nextgen_icons">
NextGen
Icons
</span>
</a>
<ul>
<li>
<a href="icons_nextgen_general.html" title="General"
data-filter-tags="font icons nextgen icons general">
<span class="nav-link-text"
data-i18n="nav.font_icons_nextgen_icons_general">General</span>
</a>
</li>
<li>
<a href="icons_nextgen_base.html" title="Base"
data-filter-tags="font icons nextgen icons base">
<span class="nav-link-text"
data-i18n="nav.font_icons_nextgen_icons_base">Base</span>
</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" title="Stack Icons"
data-filter-tags="font icons stack icons">
<span class="nav-link-text" data-i18n="nav.font_icons_stack_icons">
Stack
Icons
</span>
</a>
<ul>
<li>
<a href="icons_stack_showcase.html" title="Showcase"
data-filter-tags="font icons stack icons showcase">
<span class="nav-link-text"
data-i18n="nav.font_icons_stack_icons_showcase">Showcase</span>
</a>
</li>
<li>
<a href="icons_stack_generate.html?layers=3" title="Generate Stack"
data-filter-tags="font icons stack icons generate stack">
<span class="nav-link-text"
data-i18n="nav.font_icons_stack_icons_generate_stack">
Generate
Stack
</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#" title="Tables" data-filter-tags="tables">
<i class="fal fa-th-list"></i>
<span class="nav-link-text" data-i18n="nav.tables">Tables</span>
</a>
<ul>
<li>
<a href="tables_basic.html" title="Basic Tables"
data-filter-tags="tables basic tables">
<span class="nav-link-text" data-i18n="nav.tables_basic_tables">
Basic
Tables
</span>
</a>
</li>
<li>
<a href="tables_generate_style.html" title="Generate Table Style"
data-filter-tags="tables generate table style">
<span class="nav-link-text" data-i18n="nav.tables_generate_table_style">
Generate
Table Style
</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#" title="Form Stuff" data-filter-tags="form stuff">
<i class="fal fa-edit"></i>
<span class="nav-link-text" data-i18n="nav.form_stuff">Form Stuff</span>
</a>
<ul>
<li>
<a href="form_basic_inputs.html" title="Basic Inputs"
data-filter-tags="form stuff basic inputs">
<span class="nav-link-text" data-i18n="nav.form_stuff_basic_inputs">
Basic
Inputs
</span>
</a>
</li>
<li>
<a href="form_checkbox_radio.html" title="Checkbox & Radio"
data-filter-tags="form stuff checkbox & radio">
<span class="nav-link-text" data-i18n="nav.form_stuff_checkbox_&_radio">
Checkbox
& Radio
</span>
</a>
</li>
<li>
<a href="form_input_groups.html" title="Input Groups"
data-filter-tags="form stuff input groups">
<span class="nav-link-text" data-i18n="nav.form_stuff_input_groups">
Input
Groups
</span>
</a>
</li>
<li>
<a href="form_validation.html" title="Validation"
data-filter-tags="form stuff validation">
<span class="nav-link-text"
data-i18n="nav.form_stuff_validation">Validation</span>
</a>
</li>
</ul>
</li>
<li class="nav-title">Plugins & Addons</li>
<li>
<a href="#" title="Plugins" data-filter-tags="plugins">
<i class="fal fa-shield-alt"></i>
<span class="nav-link-text" data-i18n="nav.plugins">Core Plugins</span>
</a>
<ul>
<li>
<a href="plugins_faq.html" title="Plugins FAQ"
data-filter-tags="plugins plugins faq">
<span class="nav-link-text" data-i18n="nav.plugins_plugins_faq">
Plugins
FAQ
</span>
</a>
</li>
<li>
<a href="plugins_waves.html" title="Waves" data-filter-tags="plugins waves">
<span class="nav-link-text" data-i18n="nav.plugins_waves">Waves</span>
<span class="dl-ref label bg-primary-400 ml-2">9 KB</span>
</a>
</li>
<li>
<a href="plugins_pacejs.html" title="PaceJS" data-filter-tags="plugins pacejs">
<span class="nav-link-text" data-i18n="nav.plugins_pacejs">PaceJS</span>
<span class="dl-ref label bg-primary-500 ml-2">13 KB</span>
</a>
</li>
<li>
<a href="plugins_smartpanels.html" title="SmartPanels"
data-filter-tags="plugins smartpanels">
<span class="nav-link-text"
data-i18n="nav.plugins_smartpanels">SmartPanels</span>
<span class="dl-ref label bg-primary-600 ml-2">9 KB</span>
</a>
</li>
<li>
<a href="plugins_bootbox.html" title="BootBox"
data-filter-tags="plugins bootbox alert sound">
<span class="nav-link-text" data-i18n="nav.plugins_bootbox">BootBox</span>
<span class="dl-ref label bg-primary-600 ml-2">15 KB</span>
</a>
</li>
<li>
<a href="plugins_slimscroll.html" title="Slimscroll"
data-filter-tags="plugins slimscroll">
<span class="nav-link-text" data-i18n="nav.plugins_slimscroll">Slimscroll</span>
<span class="dl-ref label bg-primary-700 ml-2">5 KB</span>
</a>
</li>
<li>
<a href="plugins_throttle.html" title="Throttle"
data-filter-tags="plugins throttle">
<span class="nav-link-text" data-i18n="nav.plugins_throttle">Throttle</span>
<span class="dl-ref label bg-primary-700 ml-2">1 KB</span>
</a>
</li>
<li>
<a href="plugins_navigation.html" title="Navigation"
data-filter-tags="plugins navigation">
<span class="nav-link-text" data-i18n="nav.plugins_navigation">Navigation</span>
<span class="dl-ref label bg-primary-700 ml-2">2 KB</span>
</a>
</li>
<li>
<a href="plugins_i18next.html" title="i18next" data-filter-tags="plugins i18next">
<span class="nav-link-text" data-i18n="nav.plugins_i18next">i18next</span>
<span class="dl-ref label bg-primary-700 ml-2">10 KB</span>
</a>
</li>
<li>
<a href="plugins_appcore.html" title="App.Core" data-filter-tags="plugins app.core">
<span class="nav-link-text" data-i18n="nav.plugins_app.core">App.Core</span>
<span class="dl-ref label bg-success-700 ml-2">14 KB</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#" title="Datatables" data-filter-tags="datatables datagrid">
<i class="fal fa-table"></i>
<span class="nav-link-text" data-i18n="nav.datatables">Datatables</span>
<span class="dl-ref bg-primary-500 hidden-nav-function-minify hidden-nav-function-top">
235
KB
</span>
</a>
<ul>
<li>
<a href="datatables_basic.html" title="Basic"
data-filter-tags="datatables datagrid basic">
<span class="nav-link-text" data-i18n="nav.datatables_basic">Basic</span>
</a>
</li>
<li>
<a href="datatables_autofill.html" title="Autofill"
data-filter-tags="datatables datagrid autofill">
<span class="nav-link-text" data-i18n="nav.datatables_autofill">Autofill</span>
</a>
</li>
<li>
<a href="datatables_buttons.html" title="Buttons"
data-filter-tags="datatables datagrid buttons">
<span class="nav-link-text" data-i18n="nav.datatables_buttons">Buttons</span>
</a>
</li>
<li>
<a href="datatables_export.html" title="Export"
data-filter-tags="datatables datagrid export tables pdf excel print csv">
<span class="nav-link-text" data-i18n="nav.datatables_export">Export</span>
</a>
</li>
<li>
<a href="datatables_colreorder.html" title="ColReorder"
data-filter-tags="datatables datagrid colreorder">
<span class="nav-link-text"
data-i18n="nav.datatables_colreorder">ColReorder</span>
</a>
</li>
<li>
<a href="datatables_columnfilter.html" title="ColumnFilter"
data-filter-tags="datatables datagrid columnfilter">
<span class="nav-link-text"
data-i18n="nav.datatables_columnfilter">ColumnFilter</span>
</a>
</li>
<li>
<a href="datatables_fixedcolumns.html" title="FixedColumns"
data-filter-tags="datatables datagrid fixedcolumns">
<span class="nav-link-text"
data-i18n="nav.datatables_fixedcolumns">FixedColumns</span>
</a>
</li>
<li>
<a href="datatables_fixedheader.html" title="FixedHeader"
data-filter-tags="datatables datagrid fixedheader">
<span class="nav-link-text"
data-i18n="nav.datatables_fixedheader">FixedHeader</span>
</a>
</li>
<li>
<a href="datatables_keytable.html" title="KeyTable"
data-filter-tags="datatables datagrid keytable">
<span class="nav-link-text" data-i18n="nav.datatables_keytable">KeyTable</span>
</a>
</li>
<li>
<a href="datatables_responsive.html" title="Responsive"
data-filter-tags="datatables datagrid responsive">
<span class="nav-link-text"
data-i18n="nav.datatables_responsive">Responsive</span>
</a>
</li>
<li>
<a href="datatables_responsive_alt.html" title="Responsive Alt"
data-filter-tags="datatables datagrid responsive alt">
<span class="nav-link-text" data-i18n="nav.datatables_responsive_alt">
Responsive
Alt
</span>
</a>
</li>
<li>
<a href="datatables_rowgroup.html" title="RowGroup"
data-filter-tags="datatables datagrid rowgroup">
<span class="nav-link-text" data-i18n="nav.datatables_rowgroup">RowGroup</span>
</a>
</li>
<li>
<a href="datatables_rowreorder.html" title="RowReorder"
data-filter-tags="datatables datagrid rowreorder">
<span class="nav-link-text"
data-i18n="nav.datatables_rowreorder">RowReorder</span>
</a>
</li>
<li>
<a href="datatables_scroller.html" title="Scroller"
data-filter-tags="datatables datagrid scroller">
<span class="nav-link-text" data-i18n="nav.datatables_scroller">Scroller</span>
</a>
</li>
<li>
<a href="datatables_select.html" title="Select"
data-filter-tags="datatables datagrid select">
<span class="nav-link-text" data-i18n="nav.datatables_select">Select</span>
</a>
</li>
<li>
<a href="datatables_alteditor.html" title="AltEditor"
data-filter-tags="datatables datagrid alteditor">
<span class="nav-link-text"
data-i18n="nav.datatables_alteditor">AltEditor</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#" title="Statistics" data-filter-tags="statistics chart graphs">
<i class="fal fa-chart-pie"></i>
<span class="nav-link-text" data-i18n="nav.statistics">Statistics</span>
</a>
<ul>
<li>
<a href="statistics_flot.html" title="Flot"
data-filter-tags="statistics chart graphs flot bar pie">
<span class="nav-link-text" data-i18n="nav.statistics_flot">Flot</span>
<span class="dl-ref label bg-primary-500 ml-2">36 KB</span>
</a>
</li>
<li>
<a href="statistics_chartjs.html" title="Chart.js"
data-filter-tags="statistics chart graphs chart.js bar pie">
<span class="nav-link-text" data-i18n="nav.statistics_chart.js">Chart.js</span>
<span class="dl-ref label bg-primary-500 ml-2">205 KB</span>
</a>
</li>
<li>
<a href="statistics_chartist.html" title="Chartist.js"
data-filter-tags="statistics chart graphs chartist.js">
<span class="nav-link-text"
data-i18n="nav.statistics_chartist.js">Chartist.js</span>
<span class="dl-ref label bg-primary-600 ml-2">39 KB</span>
</a>
</li>
<li>
<a href="statistics_c3.html" title="C3 Charts"
data-filter-tags="statistics chart graphs c3 charts">
<span class="nav-link-text" data-i18n="nav.statistics_c3_charts">
C3
Charts
</span>
<span class="dl-ref label bg-primary-600 ml-2">197 KB</span>
</a>
</li>
<li>
<a href="statistics_peity.html" title="Peity"
data-filter-tags="statistics chart graphs peity small">
<span class="nav-link-text" data-i18n="nav.statistics_peity">Peity</span>
<span class="dl-ref label bg-primary-700 ml-2">4 KB</span>
</a>
</li>
<li>
<a href="statistics_sparkline.html" title="Sparkline"
data-filter-tags="statistics chart graphs sparkline small tiny">
<span class="nav-link-text"
data-i18n="nav.statistics_sparkline">Sparkline</span>
<span class="dl-ref label bg-primary-700 ml-2">42 KB</span>
</a>
</li>
<li>
<a href="statistics_easypiechart.html" title="Easy Pie Chart"
data-filter-tags="statistics chart graphs easy pie chart">
<span class="nav-link-text" data-i18n="nav.statistics_easy_pie_chart">
Easy Pie
Chart
</span>
<span class="dl-ref label bg-primary-700 ml-2">4 KB</span>
</a>
</li>
<li>
<a href="statistics_dygraph.html" title="Dygraph"
data-filter-tags="statistics chart graphs dygraph complex">
<span class="nav-link-text" data-i18n="nav.statistics_dygraph">Dygraph</span>
<span class="dl-ref label bg-primary-700 ml-2">120 KB</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#" title="Notifications" data-filter-tags="notifications">
<i class="fal fa-exclamation-circle"></i>
<span class="nav-link-text" data-i18n="nav.notifications">Notifications</span>
</a>
<ul>
<li>
<a href="notifications_sweetalert2.html" title="SweetAlert2"
data-filter-tags="notifications sweetalert2">
<span class="nav-link-text"
data-i18n="nav.notifications_sweetalert2">SweetAlert2</span>
<span class="dl-ref label bg-primary-500 ml-2">40 KB</span>
</a>
</li>
<li>
<a href="notifications_toastr.html" title="Toastr"
data-filter-tags="notifications toastr">
<span class="nav-link-text" data-i18n="nav.notifications_toastr">Toastr</span>
<span class="dl-ref label bg-primary-600 ml-2">5 KB</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#" title="Form Plugins" data-filter-tags="form plugins">
<i class="fal fa-credit-card-front"></i>
<span class="nav-link-text" data-i18n="nav.form_plugins">Form Plugins</span>
</a>
<ul>
<li>
<a href="form_plugins_colorpicker.html" title="Color Picker"
data-filter-tags="form plugins color picker">
<span class="nav-link-text" data-i18n="nav.form_plugins_color_picker">
Color
Picker
</span>
</a>
</li>
<li>
<a href="form_plugins_datepicker.html" title="Date Picker"
data-filter-tags="form plugins date picker">
<span class="nav-link-text" data-i18n="nav.form_plugins_date_picker">
Date
Picker
</span>
</a>
</li>
<li>
<a href="form_plugins_daterange_picker.html" title="Date Range Picker"
data-filter-tags="form plugins date range picker">
<span class="nav-link-text" data-i18n="nav.form_plugins_date_range_picker">
Date
Range Picker
</span>
</a>
</li>
<li>
<a href="form_plugins_dropzone.html" title="Dropzone"
data-filter-tags="form plugins dropzone">
<span class="nav-link-text"
data-i18n="nav.form_plugins_dropzone">Dropzone</span>
</a>
</li>
<li>
<a href="form_plugins_ionrangeslider.html" title="Ion.RangeSlider"
data-filter-tags="form plugins ion.rangeslider">
<span class="nav-link-text"
data-i18n="nav.form_plugins_ion.rangeslider">Ion.RangeSlider</span>
</a>
</li>
<li>
<a href="form_plugins_inputmask.html" title="Inputmask"
data-filter-tags="form plugins inputmask">
<span class="nav-link-text"
data-i18n="nav.form_plugins_inputmask">Inputmask</span>
</a>
</li>
<li>
<a href="form_plugins_imagecropper.html" title="Image Cropper"
data-filter-tags="form plugins image cropper">
<span class="nav-link-text" data-i18n="nav.form_plugins_image_cropper">
Image
Cropper
</span>
</a>
</li>
<li>
<a href="form_plugins_select2.html" title="Select2"
data-filter-tags="form plugins select2">
<span class="nav-link-text" data-i18n="nav.form_plugins_select2">Select2</span>
</a>
</li>
<li>
<a href="form_plugins_summernote.html" title="Summernote"
data-filter-tags="form plugins summernote texteditor editor">
<span class="nav-link-text"
data-i18n="nav.form_plugins_summernote">Summernote</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#" title="Miscellaneous" data-filter-tags="miscellaneous">
<i class="fal fa-globe"></i>
<span class="nav-link-text" data-i18n="nav.miscellaneous">Miscellaneous</span>
</a>
<ul>
<li>
<a href="miscellaneous_fullcalendar.html" title="FullCalendar"
data-filter-tags="miscellaneous fullcalendar">
<span class="nav-link-text"
data-i18n="nav.miscellaneous_fullcalendar">FullCalendar</span>
</a>
</li>
<li>
<a href="miscellaneous_lightgallery.html" title="Light Gallery"
data-filter-tags="miscellaneous light gallery">
<span class="nav-link-text" data-i18n="nav.miscellaneous_light_gallery">
Light
Gallery
</span>
<span class="dl-ref label bg-primary-500 ml-2">61 KB</span>
</a>
</li>
</ul>
</li>
<li class="nav-title">Layouts & Apps</li>
<li>
<a href="#" title="Pages" data-filter-tags="pages">
<i class="fal fa-plus-circle"></i>
<span class="nav-link-text" data-i18n="nav.pages">Page Views</span>
</a>
<ul>
<li>
<a href="page_chat.html" title="Chat" data-filter-tags="pages chat">
<span class="nav-link-text" data-i18n="nav.pages_chat">Chat</span>
</a>
</li>
<li>
<a href="page_contacts.html" title="Contacts" data-filter-tags="pages contacts">
<span class="nav-link-text" data-i18n="nav.pages_contacts">Contacts</span>
</a>
</li>
<li>
<a href="javascript:void(0);" title="Forum" data-filter-tags="pages forum">
<span class="nav-link-text" data-i18n="nav.pages_forum">Forum</span>
</a>
<ul>
<li>
<a href="page_forum_list.html" title="List"
data-filter-tags="pages forum list">
<span class="nav-link-text" data-i18n="nav.pages_forum_list">List</span>
</a>
</li>
<li>
<a href="page_forum_threads.html" title="Threads"
data-filter-tags="pages forum threads">
<span class="nav-link-text"
data-i18n="nav.pages_forum_threads">Threads</span>
</a>
</li>
<li>
<a href="page_forum_discussion.html" title="Discussion"
data-filter-tags="pages forum discussion">
<span class="nav-link-text"
data-i18n="nav.pages_forum_discussion">Discussion</span>
</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" title="Inbox" data-filter-tags="pages inbox">
<span class="nav-link-text" data-i18n="nav.pages_inbox">Inbox</span>
</a>
<ul>
<li>
<a href="page_inbox_general.html" title="General"
data-filter-tags="pages inbox general">
<span class="nav-link-text"
data-i18n="nav.pages_inbox_general">General</span>
</a>
</li>
<li>
<a href="page_inbox_read.html" title="Read"
data-filter-tags="pages inbox read">
<span class="nav-link-text" data-i18n="nav.pages_inbox_read">Read</span>
</a>
</li>
<li>
<a href="page_inbox_write.html" title="Write"
data-filter-tags="pages inbox write">
<span class="nav-link-text"
data-i18n="nav.pages_inbox_write">Write</span>
</a>
</li>
</ul>
</li>
<li>
<a href="page_invoice.html" title="Invoice (printable)"
data-filter-tags="pages invoice (printable)">
<span class="nav-link-text" data-i18n="nav.pages_invoice_(printable)">
Invoice
(printable)
</span>
</a>
</li>
<li>
<a href="javascript:void(0);" title="Authentication"
data-filter-tags="pages authentication">
<span class="nav-link-text"
data-i18n="nav.pages_authentication">Authentication</span>
</a>
<ul>
<li>
<a href="page_forget.html" title="Forget Password"
data-filter-tags="pages authentication forget password">
<span class="nav-link-text"
data-i18n="nav.pages_authentication_forget_password">
Forget
Password
</span>
</a>
</li>
<li>
<a href="page_locked.html" title="Locked Screen"
data-filter-tags="pages authentication locked screen">
<span class="nav-link-text"
data-i18n="nav.pages_authentication_locked_screen">
Locked
Screen
</span>
</a>
</li>
<li>
<a href="page_login.html" title="Login"
data-filter-tags="pages authentication login">
<span class="nav-link-text"
data-i18n="nav.pages_authentication_login">Login</span>
</a>
</li>
<li>
<a href="page_login_alt.html" title="Login Alt"
data-filter-tags="pages authentication login alt">
<span class="nav-link-text"
data-i18n="nav.pages_authentication_login_alt">Login Alt</span>
</a>
</li>
<li>
<a href="page_register.html" title="Register"
data-filter-tags="pages authentication register">
<span class="nav-link-text"
data-i18n="nav.pages_authentication_register">Register</span>
</a>
</li>
<li>
<a href="page_confirmation.html" title="Confirmation"
data-filter-tags="pages authentication confirmation">
<span class="nav-link-text"
data-i18n="nav.pages_authentication_confirmation">Confirmation</span>
</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" title="Error Pages"
data-filter-tags="pages error pages">
<span class="nav-link-text" data-i18n="nav.pages_error_pages">Error Pages</span>
</a>
<ul>
<li>
<a href="page_error.html" title="General Error"
data-filter-tags="pages error pages general error">
<span class="nav-link-text"
data-i18n="nav.pages_error_pages_general_error">General Error</span>
</a>
</li>
<li>
<a href="page_error_404.html" title="Server Error"
data-filter-tags="pages error pages server error">
<span class="nav-link-text"
data-i18n="nav.pages_error_pages_server_error">Server Error</span>
</a>
</li>
<li>
<a href="page_error_announced.html" title="Announced Error"
data-filter-tags="pages error pages announced error">
<span class="nav-link-text"
data-i18n="nav.pages_error_pages_announced_error">
Announced
Error
</span>
</a>
</li>
</ul>
</li>
<li>
<a href="page_profile.html" title="Profile" data-filter-tags="pages profile">
<span class="nav-link-text" data-i18n="nav.pages_profile">Profile</span>
</a>
</li>
<li>
<a href="page_projects.html" title="Projects" data-filter-tags="pages projects">
<span class="nav-link-text" data-i18n="nav.pages_projects">Projects</span>
</a>
</li>
<li>
<a href="page_search.html" title="Search Results"
data-filter-tags="pages search results">
<span class="nav-link-text" data-i18n="nav.pages_search_results">
Search
Results
</span>
</a>
</li>
</ul>
</li>
</ul>
<div class="filter-message js-filter-message bg-success-600"></div>
</nav>
<!-- END PRIMARY NAVIGATION -->
<!-- NAV FOOTER -->
<div class="nav-footer shadow-top">
<a href="#" onclick="return false;" data-action="toggle" data-class="nav-function-minify"
class="hidden-md-down">
<i class="ni ni-chevron-right"></i>
<i class="ni ni-chevron-right"></i>
</a>
<ul class="list-table m-auto nav-footer-buttons">
<li>
<a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Chat logs">
<i class="fal fa-comments"></i>
</a>
</li>
<li>
<a href="javascript:void(0);" data-toggle="tooltip" data-placement="top"
title="Support Chat">
<i class="fal fa-life-ring"></i>
</a>
</li>
<li>
<a href="javascript:void(0);" data-toggle="tooltip" data-placement="top"
title="Make a call">
<i class="fal fa-phone"></i>
</a>
</li>
</ul>
</div> <!-- END NAV FOOTER -->
</aside>
<!-- END Left Aside -->
<div class="page-content-wrapper">
<!-- BEGIN Page Header -->
<header class="page-header" role="banner">
<!-- we need this logo when user switches to nav-function-top -->
<div class="page-logo">
<a href="javascript:;" name="topFunBtn" data-page="dashboard" class="page-logo-link press-scale-down d-flex align-items-center position-relative">
<img src="img/logo.png" alt="SmartAdmin WebApp" aria-roledescription="logo">
<!--<span class="page-logo-text mr-1">SmartAdmin WebApp</span>
<span class="position-absolute text-white opacity-50 small pos-top pos-right mr-2 mt-n2"></span>
<i class="fal fa-angle-down d-inline-block ml-1 fs-lg color-primary-300"></i>-->
</a>
</div>
<!-- DOC: nav menu layout change shortcut -->
<div class="hidden-md-down dropdown-icon-menu position-relative">
<a href="#" class="header-btn btn js-waves-off" data-action="toggle"
data-class="nav-function-hidden" title="Hide Navigation">
<i class="ni ni-menu"></i>
</a>
<ul>
<li>
<a href="#" class="btn js-waves-off" data-action="toggle"
data-class="nav-function-minify" title="Minify Navigation">
<i class="ni ni-minify-nav"></i>
</a>
</li>
<li>
<a href="#" class="btn js-waves-off" data-action="toggle"
data-class="nav-function-fixed" title="Lock Navigation">
<i class="ni ni-lock-nav"></i>
</a>
</li>
</ul>
</div>
<!-- DOC: mobile button appears during mobile width -->
<div class="hidden-lg-up">
<a href="#" class="header-btn btn press-scale-down" data-action="toggle"
data-class="mobile-nav-on">
<i class="ni ni-menu"></i>
</a>
</div>
<div class="dropdown">
<a class="dropdown-toggle" href="javascript:;" role="button" id="buiActDrop"
data-target="buiList" data-toggle="dropdown" aria-haspopup="true">
</a>
<div id="buiList" class="dropdown-menu dropdown-select-menu js-auto-close">
</div>
</div>
<div class="ml-auto d-flex" id="froLisPage">
</div>
<div class="ml-auto d-flex">
<!-- app user menu -->
<div>
<a href="#" data-toggle="dropdown" title="drlantern@gotbootstrap.com"
class="header-icon d-flex align-items-center justify-content-center ml-2">
<img src="img/demo/avatars/avatar-admin.png" class="profile-image rounded-circle"
alt="Dr. Codex Lantern">
<!-- you can also add username next to the avatar with the codes below:
<span class="ml-1 mr-1 text-truncate text-truncate-header hidden-xs-down">Me</span>
<i class="ni ni-chevron-down hidden-xs-down"></i> -->
</a>
<div class="dropdown-menu dropdown-menu-animated dropdown-lg">
<a id="logout" href="javascript:;" class="dropdown-item fw-500 pt-3 pb-3">
<span>登出</span>
</a>
</div>
</div>
</div>
<div class="ml-2 text-center">
<label class="mb-0 fs-1-2">Diamond Controls<span class="fs-09 position-absolute">®</span></label><br>
<label class="mb-0 fs-1-1">智慧大樓管理平台</label>
</div>
</header>
<!-- END Page Header -->
<!-- BEGIN Page Content -->
<!-- the #js-page-content id is needed for some plugins to initialize -->
<!--@RenderBody()-->
<div id="app">
</div>
<!-- this overlay is activated only when mobile menu is triggered -->
<div class="page-content-overlay" data-action="toggle" data-class="mobile-nav-on"></div>
<!-- END Page Content -->
<!-- BEGIN Page Footer -->
<!--<footer class="page-footer" role="contentinfo">
<div class="d-flex align-items-center flex-1 text-muted">
<span class="hidden-md-down fw-700">2022 © SmartAdmin by&nbsp;<a href='https://www.gotbootstrap.com' class='text-primary fw-500' title='gotbootstrap.com' target='_blank'>gotbootstrap.com</a></span>
</div>
<div>
<ul class="list-table m-0">
<li><a href="intel_introduction.html" class="text-secondary fw-700">About</a></li>
<li class="pl-3"><a href="info_app_licensing.html" class="text-secondary fw-700">License</a></li>
<li class="pl-3"><a href="info_app_docs.html" class="text-secondary fw-700">Documentation</a></li>
<li class="pl-3 fs-xl"><a href="https://wrapbootstrap.com/user/MyOrange" class="text-secondary" target="_blank"><i class="fal fa-question-circle" aria-hidden="true"></i></a></li>
</ul>
</div>
</footer>-->
<!-- END Page Footer -->
<!-- BEGIN Shortcuts -->
<!--<div class="modal fade modal-backdrop-transparent" id="modal-shortcut" tabindex="-1" role="dialog"
aria-labelledby="modal-shortcut" aria-hidden="true">
<div class="modal-dialog modal-dialog-top modal-transparent" role="document">
<div class="modal-content">
<div class="modal-body">
<ul class="app-list w-auto h-auto p-0 text-left">
<li>
<a href="intel_introduction.html" class="app-list-item text-white border-0 m-0">
<div class="icon-stack">
<i class="base base-7 icon-stack-3x opacity-100 color-primary-500 "></i>
<i class="base base-7 icon-stack-2x opacity-100 color-primary-300 "></i>
<i class="fal fa-home icon-stack-1x opacity-100 color-white"></i>
</div>
<span class="app-list-name">
Home
</span>
</a>
</li>
<li>
<a href="page_inbox_general.html" class="app-list-item text-white border-0 m-0">
<div class="icon-stack">
<i class="base base-7 icon-stack-3x opacity-100 color-success-500 "></i>
<i class="base base-7 icon-stack-2x opacity-100 color-success-300 "></i>
<i class="ni ni-envelope icon-stack-1x text-white"></i>
</div>
<span class="app-list-name">
Inbox
</span>
</a>
</li>
<li>
<a href="intel_introduction.html" class="app-list-item text-white border-0 m-0">
<div class="icon-stack">
<i class="base base-7 icon-stack-2x opacity-100 color-primary-300 "></i>
<i class="fal fa-plus icon-stack-1x opacity-100 color-white"></i>
</div>
<span class="app-list-name">
Add More
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>-->
<!-- END Shortcuts -->
<!-- BEGIN Color profile -->
<!-- this area is hidden and will not be seen on screens or screen readers -->
<!-- we use this only for CSS color refernce for JS stuff -->
<p id="js-color-profile" class="d-none">
<span class="color-primary-50"></span>
<span class="color-primary-100"></span>
<span class="color-primary-200"></span>
<span class="color-primary-300"></span>
<span class="color-primary-400"></span>
<span class="color-primary-500"></span>
<span class="color-primary-600"></span>
<span class="color-primary-700"></span>
<span class="color-primary-800"></span>
<span class="color-primary-900"></span>
<span class="color-info-50"></span>
<span class="color-info-100"></span>
<span class="color-info-200"></span>
<span class="color-info-300"></span>
<span class="color-info-400"></span>
<span class="color-info-500"></span>
<span class="color-info-600"></span>
<span class="color-info-700"></span>
<span class="color-info-800"></span>
<span class="color-info-900"></span>
<span class="color-danger-50"></span>
<span class="color-danger-100"></span>
<span class="color-danger-200"></span>
<span class="color-danger-300"></span>
<span class="color-danger-400"></span>
<span class="color-danger-500"></span>
<span class="color-danger-600"></span>
<span class="color-danger-700"></span>
<span class="color-danger-800"></span>
<span class="color-danger-900"></span>
<span class="color-warning-50"></span>
<span class="color-warning-100"></span>
<span class="color-warning-200"></span>
<span class="color-warning-300"></span>
<span class="color-warning-400"></span>
<span class="color-warning-500"></span>
<span class="color-warning-600"></span>
<span class="color-warning-700"></span>
<span class="color-warning-800"></span>
<span class="color-warning-900"></span>
<span class="color-success-50"></span>
<span class="color-success-100"></span>
<span class="color-success-200"></span>
<span class="color-success-300"></span>
<span class="color-success-400"></span>
<span class="color-success-500"></span>
<span class="color-success-600"></span>
<span class="color-success-700"></span>
<span class="color-success-800"></span>
<span class="color-success-900"></span>
<span class="color-fusion-50"></span>
<span class="color-fusion-100"></span>
<span class="color-fusion-200"></span>
<span class="color-fusion-300"></span>
<span class="color-fusion-400"></span>
<span class="color-fusion-500"></span>
<span class="color-fusion-600"></span>
<span class="color-fusion-700"></span>
<span class="color-fusion-800"></span>
<span class="color-fusion-900"></span>
</p>
<!-- END Color profile -->
</div>
</div>
</div>
<!-- END Page Wrapper -->
<!-- BEGIN Messenger -->
<div class="modal fade js-modal-messenger modal-backdrop-transparent" tabindex="-1" role="dialog"
aria-hidden="true">
<div class="modal-dialog modal-dialog-right">
<div class="modal-content h-100">
<div class="dropdown-header bg-trans-gradient d-flex align-items-center w-100">
<div class="d-flex flex-row align-items-center mt-1 mb-1 color-white">
<span class="mr-2">
<span class="rounded-circle profile-image d-block"
style="background-image:url('img/demo/avatars/avatar-d.png'); background-size: cover;"></span>
</span>
<div class="info-card-text">
<a href="javascript:void(0);" class="fs-lg text-truncate text-truncate-lg text-white"
data-toggle="dropdown" aria-expanded="false">
Tracey Chang
<i class="fal fa-angle-down d-inline-block ml-1 text-white fs-md"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Send Email</a>
<a class="dropdown-item" href="#">Create Appointment</a>
<a class="dropdown-item" href="#">Block User</a>
</div>
<span class="text-truncate text-truncate-md opacity-80">IT Director</span>
</div>
</div>
<button type="button" class="close text-white position-absolute pos-top pos-right p-2 m-1 mr-2"
data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><i class="fal fa-times"></i></span>
</button>
</div>
<div class="modal-body p-0 h-100 d-flex">
<!-- BEGIN msgr-list -->
<div class="msgr-list d-flex flex-column bg-faded border-faded border-top-0 border-right-0 border-bottom-0 position-absolute pos-top pos-bottom">
<div>
<div class="height-4 width-3 h3 m-0 d-flex justify-content-center flex-column color-primary-500 pl-3 mt-2">
<i class="fal fa-search"></i>
</div>
<input type="text" class="form-control bg-white" id="msgr_listfilter_input"
placeholder="Filter contacts" aria-label="FriendSearch"
data-listfilter="#js-msgr-listfilter">
</div>
<div class="flex-1 h-100 custom-scroll">
<div class="w-100">
<ul id="js-msgr-listfilter" class="list-unstyled m-0">
<li>
<a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
data-filter-tags="tracey chang online">
<div class="d-table-cell align-middle status status-success status-sm ">
<span class="profile-image-md rounded-circle d-block"
style="background-image:url('img/demo/avatars/avatar-d.png'); background-size: cover;"></span>
</div>
<div class="d-table-cell w-100 align-middle pl-2 pr-2">
<div class="text-truncate text-truncate-md">
Tracey Chang
<small class="d-block font-italic text-success fs-xs">
Online
</small>
</div>
</div>
</a>
</li>
<li>
<a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
data-filter-tags="oliver kopyuv online">
<div class="d-table-cell align-middle status status-success status-sm ">
<span class="profile-image-md rounded-circle d-block"
style="background-image:url('img/demo/avatars/avatar-b.png'); background-size: cover;"></span>
</div>
<div class="d-table-cell w-100 align-middle pl-2 pr-2">
<div class="text-truncate text-truncate-md">
Oliver Kopyuv
<small class="d-block font-italic text-success fs-xs">
Online
</small>
</div>
</div>
</a>
</li>
<li>
<a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
data-filter-tags="dr john cook phd away">
<div class="d-table-cell align-middle status status-warning status-sm ">
<span class="profile-image-md rounded-circle d-block"
style="background-image:url('img/demo/avatars/avatar-e.png'); background-size: cover;"></span>
</div>
<div class="d-table-cell w-100 align-middle pl-2 pr-2">
<div class="text-truncate text-truncate-md">
Dr. John Cook PhD
<small class="d-block font-italic fs-xs">
Away
</small>
</div>
</div>
</a>
</li>
<li>
<a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
data-filter-tags="ali amdaney online">
<div class="d-table-cell align-middle status status-success status-sm ">
<span class="profile-image-md rounded-circle d-block"
style="background-image:url('img/demo/avatars/avatar-g.png'); background-size: cover;"></span>
</div>
<div class="d-table-cell w-100 align-middle pl-2 pr-2">
<div class="text-truncate text-truncate-md">
Ali Amdaney
<small class="d-block font-italic fs-xs text-success">
Online
</small>
</div>
</div>
</a>
</li>
<li>
<a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
data-filter-tags="sarah mcbrook online">
<div class="d-table-cell align-middle status status-success status-sm">
<span class="profile-image-md rounded-circle d-block"
style="background-image:url('img/demo/avatars/avatar-h.png'); background-size: cover;"></span>
</div>
<div class="d-table-cell w-100 align-middle pl-2 pr-2">
<div class="text-truncate text-truncate-md">
Sarah McBrook
<small class="d-block font-italic fs-xs text-success">
Online
</small>
</div>
</div>
</a>
</li>
<li>
<a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
data-filter-tags="ali amdaney offline">
<div class="d-table-cell align-middle status status-sm">
<span class="profile-image-md rounded-circle d-block"
style="background-image:url('img/demo/avatars/avatar-a.png'); background-size: cover;"></span>
</div>
<div class="d-table-cell w-100 align-middle pl-2 pr-2">
<div class="text-truncate text-truncate-md">
oliver.kopyuv@gotbootstrap.com
<small class="d-block font-italic fs-xs">
Offline
</small>
</div>
</div>
</a>
</li>
<li>
<a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
data-filter-tags="ali amdaney busy">
<div class="d-table-cell align-middle status status-danger status-sm">
<span class="profile-image-md rounded-circle d-block"
style="background-image:url('img/demo/avatars/avatar-j.png'); background-size: cover;"></span>
</div>
<div class="d-table-cell w-100 align-middle pl-2 pr-2">
<div class="text-truncate text-truncate-md">
oliver.kopyuv@gotbootstrap.com
<small class="d-block font-italic fs-xs text-danger">
Busy
</small>
</div>
</div>
</a>
</li>
<li>
<a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
data-filter-tags="ali amdaney offline">
<div class="d-table-cell align-middle status status-sm">
<span class="profile-image-md rounded-circle d-block"
style="background-image:url('img/demo/avatars/avatar-c.png'); background-size: cover;"></span>
</div>
<div class="d-table-cell w-100 align-middle pl-2 pr-2">
<div class="text-truncate text-truncate-md">
oliver.kopyuv@gotbootstrap.com
<small class="d-block font-italic fs-xs">
Offline
</small>
</div>
</div>
</a>
</li>
<li>
<a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
data-filter-tags="ali amdaney inactive">
<div class="d-table-cell align-middle">
<span class="profile-image-md rounded-circle d-block"
style="background-image:url('img/demo/avatars/avatar-m.png'); background-size: cover;"></span>
</div>
<div class="d-table-cell w-100 align-middle pl-2 pr-2">
<div class="text-truncate text-truncate-md">
+714651347790
<small class="d-block font-italic fs-xs opacity-50">
Missed Call
</small>
</div>
</div>
</a>
</li>
</ul>
<div class="filter-message js-filter-message"></div>
</div>
</div>
<div>
<a class="fs-xl d-flex align-items-center p-3">
<i class="fal fa-cogs"></i>
</a>
</div>
</div>
<!-- END msgr-list -->
<!-- BEGIN msgr -->
<div class="msgr d-flex h-100 flex-column bg-white">
<!-- BEGIN custom-scroll -->
<div class="custom-scroll flex-1 h-100">
<div id="chat_container" class="w-100 p-4">
<!-- start .chat-segment -->
<div class="chat-segment">
<div class="time-stamp text-center mb-2 fw-400">
Jun 19
</div>
</div>
<!-- end .chat-segment -->
<!-- start .chat-segment -->
<div class="chat-segment chat-segment-sent">
<div class="chat-message">
<p>
Hey Tracey, did you get my files?
</p>
</div>
<div class="text-right fw-300 text-muted mt-1 fs-xs">
3:00 pm
</div>
</div>
<!-- end .chat-segment -->
<!-- start .chat-segment -->
<div class="chat-segment chat-segment-get">
<div class="chat-message">
<p>
Hi
</p>
<p>
Sorry going through a busy time in office. Yes I analyzed the solution.
</p>
<p>
It will require some resource, which I could not manage.
</p>
</div>
<div class="fw-300 text-muted mt-1 fs-xs">
3:24 pm
</div>
</div>
<!-- end .chat-segment -->
<!-- start .chat-segment -->
<div class="chat-segment chat-segment-sent chat-start">
<div class="chat-message">
<p>
Okay
</p>
</div>
</div>
<!-- end .chat-segment -->
<!-- start .chat-segment -->
<div class="chat-segment chat-segment-sent chat-end">
<div class="chat-message">
<p>
Sending you some dough today, you can allocate the resources to this
project.
</p>
</div>
<div class="text-right fw-300 text-muted mt-1 fs-xs">
3:26 pm
</div>
</div>
<!-- end .chat-segment -->
<!-- start .chat-segment -->
<div class="chat-segment chat-segment-get chat-start">
<div class="chat-message">
<p>
Perfect. Thanks a lot!
</p>
</div>
</div>
<!-- end .chat-segment -->
<!-- start .chat-segment -->
<div class="chat-segment chat-segment-get">
<div class="chat-message">
<p>
I will have them ready by tonight.
</p>
</div>
</div>
<!-- end .chat-segment -->
<!-- start .chat-segment -->
<div class="chat-segment chat-segment-get chat-end">
<div class="chat-message">
<p>
Cheers
</p>
</div>
</div>
<!-- end .chat-segment -->
<!-- start .chat-segment for timestamp -->
<div class="chat-segment">
<div class="time-stamp text-center mb-2 fw-400">
Jun 20
</div>
</div>
<!-- end .chat-segment for timestamp -->
</div>
</div>
<!-- END custom-scroll -->
<!-- BEGIN msgr__chatinput -->
<div class="d-flex flex-column">
<div class="border-faded border-right-0 border-bottom-0 border-left-0 flex-1 mr-3 ml-3 position-relative shadow-top">
<div class="pt-3 pb-1 pr-0 pl-0 rounded-0" tabindex="-1">
<div id="msgr_input" contenteditable="true"
data-placeholder="Type your message here..."
class="height-10 form-content-editable"></div>
</div>
</div>
<div class="height-8 px-3 d-flex flex-row align-items-center flex-wrap flex-shrink-0">
<a href="javascript:void(0);" class="btn btn-icon fs-xl width-1 mr-1"
data-toggle="tooltip" data-original-title="More options" data-placement="top">
<i class="fal fa-ellipsis-v-alt color-fusion-300"></i>
</a>
<a href="javascript:void(0);" class="btn btn-icon fs-xl mr-1" data-toggle="tooltip"
data-original-title="Attach files" data-placement="top">
<i class="fal fa-paperclip color-fusion-300"></i>
</a>
<a href="javascript:void(0);" class="btn btn-icon fs-xl mr-1" data-toggle="tooltip"
data-original-title="Insert photo" data-placement="top">
<i class="fal fa-camera color-fusion-300"></i>
</a>
<div class="ml-auto">
<a href="javascript:void(0);" class="btn btn-info">Send</a>
</div>
</div>
</div>
<!-- END msgr__chatinput -->
</div>
<!-- END msgr -->
</div>
</div>
</div>
</div>
<!--<button id="testsysbtn" class="btn btn-info col-1">系統監控(測試用)</button>-->
<!-- END Messenger -->
<!-- BEGIN Page Settings -->
<!-- END Page Settings -->
<!-- base vendor bundle:
DOC: if you remove pace.js from core please note on Internet Explorer some CSS animations may execute before a page is fully loaded, resulting 'jump' animations
+ pace.js (recommended)
+ jquery.js (core)
+ jquery-ui-cust.js (core)
+ popper.js (core)
+ bootstrap.js (core)
+ slimscroll.js (extension)
+ app.navigation.js (core)
+ ba-throttle-debounce.js (core)
+ waves.js (extension)
+ smartpanels.js (extension)
+ src/../jquery-snippets.js (core) -->
<!-- verdors.bundle.js 已含有 jquery Library v3.5.1-->
<script src="lib/vendors.bundle.js"></script>
<!-- toast 第三方套件 若 require 此套件只能用 define 使用，先暫時 html 引用-->
<script src="lib/notifications/toastr/toastr.min.js"></script>
<script src="js/toast.js"></script>
<script src="lib/echarts.min.js"></script>
<!--The order of scripts is irrelevant. Please check out the plugin pages for more details about these plugins below:-->
<script src="lib/statistics/easypiechart/easypiechart.bundle.js"></script>
<!--Bajascript-->
<script src="js/bajascript/bscriptReq.js"></script>
<!--<script type='text/javascript' src='/module/js/com/tridium/js/ext/require/require.min.js?version=1496767636459'></script>-->
<script src='js/bajascript/require.js'></script>
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script>
<script src="js/forge/forgemodel.js"></script>
<script src="js/yourteam/plugins/yt-alert/ytpop-alert.js"></script>
<script type='text/javascript'>
define('niagaraSystemProperties', function () {
return {
};
});
</script>
<script src="js/n4js/bajatest.js"></script>
<script src="js/n4js/electricmeterbaja.js"></script>
<script src="js/bajascript/require.config.js"></script>
<script src="js/FileSaver.js"></script>
<script>
/*$('#js-page-content').smartPanel();*/
var cookies = null;
var jwt = null;
var loadingTip = '';
var pageAct = {}; //記錄全頁面已選擇項目
pageAct.AreaTag = "";
if (location.href.indexOf("ord") != -1) {
location.href = "/file/index.html"
}
// 執行初步 Loading
var loadEle = pageLoading();
/**
* 頁面 Loading 建立
* */
function pageLoading(text = null) {
let background = $(`<div class="loading-bg"></div>`);
let aleObj = YT.Alert.Tip(text || "讀取中，請稍後", "show");
$(background)[0]._aleObj = aleObj;
$("body").css("overflow", "hidden");
$("body .page-content-wrapper").append(background);
$(background).animate({ opacity: 1 }, 300);
return background;
}
try {
$(function () {
// 二次引用 jquery.js
// - 在 require 內部程序需要引用 jquery，由於 require 的套件需要依賴 jquery ，就算 HTML 已經引用 jquery， require 也無法參考
// - 上方 HTML 引用套件若有使用 jquery 內存數據程序 (ex: $(x).data() , $(x).trigger("custom event") , $.fn.custom ...)
// - 會被清洗，有類似程序需放入 loadPack1 Function rquired 引用
// (原 datatable.bundle.js require 會出問題，先以 cdn datatable.min.js引用)
require(["jquery"], loadedBasePack);
})
/**
* jquery.js 二次引用後 Callback，載入第三方套件
* */
function loadedBasePack() {
require(
[
"lib/bootstrap/bootstrap.bundle.min",
"lib/app.bundle",
"lib/app.menu",
"datatables.net.b4",
"n4js/alarmbaja",
"n4js/historybaja",
"lib/statistics/flot/flot.bundle",
"lib/statistics/peity/peity.bundle",
"lib/jquery-validation/dist/jquery.validate",
"lib/jquery-validation/dist/additional-methods.min",
"lib/jquery-validation/dist/localization/messages_zh_TW",
"lib/chart.js/Chart.min",
"lib/dropzone/dropzone-min",
"lib/jstree-master/jstree.min",
], loadedMasterPack);
}
/**
* 第三方套件引用後 Callback，載入額外套件
* */
function loadedMasterPack() {
require(
[
"yourteam/yourteam.utility.class",
"yourteam/yourteam.ajax.class",
"yourteam/yourteam.jquery.datatables",
"yourteam/plugins/yt-tooltip/yt-tooltip",
"yourteam/plugins/yt-tab/yt-tab",
"style",
], function () {
require(["init", "site"], loadedJsPack)
});
}
/**
* 全數套件讀取完成 Callback
* */
function loadedJsPack() {
cookies = new YourTeam.Utility.Cookie();
jwt = cookies.get("JWT-Authorization");
pageAct.AreaTag = initAreaTag;
loadEvent();
if (!jwt) {
if (location.href.indexOf("localhost:5966") != -1) {
location.href = "login.html";
}
myBaja = new MyBaja();
myBaja.setMyUserAccount(Login);
} else {
isValidLogin();
}
$(loadEle).Loading("close");
}
/**
* 登入驗證完成 Callback
* */
function isValidLogin() {
$("#app").load("_dashboard.html", loadCallback);
iniFroList();
showMainSys();
getBuiList();
getSysMonBtnList();
checkDevState();
function getBuiList() {
let url = baseApiUrl + "/api/Device/GetBuild";
ytAjax = new YourTeam.Ajax(url, null, function (res) {
if (!res || res.code != "0000" || !res.data) {
} else {
let strHtml = ``;
$.each(res.data, (index, buiObj) => {
strHtml += `<a id="buiBtn${buiObj.building_tag}" data-urn="${buiObj.urn_3D}" class="dropdown-item" href="javascript:;">${buiObj.full_name}</a>`;
})
$("#buiList").append(strHtml).droSetItem(); //droSetItem 預設第一筆 active
}
}, null, "POST").send();
}
//lily test
function checkDevState() {
//TPE_B1_LT_L1
//main_system_tag: pageAct.sysMainTag,
//building_tag: pageAct.buiTag,
//floor_tag: pageAct.floTag,
let systemPath = "TPE_B1";
// if (pageAct != undefined && pageAct != null && pageAct.sysMainTag != null && pageAct.buiTag != null) {
// systemPath = "TPE_" + pageAct.buiTag + "_" + pageAct.sysMainTag + "_" + "EL";
// }
getOneSystemAlarmStateByBaja(systemPath, callbackForCheckDevState);
// console.log("systemP: " + systemPath);
// console.log("devList: " + deviceList[0].device_guid + ", " + deviceList[3].device_guid + ", " + deviceList[8].device_guid);
//callbackForCheckDevState("test");
}
function callbackForCheckDevState(result) {
console.log("------ " + result);
// $.each(deviceList, (index, devObj) => {
// if ((`${devObj.device_guid}`) == '4ed28a93-5025-11ed-b23e-0242ac110002'
// || (`${devObj.device_guid}`) == '5d9fdff0-5343-43fe-86f4-bd73cdb15111') {
// var str = "";
// $(`#${devObj.device_guid}`).empty();
// str = `<span class="status status-danger d-inline-block"><img src="${baseImgUrl + varPathImg + devObj.device_master_icon}" class="profile-image rounded-circle" onerror="defDev(this)" alt="..."></span> ${devObj.full_name}`;
// $(`#${devObj.device_guid}`).append(str);
// }
// })
console.log(result);
}
}
// page loaded callback
function loadCallback() {
initTabsByEle();
resetYTTooltip();
}
// 事件先行讀取
function loadEvent() {
onEvent("click", "[name=topFunBtn]", function () {
_ytTabInited = [];
let page = $(this).data("page");
if (page != "systemMonitor") {
$("#sysMonBtnList .dropdown-item").removeClass("active");
pageAct.sysMainTag = null;
}
$.each(tolSubList, (idx, sub) => {
sub.unsubscribeAll();
sub.detach();
})
tolSubList=[];
endPageLoading();
$(".yt-alert").YTAlert().hide();
if (typeof timeOuters != "undefined") {
$.each(timeOuters, (idx, timeOut) => {
clearInterval(timeOut);
})
timeOuters = [];
}
$("#app").load(`_${page}.html`, loadCallback);
})
onEvent("click", "#logout", function () {
localStorage.removeItem("JWT-Authorization");
location.href = "/logout";
})
onEvent("active:change", "#sysMonBtnList", function (e, actEle) {
if (actEle) {
pageAct.sysMainTag = $(actEle).data("subSysObj").main_system_tag;
pageAct.sysSubTag = $(actEle).data("subSysObj").sub_system_tag;
pageAct.sysSubName = $(actEle).data("subSysObj").full_name;
pageAct.sysSubObj = $(actEle).data("subSysObj");
}
})
onEvent("active:change", "#buiList", function (e, actEle) {
if (actEle) {
pageAct.buiTag = $(actEle).prop("id").split("buiBtn")[1];
pageAct.urn = $(actEle).data("urn");
}
})
onEvent("yt:tab:change", "#lightSch-tab", function () {
if (pageAct.sysMainTag == "LT" && $("#lightSchModal").length != 0) {
loadLightSchTable();
$("#lightSchModal").modal("show");
}
})
onEvent("click", "#testsysbtn", function () {
})
$(window).on("timeout:3s", function () {
getSystemAlarmByBaja((data) => {
if (typeof getAlarmSub != "undefined" && getAlarmSub) {
getAlarmSub(data);
}
alarmIconBlink();
})
})
}
// 登入驗證
function Login(account) {
console.log(account)
/*if ($("#login-form").valid()) {*/
var url = baseApiUrl + "/api/Login/";
var send_data = {
account: account,
password: "rJ2T5Kkj"
}
if (location.href.indexOf("localhost:5966") != -1) {
location.href = "login.html";
}
$.ajax({
method: "post",
url: url,
data: JSON.stringify(send_data),
async: false,
contentType: "application/json; charset=UTF-8",
dataType: 'json',
success: function (rel) {
if (rel.code != "0000") {
toast_error(rel.msg || "系統內部發生錯誤，請聯絡系統管理員");
return;
}
else {
/*toast_ok(rel.msg);*/
cookies.create("JWT-Authorization", rel.data.token, 12 * 60 * 60 * 1000);
isValidLogin();
}
},
error: function (xhr, textStatus, thrownError) {
alert(textStatus);
}
});
}
//==============================================================================
// ↓ 系統監控 - 共用 Function ↓
//==============================================================================
// Card - 基本資料 Table
function drawInfoTabBlo(devGuid) {
let tabEle = $(`<table class="table table-bordered table-striped text-center m-0">`);
let tbody = tabEle.append("<tbody>");
let columnNames = ["設備編號", "設備名稱"];
$.each(columnNames, (index, colName) => {
let tr = $("<tr></tr>");
let td = $("<td></td>");
td.text(colName);
tr.append(td);
tbody.append(tr);
})
let url = baseApiUrl + "/api/Device/GetBaseDevice";
let sendData = {
device_guid: devGuid,
};
objSendData.Data = sendData;
ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
if (!res || res.code != "0000" || !res.data) {
} else {
tbody.find("tr").eq(0).append(creEle("td", res.data.device_number));
tbody.find("tr").eq(1).append(creEle("td", res.data.full_name));
}
}, null, "POST").send();
return tabEle.prop("outerHTML");
}
// Card - 異常紀錄 block
function drawErrRecTabBlo() {
let strHtml = `<table id="errRecTable" class="table table-bordered table-striped text-center m-0 w-100">
</table>`
return strHtml;
}
// Card - 運維紀錄 block
function drawOpeRecTabBlo() {
let strHtml = `<table id="opeRecTable" class="table table-bordered table-striped text-center m-0 w-100">
</table>`
return strHtml;
}
// Card 呈現初始化
function initPopover(type = null, extOption = {},selector = "[name=devItem]") {
$(selector).each((index, ele) => {
let devNum = $(ele).data("number"); //設備編號
let devGuid = $(ele).data("id"); //guid
let devName = $(ele).data("name"); //full_name
let lightHtml = type == "light" ? `<button type="button" id="lightSch-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#lightSch"><i class="fas fa-calendar-alt"></i></button>` : "";
let option = {
html: `<div class="card m-1 border device-wrap">
<div class="card-header p-3">
<div class="position-absolute w-50" style="word-break: break-all;">
<label class="m-0 mt-2">${devName}</label>
</div>
<div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist">
<button type="button" id="state-tab" class="btn btn-icon nav-link active" role="tab" data-tabname="cardTab" data-target="#state"><i class="fa fa-desktop icon"></i></button>
${lightHtml}
<button type="button" id="info-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#info"><i class="fa fa-cog icon"></i></button>
<button type="button" id="errRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#errRec"><i class="fas fa-exclamation-triangle"></i></button>
<button type="button" id="opeRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon"></i></button>
<button class="btn p-2"><i class="fas fa-times fs-1 text-white-50" data-close="yttooltip"></i></button>
</div>
</div>
<div class="card-body p-2 tab-content">
<div id="state" class="show active" data-tabname="cardTab" data-tabrole="child">
${drawStateTabBlo(devNum)}
</div>
<div id="info" data-tabname="cardTab" data-tabrole="child">
</div>
<div id="errRec" data-tabname="cardTab" data-tabrole="child">
${drawErrRecTabBlo()}
</div>
<div id="opeRec" data-tabname="cardTab" data-tabrole="child">
${drawOpeRecTabBlo()}
</div>
</div>
</div>`,
group: "device",
onShow: function (tooltipEle, oriEle) {
var tab = new YT.Tab({ tabName: "cardTab" })
loadOpeRecTable(devGuid);
//loadErrRecTable2($(oriEle).data("number"));
//loadErrRecTable();
loadErr($(oriEle).data("number"));
$(tooltipEle).find("#info").html(typeof drawInfoTabBlo != "undefined" ? drawInfoTabBlo(devGuid) : "");
changeColorForHotspot($(oriEle).data("dbId"));
changeScaleForHotspot($(oriEle).data("dbId"));
typeof subDeviceSetTable != "undefined " ? subDeviceSetTable($(oriEle).data("number")) : ""
},
onHide: function (tooltipEle, oriEle) {
changeColorForHotspot($(oriEle).data("dbId"),false);
changeScaleForHotspot($(oriEle).data("dbId"),false);
}
};
$.extend(option, extOption);
$(ele).YTTooltip(option);
})
}
// Card - 運維紀錄 Table
function loadOpeRecTable(devGuid) {
let url = baseApiUrl + "/api/Device/GetOpeDevice?device_guid=" + devGuid;
let tag = "#opeRecTable";
let column_defs = [
{ "targets": [0], "width": "8%", "sortable": true },
{ "targets": [1], "width": "8%", "sortable": true },
{ "targets": [2], "width": "7%", "sortable": true },
{ "targets": [3], "width": "7%", "sortable": true },
];
let columns = [
{
"title": "類型",
"data": "work_type_name",
},
{
"title": "項目",
"data": "fix_do",
},
{
"title": "處理人員",
"data": "work_person_name",
},
{
"title": "發生/完成時間",
"data": "finishTime",
"render": function (data, type, row) {
return row.createdAt + "<br>" + data;
},
},
];
let opeRecTable = new YourTeam.JqDataTables.getTableByAjax(url, tag, null, columns, column_defs, null, null, null, null, null, null, "tpi");
}
function loadLightSchTable(devGuid) {
/*let url = baseApiUrl + "/api/Device/GetOpeDevice?device_guid=" + devGuid;*/
let url = `https://63772efc5c47776512165937.mockapi.io/api/GetLightSche`;
let tag = "#lightSchTable";
let column_defs = [
{ "targets": [0], "width": "14%", "sortable": true },
{ "targets": [1], "width": "14%", "sortable": true },
{ "targets": [2], "width": "14%", "sortable": true },
{ "targets": [3], "width": "14%", "sortable": true },
{ "targets": [4], "width": "14%", "sortable": true },
{ "targets": [5], "width": "14%", "sortable": true },
{ "targets": [6], "width": "16%", "sortable": true },
];
let columns = [
{
"title": "序號",
"data": null,
"render": function (data, type, row,meta) {
return meta.row + 1;
},
},
{
"title": "排程名稱",
"data": "sch_name",
},
{
"title": "設備數量",
"data": "dev_cnt",
},
{
"title": "排程設定",
"data": "sch_set",
},
{
"title": "動作",
"data": "action",
},
{
"title": "狀態",
"data": "status",
},
{
"title": "功能",
"data": "sch_id",
"render": function (data, type, row) {
let btnDiv = creDiv(["row", "m-0", "justify-content-center"], { "style": "gap:10px" });
let icon = creI(["fas", "fa-pencil-alt"]);
btnDiv.append(creBtnHtml("觸發執行", "lightSchTabTogBtn" + data, null, ["btn", "btn-success"]));
btnDiv.append(creBtn("修改", "lightSchTabEdiBtn" + data, null, ["btn", "btn-danger"], { "toggle": "modal", "target": "#delModal" }).append(icon));
return btnDiv.outerHtml();
},
},
];
let lightSchTable = new YourTeam.JqDataTables.getTableByAjax(url, tag, null, columns, column_defs, null, null, null, null, null, null, "tpi");
}
// Baja 取得異常紀錄
function loadErr(allPath) {
if (allPath != undefined && allPath != null) {
let _pathArr = allPath.split("_");//TPE_B1_ELEV_EL_R2F_NA_ELEV1_N1
let _devicePath = _pathArr[0] + "_" + _pathArr[1] + "_" + _pathArr[2] + "_" + _pathArr[3] + "_" + _pathArr[4] + "_" + _pathArr[5];
getOneDeviceAlarmTop10ByBaja(_devicePath, callbackForErr);
}
else {
console.log("no device");
}
}
// Card - 異常紀錄 Table
function callbackForErr(result) {
let tag = "#errRecTable";
let datas;
let column_defs = [
{ "targets": [0], "width": "15%", "sortable": true },
{ "targets": [1], "width": "25%", "sortable": true },
{ "targets": [2], "width": "25%", "sortable": true },
{ "targets": [3], "width": "35%", "sortable": true },
];
let columns = [
{
"title": "異常ID",
"data": "uuid",
},
{
"title": "異常原因",
"data": "msgText",
},
{
"title": "ACK確認",
"data": "ackState",
},
{
"title": "發生/完成時間",
"data": "normalTime",
"render": function (data, type, row) {
return row.timestamp + "<br>" + data;
},
},
];
let json_object = JSON.parse(result);
datas = json_object['data'];
errRecTable = new YourTeam.JqDataTables.getTableByStatic(tag, datas, columns, column_defs, null, null, null, null, "tpi");
}
//根據 data-type 設置顏色 (判斷後台是否有設定，若無則帶預設)
function setLightColor() {
$(".dev-card").each((index, ele) => {
let type = $(ele).find("[data-light-type]").data("light-type");
let isFlashing = false;
let color = "#000";
switch (type) {
case "normal":
color = pageAct.sysSubObj.device_normal_color ?? "var(--theme-success)";
isFlashing = pageAct.sysSubObj.device_normal_flashing == "1";
break;
case "close":
color = pageAct.sysSubObj.device_close_color ?? "var(--theme-secondary)";
isFlashing = pageAct.sysSubObj.device_close_flashing == "1";
break;
case "error":
color = pageAct.sysSubObj.device_error_color ?? "var(--theme-danger)";
isFlashing = pageAct.sysSubObj.device_error_flashing == "1";
break;
}
$(ele).find("[data-light-type]").css("background-color", color);
//是否閃爍
if (isFlashing) {
$(ele).addClass("light-flash");
}
})
}
//==============================================================================
// ↑ 系統監控 - 共用 Function ↑
//==============================================================================
} catch (e) {
$(loadEle).Loading("close");
}
function alarmIconBlink(data) {
if (data?.data.length != 0) {
$(".page-header [name=topFunBtn][data-page=alert] i").addClass("blink");
} else {
$(".page-header [name=topFunBtn][data-page=alert] i").removeClass("blink");
}
}
function timeOutGetData() {
let timeOut3s = null, timeOut5m = null;
let events = $._data($(window)[0], "events");
if (Object.keys(events).findIndex(x => x == "timeout:3s") != -1) {
timeOut3s = setInterval(() => {
$(window).trigger("timeout:3s");
}, 3000)
}
if (Object.keys(events).findIndex(x => x == "timeout:5m") != -1) {
timeOut5m = setInterval(() => {
$(window).trigger("timeout:5m");
}, 5 * 60 * 1000)
}
timeOuters = timeOuters.concat([timeOut3s, timeOut5m]);
}
function showMainSys() {
let url = baseApiUrl + "/Utility/isShowMaiSys";
ytAjax = new YourTeam.Ajax(url, null, function (res) {
if (!res || res.code != "0000") {
} else {
pageAct.mainStatus = res.data;
}
}, null, "POST").send();
}
function startPageLoading() {
if (!loadingTip) {
loadingTip = YT.Alert.Tip("資料讀取中...", "show");
}
}
function endPageLoading() {
if (loadingTip != null) {
$(loadingTip.ele).YTAlert().hide();
loadingTip = null;
}
}
function iniFroList() {
url = baseApiUrl + '/api/GetUsrFroList'
let hasMonitor = false;
ytAjax = new YourTeam.Ajax(url, null, function (res) {
if (!res || res.code != "0000" || !res.data) {
} else {
let strHtml = `<div class="btn-group mx-4">
<a href="javascript:;" name="topFunBtn" data-page="dashboard" class="text-center">
<i class="fal fa-home fa-2x"></i><br>首頁
</a>
<!--<div class="dropdown-menu">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>-->
</div>`;
$.each(res.data, function (i, v) {
if (v.authCode == 'PF1') {
strHtml += `<div class="btn-group mx-4" >
<a href="javascript:;" class="dropdown-toggle no-arrow text-center" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="fal fa-tv fa-2x"></i><br>${v.subName}
</a>
<div class="dropdown-menu dropdown-select-menu js-auto-close" id="${v.showView}">
</div>
</div>`;
hasMonitor = true;
}
else {
let icon = v.authCode == 'PF2' ? 'fa-chart-pie' : v.authCode == 'PF3' ? 'fa-chart-area' : v.authCode == 'PF4' ? 'fa-bell' : v.authCode == 'PF5' ? 'fa-server' : v.authCode == 'PF6' ? 'fa-image' : v.authCode == 'PF7' ? 'fa-user' : '';
strHtml += `<div class="btn-group mx-4">
<a href="javascript:;" name="topFunBtn" class="dropdown-toggle no-arrow text-center"
data-page="${v.showView}">
<i class="fal ${icon} fa-2x"></i><br>${v.subName}
</a>
</div>`;
}
});
$('#froLisPage').html(strHtml);
}
}, null, "POST").send();
}
function getSysMonBtnList() {
let url = baseApiUrl + "/api/Device/GetMainSub";
let sendData = {
building_tag: pageAct.buiTag,
};
objSendData.Data = sendData;
ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
console.log(res);
if (!res || res.code != "0000" || !res.data) {
} else {
$("#sysMonBtnList").html("")
$.each(res.data.history_Main_Systems, (index, mainSysObj) => {
$.each(mainSysObj.history_Sub_systems, (index2, subSysObj) => {
let page = "systemMonitor";
if (subSysObj.sub_system_tag == "EL") {
page = "sysElevator";
}
let btn = creBtn(subSysObj.full_name, `subSysBtn${subSysObj.sub_system_tag}`, "topFunBtn", ["dropdown-item"], { page: page });
subSysObj.main_system_tag = mainSysObj.main_system_tag;
btn.data("subSysObj", subSysObj);
$("#sysMonBtnList").append(btn);
})
})
}
}, null, "POST").send();
}
</script>
</body>
<!-- END Body -->
</html>
Reference in New Issue View Git Blame Copy Permalink