255 lines
17 KiB
HTML
255 lines
17 KiB
HTML
<html>
|
|
<head>
|
|
<link rel="stylesheet" href="https://unpkg.com/carbon-components/css/carbon-components.min.css" ></style>
|
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
|
|
<style>.hidden{display:none} .bx--form-item{margin-bottom:20px};</style>
|
|
</head>
|
|
<body>
|
|
<header class="cv-header bx--header">
|
|
<a href="index.html" class="cv-header-name bx--header__name">
|
|
<span class="bx--header__name--prefix">Printer Buddy </span>
|
|
V4.0
|
|
</a>
|
|
<nav class="cv-header-nav bx--header__nav"></nav>
|
|
<div class="bx--header__global">
|
|
<button type="button" class="cv-header-global-action bx--header__action" onclick="openWifiInfo()">
|
|
<i class="fas fa-wifi" style="color: white; font-size: 20px;"></i>
|
|
</button>
|
|
<button type="button" class="cv-header-global-action bx--header__action" onclick="openSidebar()">
|
|
<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="20" height="20" viewBox="0 0 32 32" aria-hidden="true">
|
|
<path d="M14 4H18V8H14zM4 4H8V8H4zM24 4H28V8H24zM14 14H18V18H14zM4 14H8V18H4zM24 14H28V18H24zM14 24H18V28H14zM4 24H8V28H4zM24 24H28V28H24z"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div aria-hidden="false" id="sidebar" class="cv-header-panel bx--header-panel">
|
|
<ul class="cv-switcher bx--switcher__item">
|
|
<li class="cv-switcher-item bx--switcher__item"><a class="cv-switcher-item-link bx--switcher__item-link" href="/"><i class="fa fa-home"></i> Home</a></li>
|
|
<li class="cv-switcher-item bx--switcher__item"><a class="cv-switcher-item-link bx--switcher__item-link" href="/configure"><i class="fa fa-cog"></i> Configure</a></li>
|
|
<li class="cv-switcher-item bx--switcher__item"><a class="cv-switcher-item-link bx--switcher__item-link" href="/configureweather"><i class="fa fa-cloud"></i> Weather</a></li>
|
|
<li class="cv-switcher-item bx--switcher__item"><a class="cv-switcher-item-link bx--switcher__item-link" href="/systemreset" onclick="return confirm("Do you want to reset to default settings?")"><i class="fa fa-undo"></i> Reset Settings</a></li>
|
|
<li class="cv-switcher-item bx--switcher__item"><a class="cv-switcher-item-link bx--switcher__item-link" href="/forgetwifi" onclick="return confirm("Do you want to forget to WiFi connection?")"><i class="fa fa-wifi"></i> Forget WiFi</a></li>
|
|
<li class="cv-switcher-item bx--switcher__item"><a class="cv-switcher-item-link bx--switcher__item-link" href="/update"><i class="fa fa-wrench"></i> Firmware Update</a></li>
|
|
<li class="cv-switcher-item bx--switcher__item"><a class="cv-switcher-item-link bx--switcher__item-link" href="https://github.com/Qrome" target="_blank"><i class="fa fa-question-circle"></i> About</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="bx--toast-notification bx--toast-notification--info hidden" style="position: absolute; right: -16px; top: 40px;" id="wifiinfo">
|
|
<div class="bx--toast-notification__details">
|
|
<h3 class="bx--toast-notification__title">WiFi Signal Strength</h3>
|
|
<div class="bx--toast-notification__subtitle">
|
|
<span>88%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="bx--grid bx--grid--full-width" style='margin-top:88px'>
|
|
<div class="page-header" style="margin-bottom:20px"><h4 class="page-header__label">Configure</h4><h1 id="page-title" class="page-header__title">Station</h1></div>
|
|
|
|
<div class="bx--row">
|
|
<div class="bx--col bx--col--auto bx--data-table-container " data-table>
|
|
<div class="bx--data-table-header">
|
|
<h4 class="bx--data-table-header__title">Printers to monitor</h4>
|
|
<p class="bx--data-table-header__description">Configuration</p>
|
|
</div>
|
|
|
|
<section class="bx--table-toolbar ">
|
|
<div class="bx--toolbar-content">
|
|
<button class="bx--btn bx--btn--sm bx--btn--primary">
|
|
Add new
|
|
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="20" height="20" viewBox="0 0 32 32" aria-hidden="true"><path d="M17 15L17 7 15 7 15 15 7 15 7 17 15 17 15 25 17 25 17 17 25 17 25 15 17 15z"></path></svg>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<table class="bx--data-table" >
|
|
<thead>
|
|
<tr>
|
|
<th><span class="bx--table-header-label">Name</span></th>
|
|
<th><span class="bx--table-header-label">Type</span></th>
|
|
<th><span class="bx--table-header-label">Hostname</span></th>
|
|
<th><span class="bx--table-header-label">IP</span></th>
|
|
<th><span class="bx--table-header-label">State</span></th>
|
|
<th><span class="bx--table-header-label">Api Key/User/Password</span></th>
|
|
<th class="bx--table-column-menu" style="width: 3.25rem"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>I3 Mega</td>
|
|
<td>Klipper</td>
|
|
<td>--</td>
|
|
<td>192.168.0.241:7125</td>
|
|
<td>Offline</td>
|
|
<td>Offline</td>
|
|
<td class="bx--table-column-menu" style="width: 3.25rem">
|
|
<div data-overflow-menu role="menu" tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
|
|
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--overflow-menu__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="3" r="1"></circle><circle cx="8" cy="8" r="1"></circle><circle cx="8" cy="13" r="1"></circle></svg>
|
|
<ul class="bx--overflow-menu-options bx--overflow-menu--flip" data-floating-menu-direction="bottom">
|
|
<li class="bx--overflow-menu-options__option bx--table-row--menu-option">
|
|
<button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
|
|
<div class="bx--overflow-menu-options__option-content">
|
|
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M1 13H15V14H1zM12.7 4.5c.4-.4.4-1 0-1.4 0 0 0 0 0 0l-1.8-1.8c-.4-.4-1-.4-1.4 0 0 0 0 0 0 0L2 8.8V12h3.2L12.7 4.5zM10.2 2L12 3.8l-1.5 1.5L8.7 3.5 10.2 2zM3 11V9.2l5-5L9.8 6l-5 5H3z"></path></svg> Edit
|
|
</div>
|
|
</button>
|
|
</li>
|
|
<li class="bx--overflow-menu-options__option bx--table-row--menu-option">
|
|
<button class="bx--overflow-menu-options__btn" onclick="console.log('keyboard action')">
|
|
<div class="bx--overflow-menu-options__option-content">
|
|
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M6 6H7V12H6zM9 6H10V12H9z"></path><path d="M2 3v1h1v10c0 .6.4 1 1 1h8c.6 0 1-.4 1-1V4h1V3H2zM4 14V4h8v10H4zM6 1H10V2H6z"></path></svg> Delete
|
|
</div>
|
|
</button>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<form action="/updateweatherconfig" method="get">
|
|
<div class="bx--row">
|
|
<div class="bx--col bx--col--auto bx--form-item">
|
|
<input class="bx--toggle-input bx--toggle-input--small" id="isWeatherEnabled" type="checkbox" name="isWeatherEnabled">
|
|
<label class="bx--toggle-input__label" for="isWeatherEnabled"
|
|
aria-label="example toggle with state indicator text">
|
|
<span class="bx--toggle__switch">
|
|
<svg class="bx--toggle__check" width="6px" height="5px" viewBox="0 0 6 5">
|
|
<path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z" />
|
|
</svg>
|
|
<span class="bx--toggle__text--off" aria-hidden="true">Display Weather when printer is off deactivated</span>
|
|
<span class="bx--toggle__text--on" aria-hidden="true">Display Weather when printer is off activated</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="bx--row">
|
|
<div class="bx--col bx--col--auto bx--form-item">
|
|
<input class="bx--toggle-input bx--toggle-input--small" id="metric" type="checkbox" name="metric" checked="checked">
|
|
<label class="bx--toggle-input__label" for="metric"
|
|
aria-label="example toggle with state indicator text">
|
|
<span class="bx--toggle__switch">
|
|
<svg class="bx--toggle__check" width="6px" height="5px" viewBox="0 0 6 5">
|
|
<path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z" />
|
|
</svg>
|
|
<span class="bx--toggle__text--on" aria-hidden="true">Show in Celsius</span>
|
|
<span class="bx--toggle__text--off" aria-hidden="true">Show in Fahrenheit</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="bx--row">
|
|
<div class="bx--form-item bx--col bx--col--auto">
|
|
<label for="openWeatherMapApiKey" class="bx--label">OpenWeatherMap API Key (get from <a href="https://openweathermap.org/" target="_BLANK">here</a>)</label>
|
|
<input id="openWeatherMapApiKey" type="text"
|
|
class="bx--text-input"
|
|
name="openWeatherMapApiKey"
|
|
value="e6df83d1aa3df77420f265a2e263a5d3"
|
|
maxlength="60">
|
|
</div>
|
|
</div>
|
|
<div class="bx--row">
|
|
<div class="bx--form-item bx--col bx--col--auto">
|
|
<label for="city1" class="bx--label">Zeuthen (<a href="http://openweathermap.org/find" target="_BLANK"><i class="fa fa-search"></i> Search for City ID</a>)</label>
|
|
<input id="city1" type="text"
|
|
class="bx--text-input"
|
|
name="city1"
|
|
value="2804646"
|
|
onkeypress="return isNumberKey(event)">
|
|
</div>
|
|
</div>
|
|
<div class="bx--row">
|
|
<div class="bx--form-item bx--col bx--col--auto bx--select">
|
|
<label for="language" class="bx--label">Weather Language</label>
|
|
<div class="bx--select-input__wrapper">
|
|
<select id="language" class="bx--select-input" name="language">
|
|
<option class="bx--select-option">ar</option>
|
|
<option class="bx--select-option">bg</option>
|
|
<option class="bx--select-option">ca</option>
|
|
<option class="bx--select-option">cz</option>
|
|
<option class="bx--select-option" selected="">de</option>
|
|
<option class="bx--select-option">el</option>
|
|
<option class="bx--select-option">en</option>
|
|
<option class="bx--select-option">fa</option>
|
|
<option class="bx--select-option">fi</option>
|
|
<option class="bx--select-option">fr</option>
|
|
<option class="bx--select-option">gl</option>
|
|
<option class="bx--select-option">hr</option>
|
|
<option class="bx--select-option">hu</option>
|
|
<option class="bx--select-option">it</option>
|
|
<option class="bx--select-option">ja</option>
|
|
<option class="bx--select-option">kr</option>
|
|
<option class="bx--select-option">la</option>
|
|
<option class="bx--select-option">lt</option>
|
|
<option class="bx--select-option">mk</option>
|
|
<option class="bx--select-option">nl</option>
|
|
<option class="bx--select-option">pl</option>
|
|
<option class="bx--select-option">pt</option>
|
|
<option class="bx--select-option">ro</option>
|
|
<option class="bx--select-option">ru</option>
|
|
<option class="bx--select-option">se</option>
|
|
<option class="bx--select-option">sk</option>
|
|
<option class="bx--select-option">sl</option>
|
|
<option class="bx--select-option">es</option>
|
|
<option class="bx--select-option">tr</option>
|
|
<option class="bx--select-option">ua</option>
|
|
<option class="bx--select-option">vi</option>
|
|
<option class="bx--select-option">zh_cn</option>
|
|
<option class="bx--select-option">zh_tw</option>
|
|
</select>
|
|
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--select__arrow" width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><path d="M5 6L0 1 0.7 0.3 5 4.6 9.3 0.3 10 1z"></path></svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bx--row">
|
|
<div class="bx--form-item bx--col bx--col--auto">
|
|
<button class="bx--btn bx--btn--primary" type="submit">Save</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<script>function isNumberKey(e){var h=e.which?e.which:event.keyCode;return!(h>31&&(h<48||h>57))}</script>
|
|
<br><br><br>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script src="https://unpkg.com/carbon-components/scripts/carbon-components.min.js"></script>
|
|
|
|
<script>
|
|
function openSidebar() {
|
|
document.getElementById('sidebar').classList.toggle('bx--header-panel--expanded');
|
|
document.getElementById('wifiinfo').classList.add('hidden');
|
|
}
|
|
function openWifiInfo() {
|
|
document.getElementById('sidebar').classList.remove('bx--header-panel--expanded');
|
|
document.getElementById('wifiinfo').classList.toggle('hidden');
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html> |