aronwk/BrickTracker
1
0
Fork 0
forked from FrederikBaerentsen/BrickTracker
Code Pull Requests Activity

Added progress bar to create set

Browse Source
This commit is contained in:
FrederikBaerentsen
2024-04-18 22:11:44 +02:00
parent 5a45034d9b
commit e835b8f3a2
4 changed files with 351 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
templates/create.html
View File

@@ -7,7 +7,9 @@
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.3.1/socket.io.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar is-dark is-fixed-top" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
@@ -36,15 +38,17 @@
<input class="input" type="text" id="inputField" name="inputField">
</div>
</div>
<progress id="progress-bar" class="progress is-large is-primary" value="0" max="100">
</progress>
<div class="field">
<div class="control">
<button class="button is-primary" type="submit">Submit</button>
<button id="submitButton" class="button is-primary" type="submit">Submit</button>
</div>
</div>
</form>
</div>
</section>
{% if error is defined %}
<button class="js-modal-trigger" data-target="modal-js-example" id="modal-js">
</button>
@@ -73,13 +77,33 @@
</footer>
</div>
</div>
</body>
</body>
<script>
var socket = io.connect('http://' + document.domain + ':' + location.port + '/progress');
// Event listener for receiving progress updates
socket.on('update_progress', function(msg) {
var progress = msg.progress;
// document.getElementById("progress-bar").style.width = progress + "%";
document.getElementById("progress-bar").value = progress;
document.getElementById("progress-bar").innerText = progress + "%";
});
// Event listener for the form submission
document.getElementById("createForm").addEventListener("submit", function(event) {
event.preventDefault(); // Prevent default form submission
var inputField = document.getElementById("inputField").value;
socket.emit('start_task', { inputField: inputField }); // Emit socket event with inputField value
});
// Event listener for the 'task_completed' event
socket.on('task_completed', function() {
// Redirect to '/'
window.location.href = '/';
});
document.addEventListener('DOMContentLoaded', () => {
window.onload = function () {

50
templates/index.html
View File

@@ -204,7 +204,7 @@
<div class="columns" style="">
<div class="column is-half" style="">
<figure class="image is-4by3">
<a href="/{{ i[0] }}/{{ i[12] }}">
<a href="/{{ i[0] }}/{{ i[11] }}">
<img style='height: 100%; width: 100%; object-fit: contain' src="/static/sets/{{ i[0] }}.jpg" alt="Image">
</a>
</figure>
@@ -213,33 +213,55 @@
<div class="column is-half" style="margin:0;padding:0;">
<div class="is-size-7">
<label class="checkbox" >
<input type="hidden" id="set_num" value="{{ i[0] }}">
<input class="s_fig" id="s_fig" type="checkbox" checked />
<input type="hidden" id="set_num" value="{{ i[0] }}">
<input type="hidden" id="u_id" value="{{ i[11] }}">
{% if i[8] == 0 %}
<input class="s_fig" id="s_fig" type="checkbox" />
{% else %}
<input class="s_fig" id="s_fig" type="checkbox" checked />
{% endif %}
<!-- {{ i[8] }}<br>
{{ i[9] }}<br>
{{ i[10] }}<br> -->
Minifigs Collected
</label>
<br>
<label class="checkbox" >
<input type="hidden" id="set_num" value="{{ i['set_num'] }}">
<input class="s_check" id="s_check" type="checkbox" checked />
<input type="hidden" id="set_num" value="{{ i[0] }}">
<input type="hidden" id="u_id" value="{{ i[11] }}">
{% if i[9] == 0 %}
<input class="s_check" id="s_check" type="checkbox" />
{% else %}
<input class="s_check" id="s_check" type="checkbox" checked />
{% endif %}
Set is checked
</label>
<br>
<label class="checkbox" >
<input type="hidden" id="set_num" value="{{ i['set_num'] }}">
<input class="s_col" id="s_col" type="checkbox" checked />
<input type="hidden" id="set_num" value="{{ i[0] }}">
<input type="hidden" id="u_id" value="{{ i[11] }}">
{% if i[10] == 0 %}
<input class="s_col" id="s_col" type="checkbox" />
{% else %}
<input class="s_col" id="s_col" type="checkbox" checked />
{% endif %}
Set is collected and boxed
</label>
<br>
<fieldset disabled>
<label class="checkbox" >
<input type="checkbox" class="s_com" onclick="return false;"/> Set is missing pieces
</label>
</fieldset>
</div>
</div>
</div>
<footer class="card-footer" style="">
<p class="card-footer-item">
<span>
<span class="is-size-7">{{ i[12] }}</span>
<span class="is-size-7">{{ i[11] }}</span>
</span>
</p>
@@ -367,7 +389,7 @@
$("body").on("change", "#s_fig", function (event) {
minif = $(this).prop('checked');
set_num = $(this).siblings('#set_num').val();
index = $(this).siblings('#index').val();
u_id = $(this).siblings('#u_id').val();
$.ajax({
url: '/',
@@ -375,7 +397,7 @@
data: {
'set_num': set_num,
'minif': minif,
'index': index
'u_id': u_id
}
});
});
@@ -383,7 +405,7 @@
$("body").on("change", "#s_check", function (event) {
scheck = $(this).prop('checked');
set_num = $(this).siblings('#set_num').val();
index = $(this).siblings('#index').val();
u_id = $(this).siblings('#u_id').val();
$.ajax({
url: '/',
@@ -391,7 +413,7 @@
data: {
'set_num': set_num,
'scheck': scheck,
'index': index
'u_id': u_id
}
});
});
@@ -399,7 +421,7 @@
$("body").on("change", "#s_col", function (event) {
scol = $(this).prop('checked');
set_num = $(this).siblings('#set_num').val();
index = $(this).siblings('#index').val();
u_id = $(this).siblings('#u_id').val();
$.ajax({
url: '/',
@@ -407,7 +429,7 @@
data: {
'set_num': set_num,
'scol': scol,
'index': index
'u_id': u_id
}
});
});