Skip to content

Commit

Permalink
webui: load entries dynamically via websockets
Browse files Browse the repository at this point in the history
  • Loading branch information
glwntd committed Dec 19, 2024
1 parent c4979bb commit 3f02386
Show file tree
Hide file tree
Showing 3 changed files with 194 additions and 95 deletions.
120 changes: 99 additions & 21 deletions pyglossary/ui/ui_web/browse.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,21 +136,28 @@
input {
background-color: #e9f8ec;
}

#status {
font-size:7pt;
color: #999;
font-family: monospace;
}
</style>
</head>

<body>
<div class="container">
<div id="status"></div>

<div style="text-align: center">
<form name="searchform" action="/browse" method="get">
<form name="searchform" action="/browse.html" method="get">
<fieldset role="group">
<input type="search" title="type search word" name="word" autofocus autocomplete="url"
<input type="search" title="type search word" name="word" id="word" autofocus autocomplete="url"
aria-autocomplete="both" placeholder="type word to search.." />
<input type="submit" title="click to search" name="btnsubmit" value="&#128270;" />
</fieldset>
<fieldset role="group">
<input type="search" title="dictionary path" name="path" autocomplete="url" aria-autocomplete="both"
<input type="search" title="dictionary path" name="path" id="path" autocomplete="url" aria-autocomplete="both"
placeholder="e.g. /path/to/dictionary.bgl" />
<select id="inputFormat" name="inputFormat">
<option value=""></option>
Expand Down Expand Up @@ -197,19 +204,38 @@
<input type="text" title="max results" name="max" placeholder="max results" style="width:70px">
</fieldset>
</form>
##page_content##
<dl id="entries">
</dl>
</div>
</div>
<script>

const status = document.getElementById('status');

function log(msg, title) {
console.log(msg);
status.innerHTML = msg;
if (title) {
status.title = title;
}
}

window.onload = function () {
const form = window.document.forms.searchform;
const params = new URLSearchParams(window.location.search);
window.form = window.document.forms.searchform;
window.params = new URLSearchParams(window.location.search);
window.entries = document.getElementById('entries');

form.word.value = params.get('word');
form.path.value = form.path.value || params.get('path');
form.max.value = params.get('max');
form.inputFormat.value = params.get('format');

attachEventListeners(form);
initWsConnection();

};

function attachEventListeners() {
form.addEventListener('submit', (event) => {
event.preventDefault();
if (!form.word.value) {
Expand All @@ -223,24 +249,76 @@
if (!form.max.value) {
form.max.value = params.get('max');
}
form.submit()
})
entries.innerHTML = "";
fetchEntries();
});

form.word.oninput = (e) => {
const params = new URLSearchParams(window.location.search);
const value = form.word.value;
['word', 'path'].forEach(fieldName => {
const input = form[fieldName];
input.oninput = (e) => {
const params = new URLSearchParams(window.location.search);
const value = input.value;

if (value) {
params.set("word", value);
} else {
params.delete("word");
}
if (value) {
params.set(fieldName, value);
} else {
params.delete(fieldName);
}

const q = params.toString();
const newURL = q ? `?${q}` : window.location.pathname;
window.history.replaceState({}, "", newURL);
};
};
const q = params.toString();
const newURL = q ? `?${q}` : window.location.pathname;
window.history.replaceState({}, "", newURL);
};
});
}

function initWsConnection() {
window.socket = new WebSocket('/ws');
const form = window.document.forms.searchform;

socket.addEventListener('open', () => {
log('&#x1F517;', 'WebSockets connection open Ok');
fetchEntries();
});

socket.addEventListener('message', (event) => {
// console.log(event.data)
const message = JSON.parse(event.data);

if (message.type == 'browse') {
if (message.error) {
log(message.error)
}

if (message.data) {
entries.insertAdjacentHTML('beforeend', message.data);
log(`&#x1F517; loaded ${message.num} of max ${message.max} entries`);
}
}
});

socket.addEventListener('error', (error) => {
log(`&#128268; ${error}`, 'WebSockets error');
});

socket.addEventListener('close', () => {
log('&#128268;', 'WebSockets connection closed');
});
}

function fetchEntries() {
if (form.path.value) {
log('Loading...');
socket.send(JSON.stringify({
'action': 'browse',
'word': form.word.value,
'path': form.path.value,
'max': form.max.value,
'format': form.inputFormat.value
})
);
}
}
</script>
</body>

Expand Down
6 changes: 3 additions & 3 deletions pyglossary/ui/ui_web/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@ <h1>
<!--noformat-->
<ul>
<li class="primary"><a id="clearDisplay" href="#">&#10006; Clear log</a></li>
<li class="primary"><a target="_blank" href="/browse">&#x1F50E; Browse...</a></li>
<li class="primary"><a target="_blank" href="/browse.html">&#x1F50E; Browse...</a></li>
<li class="primary"><a target="_blank"
href="https://github.com/ilius/pyglossary/blob/master/README.md">&#128279; Docs</a>
</li>
Expand Down Expand Up @@ -180,7 +180,7 @@ <h5>Input file</h5>
<select id="inputFormat" name="inputFormat" required>
<option></option>
</select>
<a target="_blank" class="button outline secondary browse hidden" href="/browse">
<a target="_blank" class="button outline secondary browse hidden" href="/browse.html">
<input type="button" class="outline secondary" id="preview1" value="&#x1F50E;">
</a>
</fieldset>
Expand All @@ -195,7 +195,7 @@ <h5>Output file</h5>
<select id="outputFormat" tabindex="-1" name="outputFormat" required>
<option></option>
</select>
<a target="_blank" class="button outline secondary browse hidden" href="/browse">
<a target="_blank" class="button outline secondary browse hidden" href="/browse.html">
<input type="button" tabindex="-1" class="outline secondary" id="preview2" value="&#x1F50E;">
</a>
</fieldset>
Expand Down
Loading

0 comments on commit 3f02386

Please sign in to comment.