Improved booking UI, which now retrievs container and asset infos automatically
This commit is contained in:
parent
e04c435f87
commit
3bac6ef7a0
|
|
@ -4,12 +4,41 @@
|
|||
{% block title %}Scanner: {{ scanner_id }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<textarea id="chat-log" cols="100" rows="20"></textarea><br>
|
||||
<input id="chat-message-input" type="text" size="100"><br>
|
||||
<input id="chat-message-submit" type="button" value="Send">
|
||||
<div class="row mb-3">
|
||||
<div class="col-8">
|
||||
<div class="input-group">
|
||||
<input class="form-control" type="text" max_length="40" id="container_id" placeholder="Container ID">
|
||||
<input class="form-control" type="text" max_length="40" id="asset_id" placeholder="Asset ID">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<div class="input-group">
|
||||
<input class="btn btn-primary" id="book-in-button" type="button" value="+Book">
|
||||
<input class="btn btn-primary" id="book-out-button" type="button" value="-Book">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<div class="input-group">
|
||||
<textarea class="form-control" readonly="true" type="text" rows="4" id="container_details"></textarea>
|
||||
<textarea class="form-control" readonly="true" type="text" rows="4" id="asset_details"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="input-group">
|
||||
<textarea class="form-control mb-2" id="chat-log" cols="100" rows="10"></textarea>
|
||||
<input class="btn btn-secondary" id="clear-chat-area" type="button" value="Clear">
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input class="form-control" id="chat-message-input" type="text" size="100">
|
||||
<input class="btn btn-primary" id="chat-message-submit" type="button" value="Send">
|
||||
</div>
|
||||
</div>
|
||||
{{ scanner_id|json_script:"scanner_id" }}
|
||||
<script>
|
||||
const scannerId = JSON.parse(document.getElementById('scanner_id').textContent);
|
||||
var containerIsValid = false;
|
||||
var assetIsValid = false;
|
||||
|
||||
const chatSocket = new WebSocket(
|
||||
'ws://'
|
||||
|
|
@ -19,9 +48,53 @@
|
|||
+ '/'
|
||||
);
|
||||
|
||||
async function getContainerInfo(containerId) {
|
||||
document.querySelector('#container_id').value = containerId;
|
||||
url = '/api/containers?named_id=' + containerId;
|
||||
document.querySelector('#container_details').value = 'Trying ' + url;
|
||||
const response = await fetch(url);
|
||||
const container = await response.json();
|
||||
if (container.count >= 1) {
|
||||
document.querySelector('#container_details').value = container.results[0].description;
|
||||
containerIsValid = true;
|
||||
} else {
|
||||
document.querySelector('#container_details').value = document.querySelector('#container_details').value + "\nERROR: No result\n";
|
||||
console.log(response);
|
||||
containerIsValid = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function getAssetInfo(assetId) {
|
||||
document.querySelector('#asset_id').value = assetId;
|
||||
url = '/api/assets?named_id=' + assetId;
|
||||
document.querySelector('#asset_details').value = 'Trying ' + url;
|
||||
const response = await fetch(url);
|
||||
const asset = await response.json();
|
||||
if (asset.count >= 1) {
|
||||
document.querySelector('#asset_details').value = asset.results[0].description;
|
||||
assetIsValid = true;
|
||||
} else {
|
||||
document.querySelector('#asset_details').value = document.querySelector('#asset_details').value + "\nERROR: No result\n";
|
||||
console.log(response);
|
||||
assetIsValid = false;
|
||||
}
|
||||
}
|
||||
|
||||
chatSocket.onmessage = function(e) {
|
||||
const data = JSON.parse(e.data);
|
||||
document.querySelector('#chat-log').value += (data.message + '\n');
|
||||
msg = String(data.message);
|
||||
document.querySelector('#chat-log').value += (msg + '\n');
|
||||
if (msg.startsWith('C-')) {
|
||||
getContainerInfo(data.message);
|
||||
// document.querySelector('#container_id').value = msg;
|
||||
} else if (msg.startsWith('A-')) {
|
||||
getAssetInfo(data.message);
|
||||
// document.querySelector('#asset_id').value = msg;
|
||||
} else {
|
||||
assetId = 'A-' + msg;
|
||||
document.querySelector('#asset_id').value = assetId;
|
||||
getAssetInfo(assetId);
|
||||
}
|
||||
};
|
||||
|
||||
chatSocket.onclose = function(e) {
|
||||
|
|
@ -43,5 +116,40 @@
|
|||
}));
|
||||
messageInputDom.value = '';
|
||||
};
|
||||
|
||||
document.querySelector('#clear-chat-area').onclick = function(e) {
|
||||
document.querySelector('#chat-log').value = "cleared\n";
|
||||
}
|
||||
|
||||
document.querySelector('#book-in-button').onclick = function(e) {
|
||||
if (!containerIsValid) {
|
||||
msg = 'Cannot book-in as container is invalid';
|
||||
console.log(msg);
|
||||
document.querySelector('#chat-log').value += ('ERROR: ' + msg + '\n');
|
||||
return;
|
||||
}
|
||||
if (!assetIsValid) {
|
||||
msg = 'Cannot book-in as asset is invalid';
|
||||
console.log(msg);
|
||||
document.querySelector('#chat-log').value += ('ERROR: ' + msg + '\n');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
document.querySelector('#book-out-button').onclick = function(e) {
|
||||
if (!containerIsValid) {
|
||||
msg = 'Cannot book-out as container is invalid';
|
||||
console.log(msg);
|
||||
document.querySelector('#chat-log').value += ('ERROR: ' + msg + '\n');
|
||||
return;
|
||||
}
|
||||
if (!assetIsValid) {
|
||||
msg = 'Cannot book-out as asset is invalid';
|
||||
console.log(msg);
|
||||
document.querySelector('#chat-log').value += ('ERROR: ' + msg + '\n');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue