5
0
mirror of https://github.com/wailsapp/wails.git synced 2025-05-07 21:23:02 +08:00
wails/v3/examples/services/assets/index.html
Fabio Massaioli 37673eb24d
[v3] Fix binding generator bugs and prepare for Go 1.24 (#4045)
* Rename predicates source file

* Overhaul and document type predicates

* Fix model collection logic for named types

* Fix map key type rendering

* Fix map creation code

* Fix rendering of structs that implement marshaler interfaces

* Fix type cycle detection to take type args into account

* Fix enum and typeparam field initialisation

* Improve unsupported type warnings

* Remove internal models file

* Deduplicate template code

* Accept generic aliases in static analyser

* Support new `encoding/json` flag `omitzero`

* Handle special cases when rendering generic aliases

* Update npm test dependencies

* Test class aliases and implicit private dependencies

* Test marshaler combinations

* Test map key types

* Remove bad map keys from unrelated tests

* Test service discovery through generic aliases

* Test generic aliases

* Test warning messages

* Disable go1.24 tests

* Update changelog

* Restore rendering of injected lines in index file

* Test directives

* Add wails:ignore directive

* Fix typo

* Move injections to the bottom of service files

* Handle errors from closing files

* Do not emit messages when services define only lifecycle methods

* Add internal directive for services and models

* Update changelog

* Fix error in service templates

* Test internal directive on services/models

* Fix error in index template

* Base testdata updates

* Testdata for class aliases and implicit private dependencies

* Testdata for marshaler combinations

* Testdata for map key types

* Testdata for bad map key fixes

* Add weakly typed enums aka alias constants

* Testdata for enum and typeparam field fixes

* Testdata for generic aliases

* Testdata for warning messages

* Testdata for directives

* Testdata for weakly typed enums

* Update binding example

* Update services example

* Remove go1.24 testdata

* Update cli doc

* Fix analyser tests

* Fix windows tests... hopefully

* go mod tidy on examples

* Update bindings guide

---------

Co-authored-by: Lea Anthony <lea.anthony@gmail.com>
2025-02-09 09:44:34 +11:00

290 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 './bindings/github.com/wailsapp/wails/v3/pkg/services/sqlite/service.js';
import * as kvstore from './bindings/github.com/wailsapp/wails/v3/pkg/services/kvstore/keyvaluestore.js';
import {Debug, Info, Warning, Error} from './bindings/github.com/wailsapp/wails/v3/pkg/services/log/loggerservice.js';
import * as hash from './bindings/github.com/wailsapp/wails/v3/examples/services/hashes/service.js';
function runHash() {
let hashstring = document.getElementById("hashstring").value;
// Plugin methods can be called by name using the Plugin method
hash.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) {
kvstore.Delete(key).then(() => {
getKVStoreValues();
}).catch((err) => {
document.getElementById("kvstoreresults").innerHTML = err;
});
}
function getKVStoreValues() {
kvstore.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
kvstore.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>Services</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 service 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 service 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 service 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>