Added navbar and updated thumbnail generator

This commit is contained in:
simon987
2018-03-21 21:53:49 -04:00
parent 90c1de3362
commit b94fce4e0b
27 changed files with 5760 additions and 133 deletions

View File

@@ -1,4 +1,5 @@
{% extends "layout.html" %}
{% set active_page = "dashboard" %}
{% block body %}

View File

@@ -1,4 +1,5 @@
{% extends "layout.html" %}
{% set active_page = "directory" %}
{% block title %}An Excellent title{% endblock title %}

View File

@@ -1,4 +1,5 @@
{% extends "layout.html" %}
{% set active_page = "directory" %}
{% block title %}An excellent title{% endblock title %}
@@ -38,16 +39,6 @@
return input;
}
function modifyKey(optId, value) {
swapToForm(document.getElementById("key-" + optId), [
{name: "id", value: optId},
{name: "value", value: value},
{name: "dir_id", value: {{ directory.id }}}
], "/directory/{{ directory.id }}/update_opt", "key");
}
function modifyVal(optId, key) {
swapToForm(document.getElementById("val-" + optId), [
{name: "id", value: optId},
@@ -77,27 +68,29 @@
<table class="info-table">
<tr onclick="modifyDisplayName()">
<th>Display name</th>
<th style="width: 20%">Display name</th>
<td>
<span id="display-name" title="Click to update">{{ directory.name }}</span>
<pre id="display-name" title="Click to update">{{ directory.name }}</pre>
</td>
</tr>
<tr onclick="modifyPath()">
<th>Path</th>
<th style="width: 20%">Path</th>
<td>
<pre id="path" title="Click to update">{{ directory.path }}</pre>
</td>
</tr>
<tr>
<th>Enabled</th>
<th style="width: 20%">Enabled</th>
<td>
<i class="far {{ "fa-check-square" if directory.enabled else "fa-square" }}"></i>
<form action="/directory/{{ directory.id }}/update" style="display: inline;">
<input type="hidden" name="enabled" value="{{ "0" if directory.enabled else "1" }}">
<input type="submit" class="btn {{ "btn-danger" if directory.enabled else "btn-success" }}"
value="{{ "Disable" if directory.enabled else "Enable" }}">
<button class="btn btn-sm {{ "btn-danger" if directory.enabled else "btn-success" }}">
<i class="far {{ "fa-check-square" if directory.enabled else "fa-square" }}"></i>
{{ "Disable" if directory.enabled else "Enable" }}
</button>
</form>
</td>
</tr>
@@ -112,18 +105,16 @@
<table class="info-table table-striped table-hover">
<thead>
<tr>
<th>Key</th>
<th>Option</th>
<th>Value</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{% for option in directory.options %}
<tr>
<td style="width: 40%" onclick="modifyKey({{ option.id }}, '{{ option.value }}')" title="Click to update"><span id="key-{{ option.id }}">{{ option.key }}</span></td>
<td style="width: 40%" onclick="modifyVal({{ option.id }}, '{{ option.key }}')" title="Click to update"><span id="val-{{ option.id }}">{{ option.value }}</span></td>
<td><a id="opt-{{ option.id }}-btn" class="btn btn-danger" href="/directory/{{ directory.id }}/del_opt/{{ option.id }}" >Remove</a></td>
<td style="width: 30%"><span>{{ option.key }}</span></td>
<td onclick="modifyVal({{ option.id }}, '{{ option.key }}')" title="Click to update"><span id="val-{{ option.id }}">{{ option.value }}</span></td>
</tr>
{% endfor %}
@@ -131,23 +122,6 @@
</tbody>
</table>
<hr>
<form method="GET" action="/directory/{{ directory.id }}/add_opt">
<div class="form-row">
<div class="col">
<input type="text" class="form-control" placeholder="Key" name="key">
</div>
<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>
</form>
</div>
</div>
@@ -155,22 +129,25 @@
<div class="card-header">An excellent control panel</div>
<div class="card-body">
<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 class="d-flex">
<div class="dropdown" style="margin-right: 1em;">
<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="dropdown">
<button class="btn dropdown-toggle btn-danger" data-toggle="dropdown">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>
<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>

View File

@@ -8,14 +8,11 @@
<!-- 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/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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Dashboard -->
{# <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">
<link href="/static/css/fontawesome-all.min.css" rel="stylesheet" type="text/css">
<style>
.info-table {
@@ -35,25 +32,46 @@
margin-top: 1em;
}
{# .info-table tr:nth-child(even) {#}
{# background-color: #fafafa;#}
{# }#}
.flex-grow {
flex: 1 0 auto;
}
{# todo: box-shadow 0 1px 10px 1px #1AC8DE#}
</style>
</head>
<body>
<div>
<span>Navbar1</span>
</div>
<nav class="navbar navbar-expand-lg navbar-light" style="background: #F7F7F7; border-bottom: solid 1px #dfdfdf;">
<a class="navbar-brand" href="/search"><i class="fa fa-search"></i> Search</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link {% if "directory" == active_page %}active{% endif %}" href="/directory">Directories</a>
</li>
<li class="nav-item">
<a class="nav-link {% if "task" == active_page %}active{% endif %}" href="/task">Tasks</a>
</li>
<li class="nav-item">
<a class="nav-link {% if "dashboard" == active_page %}active{% endif %}" href="/dashboard">Dashboard</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" placeholder="Username">
<input class="form-control mr-sm-2" type="password" placeholder="Password">
<button class="btn btn-outline-success my-2 my-sm-0">Login</button>
</form>
</div>
</nav>
{% block alert_messages %}
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
<div class="container">
<div class="container" style="margin-top: 1em">
{% for category, message in messages %}
<div class="alert alert-{{ category }}">
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>

View File

@@ -1,4 +1,5 @@
{% extends "layout.html" %}
{% set active_page = "task" %}
{% block title %}An excellent title{% endblock title %}
@@ -33,22 +34,26 @@
color: black;
}
.form-inline > * {
margin: 0 4px;
}
</style>
<div class="container">
<div class="card">
<div class="card-header">An excellent form</div>
<div class="card-header">Add task</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" >
<select title="Select task type" class="form-control" id="type" name="type">
<option hidden>Create task...</option>
<option value="1">Indexing</option>
<option value="2">Thumbnail Generation</option>
</select>
<label for="directory">task for</label>
<select class="form-control" id="directory" name="directory" >
<select title="Select directory" class="form-control" id="directory" name="directory" >
<option hidden>For directory...</option>
{% for dir_id in directories %}
<option value="{{ dir_id }}">{{ directories[dir_id].name }}</option>
{% endfor %}
@@ -59,8 +64,6 @@
</div>
</div>
<script>
function updateProgressBar() {
var xhttp = new XMLHttpRequest();
@@ -97,9 +100,8 @@
window.setInterval(updateProgressBar, 125);
</script>
<div class="card">
<div class="card-header">An excellent panel</div>
<div class="card-header">Ongoing tasks</div>
<div class="card-body">
{% for task_id in tasks | sort()%}
<div class="task-wrapper container-fluid">
@@ -117,10 +119,8 @@
<div class="p-2"><a class="btn btn-danger" href="/task/{{ task_id }}/del">Cancel</a></div>
</div>
</div>
{% endfor %}
</div>
</div>