mirror of
https://github.com/simon987/Simple-Incremental-Search-Tool.git
synced 2025-12-14 07:39:05 +00:00
Migrated to bootstrap 4, added progress bars for tasks
This commit is contained in:
simon
@@ -6,9 +6,9 @@
|
||||
<div class="container">
|
||||
|
||||
{# Add directory form #}
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">An excellent form</div>
|
||||
<div class="panel-body">
|
||||
<div class="card">
|
||||
<div class="card-header">An excellent form</div>
|
||||
<div class="card-body">
|
||||
|
||||
<form method="GET" action="/directory/add">
|
||||
<div class="form-group">
|
||||
@@ -24,9 +24,9 @@
|
||||
</div>
|
||||
|
||||
{# List of directories #}
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">An excellent list</div>
|
||||
<div class="panel-body">
|
||||
<div class="card">
|
||||
<div class="card-header">An excellent list</div>
|
||||
<div class="card-body">
|
||||
|
||||
<table class="info-table table-hover table-striped">
|
||||
<thead>
|
||||
|
||||
@@ -70,10 +70,10 @@
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="panel panel-default">
|
||||
<div class="card">
|
||||
|
||||
<div class="panel-heading">Summary</div>
|
||||
<div class="panel-body">
|
||||
<div class="card-header">Summary</div>
|
||||
<div class="card-body">
|
||||
|
||||
<table class="info-table">
|
||||
<tr onclick="modifyDisplayName()">
|
||||
@@ -106,9 +106,9 @@
|
||||
|
||||
</div>
|
||||
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">An excellent option list</div>
|
||||
<div class="panel-body">
|
||||
<div class="card">
|
||||
<div class="card-header">An excellent option list</div>
|
||||
<div class="card-body">
|
||||
<table class="info-table table-striped table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -136,48 +136,41 @@
|
||||
|
||||
<form method="GET" action="/directory/{{ directory.id }}/add_opt">
|
||||
|
||||
<div class="form-group">
|
||||
<div class="col-sm-4">
|
||||
<div class="form-row">
|
||||
<div class="col">
|
||||
<input type="text" class="form-control" placeholder="Key" name="key">
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-sm-4">
|
||||
<div class="col">
|
||||
<input type="text" class="form-control" placeholder="Value" name="value">
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-success">Add option</button>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-success">Add option</button>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">An excellent control panel</div>
|
||||
<div class="panel-body">
|
||||
<div class="card">
|
||||
<div class="card-header">An excellent control panel</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="btn-group">
|
||||
<a class="btn dropdown-toggle btn-primary" data-toggle="dropdown" href="#">
|
||||
Create a task
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Indexing task</a></li>
|
||||
<li><a href="#">Thumbnail generation task</a></li>
|
||||
</ul>
|
||||
<div class="dropdown">
|
||||
<button class="btn dropdown-toggle btn-primary" data-toggle="dropdown">Create a task</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Indexing task</a>
|
||||
<a class="dropdown-item" href="#">Thumbnail generation task</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<a class="btn dropdown-toggle btn-danger" data-toggle="dropdown" href="#">
|
||||
Action
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="/directory/{{ directory.id }}/del">Delete directory</a></li>
|
||||
<li><a href="#">Reset to default settings</a></li>
|
||||
</ul>
|
||||
<div class="dropdown">
|
||||
<button class="btn dropdown-toggle btn-danger" data-toggle="dropdown" aria-haspopup="true">Action</button>
|
||||
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="/directory/{{ directory.id }}/del">Delete directory</a>
|
||||
<a class="dropdown-item" href="#">Reset to default settings</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -7,17 +7,13 @@
|
||||
|
||||
<!-- Demo Dependencies -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script>
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.3.2/holder.min.js" type="text/javascript"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
|
||||
<script src="/static/js/Chart.min.js" type="text/javascript"></script>
|
||||
|
||||
<script>
|
||||
Holder.add_theme("white", { background:"#fff", foreground:"#a7a7a7", size:10 });
|
||||
</script>
|
||||
|
||||
<!-- Dashboard -->
|
||||
<link rel="stylesheet" type="text/css" href="/static/css/keen-dashboards.css" />
|
||||
{# <link rel="stylesheet" type="text/css" href="/static/css/keen-dashboards.css" />#}
|
||||
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet" type="text/css">
|
||||
|
||||
|
||||
@@ -35,6 +31,10 @@
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
{# .info-table tr:nth-child(even) {#}
|
||||
{# background-color: #fafafa;#}
|
||||
{# }#}
|
||||
@@ -44,29 +44,8 @@
|
||||
</head>
|
||||
<body class="keen-dashboard" style="padding-top: 80px;">
|
||||
|
||||
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="../">
|
||||
<span class="glyphicon glyphicon-chevron-left"></span>
|
||||
</a>
|
||||
<a class="navbar-brand" href="./">Layouts » Hero Sidebar</a>
|
||||
</div>
|
||||
<div class="navbar-collapse collapse">
|
||||
<ul class="nav navbar-nav navbar-left">
|
||||
<li><a href="#">Home</a></li>
|
||||
<li><a href="#">Team</a></li>
|
||||
<li><a href="#">Source</a></li>
|
||||
<li><a href="#">Community</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span>Navbar1</span>
|
||||
</div>
|
||||
|
||||
{% block alert_messages %}
|
||||
|
||||
@@ -4,11 +4,42 @@
|
||||
|
||||
{% block body %}
|
||||
|
||||
<style>
|
||||
.task-wrapper {
|
||||
border: #dddddd 1px solid;
|
||||
border-radius: 4px;
|
||||
padding: 5px 10px;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.task-name {
|
||||
color: #9CA0A2;
|
||||
}
|
||||
|
||||
.task-info {
|
||||
|
||||
}
|
||||
|
||||
.progress {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
|
||||
.progress span {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: black;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">An excellent form</div>
|
||||
<div class="panel-body">
|
||||
<div class="card">
|
||||
<div class="card-header">An excellent form</div>
|
||||
<div class="card-body">
|
||||
<form class="form-inline" action="/task/add">
|
||||
<label for="type">Create </label>
|
||||
<select class="form-control" id="type" name="type" >
|
||||
@@ -28,36 +59,61 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">An excellent panel</div>
|
||||
<div class="panel-body">
|
||||
|
||||
<table class="info-table table-hover table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Task type</th>
|
||||
<th>Directory</th>
|
||||
<th>Completed</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{% for task_id in tasks %}
|
||||
|
||||
<tr>
|
||||
<td>{{ tasks[task_id].type }}</td>
|
||||
<td>{{ directories[tasks[task_id].dir_id].name }}</td>
|
||||
<td>{{ tasks[task_id].completed }}</td>
|
||||
<td><a class="btn btn-danger" href="/task/{{ task_id }}/del">Cancel</a></td>
|
||||
</tr>
|
||||
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
|
||||
|
||||
<script>
|
||||
function updateProgressBar() {
|
||||
var xhttp = new XMLHttpRequest();
|
||||
xhttp.onreadystatechange = function() {
|
||||
if (this.readyState === 4 && this.status === 200) {
|
||||
|
||||
if(this.responseText.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
var currentTask = JSON.parse(this.responseText);
|
||||
var percent = currentTask.parsed / currentTask.total * 100;
|
||||
|
||||
try {
|
||||
document.getElementById("task-bar-" + currentTask.id).setAttribute("style", "width: " + percent + "%;");
|
||||
document.getElementById("task-label-" + currentTask.id).innerHTML = currentTask.parsed + " / " + currentTask.total + " (" + percent.toFixed(2) + "%)";
|
||||
} catch (e) {
|
||||
window.reload();
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
xhttp.open("GET", "/task/current", true);
|
||||
xhttp.send();
|
||||
}
|
||||
|
||||
window.setInterval(updateProgressBar, 125);
|
||||
</script>
|
||||
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">An excellent panel</div>
|
||||
<div class="card-body">
|
||||
{% for task_id in tasks | sort()%}
|
||||
<div class="task-wrapper container-fluid">
|
||||
<span class="task-name">{{ directories[tasks[task_id].dir_id].name }} - </span>
|
||||
<span class="task-info">{{ tasks[task_id].type }}</span>
|
||||
|
||||
<div class="d-flex p-2">
|
||||
<div class="container-fluid p-2">
|
||||
<div class="progress">
|
||||
<div id="task-bar-{{ task_id }}" class="progress-bar" role="progressbar" style="width: 0;">
|
||||
<span id="task-label-{{ task_id }}">Queued</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-2"><a class="btn btn-danger" href="/task/{{ task_id }}/del">Cancel</a></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user