Merge branch 'master' of jboockmann/codimd_note_overview into master
This commit is contained in:
Götz
Gitea
commit
aaaa4d4716
21
README.md
21
README.md
@ -0,0 +1,21 @@
|
||||
# CodiMD note overview
|
||||
|
||||
|
||||
a searchable list of existing hackmd pads – [https://padlist.wiai.de/](https://padlist.wiai.de/)
|
||||
|
||||
|
||||
|
||||
|
||||
## Testing locally
|
||||
|
||||
|
||||
Execute `docker build . --tag codimd; docker run -p 5000:5000 --env TESTING=True codimd` to run the app in testing mode locally. No database credentials are required during testing mode; test data is read from a local file.
|
||||
|
||||
## Open issues
|
||||
|
||||
* make the layout responsive
|
||||
* either read the DB credentials and URL from the environment or the config file
|
||||
* load test data from a local file when run in testing mode
|
||||
* add more/real testing data
|
||||
* the up and down arrows in the table head fields are not invisible
|
||||
* add more emojis ヘ( ^o^)ノ＼(^_^ )
|
||||
51
src/main.py
51
src/main.py
@ -1,16 +1,31 @@
|
||||
import psycopg2
|
||||
from flask import Flask, render_template
|
||||
import os
|
||||
import config
|
||||
from datetime import datetime
|
||||
|
||||
|
||||
app = Flask(__name__)
|
||||
app.debug = True
|
||||
|
||||
sql_statement = 'SELECT "id","title","alias","shortid","viewcount","lastchangeAt","permission","content" FROM "Notes" ORDER BY "lastchangeAt" DESC;'
|
||||
SQL_FETCH_NOTES = 'SELECT "id","title","alias","shortid","viewcount","lastchangeAt","permission","content" FROM "Notes" ORDER BY "lastchangeAt" DESC;'
|
||||
|
||||
# if the environment contains a variable TESTING that is set to "True" then run the application in testing mode
|
||||
if os.environ.get('TESTING') == "True":
|
||||
ENV_TESTING = True
|
||||
else:
|
||||
ENV_TESTING = False
|
||||
|
||||
|
||||
@app.route("/")
|
||||
def main():
|
||||
if ENV_TESTING:
|
||||
return testing()
|
||||
else:
|
||||
return production()
|
||||
|
||||
|
||||
def production():
|
||||
import config
|
||||
DB_HOST = os.environ.get('DB_HOST')
|
||||
DB_NAME = os.environ.get('POSTGRES_DB')
|
||||
DB_USER = os.environ.get('POSTGRES_USER')
|
||||
@ -20,7 +35,7 @@ def main():
|
||||
conn = psycopg2.connect(host=DB_HOST, database=DB_NAME, user=DB_USER,
|
||||
password=DB_PASSWORD)
|
||||
cur = conn.cursor()
|
||||
cur.execute(sql_statement)
|
||||
cur.execute(SQL_FETCH_NOTES)
|
||||
notes = cur.fetchall()
|
||||
cur.close()
|
||||
conn.close()
|
||||
@ -34,5 +49,35 @@ def main():
|
||||
return render_template('index.html')
|
||||
|
||||
|
||||
def testing():
|
||||
notes_arr = []
|
||||
notes_arr.append(
|
||||
{
|
||||
'id': "SJBWsApiX",
|
||||
'title': "None",
|
||||
'alias': "35c3",
|
||||
'shortid': "SJBWsApiX",
|
||||
'viewcount': "0",
|
||||
'lastchangeAt': datetime(2013, 10, 31, 18, 23, 29, 227),
|
||||
'permission': "freely",
|
||||
'content': "xxx"
|
||||
}
|
||||
)
|
||||
x = {
|
||||
'id': "SJBWsApiX",
|
||||
'title': "Protokoll für die Fachschaftssitzung vom 6. Februar 2019",
|
||||
'alias': "35c3",
|
||||
'shortid': "SJBWsApiX",
|
||||
'viewcount': "0",
|
||||
'lastchangeAt': datetime(2013, 10, 31, 18, 23, 29, 227),
|
||||
'permission': "freely"
|
||||
}
|
||||
|
||||
for _ in range(20):
|
||||
notes_arr.append(x)
|
||||
|
||||
return render_template('index.html', notes=notes_arr, host="localhost")
|
||||
|
||||
|
||||
if __name__ == '__main__':
|
||||
app.run(host='0.0.0.0', port=5000)
|
||||
|
||||
@ -1,47 +0,0 @@
|
||||
/*.extra-content {*/
|
||||
/*display: none;*/
|
||||
/*text-decoration: none !important;*/
|
||||
/*color: #0b2e13;*/
|
||||
/*}*/
|
||||
|
||||
/*.sortable a {*/
|
||||
/*display: inline-block;*/
|
||||
/*}*/
|
||||
|
||||
/*.sortable a:hover .extra-content {*/
|
||||
/*display: block;*/
|
||||
/*text-decoration: none !important;*/
|
||||
/*}*/
|
||||
|
||||
/*.sortable a:hover .extra-content p {*/
|
||||
/*display: block;*/
|
||||
/*text-decoration: none !important;*/
|
||||
/*}*/
|
||||
|
||||
.fancy-tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.fancy-tooltip .tooltiptext {
|
||||
visibility: hidden;
|
||||
width: 300px;
|
||||
background-color: #555;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
padding: 5px 0;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: -170%;
|
||||
left: 50%;
|
||||
margin-left: -60px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.fancy-tooltip:hover .tooltiptext {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
11
src/static/css/style.css
Normal file
11
src/static/css/style.css
Normal file
@ -0,0 +1,11 @@
|
||||
|
||||
/* Hide stuff from dataTables that we do not neeed */
|
||||
.dataTables_length, .dataTables_info, .dataTables_paginate {
|
||||
visibility: hidden
|
||||
}
|
||||
|
||||
/* Add some spacing above and below the search field */
|
||||
.dataTables_filter {
|
||||
padding-top: 10%;
|
||||
padding-bottom: 10%;
|
||||
}
|
||||
7
src/static/js/script.js
Normal file
7
src/static/js/script.js
Normal file
@ -0,0 +1,7 @@
|
||||
|
||||
// make the table a dataTable and show all entries by default
|
||||
$(document).ready(function () {
|
||||
$('#example').DataTable({
|
||||
"lengthMenu": [[-1], ["All"]]
|
||||
});
|
||||
});
|
||||
@ -1,61 +0,0 @@
|
||||
function updateParent(notesArr) {
|
||||
let parent = document.getElementById('sortable-wrapper');
|
||||
parent.innerHTML = '';
|
||||
for (let elem of notesArr) {
|
||||
parent.appendChild(elem);
|
||||
}
|
||||
}
|
||||
|
||||
function convertToArray() {
|
||||
var notes = document.getElementsByClassName("sortable");
|
||||
var notesArr = [];
|
||||
for (const node of notes) {
|
||||
notesArr.push(node);
|
||||
}
|
||||
return notesArr;
|
||||
}
|
||||
|
||||
function sortByTitle() {
|
||||
var sort_by_title = function (a, b) {
|
||||
let x = a.getElementsByClassName('note-title')[0];
|
||||
let y = b.getElementsByClassName('note-title')[0];
|
||||
return x.innerHTML.toLowerCase().localeCompare(y.innerHTML.toLowerCase());
|
||||
};
|
||||
|
||||
var notesArr = convertToArray();
|
||||
notesArr.sort(sort_by_title);
|
||||
updateParent(notesArr);
|
||||
}
|
||||
|
||||
function sortByDate() {
|
||||
console.log('Sort Date');
|
||||
var sort_by_date = function (a, b) {
|
||||
a = a.getElementsByClassName('note-date')[0];
|
||||
b = b.getElementsByClassName('note-date')[0];
|
||||
if (a && b) {
|
||||
a = a.innerHTML.split(' ');
|
||||
let a_date = a[0].split('.');
|
||||
let a_time = a[1].split(':');
|
||||
b = b.innerHTML.split('\ ');
|
||||
let b_date = b[0].split('.');
|
||||
let b_time = b[1].split(':');
|
||||
let x = new Date(a_date[2], a_date[1], a_date[0], a_time[0], a_time[1]).getTime();
|
||||
let y = new Date(b_date[2], b_date[1], b_date[0], b_time[0], b_time[1]).getTime();
|
||||
if (x === y) {
|
||||
return 0;
|
||||
} else if (x > y) {
|
||||
return -1;
|
||||
} else {
|
||||
return 1;
|
||||
}
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
|
||||
// return x.innerHTML.toLowerCase().localeCompare(y.innerHTML.toLowerCase());
|
||||
};
|
||||
|
||||
var notesArr = convertToArray();
|
||||
notesArr.sort(sort_by_date);
|
||||
updateParent(notesArr);
|
||||
}
|
||||
@ -1,45 +1,54 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CodiMD Notes</title>
|
||||
<title>CodiMD notes</title>
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.13/js/dataTables.bootstrap4.min.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='libs/bootstrap.min.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
|
||||
<script src="{{ url_for('static', filename='js/sort.js') }}"></script>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
||||
|
||||
<script src="{{ url_for('static', filename='js/script.js') }}"></script>
|
||||
</head>
|
||||
<body class="bg-light">
|
||||
<nav class="navbar navbar-light bg-light">
|
||||
|
||||
<body>
|
||||
<nav class="navbar navbar-light bg-light">
|
||||
<a class="navbar-brand" href="#">
|
||||
CodiMD Notes
|
||||
<h1>CodiMD notes</h1>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="container-fluid">
|
||||
<div class="row mb-2">
|
||||
<div class="col">
|
||||
<button class="btn btn-success" onclick="sortByTitle()">Sort By Title</button>
|
||||
<button class="btn btn-success" onclick="sortByDate()">Sort By Date</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="sortable-wrapper" class="row">
|
||||
</nav>
|
||||
|
||||
<div class="container">
|
||||
<table id="example" class="table table-striped table-inverse table-bordered table-hover" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>id</th>
|
||||
<th>title</th>
|
||||
<th>alias</th>
|
||||
<th>last change at</th>
|
||||
<th>permission</th>
|
||||
<th>content</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for note in notes %}
|
||||
<div class="fancy-tooltip sortable col-12">
|
||||
<a class="" href="{{host}}/{{note['shortid']}}">
|
||||
<h5 class="note-title">{{note['title']}}</h5>
|
||||
<div class="tooltiptext">
|
||||
{% if note['lastchangeAt'] %}
|
||||
<h6 class="mb-2">LastChanged: <span class="note-date">{{note['lastchangeAt'].strftime('%d.%m.%Y %H:%M')}}</span>
|
||||
</h6>
|
||||
{% endif %}
|
||||
<p>ViewCount: {{note['viewcount']}}</p>
|
||||
<p>Permission: {{note['permission']}}</p>
|
||||
<p>Alias: {{note['alias']}}</p>
|
||||
<p>Short ID: {{note['shortid']}}</p>
|
||||
<p>Content: {%if note['content']%}Ja{%else%}Nein{%endif%}</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<tr>
|
||||
<td scope="row"><a href="{{host}}/{{note['shortid']}}" target="_blank">{{note['shortid']}}</a></td>
|
||||
<td>{{note['title']}}</td>
|
||||
<td>{{note['alias']}}</td>
|
||||
<td><span class="note-date">{{note['lastchangeAt'].strftime('%d.%m.%Y %H:%M')}}</span></td>
|
||||
<td>{{note['permission']}}</td>
|
||||
<td>{%if note['content']%}💬{%else%}❌{%endif%}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user