mirror of
https://github.com/wailsapp/wails.git
synced 2025-05-10 11:32:42 +08:00
291 lines
12 KiB
HTML
291 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Wails Alpha</title>
|
|
<link rel="stylesheet" href="/style.css">
|
|
<script type="module" src="/wails/runtime.js"></script>
|
|
<script type="module">
|
|
import * as sqlite from '/wails/plugin/sqlite/sqlite.js';
|
|
import {Call} from "/wails/runtime.js";
|
|
import * as kvpairs from '/wails/plugin/kvstore/kvstore.js';
|
|
import {Debug, Info, Warning, Error} from '/wails/plugin/log/log.js';
|
|
|
|
function runHash() {
|
|
let hashstring = document.getElementById("hashstring").value;
|
|
// Plugin methods can be called by name using the Plugin method
|
|
Call.Plugin("hashes", "Generate", hashstring).then((result) => {
|
|
// Result is an object with the hash and the algorithm used is the key
|
|
// Output a table with the field name in the left cell and the value in the right
|
|
let table = document.createElement("table");
|
|
for (let key in result) {
|
|
let tr = document.createElement("tr");
|
|
let th = document.createElement("th");
|
|
th.innerText = key;
|
|
let td = document.createElement("td");
|
|
td.innerText = result[key];
|
|
tr.appendChild(th);
|
|
tr.appendChild(td);
|
|
table.appendChild(tr);
|
|
}
|
|
document.getElementById("hashresults").innerHTML = "";
|
|
document.getElementById("hashresults").appendChild(table);
|
|
}).catch((err) => {
|
|
document.getElementById("hashresults").innerHTML = "<p class='error-message'>" + err + "</p>";
|
|
});
|
|
}
|
|
|
|
function runSelect() {
|
|
let query = document.getElementById("query").value;
|
|
// If it starts with "select ", run `sqlite.Select` otherwise run `sqlite.Exec`
|
|
let method = sqlite.Execute;
|
|
let isSelect = false;
|
|
if (query.toLowerCase().startsWith("select ")) {
|
|
method = sqlite.Select;
|
|
isSelect = true;
|
|
}
|
|
method(query).then((result) => {
|
|
let results = document.getElementById("sqlresults");
|
|
results.innerHTML = "";
|
|
if (!isSelect) {
|
|
let message = "Query executed successfully";
|
|
if (result.length > 0) {
|
|
message += " - " + result;
|
|
}
|
|
results.innerHTML = message;
|
|
return;
|
|
}
|
|
if (result.length === 0) {
|
|
results.innerHTML = "No results";
|
|
return;
|
|
}
|
|
let table = document.createElement("table");
|
|
let header = document.createElement("tr");
|
|
for (let key in result[0]) {
|
|
let th = document.createElement("th");
|
|
th.innerText = key;
|
|
header.appendChild(th);
|
|
}
|
|
table.appendChild(header);
|
|
for (let row of result) {
|
|
let tr = document.createElement("tr");
|
|
for (let key in row) {
|
|
let td = document.createElement("td");
|
|
td.innerText = row[key];
|
|
tr.appendChild(td);
|
|
}
|
|
table.appendChild(tr);
|
|
}
|
|
results.appendChild(table);
|
|
}).catch((err) => {
|
|
// Put error in results
|
|
document.getElementById("sqlresults").innerHTML = "<p class='error-message'>" + err + "</p>";
|
|
});
|
|
}
|
|
|
|
function deleteKVPair(key) {
|
|
kvpairs.Delete(key).then(() => {
|
|
getKVStoreValues();
|
|
}).catch((err) => {
|
|
document.getElementById("kvstoreresults").innerHTML = err;
|
|
});
|
|
}
|
|
function getKVStoreValues() {
|
|
kvpairs.Get().then((result) => {
|
|
let kvstoreresults = document.getElementById('kvstoreresults');
|
|
kvstoreresults.innerHTML = '';
|
|
let table = document.createElement('table');
|
|
let headerRow = document.createElement('tr');
|
|
let header1 = document.createElement('th');
|
|
header1.innerText = 'Key';
|
|
headerRow.appendChild(header1);
|
|
|
|
let header2 = document.createElement('th');
|
|
header2.innerText = 'Value';
|
|
headerRow.appendChild(header2);
|
|
|
|
// Add an empty header for the delete column
|
|
let header3 = document.createElement('th');
|
|
headerRow.appendChild(header3);
|
|
|
|
table.appendChild(headerRow);
|
|
for (let key in result) {
|
|
let row = document.createElement('tr');
|
|
let keyCell = document.createElement('td');
|
|
keyCell.innerText = key;
|
|
row.appendChild(keyCell);
|
|
let valueCell = document.createElement('td');
|
|
valueCell.innerText = result[key];
|
|
row.appendChild(valueCell);
|
|
|
|
// Create the delete button
|
|
let deleteButton = document.createElement('button');
|
|
deleteButton.innerText = 'Delete';
|
|
deleteButton.addEventListener('click', function () {
|
|
deleteKVPair(key);
|
|
});
|
|
|
|
// Add the delete button to the row
|
|
let deleteCell = document.createElement('td');
|
|
deleteCell.className = 'narrowColumn';
|
|
deleteCell.appendChild(deleteButton);
|
|
row.appendChild(deleteCell);
|
|
|
|
table.appendChild(row);
|
|
}
|
|
let header = document.createElement('h2');
|
|
header.innerText = 'Store State';
|
|
kvstoreresults.appendChild(header);
|
|
kvstoreresults.appendChild(table);
|
|
}).catch((err) => {
|
|
document.getElementById("kvstoreresults").innerHTML = err;
|
|
});
|
|
}
|
|
|
|
function log(logLevel, message) {
|
|
// Call the appropriate logging function based on the log level
|
|
switch(logLevel) {
|
|
case 'Debug':
|
|
Debug(message);
|
|
break;
|
|
case 'Info':
|
|
Info(message);
|
|
break;
|
|
case 'Warning':
|
|
Warning(message);
|
|
break;
|
|
case 'Error':
|
|
Error(message);
|
|
break;
|
|
}
|
|
}
|
|
document.getElementById("runquery").addEventListener('click', runSelect);
|
|
document.getElementById("runhash").addEventListener('click', runHash);
|
|
window.addEventListener('load', function () {
|
|
getKVStoreValues();
|
|
});
|
|
document.getElementById('kvForm').addEventListener('submit', function (event) {
|
|
// Prevent the form from being submitted normally
|
|
event.preventDefault();
|
|
|
|
// Get the key and value from the form
|
|
let key = document.getElementById('key').value;
|
|
let value = document.getElementById('value').value;
|
|
|
|
// Validate the key and value
|
|
if (key) {
|
|
// Call the Set method
|
|
kvpairs.Set(key, value);
|
|
// Get all values from the kvstore
|
|
getKVStoreValues();
|
|
} else {
|
|
// Show an error message if the key is missing
|
|
alert('Key is required.');
|
|
}
|
|
});
|
|
document.getElementById('logForm').addEventListener('submit', function(event) {
|
|
event.preventDefault(); // prevent the form from submitting normally
|
|
let logLevel = document.getElementById('logLevel').value;
|
|
let message = document.getElementById('message').value;
|
|
log(logLevel, message);
|
|
});
|
|
</script>
|
|
<script>
|
|
window.onload = function () {
|
|
// Get the element with class="defaultOpen" and click on it
|
|
let defaultOpen = document.getElementsByClassName("defaultOpen");
|
|
if (defaultOpen.length > 0) {
|
|
defaultOpen[0].click();
|
|
}
|
|
|
|
// Add event listeners to the tab buttons
|
|
let tablinks = document.getElementsByClassName("tablinks");
|
|
for (let i = 0; i < tablinks.length; i++) {
|
|
tablinks[i].addEventListener('click', function () {
|
|
openTab(this.getAttribute('onclick').split("'")[1]);
|
|
});
|
|
}
|
|
}
|
|
|
|
function openTab(tabName) {
|
|
let i, tabcontent, tablinks;
|
|
tabcontent = document.getElementsByClassName("tabcontent");
|
|
for (i = 0; i < tabcontent.length; i++) {
|
|
tabcontent[i].style.display = "none";
|
|
}
|
|
tablinks = document.getElementsByClassName("tablinks");
|
|
for (i = 0; i < tablinks.length; i++) {
|
|
tablinks[i].className = tablinks[i].className.replace(" active", "");
|
|
}
|
|
document.getElementById(tabName).style.display = "block";
|
|
/* add "active" class name to event target */
|
|
window.event.currentTarget.className += " active";
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<h2>Plugins</h2>
|
|
<div>
|
|
<div class="tab" style="--wails-draggable: drag">
|
|
<button class="tablinks defaultOpen" onclick="openTab('sqlite')">SQLite</button>
|
|
<button class="tablinks" onclick="openTab('hashes')">Hashes</button>
|
|
<button class="tablinks" onclick="openTab('kvstore')">K/V Store</button>
|
|
<button class="tablinks" onclick="openTab('log')">Log</button>
|
|
</div>
|
|
|
|
<div id="sqlite" class="tabcontent">
|
|
<p>The sqlite plugin provides easy integration with sqlite dbs.</p>
|
|
<p>The demo DB has a single table: Users.</p>
|
|
<p>Enter a query below and hit the "Run" button.</p>
|
|
<div>
|
|
<div style="display: flex;justify-content: space-around;">
|
|
<input style="width:90%" type="text" id="query" value="select * from Users where age > 20"><br/>
|
|
<button type="button" id="runquery">Run</button>
|
|
</div>
|
|
<div id="sqlresults">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="hashes" class="tabcontent">
|
|
<p>The hashes plugin provides hashing functions.</p>
|
|
<div>
|
|
<div style="display: flex;justify-content: space-around;">
|
|
<input style="width:90%" type="text" id="hashstring" placeholder="Type any string here..."><br/>
|
|
<button type="button" id="runhash">Hash</button>
|
|
</div>
|
|
<div id="hashresults">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="kvstore" class="tabcontent">
|
|
<p>The kvstore plugin provides a means for reading and writing to a json file.</p>
|
|
<p>Enter a key/value pair in the form below to add it to the file.</p>
|
|
<p>A blank value will remove the key.</p>
|
|
<div>
|
|
<form id="kvForm">
|
|
<input type="text" id="key" placeholder="Enter key">
|
|
<input type="text" id="value" placeholder="Enter value">
|
|
<input type="submit" value="Save">
|
|
</form>
|
|
<div id="kvstoreresults">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="log" class="tabcontent">
|
|
<p>The log plugin provides a means for sending frontend logs to a Go logger.</p>
|
|
<p>Enter some text below, press submit and check your console logs.</p>
|
|
<form id="logForm">
|
|
<select id="logLevel">
|
|
<option value="Debug">Debug</option>
|
|
<option value="Info">Info</option>
|
|
<option value="Warning">Warning</option>
|
|
<option value="Error">Error</option>
|
|
</select>
|
|
<input type="text" id="message" placeholder="Enter message">
|
|
<input type="submit" value="Log">
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|