mirror of
https://github.com/house-of-abbey/GarminHomeAssistant.git
synced 2025-04-30 04:32:26 +00:00
Documentation for web editor
This commit is contained in:
Joseph Abbey
121
web/index.html
121
web/index.html
@ -85,7 +85,19 @@
|
|||||||
border: 1px solid var(--ctp-mocha-surface1);
|
border: 1px solid var(--ctp-mocha-surface1);
|
||||||
border-radius: 0.25em;
|
border-radius: 0.25em;
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
user-select: none;
|
max-width: min(900px, calc(100% - 10em));
|
||||||
|
max-height: 500px;
|
||||||
|
|
||||||
|
& > div {
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
|
||||||
|
& > p {
|
||||||
|
margin-inline: 0.5em;
|
||||||
|
}
|
||||||
|
& > code {
|
||||||
|
margin: 0.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&:focus-within,
|
&:focus-within,
|
||||||
&:focus-visible {
|
&:focus-visible {
|
||||||
@ -151,6 +163,28 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
display: block;
|
||||||
|
background-color: var(--ctp-mocha-surface1);
|
||||||
|
border-radius: 0.5em;
|
||||||
|
padding: 1em;
|
||||||
|
font-family: 'Courier New', Courier, monospace;
|
||||||
|
|
||||||
|
& pre {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
kbd {
|
||||||
|
background-color: var(--ctp-mocha-surface1);
|
||||||
|
border-radius: 0.25em;
|
||||||
|
padding: 0.25em;
|
||||||
|
font-family: 'Courier New', Courier, monospace;
|
||||||
|
font-size: 0.8em;
|
||||||
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
background-color: var(--ctp-mocha-surface1);
|
background-color: var(--ctp-mocha-surface1);
|
||||||
color: var(--ctp-mocha-text);
|
color: var(--ctp-mocha-text);
|
||||||
@ -220,8 +254,27 @@
|
|||||||
&[icon='copy']::before {
|
&[icon='copy']::before {
|
||||||
background-image: url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/content_copy/default/48px.svg);
|
background-image: url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/content_copy/default/48px.svg);
|
||||||
}
|
}
|
||||||
|
&[icon='info']::before {
|
||||||
|
background-image: url(https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/info/default/48px.svg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 0.6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track-piece {
|
||||||
|
background-color: var(--ctp-mocha-mantle);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background-color: var(--ctp-mocha-surface1);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background-color: var(--ctp-mocha-overlay1);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@ -262,6 +315,12 @@
|
|||||||
name="api_token"
|
name="api_token"
|
||||||
id="api_token" />
|
id="api_token" />
|
||||||
<button id="troubleshooting" type="button">Troubleshooting</button>
|
<button id="troubleshooting" type="button">Troubleshooting</button>
|
||||||
|
<button
|
||||||
|
title="How to use the editor"
|
||||||
|
class="icon"
|
||||||
|
icon="info"
|
||||||
|
id="info"
|
||||||
|
type="button"></button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="container"></div>
|
<div id="container"></div>
|
||||||
@ -304,6 +363,66 @@
|
|||||||
</div>
|
</div>
|
||||||
</dialog>
|
</dialog>
|
||||||
|
|
||||||
|
<dialog id="info-dialog">
|
||||||
|
<div>
|
||||||
|
<div class="row">
|
||||||
|
<h2>GarminHomeAssistant Web Editor</h2>
|
||||||
|
<button
|
||||||
|
title="Close"
|
||||||
|
class="icon"
|
||||||
|
icon="close"
|
||||||
|
onclick="this.parentElement.parentElement.parentElement.close()"
|
||||||
|
type="button"></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
This is the web editor for the GarminHomeAssistant watch app, it
|
||||||
|
offers enhanced schema checking and validation over the original JSON
|
||||||
|
schema by using the HomeAssistant API to create a schema based on your
|
||||||
|
HomeAssistant configuration.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
This editor makes use of the same credentials as the watch app (these
|
||||||
|
can be pasted in the top bar of this page). However in order for this
|
||||||
|
editor to work, you will need to amend the CORS settings of your
|
||||||
|
HomeAssistant instance. Add this to your configuration.yaml file:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<code>
|
||||||
|
<pre id="cors-settings" data-lang="yaml">
|
||||||
|
http:
|
||||||
|
cors_allowed_origins:
|
||||||
|
- https://house-of-abbey.github.io</pre
|
||||||
|
>
|
||||||
|
</code>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Once you have added this to your configuration.yaml file, you will
|
||||||
|
need to restart HomeAssistant. After HomeAssistant is restarted,
|
||||||
|
reload this page.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Now you should have validation and autocompletion, anywhere in the
|
||||||
|
editor, press <kbd>Ctrl</kbd> + <kbd>Space</kbd> to see the available
|
||||||
|
options. You will also see red lines under syntax errors and yellow
|
||||||
|
lines under validation errors. Hover over these lines to see the
|
||||||
|
message. You can also click on the `Run Action` and `Toggle` buttons
|
||||||
|
to test your actions.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
In the top bar there are 4 buttons, the first button will download the
|
||||||
|
online version of your menu.json file and put it in the editor. The
|
||||||
|
second button will copy the content of the editor to the clipboard.
|
||||||
|
The third button will open the troubleshooting dialog, this will allow
|
||||||
|
you to test your HomeAssistant API connection. The fourth button will
|
||||||
|
open this dialog.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</dialog>
|
||||||
|
|
||||||
<script src="https://unpkg.com/monaco-editor@0.45.0/min/vs/loader.js"></script>
|
<script src="https://unpkg.com/monaco-editor@0.45.0/min/vs/loader.js"></script>
|
||||||
<script src="https://unpkg.com/json-ast-comments@1.1.1/lib/json.js"></script>
|
<script src="https://unpkg.com/json-ast-comments@1.1.1/lib/json.js"></script>
|
||||||
<script src="https://unpkg.com/toastify-js@1.12.0/src/toastify.js"></script>
|
<script src="https://unpkg.com/toastify-js@1.12.0/src/toastify.js"></script>
|
||||||
|
|||||||
16
web/main.js
16
web/main.js
@ -1,3 +1,10 @@
|
|||||||
|
import { configureMonacoYaml } from 'https://cdn.jsdelivr.net/npm/monaco-yaml@5.1.1/+esm';
|
||||||
|
|
||||||
|
if (!localStorage.getItem('info_shown')) {
|
||||||
|
document.querySelector('#info-dialog').showModal();
|
||||||
|
localStorage.setItem('info_shown', 'true');
|
||||||
|
}
|
||||||
|
|
||||||
let api_url = localStorage.getItem('api_url') ?? '';
|
let api_url = localStorage.getItem('api_url') ?? '';
|
||||||
let menu_url = localStorage.getItem('menu_url') ?? '';
|
let menu_url = localStorage.getItem('menu_url') ?? '';
|
||||||
let api_token = localStorage.getItem('api_token') ?? '';
|
let api_token = localStorage.getItem('api_token') ?? '';
|
||||||
@ -466,6 +473,8 @@ require(['vs/editor/editor.main'], async () => {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
configureMonacoYaml(monaco);
|
||||||
|
|
||||||
document.querySelector('#api_url').value = api_url;
|
document.querySelector('#api_url').value = api_url;
|
||||||
document.querySelector('#menu_url').value = menu_url;
|
document.querySelector('#menu_url').value = menu_url;
|
||||||
document.querySelector('#api_token').value = api_token;
|
document.querySelector('#api_token').value = api_token;
|
||||||
@ -473,6 +482,9 @@ require(['vs/editor/editor.main'], async () => {
|
|||||||
document.querySelector('#troubleshooting').addEventListener('click', (e) => {
|
document.querySelector('#troubleshooting').addEventListener('click', (e) => {
|
||||||
document.querySelector('#troubleshooting-dialog').showModal();
|
document.querySelector('#troubleshooting-dialog').showModal();
|
||||||
});
|
});
|
||||||
|
document.querySelector('#info').addEventListener('click', (e) => {
|
||||||
|
document.querySelector('#info-dialog').showModal();
|
||||||
|
});
|
||||||
|
|
||||||
document.querySelector('#test-api').addEventListener('click', async (e) => {
|
document.querySelector('#test-api').addEventListener('click', async (e) => {
|
||||||
try {
|
try {
|
||||||
@ -643,6 +655,10 @@ require(['vs/editor/editor.main'], async () => {
|
|||||||
).then((r) => r.json())
|
).then((r) => r.json())
|
||||||
);
|
);
|
||||||
|
|
||||||
|
monaco.editor.colorizeElement(document.querySelector('#cors-settings'), {
|
||||||
|
theme: 'mocha',
|
||||||
|
});
|
||||||
|
|
||||||
monaco.languages.registerCompletionItemProvider('json', {
|
monaco.languages.registerCompletionItemProvider('json', {
|
||||||
triggerCharacters: ['.'],
|
triggerCharacters: ['.'],
|
||||||
provideCompletionItems: function (model, position) {
|
provideCompletionItems: function (model, position) {
|
||||||
|
|||||||
4
web/types.d.ts
vendored
4
web/types.d.ts
vendored
@ -1,3 +1,7 @@
|
|||||||
declare namespace json {
|
declare namespace json {
|
||||||
export function parse(text: string): import('json-ast-comments').JsonDocument;
|
export function parse(text: string): import('json-ast-comments').JsonDocument;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
declare module 'https://cdn.jsdelivr.net/npm/monaco-yaml@5.1.1/+esm' {
|
||||||
|
export * from 'monaco-yaml';
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user