Update env vars

docker-compose.yml

@@ -12,3 +12,5 @@ services:
     - 8080:5000
     networks:
     - db_net
+    env_file:
+    - /home/michigg/Nextcloud/Documents/OFU_Fachschaft/Server/hackmd_overview_addon/hackmd/docker.env

src/main.py

@@ -1,23 +1,38 @@
 import psycopg2
 import config
 from flask import Flask, render_template
+from pprint import pprint
+import os
 
 app = Flask(__name__)
 app.debug = True
 
-sql_statement = 'SELECT "id","title","alias","shortid","viewcount","lastchangeAt" FROM "Notes" ORDER BY "lastchangeAt" DESC;'
+sql_statement = 'SELECT "id","title","alias","shortid","viewcount","lastchangeAt","permission","content" FROM "Notes" ORDER BY "lastchangeAt" DESC;'
 
 
 @app.route("/")
 def main():
+    DB_HOST = os.environ.get('DB_HOST')
+    DB_NAME = os.environ.get('POSTGRES_DB')
+    DB_USER = os.environ.get('POSTGRES_USER')
+    DB_PASSWORD = os.environ.get('POSTGRES_PASSWORD')
+
     try:
-        conn = psycopg2.connect(host=config.DB_HOST, database=config.DB_Name, user=config.DB_USER, password=config.DB_PASSWORD)
+        conn = psycopg2.connect(host=DB_HOST, database=DB_NAME, user=DB_USER,
+                                password=DB_PASSWORD)
         cur = conn.cursor()
         cur.execute(sql_statement)
         notes = cur.fetchall()
+        pprint(notes)
+        print("NOTES LEN", len(notes))
         cur.close()
         conn.close()
-        return render_template('index.html', notes=notes, host=config.CODI_URL)
+        notes_arr = []
+        for note in notes:
+            notes_arr.append(
+                {'id': note[0], 'title': note[1], 'alias': note[2], 'shortid': note[3], 'viewcount': note[4],
+                 'lastchangeAt': note[5], 'permission': note[6], 'content': note[7]})
+        return render_template('index.html', notes=notes_arr, host=config.CODI_URL)
     except Exception as e:
         return render_template('index.html')
 

src/static/css/main.css

@@ -0,0 +1,47 @@
+/*.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;
+}

src/static/js/sort.js

@@ -17,8 +17,8 @@ function convertToArray() {
 
 function sortByTitle() {
     var sort_by_title = function (a, b) {
-        let x = a.getElementsByClassName('card-title')[0];
-        let y = b.getElementsByClassName('card-title')[0];
+        let x = a.getElementsByClassName('note-title')[0];
+        let y = b.getElementsByClassName('note-title')[0];
         return x.innerHTML.toLowerCase().localeCompare(y.innerHTML.toLowerCase());
     };
 
@@ -30,8 +30,8 @@ function sortByTitle() {
 function sortByDate() {
     console.log('Sort Date');
     var sort_by_date = function (a, b) {
-        a = a.getElementsByClassName('date')[0];
-        b = b.getElementsByClassName('date')[0];
+        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('.');
@@ -58,4 +58,4 @@ function sortByDate() {
     var notesArr = convertToArray();
     notesArr.sort(sort_by_date);
     updateParent(notesArr);
-}
+}

src/templates/index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <title>CodiMD Notes</title>
     <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>
 </head>
 <body class="bg-light">
@@ -21,21 +22,22 @@
     </div>
     <div id="sortable-wrapper" class="row">
         {% for note in notes %}
-        {% if note[1] and note[2] %}
-        <div class="sortable col-12 col-sm-6 col-md-6 col-lg-4 col-xl-4 mb-2 px-1">
-            <a href="{{host}}/{{note[2]}}">
-                <div class="card">
-                    <div class="card-body">
-                        <h5 class="card-title">{{note[1]}}</h5>
-                        {% if note[5] %}
-                        <h6 class="card-subtitle mb-2 text-muted">LastChanged: <span class="date">{{note[5].strftime('%d.%m.%Y %H:%M')}}</span></h6>
-                        {% endif %}
-                        <p class="card-text">ViewCount: {{note[4]}}</p>
-                    </div>
+        <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>
-        {% endif %}
         {% endfor %}
     </div>
 </div>