Sass compiling

Database manager

.gitignore

@@ -1,5 +1,6 @@
 # Remove all development files
 uploads/
+static/css/style.css
 
 # remove all PyCharm files
 .idea

app.py

@@ -1,40 +1,22 @@
+# Import required OnlyLegs packages
+import os
+import sys
+sys.path.insert(1, './packages')
+
+# Import database manager
+import onlylegsDB
+onlylegsDB = onlylegsDB.DBmanager()
+# Import sass compiler
+import onlylegsSass
+onlylegsSass = onlylegsSass.Sassy('default')
+
+# Import flask
 from flask import Flask, render_template, send_from_directory, abort, url_for, jsonify, redirect, request, session
 from werkzeug.utils import secure_filename
-import mysql.connector
-from mysql.connector import Error
-import os
-
-# Get database stuff
-DB_USER = os.environ.get('USERNAME')
-DB_PASS = os.environ.get('PASSWORD')
-DB_HOST = os.environ.get('HOST')
-DB_PORT = os.environ.get('PORT')
-
-DB_NAME = os.environ.get('DATABASE')
-
-try:
-    DB = mysql.connector.connect(host=DB_HOST,
-                                         port=DB_PORT,
-                                         database=DB_NAME,
-                                         user=DB_USER,
-                                         password=DB_PASS)
-    if DB.is_connected():
-        db_Info = DB.get_server_info()
-        print("Connected to MySQL Server version ", db_Info)
-        
-        cursor = DB.cursor()
-        cursor.execute("select database();")
-        
-        record = cursor.fetchone()
-        print("You're connected to database: ", record)
-
-except Error as e:
-    print("Error while connecting to MySQL", e)
-
 
 # Set flask config
 BASE_DIR = os.path.dirname(os.path.abspath(__file__))
-UPLOAD_FOLDER = os.path.join(BASE_DIR, 'uploads')
+UPLOAD_FOLDER = os.path.join(BASE_DIR, 'usr', 'uploads')
 
 app = Flask(__name__)
 app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
@@ -94,16 +76,11 @@ def image(request_id):
     except ValueError:
         abort(404)
     
-    # SQL injection prevention
-    sql = "SELECT imagename FROM images WHERE id = %s"
-    img_id = (request_id,)
+    result = onlylegsDB.getImage(request_id)
     
-    # Get image details
-    cursor = DB.cursor()
-    cursor.execute(sql, img_id)
-    result = cursor.fetchone()
+    print (result)
     
-    return render_template('image.html', fileName=result[0], id=request_id)
+    return render_template('image.html', fileName=result[1], id=request_id)
 
 
 #
@@ -114,7 +91,7 @@ def image_list(item_type):
     if request.method != 'GET':
         abort(405)
     
-    cursor = DB.cursor()
+    cursor = onlylegsDB.cursor()
     cursor.execute("SELECT id,imagename FROM images ORDER BY id DESC")
     
     item_list = cursor.fetchall()

packages/onlylegsDB.py

@@ -0,0 +1,50 @@
+import sys
+import os
+
+class DBmanager():
+    def __init__(self):
+        try:
+            import mysql.connector
+            from mysql.connector import Error
+            from dotenv import load_dotenv
+        except ImportError:
+            print("Error: could not import required modules")
+            sys.exit(1)
+        
+        try:
+            load_dotenv(os.path.join('usr', '.env'))
+            
+            database = mysql.connector.connect(host=os.environ.get('HOST'),
+                                            port=os.environ.get('PORT'),
+                                            database=os.environ.get('DATABASE'),
+                                            user=os.environ.get('USERNAME'),
+                                            password=os.environ.get('PASSWORD')
+                                            )
+            
+            if database.is_connected():
+                db_Info = database.get_server_info()
+                print("Connected to MySQL Server version: ", db_Info)
+                
+                cursor = database.cursor()
+                cursor.execute("select database();")
+                
+                record = cursor.fetchone()
+                print("You're connected to database: ", record)
+        
+        except Error as e:
+            print("Error while connecting to MySQL\n", e)
+            sys.exit(1)
+            
+        self.database = database
+        
+    def cursor(self):
+        return self.database.cursor()
+    
+    def getImage(self, id):
+        sql = "SELECT * FROM images WHERE id = %s"
+        img = (id,)
+        
+        cursor = self.cursor()
+        cursor.execute(sql, img)
+        
+        return cursor.fetchone()

packages/onlylegsSass.py

@@ -0,0 +1,28 @@
+import sys
+import os
+
+class Sassy():
+    def __init__(self, theme):
+        try:
+            import sass
+        except ImportError:
+            print("Error: sass not found")
+            sys.exit(1)
+        
+        path_to_sass = os.path.join('./usr', 'themes', theme, 'style.scss')
+        
+        if os.path.exists(path_to_sass):
+            print("Sass found at: " + path_to_sass)
+            self.sass = sass
+            self.loadTheme(path_to_sass)
+        else:
+            print("Error: theme not found")
+            sys.exit(1)
+    
+    def loadTheme (self, theme):
+        with open('static/css/style.css', 'w') as f:
+            try:
+                f.write(self.sass.compile(filename=theme, output_style='compressed'))
+                print("Sass compiled successfully to: " + f.name)
+            except self.sass.CompileError as e:
+                print("Error: sass compilation failed:\n", e)

static/css/style.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"}

templates/layout.html

@@ -15,13 +15,13 @@
 <body>
     <nav id="navRoot">
         <div>
-            <a href="{{ url_for('home') }}"><i class="ph-house-line"></i><span>Home</span></a>
-            <a href=""><i class="ph-package"></i><span>Groups</span></a>
-            <a href=""><i class="ph-upload"></i><span>Upload</span></a>
+            <a href="{{ url_for('home') }}" class="btn"><i class="ph-house-line"></i><span>Home</span></a>
+            <a href="{{ url_for('home') }}" class="btn"><i class="ph-package"></i><span>Groups</span></a>
+            <a href="{{ url_for('home') }}" class="btn"><i class="ph-upload"></i><span>Upload</span></a>
         </div>
         <div>
-            <a href=""><i class="ph-user-circle"></i><span>Profile</span></a>
-            <a href=""><i class="ph-gear"></i><span>Settings</span></a>
+            <a href="{{ url_for('home') }}" class="btn"><i class="ph-user-circle"></i><span>Profile</span></a>
+            <a href="{{ url_for('home') }}" class="btn"><i class="ph-gear"></i><span>Settings</span></a>
         </div>
     </nav>
     <main>

usr/themes/default/buttons/btn.scss

@@ -0,0 +1,53 @@
+@mixin button($color) {
+    border-color: rgba($color, 0.3);
+    background-color: rgba($color, 0);
+    color: $color;
+
+    &:hover {
+        background-color: rgba($color, 0.2);
+    }
+    &:active {
+        border-color: rgba($color, 1);
+        background-color: rgba($color, 0.5);
+        color: $color;
+    }
+}
+
+.btn {    
+    padding: 0.5rem 1rem;
+    border-radius: 0.25rem;
+
+    border: 1px solid rgba($white100, 0.3);
+    background-color: rgba($white100, 0);
+    color: $white100;
+
+    transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out;
+
+    &:hover {
+        background-color: rgba($white100, 0.2);
+    }
+    &:active {
+        border-color: rgba($white100, 1);
+        background-color: rgba($white100, 0.5);
+        color: $white100;
+    }
+
+    &.red {
+        @include button($red);
+    }
+    &.orange {
+        @include button($orange);
+    }
+    &.yellow {
+        @include button($yellow);
+    }
+    &.green {
+        @include button($green);
+    }
+    &.blue {
+        @include button($blue);
+    }
+    &.purple {
+        @include button($purple);
+    }
+}

usr/themes/default/style.scss

@@ -33,6 +33,8 @@ $font-body: "Mona-Sans", sans-serif;
   font-display: swap;
 }
 
+@import 'buttons/btn';
+
 html, body {
     margin: 0;
     padding: 0;
@@ -82,7 +84,7 @@ nav {
         gap: 0.25rem;
 
         a {
-            margin: 0;
+            margin: 0.5rem;
             padding: 1rem 1rem 1rem calc(1rem - 2px);
             
             width: 100%;