@openhab-ui/setup-and-maintenance
Version:
Configuration and maintenance interface for openHAB
33 lines • 14.9 kB
HTML
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,user-scalable=yes"><link rel="icon" href="img/favicon.ico"><link rel="manifest" href="/manifest.json"><link rel="preload" href="fonts/fa-regular-400.woff2" as="font" type="font/woff2" crossorigin="anonymous"><link rel="preload" href="fonts/fa-solid-900.woff2" as="font" type="font/woff2" crossorigin="anonymous"><link rel="preload" href="fonts/roboto-v18-latin-ext_greek_cyrillic_cyrillic-ext_greek-ext_latin_vietnamese-regular.woff2" as="font" type="font/woff2" crossorigin="anonymous"><link rel="preload" href="fonts/roboto-v18-latin-ext_greek_cyrillic_cyrillic-ext_greek-ext_latin_vietnamese-500.woff2" as="font" type="font/woff2" crossorigin="anonymous"><link rel="preload" href="fonts/roboto-v18-latin-ext_greek_cyrillic_cyrillic-ext_greek-ext_latin_vietnamese-700.woff2" as="font" type="font/woff2" crossorigin="anonymous"><link rel="preload" href="img/pattern_opacity.png" as="image"><link rel="preload" href="img/openhab-logo.svg" as="image"><link rel="stylesheet" href="css/main.css" type="text/css"><link rel="stylesheet" href="css/main_deferred.css" type="text/css"><script type="module" src="js/app.js" async></script><script type="module" src="js/vue.js" async></script><script type="module" src="js/ohcomponents.js" async></script><script type="module" src="js/uicomponents.js" async></script><script type="module">async function applyTheme() {
if (localStorage.getItem("darktheme") === "true") {
let darkthemecss = document.getElementById("darkthemecss");
if (!darkthemecss) {
let head = document.getElementsByTagName('head')[0];
let link = document.createElement('style');
link.id = "darkthemecss";
link.innerHTML = await fetch('css/dark.css').then(d => d.text());
head.appendChild(link);
document.dispatchEvent(new Event("themechanged"));
}
} else {
let darkthemecss = document.getElementById("darkthemecss");
if (darkthemecss) darkthemecss.remove();
}
if (localStorage.getItem("widetheme") === "true") {
document.querySelector("body").classList.add("wide");
} else {
document.querySelector("body").classList.remove("wide");
}
window.requestAnimationFrame(() => {
window.dispatchEvent(new Event("resize"));
});
}
window.toggleWideTheme = function (event) {
event.preventDefault();
let isEnabled = localStorage.getItem("widetheme") === "true";
localStorage.setItem("widetheme", !isEnabled);
applyTheme();
}
applyTheme();
window.addEventListener('storage', e => { if (e.key == "darktheme") applyTheme(); });
document.addEventListener('themechange', e => applyTheme());</script><title>openHAB - Empowering the smart home</title><link rel="parent" href="rules.html" data-title="Rule list" data-idkey="uid"></head><body><link rel="stylesheet" href="css/rule.css" type="text/css"><link rel="stylesheet" href="css/config.css" type="text/css"><script type="module" src="js/ui-maps.js" async></script><script type="module" src="js/ui-time-picker.js" async></script><script type="module" src="js/ui-cron-expression.js" async></script><script type="module" src="js/ui-maps.js" async></script><script type="module" src="js/rule.js" async></script><nav class="sidebar leftright w-100 rule"><oh-list-bind for="componentslist" adapter="modeladapter_lists/modules" filtercriteria="label"></oh-list-bind><oh-vue-list id="componentslist"><div slot="app"><list></list></div><template slot="list"><h4 class="pt-5" style="flex-direction: column;align-items: center;" v-if="status == OhListStatus.PENDING_WAITING" slot="app">Loading<div class="loader"></div></h4><div class="pt-5" style="flex-direction: column;align-items: center;" v-else-if="status == OhListStatus.NOTCONNECTED_WAITING" slot="app"><h4><i class="fas fa-exclamation-circle"></i> Not connected</h4><div class="bs-callout bs-callout-info mt-4" style="display:inline-block;max-width: 500px">You are not connected to an openHAB instance. <a href="login.html">Connect now</a></div></div><div class="pt-5" style="flex-direction: column;align-items: center;" v-else-if="status == OhListStatus.ERROR" slot="app"><h4><i class="fas fa-exclamation-circle"></i> Loading failed</h4><div>{{message}}</div><div class="bs-callout bs-callout-info mt-4" style="display:inline-block;max-width: 700px"><p>An error while loading a list can happen because of multiple reasons.</p><dl><dt>A programming error</dt><dd>We are really sorry for that. Please report it in our bug-tracker, thank you.</dd><dt>Your openHAB doesn't understand</dt><dd>Please make sure this version is compatible to your openHAB version and you have installed all minimum-required Add-ons for this interface to work.</dd><dt>Your openHAB / internet is slow</dt><dd>We can't really do much here. A request times out after 5 seconds. Please find out why your openHAB is soo slow. Reload the page to try again.</dd></dl></div></div><div slot="app" v-else><input class="form-control my-2 mx-4 search" type="search" name="filter" placeholder="Search" title="Enter a search string" @input="filter = $event.target.value.trim()"><h3 class="trigger">Rule triggers</h3><div class="moduletypelist"><oh-vue-listitem v-for="item in triggersFiltered" v-if="item.visibility!='EXPERT'" :key="item.uid" :listitem="item"></oh-vue-listitem></div><h3 class="condition">Rule conditions</h3><div class="moduletypelist"><oh-vue-listitem v-for="item in conditionsFiltered" v-if="item.visibility!='EXPERT'" :key="item.uid" :listitem="item"></oh-vue-listitem></div><h3 class="action">Rule actions</h3><div class="moduletypelist"><oh-vue-listitem v-for="item in actionsFiltered" v-if="item.visibility!='EXPERT'" :key="item.uid" :listitem="item"></oh-vue-listitem></div></div></template><template slot="item"><button class="moduletype btn" :class="[{'btn-success-hover':isTrigger},{'btn-info-hover':isCondition},{'btn-danger-hover':isAction}]" draggable="true" @dragstart="dragstart" @dblclick="addToEditor" :data-uid="item.uid" :title="item.description">{{item.label}}</button></template></oh-vue-list></nav><header class="navbarui"><a class="sidebar-button" href="#" onclick="toggleSidebar(event)"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon" style="max-width: 20px;"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg> </a><a class="home" id="home" href="index.html"><div alt="openHAB" class="logo"></div></a><nav><oh-nav-auto-link></oh-nav-auto-link><div><a id="navmaintenance" href="maintenance.html">Maintenance</a></div><div><a id="navbindings" href="bindings.html">Add-ons</a></div><div><a id="navinbox" href="inbox.html" style="display: inline-flex;align-items: center;">Inbox<oh-form-bind adapter="modeladapter_forms/inboxcounter" objectid=""></oh-form-bind><oh-vue-form></oh-vue-form><template><span class="ml-2 badge badge-pill badge-orange">{{inboxcounter}}</span></template></a></div><div><a id="navthings" href="things.html">Things</a></div><div><a id="navitems" href="items.html">Items</a></div><div><a id="navscheduler" href="schedules.html">Scheduler</a></div><div><a id="navscenes" href="scenes.html">Scenes</a></div><div><a id="navrules" href="rules.html">Automation</a></div></nav></header><nav-ajax-page-load></nav-ajax-page-load><div id="alert-area" class="alert-area"></div><template id="alert-template"><div class="alert-box"><div class="alert-content"><slot></slot></div><a class="alert-close no-loader" data-close href="#"></a></div></template><section class="header"><div><oh-prop-bind attribute="label" queryparameter="title"></oh-prop-bind><nav-breadcrumb label="Add / Edit rule"></nav-breadcrumb></div><span class="link roundbtn" onclick="toggleWideTheme(event)"><i class="fas fa-arrows-alt-h"></i></span><oh-doc-link toggle class="link helpbtn roundbtn" title="Open/Close context help"><i class="fas fa-times"></i><i class="fas fa-question"></i></oh-doc-link></section><main class="rule"><div id="editor" class="modal fullscreen" role="dialog"><div class="modal-dialog" role="document" id="scripteditor"></div></div><oh-form-bind adapter="modeladapter_forms/rule" objectfromurl allownew></oh-form-bind><oh-vue-form class="fullflex"></oh-vue-form><template><div class="fullflex"><portal v-if="nodescript" name="editor" target-el="#scripteditor" breakshadow slim><div class="snippets"><h4>Snippets</h4><p>Find a list of {{nodescript.language}} snippets below. Just click one to insert the snippet at your current cursor position.</p><oh-script-snippets target="codeeditor" :language="nodescript.language"></oh-script-snippets><h4>Libraries</h4><p>You can install additional libraries in the Add-ons section. Please consult the library documentation for usage information.</p></div><div class="buttonbar m-2"><ui-switch documentevent="themechange" storekey="darktheme" label="Dark theme"></ui-switch><span class="ml-auto"></span> <a class="btn btn-secondary-hover" @click="generateCommunityHelpLink" href="#"><i class="fas fa-help"></i> Community help</a><div class="btn-group ml-2"><button ref="undo" class="btn btn-secondary-hover" @click.prevent="$refs.codeeditor.undo()" disabled="disabled"><i class="fas fa-undo"></i></button> <button ref="redo" class="btn btn-secondary-hover" @click.prevent="$refs.codeeditor.redo()" disabled="disabled"><i class="fas fa-redo"></i></button></div><a class="btn btn-success ml-2" href="#">Close editor</a></div><ui-codeeditor themechangeevent="themechange" ref="codeeditor" id="codeeditor" :content.prop="nodescript" @state="editorContentChanged($event.target.content)" @redoavailable="$refs.redo.disabled=!$event.detail" @undoavailable="$refs.undo.disabled=!$event.detail"></ui-codeeditor></portal><form data-no-reload="" class="was-validated"><label for="rulename">Rule name</label> <input type="text" class="form-control" name="name" id="rulename" pattern=".{1,}" autocomplete="off" autocorrect="off" autocapitalize="off" required placeholder="Your rule name goes here" v-model="valuecopy.name"> <label><abbr title="Reference this Rule via this identifier">UID</abbr></label><div class="form-control" id="ruleuid" title="Copy to clipboard" @click="copyClipboard($event, value.uid)">{{value.uid}}</div><label for="ruledescription">Description</label> <input type="text" class="form-control" name="description" id="ruledescription" pattern=".{1,}" required placeholder="Rule description" autocomplete="off" autocorrect="off" autocapitalize="off" v-model="valuecopy.description"> <label for="ruletags">Tags</label><ui-tags class="form-control" name="tags" id="ruletags" :value.prop="valuecopy.tags" @input="valuecopy.tags=$event.target.value"></ui-tags><div class="buttons"><template v-if="isNew"><button class="btn btn-primary" :class="{disabled:cannotcreate}" @click.prevent="create($event.target)"><i class="fas fa-plus"></i> Create</button></template><template v-else><a class="btn btn-secondary-hover" @click="generateCommunityHelpLink" href="#"><i class="fas fa-help"></i> Community help</a> <button class="btn btn-secondary-hover" :class="{disabled:unchanged}" target="_blank" @click.prevent="undo" title="Undo"><i class="fas fa-undo"></i></button> <button class="btn btn-primary" :class="{disabled:unchanged}" @click.prevent="save"><i class="fas fa-save"></i> Save</button> <button class="btn btn-success" :class="{disabled:changed}" @click.prevent="run"><i class="fas fa-check"></i> <span>Run</span> <span class="badge badge-light">{{status}}</span></button></template></div></form><oh-rule-editor rule-node-template="rulenode" :rule.prop="valuecopy" :moduletypes.prop="moduletypes" @input="setChanged" @showeditor="showEditor" ref="ruleeditor"></oh-rule-editor></div></template><template id="rulenode"><div class="node" :class="classes"><div class="title"><div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" @changed="changed=true" @blur="node.data.label=$event.target.innerText">{{node.data.label}}</div><div contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" @changed="changed=true" @blur="node.data.description=$event.target.innerText">{{node.data.description}}</div></div><div class="output"><div v-for="output in outputs()" :key="output.key" :title="output.socket.name + '\n' + output.socket.data.hint"><div class="output-title">{{output.name}}</div><div class="socket output" :class="sanitizedName(output.name)" v-socket:output="output"></div></div></div><div class="control"><template class="control" v-for="control in controls(2)"><label :title="control.description">{{control.label}}</label><vue-config-element :param="control.desc" v-model="control.value" :condensed="true"></vue-config-element></template></div><div class="input"><div v-for="input in inputs()" :key="input.key" :title="input.socket.name + '\n' + input.socket.data.hint"><div class="socket input" :class="sanitizedName(input.name)" v-socket:input="input"></div><div class="input-title">{{input.name}}</div></div></div><div class="actions"><button v-if="node.data.type=='action' && !isfirst" @click="move(-1)" title="Earlier" class="btn btn-outline-secondary text-nowrap"><i class="fas fa-angle-left"></i><span class="ml-2"></span></button> <button v-if="node.data.type=='action' && !islast" @click="move(1)" title="Later" class="btn btn-outline-secondary text-nowrap"><i class="fas fa-angle-right"></i><span class="ml-2"></span></button> <span class="ml-auto"></span> <button v-if="hasmore" @click="edit" class="btn btn-outline-secondary text-nowrap"><i class="fas fa-trash"></i><span class="ml-2">Edit full component</span></button> <button @click="remove" class="btn btn-outline-danger text-nowrap"><i class="fas fa-trash"></i><span class="ml-2">Remove</span></button></div></div></template></main><footer></footer><aside class="contexthelp"><div class="fixedwrapper"><ui-context-help url="contexthelp/rule.md"></ui-context-help><div class="btnbar mt-4 mr-2"><oh-doc-link class="btn btn-danger helpbtn2 mr-2" toggle><i class="fas fa-times"></i> Close</oh-doc-link></div></div></aside></body></html>