mirror of
https://github.com/DarrylNixon/ghostforge
synced 2024-04-22 06:27:20 -07:00
Add data tables and some UI work
This commit is contained in:
parent
47931af84f
commit
9dab48a219
45 changed files with 2200 additions and 62 deletions
94
ghostforge/templates/ghosts/ghosts.html
Normal file
94
ghostforge/templates/ghosts/ghosts.html
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block js %}
|
||||
<script src="{{ url_for('static', path='/js/jquery-3.7.0.min.js') }}"></script>
|
||||
<script src="{{ url_for('static', path='/js/colReorder.dataTables.min.js') }}"></script>
|
||||
<script src="{{ url_for('static', path='/js/dataTables.searchPanes.min.js') }}"></script>
|
||||
<script src="{{ url_for('static', path='/js/dataTables.colReorder.min.js') }}"></script>
|
||||
<script src="{{ url_for('static', path='/js/dataTables.stateRestore.min.js') }}"></script>
|
||||
<script src="{{ url_for('static', path='/js/responsive.dataTables.min.js') }}"></script>
|
||||
<script src="{{ url_for('static', path='/js/dataTables.dataTables.min.js') }}"></script>
|
||||
<script src="{{ url_for('static', path='/js/fixedHeader.dataTables.min.js') }}"></script>
|
||||
<script src="{{ url_for('static', path='/js/searchBuilder.dataTables.min.js') }}"></script>
|
||||
<script src="{{ url_for('static', path='/js/dataTables.fixedHeader.min.js') }}"></script>
|
||||
<script src="{{ url_for('static', path='/js/searchPanes.dataTables.min.js') }}"></script>
|
||||
<script src="{{ url_for('static', path='/js/dataTables.responsive.min.js') }}"></script>
|
||||
<script src="{{ url_for('static', path='/js/stateRestore.dataTables.min.js') }}"></script>
|
||||
<script src="{{ url_for('static', path='/js/dataTables.searchBuilder.min.js') }}"></script>
|
||||
<script src="{{ url_for('static', path='/js/jquery.dataTables.min.js') }}"></script>
|
||||
{% endblock js %}
|
||||
|
||||
{% block css %}
|
||||
<link href="{{ url_for('static', path='/css/datatables.css') }}" rel="stylesheet">
|
||||
<link href="{{ url_for('static', path='/css/colReorder.datatables.min.css') }}" rel="stylesheet">
|
||||
<link href="{{ url_for('static', path='/css/dataTables.datatables.min.css') }}" rel="stylesheet">
|
||||
<link href="{{ url_for('static', path='/css/fixedHeader.datatables.min.css') }}" rel="stylesheet">
|
||||
<link href="{{ url_for('static', path='/css/jquery.datatables.min.css') }}" rel="stylesheet">
|
||||
<link href="{{ url_for('static', path='/css/responsive.datatables.min.css') }}" rel="stylesheet">
|
||||
<link href="{{ url_for('static', path='/css/colReorder.datatables.min.css') }}" rel="stylesheet">
|
||||
<link href="{{ url_for('static', path='/css/stateRestore.datatables.min.css') }}" rel="stylesheet">
|
||||
{% endblock css %}
|
||||
|
||||
{% block content %}
|
||||
<div class="columns">
|
||||
<div class="column col-12">
|
||||
<h1>Browse Ghosts</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column col-12">
|
||||
<table id="ghosts-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>First</th>
|
||||
<th>Middle</th>
|
||||
<th>Last</th>
|
||||
<th>Birthdate</th>
|
||||
<th>Owner</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock content %}
|
||||
|
||||
{% block bottomjs %}
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$('#ghosts-table').DataTable({
|
||||
"processing": true,
|
||||
"serverSide": true,
|
||||
"ajax": {
|
||||
"url": "/ghosts",
|
||||
"type": "POST",
|
||||
"dataType": "json"
|
||||
},
|
||||
"columns": [
|
||||
{
|
||||
"data": "Ghost.id",
|
||||
"render": function (data, type, row, meta) {
|
||||
return '<a href="/ghosts/' + data + '">' + data + '</a>';
|
||||
}
|
||||
},
|
||||
{ "data": "Ghost.first_name" },
|
||||
{ "data": "Ghost.middle_name" },
|
||||
{ "data": "Ghost.last_name" },
|
||||
{
|
||||
"data": "Ghost.birthdate",
|
||||
"render": function (data, type, row, meta) {
|
||||
var date = new Date(data);
|
||||
var day = date.getDate().toString().padStart(2, '0');
|
||||
var month = (date.getMonth() + 1).toString().padStart(2, '0');
|
||||
var year = date.getFullYear().toString();
|
||||
return month + '/' + day + '/' + year;
|
||||
}
|
||||
},
|
||||
{ "data": "owner_email" },
|
||||
]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock bottomjs %}
|
||||
27
ghostforge/templates/ghosts/tabs/persona/identity.html
Normal file
27
ghostforge/templates/ghosts/tabs/persona/identity.html
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<h5>Identity</h5>
|
||||
<div class="form-group">
|
||||
<label class="form-label form-inline">First Name
|
||||
<input class="form-input" type="text" id="firstname" placeholder="First">
|
||||
</label>
|
||||
<label class="form-label form-inline">Middle Name
|
||||
<input class="form-input" type="text" id="middlename" placeholder="Middle">
|
||||
</label>
|
||||
<label class="form-label form-inline">Last Name
|
||||
<input class="form-input" type="text" id="lastname" placeholder="Last">
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Ethnicities
|
||||
<div class="form-group">
|
||||
<select class="form-select form-inline" multiple>
|
||||
<option>German</option>
|
||||
<option>Irish</option>
|
||||
<option>Mexican</option>
|
||||
<option>Canadian</option>
|
||||
<option>American</option>
|
||||
<option>British</option>
|
||||
<option>Chinese</option>
|
||||
</select>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
10
ghostforge/templates/ghosts/tabs/persona/persona.html
Normal file
10
ghostforge/templates/ghosts/tabs/persona/persona.html
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<div id="Persona" class="profile_tab">
|
||||
<div class="card-header">
|
||||
<div class="card-title h5">Persona</div>
|
||||
<div class="card-subtitle text-gray">"i don't even know who you are"</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% include "ghosts/tabs/persona/top.html" %}
|
||||
{% include "ghosts/tabs/persona/identity.html" %}
|
||||
</div>
|
||||
</div>
|
||||
20
ghostforge/templates/ghosts/tabs/persona/top.html
Normal file
20
ghostforge/templates/ghosts/tabs/persona/top.html
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<div class="form-group">
|
||||
<label class="form-label">
|
||||
Owner
|
||||
<input class="form-input" type="text" id="owner" placeholder="Owner GUID" value="{{ owner_username }}">
|
||||
</label>
|
||||
</div>
|
||||
<div class="popover popover-top">
|
||||
<h6>Completion</h6>
|
||||
<div class="popover-container">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<small><strong>Completion</strong> measures how many "important" fields are filled
|
||||
to backstop this
|
||||
persona. It doesn't check values for efficacy, just that they have
|
||||
values.</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<meter class="meter" value="60" min="0" max="100" low="30" high="80" style="margin-bottom: 1em;"></meter>
|
||||
43
ghostforge/templates/ghosts/tabs/tabs.html
Normal file
43
ghostforge/templates/ghosts/tabs/tabs.html
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<ul class="tab tab-block">
|
||||
<li class="tab-item">
|
||||
<a href="#" onclick="switchTab('Persona')" class="profile_tab_link active" id="TabPersona">Persona</a>
|
||||
</li>
|
||||
<li class="tab-item">
|
||||
<a href="#" onclick="switchTab('Credentials')" class="profile_tab_link" id="TabCredentials">Credentials</a>
|
||||
</li>
|
||||
<li class="tab-item">
|
||||
<a href="#" onclick="switchTab('Acquisitions')" class="profile_tab_link" id="TabAcquisitions">Acquisitions</a>
|
||||
</li>
|
||||
<li class="tab-item">
|
||||
<a href="#" onclick="switchTab('Meta')" class="profile_tab_link" id="TabMeta">Meta</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form>
|
||||
<div class="card">
|
||||
{% include "ghosts/tabs/persona/persona.html" %}
|
||||
|
||||
<div id="Credentials" class="profile_tab" style="display:none">
|
||||
<div class="card-header">
|
||||
<div class="card-title h5">Credentials</div>
|
||||
<div class="card-subtitle text-gray">"my voice is my passport, verify me"</div>
|
||||
</div>
|
||||
<div class="card-body">Credentials are very important</div>
|
||||
</div>
|
||||
|
||||
<div id="Acquisitions" class="profile_tab" style="display:none">
|
||||
<div class="card-header">
|
||||
<div class="card-title h5">Acquisitions</div>
|
||||
<div class="card-subtitle text-gray">"if you can't hack it, buy it"</div>
|
||||
</div>
|
||||
<div class="card-body">Acquisitions are very important</div>
|
||||
</div>
|
||||
|
||||
<div id="History" class="profile_tab" style="display:none">
|
||||
<div class="card-header">
|
||||
<div class="card-title h5">Meta</div>
|
||||
<div class="card-subtitle text-gray">"now where was i..."</div>
|
||||
</div>
|
||||
<div class="card-body">History is very important</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
Loading…
Add table
Add a link
Reference in a new issue