webview-template/triggerInfo.html (96 lines of code) (raw):
<!--
#
# Licensed to the Apache Software Foundation (ASF) under one or more
# contributor license agreements. See the NOTICE file distributed with
# this work for additional information regarding copyright ownership.
# The ASF licenses this file to You under the Apache License, Version 2.0
# (the "License"); you may not use this file except in compliance with
# the License. You may obtain a copy of the License at
#
# http://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.
#
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trigger Information</title>
<link href="{{nodeModulePath}}/jsoneditor/dist/jsoneditor.min.css" rel="stylesheet" type="text/css">
<script src="{{nodeModulePath}}/jsoneditor/dist/jsoneditor.min.js"></script>
<link href="{{webviewTemplatePath}}/css/common.css" rel="stylesheet" type="text/css">
</head>
<body>
<h2>Trigger Information</h2>
<table>
<tr>
<th>Trigger name</th>
<td id="name"></td>
</tr>
<tr>
<th>Parameters</th>
<td>
<div id="triggerParameters" class="editor"></div>
</td>
</tr>
<tr>
<th>Annotations</th>
<td>
<div id="triggerAnnotations" class="editor"></div>
</td>
</tr>
</table>
<div>
<button class="button" onclick="update()">Update trigger</button>
</div>
<h2>Connected actions</h2>
<table id="ruleTable">
<tr>
<th>Rule</th>
<th>Action</th>
</tr>
</table>
<template id="ruleRecord">
<tr>
<td class=rule></td>
<td class=action></td>
</tr>
</template>
</body>
<script>
const vscode = acquireVsCodeApi();
const parameters = document.getElementById('parameters');
const triggerName = document.getElementById('name');
// create the editor instance
const triggerParameters = document.getElementById("triggerParameters")
const triggerAnnotations = document.getElementById("triggerAnnotations")
const editorOption = {
mode: "code",
indentation: 4,
enableSort: false,
enableTransform: false,
statusBar: false,
};
const paramsEditor = new JSONEditor(triggerParameters, editorOption);
const annotationsEditor = new JSONEditor(triggerAnnotations, editorOption);
vscode.postMessage({command: 'initialized'});
window.addEventListener('message', event => {
const message = event.data;
if (message.command === 'getData') {
setTriggerData(message);
}
});
function update() {
vscode.postMessage({
command: 'update',
parameters: paramsEditor.getText(),
annotations: annotationsEditor.getText()
})
}
function setTriggerData(state) {
triggerName.textContent = state.name;
// set editor contents
paramsEditor.set(JSON.parse(state.params));
annotationsEditor.set(JSON.parse(state.annotations));
let t = document.querySelector('#ruleRecord');
let tb = document.querySelector('#ruleTable');
if (state.rules) {
for (let [name, rule] of Object.entries(state.rules)) {
let row = document.importNode(t.content, true);
let td = row.querySelectorAll('td');
td[0].textContent = name;
td[1].textContent = rule.action.name;
tb.appendChild(row);
}
}
}
</script>
</html>