nicolabs/config-editor-card
1
0
Fork 0
mirror of https://github.com/junkfix/config-editor-card.git synced 2026-05-21 11:58:01 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

move checkbox to top

Browse source
This commit is contained in:
htmltiger 2022-01-18 14:52:29 +00:00 committed by GitHub
parent 72268fa735
commit 4121ac7ad3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 37 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
config-editor-card.js
View file

@ -1,4 +1,4 @@
console.info("Config Editor 3.1");
console.info("Config Editor 3.2");
const LitElement = window.LitElement || Object.getPrototypeOf(customElements.get("hui-masonry-view") );
const html = LitElement.prototype.html;
@ -27,8 +27,10 @@ constructor() {
render() {
const hver=this._hass.states['config_editor.version']
if(!hver){return html`<ha-card>Missing 'config_editor:' in configuration.yaml for github.com/htmltiger/config-editor</ha-card>`;}
if(hver.state != '3'){console.log(hver);return html`<ha-card>Please upgrade github.com/htmltiger/config-editor</ha-card>`;}
if(!hver){return html`<ha-card>Missing 'config_editor:' in configuration.yaml
for github.com/htmltiger/config-editor</ha-card>`;}
if(hver.state != '3'){console.log(hver);return html`<ha-card>Please upgrade
github.com/htmltiger/config-editor</ha-card>`;}
if(this.fileList.length<1){
this.openedFile = localStorage.getItem('config_editorOpen');
this.edit.plainBox = localStorage.getItem('config_editorPlain') ? true : false;
@ -43,19 +45,33 @@ render() {
return html`
<ha-card>
<div style="min-height: calc(100vh - var(--header-height));">
${this.edit.plainBox ? html`<textarea style="width:98%;height:80vh;padding:5px;overflow-wrap:normal;white-space:pre" rows="10" @change=${this.updateText} id="code">${this.code}</textarea>` : html`<ha-code-editor id="code" mode="yaml" @value-changed=${this.updateText}></ha-code-editor>`}
<div style="text-align:right">
<select @change=${this.extChange}>
${["yaml","py","json","conf","js","txt","log"].map(value => html`<option ?selected=${value === this.edit.ext } value=${value}>${value.toUpperCase()}</option>`)}
${["yaml","py","json","conf","js","txt","log"].map(value =>
html`<option ?selected=${value === this.edit.ext }
value=${value}>${value.toUpperCase()}</option>`)}
</select>
<label style="cursor:pointer">Plain text <input type="checkbox" ?checked=${true === this.edit.plainBox } name="plain" value="1" @change=${this.plainChange}></label></div>
<label style="cursor:pointer">Plain text <input type="checkbox"
?checked=${true === this.edit.plainBox }
name="plain" value="1" @change=${this.plainChange}></label>
</div>
<div style="position: -webkit-sticky; position: sticky; bottom: 0; z-index:2; background: var(--app-header-background-color); color: var(--app-header-text-color, white)">
${this.edit.plainBox ?
html`<textarea
style="width:98%;height:80vh;padding:5px;overflow-wrap:normal;white-space:pre"
rows="10" @change=${this.updateText} id="code">${this.code}</textarea>` :
html`<ha-code-editor id="code" mode="yaml"
@value-changed=${this.updateText}></ha-code-editor>`}
</div>
<div style="position:-webkit-sticky;position:sticky;bottom:0;z-index:2;
background:var(--app-header-background-color);
color:var(--app-header-text-color,white)">
<div>${this.alertLine}</div>
<div>
<button @click="${this.List}">Get List</button>
<select @change=${this.Load}>
${[''].concat(this.fileList).map(value => html`<option ?selected=${value === this.openedFile } value=${value}>${value}</option>`)}
${[''].concat(this.fileList).map(value =>
html`<option ?selected=${value === this.openedFile}
value=${value}>${value}</option>`)}
</select>
<button @click="${this.Save}">Save</button>
</div>
@ -111,7 +127,8 @@ async Coder(){
}
async List(){
this.infoLine = 'List Loading...';
const e=(await this._hass.callWS({type: "config_editor/ws", action: 'list', data: '', file: '', ext: this.edit.ext}));
const e=(await this._hass.callWS({type: "config_editor/ws", action: 'list',
data: '', file: '', ext: this.edit.ext}));
this.infoLine = e.msg;
this.fileList = e.file.slice().sort();
if(this.openedFile.endsWith("."+this.edit.ext)){
@ -124,13 +141,16 @@ async Load(x) {
this.openedFile = x.target.value
if(this.openedFile){
this.infoLine = 'Loading: '+this.openedFile;
const e=(await this._hass.callWS({type: "config_editor/ws", action: 'load', data: '', file: this.openedFile, ext: this.edit.ext}));
const e=(await this._hass.callWS({type: "config_editor/ws", action: 'load',
data: '', file: this.openedFile, ext: this.edit.ext}));
this.openedFile = e.file;
this.infoLine = e.msg;
const uns={f:localStorage.getItem('config_editorOpen'),d:localStorage.getItem('config_editorText')};
const uns={f:localStorage.getItem('config_editorOpen'),
d:localStorage.getItem('config_editorText')};
if(uns.f == this.openedFile && uns.d && uns.d != e.data){
localStorage.setItem('config_editorUnsaved', uns.d);
this.alertLine = html`<i style="background:#ff7a81;cursor:pointer" @click="${this.Unsave}"> Load unsaved from browser </i>`;
this.alertLine = html`<i style="background:#ff7a81;cursor:pointer"
@click="${this.Unsave}"> Load unsaved from browser </i>`;
}else{
localStorage.removeItem('config_editorText');this.alertLine = '';
}
@ -150,7 +170,8 @@ async Save() {
if(this.openedFile && this.openedFile.endsWith("."+this.edit.ext)){
if(!this.code){this.infoLine='';this.infoLine = 'Text is empty!'; return;}
this.infoLine = 'Saving: '+this.openedFile;
const e=(await this._hass.callWS({type: "config_editor/ws", action: 'save', data: this.code, file: this.openedFile, ext: this.edit.ext}));
const e=(await this._hass.callWS({type: "config_editor/ws", action: 'save',
data: this.code, file: this.openedFile, ext: this.edit.ext}));
this.infoLine = e.msg;
localStorage.removeItem('config_editorText');
}else{this.openedFile='';}
@ -171,7 +192,9 @@ set hass(hass) {
}
shouldUpdate(changedProps) {
if( changedProps.has('code') || changedProps.has('openedFile') || changedProps.has('fileList') || changedProps.has('infoLine') || changedProps.has('alertLine') || changedProps.has('edit') ){return true;}
for(const e of ['code','openedFile','fileList','infoLine','alertLine','edit']) {
if(changedProps.has(e)){return true;}
}
}
} customElements.define('config-editor-card', ConfigEditor);