hap-homematic
Version:
provides a homekit bridge to the ccu
258 lines (228 loc) • 10.9 kB
HTML
<!--
* hap-homematic admin console
*
* https://github.com/thkl/hap-homematic
*
* based on CoreUI - Free Bootstrap Admin Template
* @version v3.0.0
* @link https://coreui.io
* Copyright (c) 2020 creativeLabs Łukasz Holeczek
* Licensed under MIT (https://coreui.io/license)
-->
<html lang="en">
<head>
<base href="./">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>HAP-HomeMatic Configuration</title>
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="assets/favicon/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<link href="css/style.css" rel="stylesheet">
<!-- Main styles for this application-->
<link href="css/application.css" rel="stylesheet">
<link href="css/free.min.css" rel="stylesheet">
</head>
<body class="c-app">
<div class="c-sidebar c-sidebar-dark c-sidebar-fixed c-sidebar-lg-show" id="sidebar">
<div class="c-sidebar-brand">
<img src="img/logo_white_2.png" class="c-sidebar-brand-full" style="max-height: 35px;margin-right: 5px;"/>
<img src="img/logo_white_2.png" class="c-sidebar-brand-minimized" style="max-height: 35px;margin-right: 5px;margin-left: 5px;"/>
<span class="c-sidebar-brand-full">HAP-HomeMatic</span>
</div>
<ul class="c-sidebar-nav">
<li class="c-sidebar-nav-item">
<a class="c-sidebar-nav-link" id="showDevices" style="cursor:pointer;">
<i class="c-icon c-icon-lg mt-2 ml-1 mr-3 mb-2 cil-devices"></i>
<span data-localize="Devices">Devices</span>
</a>
</li>
<li class="c-sidebar-nav-item">
<a class="c-sidebar-nav-link" id="showVariables" style="cursor:pointer;">
<i class="c-icon c-icon-lg mt-2 ml-1 mr-3 mb-2 cil-apps"></i>
<span data-localize="Variables">Variables</span>
</a>
</li>
<li class="c-sidebar-nav-item">
<a class="c-sidebar-nav-link" id="showPrograms" style="cursor:pointer;">
<i class="c-icon c-icon-lg mt-2 ml-1 mr-3 mb-2 cil-memory"></i>
<span data-localize="Programs">Programs</span>
</a>
</li>
<li class="c-sidebar-nav-item">
<a class="c-sidebar-nav-link" id="showSpecialDevices" style="cursor:pointer;" >
<i class="c-icon c-icon-lg mt-2 ml-1 mr-3 mb-2 cil-pizza"></i>
<span data-localize="Special devices">Special devices</span>
</a>
</li>
<li class="c-sidebar-nav-dropdown">
<a class="c-sidebar-nav-dropdown-toggle" style="cursor:pointer;">
<i class="c-icon c-icon-lg mt-2 ml-1 mr-3 mb-2 cil-factory"></i>
<span data-localize="HomeKit Instances">HomeKit Instances</span>
</a>
<ul class="c-sidebar-nav-dropdown-items">
<li class="c-sidebar-nav-item">
<a class="c-sidebar-nav-link" style="cursor:pointer;" id="hapInstances" >
<i class="c-icon c-icon-lg mt-2 ml-1 mr-3 mb-2 cil-fork"></i>
<span data-localize="Edit instances">Edit instances</span>
</a>
</li>
<li class="c-sidebar-nav-item">
<a class="c-sidebar-nav-link" style="cursor:pointer;" id="publishingSettings">
<i class="c-icon c-icon-lg mt-2 ml-1 mr-3 mb-2 cil-settings"></i>
<span data-localize="Settings">Settings</span>
</a>
</li>
</ul>
</li>
<li class="c-sidebar-nav-dropdown">
<a class="c-sidebar-nav-dropdown-toggle" style="cursor:pointer;">
<i class="c-icon c-icon-lg mt-2 ml-1 mr-3 mb-2 cil-3d"></i>
<span data-localize="Internals">Internals</span>
</a>
<ul class="c-sidebar-nav-dropdown-items" style="top:-200px">
<li class="c-sidebar-nav-item">
<a class="c-sidebar-nav-link" style="cursor:pointer;" id="btn_settings">
<i class="c-icon c-icon-lg mt-2 ml-1 mr-3 mb-2 cil-cog"></i>
<span data-localize="Settings">Settings</span>
</a>
</li>
<li class="c-sidebar-nav-item">
<a class="c-sidebar-nav-link" style="cursor:pointer;" id="btn_changelog">
<i class="c-icon c-icon-lg mt-2 ml-1 mr-3 mb-2 cil-description"></i>
<span data-localize="Show changelog">Show changelog</span>
</a>
</li>
<li class="c-sidebar-nav-item">
<a class="c-sidebar-nav-link" style="cursor:pointer;" id="btn_debug">
<i class="c-icon c-icon-lg mt-2 ml-1 mr-3 mb-2 cil-gauge"></i>
<span id="lbl_btn_debug" data-localize="Enable Debug">Enable Debug</span>
</a>
</li>
<li class="c-sidebar-nav-item">
<a class="c-sidebar-nav-link" style="cursor:pointer;" id="btn_dnlog">
<i class="c-icon c-icon-lg mt-2 ml-1 mr-3 mb-2 cil-image-broken"></i>
<span data-localize="Download Log">Download Log</span></a>
</li>
<li class="c-sidebar-nav-item">
<a class="c-sidebar-nav-link" style="cursor:pointer;" id="btn_support">
<i class="c-icon c-icon-lg mt-2 ml-1 mr-3 mb-2 cil-life-ring"></i>
<span data-localize="Support">Support</span></a>
</li>
<li class="c-sidebar-nav-item">
<a class="c-sidebar-nav-link" style="cursor:pointer;" id="btn_backup">
<i class="c-icon c-icon-lg mt-2 ml-1 mr-3 mb-2 cil-save"></i>
<span data-localize="Backup">Backup</span></a>
</li>
<li class="c-sidebar-nav-item">
<a class="c-sidebar-nav-link" style="cursor:pointer;" id="btn_refreshCache">
<i class="c-icon c-icon-lg mt-2 ml-1 mr-3 mb-2 cil-audio"></i>
<span data-localize="Refresh CCU Cache">Refresh CCU Cache</span></a>
</li>
<li class="c-sidebar-nav-item">
<a class="c-sidebar-nav-link" style="cursor:pointer;" id="btn_restart">
<i class="c-icon c-icon-lg mt-2 ml-1 mr-3 mb-2 cil-reload"></i>
<span data-localize="Restart HAP Service">Restart HAP Service</span></a>
</li>
</ul>
</li>
</ul>
<button class="c-sidebar-minimizer c-class-toggler" type="button" data-target="_parent" id="sidebartoggler" data-class="c-sidebar-minimized"></button>
</div>
<div class="c-wrapper">
<div style="position: absolute; top: 0; right: 0;z-index: 2000;">
<div class="toast fade hide info" id="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="mr-auto">Info</strong>
<button type="button" class="ml-2 mb-1 close info" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body" id="toastMessage">
Oh, hi there
</div>
</div>
</div>
<header class="c-header c-header-light c-header-fixed c-header-with-subheader">
<!-- c-sidebar-show -->
<button class="c-header-toggler c-class-toggler d-lg-none mfe-auto" type="button" data-target="#sidebar" data-class="c-sidebar-show">
<i class="c-icon c-icon-lg mt-2 ml-1 mr-3 mb-2 cil-burger"></i>
</button>
<div class="c-subheader px-3 roe-padding">
<!-- Breadcrumb-->
<ol class="breadcrumb border-0 m-0">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item"><a>HAP-HomeMatic</a></li>
<li class="breadcrumb-item active" id="breadcrum_page">Devices</li>
<!-- Breadcrumb Menu-->
</ol>
</div>
</header>
<div class="c-body">
<main class="c-main">
<div class="container-fluid">
<div class="fade-in">
<div class="row">
<div class="col-sm-6 col-lg-4">
<div class="card text-white bg-gradient-primary">
<div class="card-body card-body pb-0 d-flex justify-content-between align-items-start" id="deviceOverview" style="min-height: 200px;">
<br />
</div>
</div>
</div>
<!-- /.col-->
<div class="col-sm-6 col-lg-4">
<div class="card text-white bg-gradient-info">
<div class="card-body card-body pb-0 d-flex justify-content-between align-items-start" id="bridgeOverview" style="overflow-y:auto;max-height:200px;min-height: 200px;">
</div>
</div>
</div>
<!-- /.col-->
<div class="col-sm-6 col-lg-4">
<div class="card text-white bg-gradient-warning">
<div class="card-body card-body pb-0 d-flex justify-content-between align-items-start" id="sysOverview" style="min-height: 200px;">
</div>
</div>
</div>
<!-- /.col-->
</div>
<!-- /.row-->
<div class="card">
<div class="card-header">
<h2 id="containerTitle"></h2>
</div>
<div class="card-body" id="container">
</div>
<div class="card-footer" id="container_footer">
</div>
</div>
</div>
</div>
</main>
<footer class="c-footer">
(c) <span id="footer_year"></span> by thkl | <a target="_blank" href="https://github.com/thkl/hap-homematic">https://github.com/thkl/hap-homematic</a>
</footer>
</div>
</div>
<!-- CoreUI and necessary plugins-->
<script src="js/coreui.bundle.min.js"></script>
<!-- Plugins and scripts required by this view-->
<script src="js/coreui-utils.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/charts.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-notify.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/sockjs.min.js"></script>
<script src="js/showdown.min.js"></script>
<script src="js/qrcode.js"></script>
<script type="module">
$('#footer_year').html(' '+ new Date().getFullYear() + ' ')
import { Application } from './js/application.js'
let app = new Application()
app.run()
</script>
</body>
</html>