From 0139c2942c93be90e5e4ef8a90a27ce4f248d6b8 Mon Sep 17 00:00:00 2001
From: charclayt <ukfeature@gmail.com>
Date: Fri, 24 Mar 2023 09:05:30 +0000
Subject: [PATCH] Main dashboard page started

Added vertical navigation bar
Added table for patient info

TO DO:
Make navigation bar responsive (properly)

Modify table to display limited info (as to fit on screen properly)
Allow user to click patient row to display more info on patient

Impliment python flask properly into electron - currently table can't pull from database so displays flask elements {}, etc.
---
 src/__pycache__/app.cpython-38.pyc    | Bin 563 -> 996 bytes
 src/__pycache__/dbfunc.cpython-38.pyc | Bin 0 -> 640 bytes
 src/app.py                            |  34 +++--
 src/dbfunc.py                         |  54 ++++----
 src/index.html                        | 175 +++++++++++++++++++++++---
 5 files changed, 207 insertions(+), 56 deletions(-)
 create mode 100644 src/__pycache__/dbfunc.cpython-38.pyc

diff --git a/src/__pycache__/app.cpython-38.pyc b/src/__pycache__/app.cpython-38.pyc
index edc3a6067fa1dc75ccd13b7a9e39c8f3c3ae3a92..d6da781e5a25fdf5861d5f419999b4872d517cca 100644
GIT binary patch
literal 996
zcmWIL<>g{vU|`VtDw!g~%)sy%#6iX^3=9ko3=9m#1q=)fDGVu$ISjdsQH;4vQB1ka
zQOvn4Q7nugai$#BDArWQRJLZuDE1WQRQ7m|RQ3g&DJ%;aQ&>~jS{RxcqqtJpvp7@O
zQ#jHYQ#gB>Qn*sM!Q$MhY$-h1Ohq}V>{&c1yeWLWjEoE^Ou-DA{4YUn(PX*B>XwsO
zoPCSED7COOwYcOKdscCNUS?Y5E&ig^yp+_U_>$Dzf}F&XRKF;R;?jcDqT<x#qSTVK
z)YO#By!6bx<m}YSUyS<6AmflR69WT-Gst@a3=9k<3@MDwjEoE=j44dbjKK_=%zjlI
z8JP+t8L367Ra`mw>6v+Y86~+nnoPG?3yL!HN{Uz+7#LPE6mc*xK!{&f&Q>v@#i>Qb
zG07Q;MaeNPsm0kP`2{h~!3vS7iA4%VF~Ke|P-n$w<|W4z7bV9e78K|eRNi9E%u7kF
zU<Ww|6zmL49E?Sv*r{UE2g}@Ic6SZYWW2?mn_7~QpHhtC8)gOu29PeWZ_-eFvw&$K
zLoGuMLkdGSb5U3g!vf}o47H3kj0;#&m=-cJGSo0GU|q;i%T&X-fNdcIBSQ@Xgf3x7
zVFrf>dkRYpQwnP@Q!pru*g#?_Y{3jE48aVV?0!+K8L2rr`Bl=vu0F2LAqrXwZbAOO
z3Tc@s@db$`nW=dt#nx3^$@zJCsmUd&DT-BGVBbJOk}--eC9yaoDL=6&B|aswB(X}^
z#Yq9GI5R&_A+@L|zetm#2ox;0*iw?xO7oJVc+*o$oFN8g=I7mFOD-)c&M&&fo?4Nb
zTw0PE#gUd;lAMv4lXHtTIVZn36&z2R%(qxT21jwEBtbQ>6y=u}BVw<JlYxQZ7AM?6
zJfNtM0Hqfu4n_#%g3=sJJfP?i25I1kkIzla%!`i)MGk99YEo&sCT|pL8YsyYfl^oz
zC~}HGu>*EU5ie9%USe))eEcou#DaobT#ytSpPgEHi?t}fv?LWA_eEeEn2SpDkemrl
qZeX`^*yQG?l;)(`F@l^b#K6EH!N|eH!N|tM!N|qJ$H*nX!3Y5GBKZFR

literal 563
zcmWIL<>g{vU|`^uc$S>Z$iVOz#6iX^3=9ko3=9m#9t;c&DGVu$ISjdsQH;4vQB1ka
zQOt}Csf?*C&5Tj3sjOLSDNHHM>5M5Xy-X>rDQqna&5Tj(sVph%*-S+)sjLe)7BVn0
zq;Lc?XmY*;*`djNi`6YBu{iq{dr@j(X=-uFE%vP9{JhMx%3qB7w^#!FgF`eKZ?Wg5
zmSp6o6eol9z%a;N%nS?+&LFqxF)%QcFf3qP$WY5r!?1uUg>fNcEhCu4w2-lusfKYj
zLoIU&a|&|}b0%XmV=#jzi(eFHT4qskiC<!FY7|FKB8-(*nv(+((_|?EnSYBTJ+&kr
z<f>cD>8T|}AbT}gZn2~!mLx`TflY|dOUzBZ#R)P3$^@AKX0Bu?;$>i9_+{m66%$&V
zT2vg9oRL_R9OIH&oL!P%5aS%I5Sf}-q+k>i>=KifnwpZCmmZ&)mmE`ElpK>-P@q>(
zS;WJ@z`zRfB{-s(I2gGYxft0P!Q!_#;^T7@GxOr({WLkFSkpj(S;WM^zyNkT*s&lb
zAP2_B-(pTID7eL1lwVqs3enA6RGJ5NAQHjHz`$^e!zMRBr8FnijuB?D2onbrA0rn#
G2O|K8e2Xmr

diff --git a/src/__pycache__/dbfunc.cpython-38.pyc b/src/__pycache__/dbfunc.cpython-38.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..b5f99c83fb64fad55eef157712442296a487b23e
GIT binary patch
literal 640
zcmWIL<>g{vU|`tzOfqFJ3j@Pr5C<7EF)%PVFfcF_YcMb{q%fo~<}gHoXr>&-T&5@{
zMi84ZhdGKlg*k<#g&~S1g)x{xll3LY3_nfATWsm6C8>F3$sj%qGcqtRa4;}1ID^b}
zVqjpXk}6@yVoYI7VFH<w!kWUC!rseP%Mi|xC&$82!j#3F%~fQ<$N+*REGZn#jEoGC
z40&u33^feF3@Hr344RyNQA~dMRr1yTE>6x0E=8GTsYMEg77A(kMGC=zJ_^C9MP;c)
zwN*-`<*B;GDd`1zDTyVCNr}a&dgYmUDf#8adU>fOI)*03#!)<Jnei#9WvMy&1*t_*
zJg({KmF21F>6M12W>MT}si`TMdFk<)dC8h=Q9>a_rNt$wDe=zvd3mYHC7JnoQEU*~
zZ?Qq_jA98bPA!V!2uLh0F3&GYiQ;g9+I)*OwWuh+NR#yzTR~-hN>cJI_GE}Lx7Z6R
zbBl`$bE0@*id{iUZ?P5>W#*M=GTveVsa(lW1d6?1w$4^DAWMp4k~0#El4D#_i?d7e
z3u2su6(Um;ixiAvf?Z;e93E3#lpK?ilvbLTtXEKZi#I*B1mS)*P^?IR;);=pk%f^7
z0e^9^3o!CA74a}IFle$Cu`@6*++xZvE&`>IB31?l2Cxj+Nk{}YNEwGsZhlH>PO2R!
P?u$WIa4_;Paxen`_S2*$

literal 0
HcmV?d00001

diff --git a/src/app.py b/src/app.py
index 72719fc9..be62a4d3 100644
--- a/src/app.py
+++ b/src/app.py
@@ -1,14 +1,30 @@
-from flask import Flask, request, jsonify
+from flask import Flask, request, jsonify, render_template
+import dbfunc
 
 app = Flask(__name__)
+app.secret_key = 'supersecretfeedinginckey'
 
-@app.route("/", methods=["POST"])
-def full_name():
-    data = request.get_json()
-    first_name = data.get("firstName")
-    last_name = data.get("lastName")
-    full_name = f"{first_name}"
-    return jsonify({"fullName": full_name})
+@app.route('/')
+def index():
+    print('hi there')
+    return render_template('login.html')
+
+@app.route("/index", methods = ["GET"])
+def dashboard():
+    print('hello')
+    conn = dbfunc.getConnection()
+    if conn != None:
+        dbcursor = conn.cursor()
+        dbcursor.execute("SELECT * FROM fid_patients;")
+        rows = dbcursor.fetchall()
+        dbcursor.close()
+        conn.close()
+        print('connected!')
+
+        return render_template('index.html', dashboard_data = rows)
+    else:
+        print('DB connection error')
+        return 'DB connection error'
 
 if __name__ == "__main__":
-    app.run()
+    app.run(host='127.0.0.1', port=5000)
\ No newline at end of file
diff --git a/src/dbfunc.py b/src/dbfunc.py
index 897a7d9b..ddcdbb15 100644
--- a/src/dbfunc.py
+++ b/src/dbfunc.py
@@ -3,21 +3,19 @@ from os import getenv
 import pyodbc
 
 
-# def getConnection():
-#     try:
-#         server = getenv('uwe-sdgp.database.windows.net')
-#         user = getenv('fi-developer')
-#         password = getenv('Eggyweggy156')
-
-#         conn = pymssql.connect(server,
-#                             user,
-#                             password,
-#                             "feeding_inc")
-#     except pymssql.DatabaseError:
-#         print("error")
-#     else:
-#         return conn
-
+def getConnection():
+    try:
+        conn = pyodbc.connect(
+        Trusted_Connection='No',
+        Driver='{ODBC Driver 18 for SQL Server}',
+        Server='uwe-sdgp.database.windows.net,1433',
+        User='fi_developer',
+        Password='Eggyweggy156',
+        Database='feeding_inc')
+    except pymssql.DatabaseError:
+        print("error")
+    else:
+        return conn
 
 # cursor = getConnection()
 
@@ -30,16 +28,16 @@ import pyodbc
 # database = 'feeding_inc'
 # driver = '{ODBC Driver 18 for SQL Server}'
 
-with pyodbc.connect(
-    Trusted_Connection='No',
-    Driver='{ODBC Driver 18 for SQL Server}',
-    Server='uwe-sdgp.database.windows.net,1433',
-    User='fi_developer',
-    Password='Eggyweggy156',
-    Database='feeding_inc') as conn:
-    with conn.cursor() as cursor:
-        cursor.execute("SELECT * FROM fid_patients")
-        row = cursor.fetchone()
-        while row:
-            print (str(row[0]) + " " + str(row[1]))
-            row = cursor.fetchone()
\ No newline at end of file
+# with pyodbc.connect(
+#     Trusted_Connection='No',
+#     Driver='{ODBC Driver 18 for SQL Server}',
+#     Server='uwe-sdgp.database.windows.net,1433',
+#     User='fi_developer',
+#     Password='Eggyweggy156',
+#     Database='feeding_inc') as conn:
+#     with conn.cursor() as cursor:
+#         cursor.execute("SELECT * FROM fid_patients")
+#         row = cursor.fetchone()
+#         while row:
+#             print (str(row[0]) + " " + str(row[1]))
+#             row = cursor.fetchone()
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 199349ce..1c997066 100644
--- a/src/index.html
+++ b/src/index.html
@@ -6,32 +6,169 @@
         <link rel="stylesheet" href="index.css" />
         <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
     </head>
-    <body class="d-flex flex-column">
-        <div class="row min-vh-100">
-            <div class="navbar navbar-expand-lg me-auto col-lg-2">
-                <div class="container flex-column">
-                    <a class="navbar-brand" href="#"></a>
-                    <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-expanded="false" aria-controls="navbarSupportedContent" aria-label="Toggle navigation">
-                        <span class="navbar-toggler-icon"></span>
-                    </button>
-                    <div id="navbarSupportedContent" class="collapse navbar-collapse" role="navigation">
-                        <ul class="navbar-nav ms-auto flex-column">
+    <body>
+        {% block content %}
+        <div class="container-fluid overflow-hidden">
+            <div class="row vh-100 overflow-auto">
+                <div class="col-12 col-lg-2 bg-dark">
+                    <div class="d-flex flex-sm-column flex-row align-items-center px-3 pt-2">
+                        <a href="#" class="d-flex align-items-center pb-sm-3 mb-md-0 me-md-auto text-white text-decoration-none">
+                            <span class="fs-5 ms-3">FeedingInc.</span>
+                        </a>
+                        <ul class="nav nav-pills flex-sm-column flex-row flex-nowrap flex-shrink-1 flex-sm-grow-0 flex-grow-1 mb-sm-auto mb-0 justify-content-center align-items-center align-items-sm-start" id="menu">
                             <li class="nav-item">
-                                <a class="nav-link active" href="#">Patient Dashboard</a>
+                                <a href="./index.html" class="nav-link px-sm-0 px-2">
+                                    <i class="fs-5"></i><span class="ms-1 d-none d-sm-inline">Patient Dashboard</span>
+                                </a>
                             </li>
-                            <li class="nav-item">
-                                <a class="nav-link" href="#">Reports</a>
+                            <li>
+                                <a href="#" class="nav-link px-sm-0 px-2">
+                                    <i class="fs-5"></i><span class="ms-1 d-none d-sm-inline">Reports</span>
+                                </a>
                             </li>
-                            <li class="nav-item">
-                                <a class="nav-link" href="#">Upload CSV</a>
+                            <li>
+                                <a href="#" class="nav-link px-sm-0 px-2">
+                                    <i class="fs-5"></i><span class="ms-1 d-none d-sm-inline">Upload CSV</span>
+                                </a>
                             </li>
                         </ul>
-                    </div> 
+                    </div>
+                </div>
+                <div class="col-lg-10 d-flex flex-column h-sm-100">
+                    <main class="row overflow-auto">
+                        <div class="col pt-5">
+                            <table class="table table-striped table-hover table-bordered border-dark table-sm datatable-table" id="table">
+                                <thead class="datatable-table table-dark">
+                                    <tr>
+                                        <th style="cursor: pointer;" scope="col">
+                                            <i class="datatable-sort-icon fas fa-arrow-up" data-mdb-sort="encounterID"></i>
+                                            encounterID
+                                        </th>
+                                        <th style="cursor: pointer;" scope="col">
+                                            <i class="datatable-sort-icon fas fa-arrow-up" data-mdb-sort="end_tidal_co2"></i>
+                                            end_tidal_co2
+                                        </th>
+                                        <th style="cursor: pointer;" scope="col">
+                                            <i class="datatable-sort-icon fas fa-arrow-up" data-mdb-sort="feed_vol"></i>
+                                            feed_vol
+                                        </th>
+                                        <th style="cursor: pointer;" scope="col">
+                                            <i class="datatable-sort-icon fas fa-arrow-up" data-mdb-sort="feed_vol_adm"></i>
+                                            feed_vol_adm
+                                        </th>
+                                        <th style="cursor: pointer;" scope="col">
+                                            <i class="datatable-sort-icon fas fa-arrow-up" data-mdb-sort="fio2"></i>
+                                            fio2
+                                        </th>
+                                        <th style="cursor: pointer;" scope="col">
+                                            <i class="datatable-sort-icon fas fa-arrow-up" data-mdb-sort="fio2_ratio"></i>
+                                            fio2_ratio
+                                        </th>
+                                        <th style="cursor: pointer;" scope="col">
+                                            <i class="datatable-sort-icon fas fa-arrow-up" data-mdb-sort="insp_time"></i>
+                                            insp_time
+                                        </th>
+                                        <th style="cursor: pointer;" scope="col">
+                                            <i class="datatable-sort-icon fas fa-arrow-up" data-mdb-sort="oxygen_flow_rate"></i>
+                                            oxygen_flow_rate
+                                        </th>
+                                        <th style="cursor: pointer;" scope="col">
+                                            <i class="datatable-sort-icon fas fa-arrow-up" data-mdb-sort="peep"></i>
+                                            peep
+                                        </th>
+                                        <th style="cursor: pointer;" scope="col">
+                                            <i class="datatable-sort-icon fas fa-arrow-up" data-mdb-sort="pip"></i>
+                                            pip
+                                        </th>
+                                        <th style="cursor: pointer;" scope="col">
+                                            <i class="datatable-sort-icon fas fa-arrow-up" data-mdb-sort="resp_rate"></i>
+                                            resp_rate
+                                        </th>
+                                        <th style="cursor: pointer;" scope="col">
+                                            <i class="datatable-sort-icon fas fa-arrow-up" data-mdb-sort="sip"></i>
+                                            sip
+                                        </th>
+                                        <th style="cursor: pointer;" scope="col">
+                                            <i class="datatable-sort-icon fas fa-arrow-up" data-mdb-sort="tidal_vol"></i>
+                                            tidal_vol
+                                        </th>
+                                        <th style="cursor: pointer;" scope="col">
+                                            <i class="datatable-sort-icon fas fa-arrow-up" data-mdb-sort="tidal_vol_actual"></i>
+                                            tidal_vol_actual
+                                        </th>
+                                        <th style="cursor: pointer;" scope="col">
+                                            <i class="datatable-sort-icon fas fa-arrow-up" data-mdb-sort="tidal_vol_kg"></i>
+                                            tidal_vol_kg
+                                        </th>
+                                        <th style="cursor: pointer;" scope="col">
+                                            <i class="datatable-sort-icon fas fa-arrow-up" data-mdb-sort="tidal_vol_spon"></i>
+                                            tidal_vol_spon
+                                        </th>
+                                        <th style="cursor: pointer;" scope="col">
+                                            <i class="datatable-sort-icon fas fa-arrow-up" data-mdb-sort="bmi"></i>
+                                            bmi
+                                        </th>
+                                        <th style="cursor: pointer;" scope="col">
+                                            <i class="datatable-sort-icon fas fa-arrow-up" data-mdb-sort="referral"></i>
+                                            referral
+                                        </th>
+                                    </tr>
+                                </thead>
+                                <tbody class="datatable-body">
+                                    {% for i in dashboard_data %}
+                                    <tr scope="row">
+                                        <td data-mdb-field="encounterid">{{ i[0] }}</td>
+                                        <td data-mdb-field="end_tidal_co2">{{ i[1] }}</td>
+                                        <td data-mdb-field="feed_vol">{{ i[2] }}</td>
+                                        <td data-mdb-field="feed_vol_adm">{{ i[3] }}</td>
+                                        <td data-mdb-field="fio2">{{ i[4] }}</td>
+                                        <td data-mdb-field="fio2_ratio">{{ i[5] }}</td>
+                                        <td data-mdb-field="insp_time">{{ i[6] }}</td>
+                                        <td data-mdb-field="oxygen_flow_rate">{{ i[7] }}</td>
+                                        <td data-mdb-field="peep">{{ i[8] }}</td>
+                                        <td data-mdb-field="pip">{{ i[9] }}</td>
+                                        <td data-mdb-field="resp_rate">{{ i[10] }}</td>
+                                        <td data-mdb-field="sip">{{ i[11] }}</td>
+                                        <td data-mdb-field="tidal_vol">{{ i[12] }}</td>
+                                        <td data-mdb-field="tidal_vol_actual">{{ i[13] }}</td>
+                                        <td data-mdb-field="tidal_vol_kg">{{ i[14] }}</td>
+                                        <td data-mdb-field="tidal_vol_spon">{{ i[15] }}</td>
+                                        <td data-mdb-field="bmi">{{ i[16] }}</td>
+                                        <td data-mdb-field="referral">{{ i[17] }}</td>
+                                    </tr>
+                                    {% endfor %}
+                                </tbody>
+                            </table>
+                            <nav>
+                                <div class="d-flex justify-content-between align-items-center">
+                                    <div>
+                                        <select class="form-select form-select-sm" aria-label="Rows per page">
+                                            <option value="10" selected>10 rows</option>
+                                            <option value="25">25 rows</option>
+                                            <option value="50">50 rows</option>
+                                            <option value="100">100 rows</option>
+                                        </select>
+                                    </div>
+                                    <div>
+                                        <ul class="pagination">
+                                            <li class="page-item disabled">
+                                                <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
+                                            </li>
+                                            <li class="page-item active"><a class="page-link" href="#">1</a></li>
+                                            <li class="page-item"><a class="page-link" href="#">2</a></li>
+                                            <li class="page-item"><a class="page-link" href="#">3</a></li>
+                                            <li class="page-item">
+                                            <a class="page-link" href="#">Next</a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </nav>                              
+                        </div>
+                    </main>
                 </div>
-            </div>
-            <div class="col-lg-10">
-                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo repellendus voluptatem optio, nostrum soluta minima exercitationem modi veniam nemo! Doloremque, corrupti? Voluptate maxime, cupiditate beatae ipsa culpa quae modi totam.</p>
             </div>
         </div>
+        {% endblock content %}
     </body>
 </html>
\ No newline at end of file
-- 
GitLab