reorganized using templates

OpenIPC · Oct 1, 2024 · 258288c · 258288c
1 parent 603d96b
commit 258288c
Show file tree

Hide file tree

Showing 10 changed files with 167 additions and 156 deletions.
diff --git a/README.md b/README.md
@@ -8,6 +8,8 @@ I wanted an easy way to edit files and watch videos on the Radxa
 python -m venv .venv
 source .venv/bin/activate
 pip install -r requirements.txt
+
+echo "FLASK_ENV=development > .env"
 ```
 
 

diff --git a/py_config_gs/app.py b/py_config_gs/app.py
@@ -12,15 +12,25 @@
 app = Flask(__name__)
 
 #SETTINGS_FILE = "/Users/mcarr/config/settings.json"
-SETTINGS_FILE = "/config/settings.json"
+#SETTINGS_FILE = "/config/settings.json"
+if os.getenv('FLASK_ENV') == 'development':
+    # In development, use the home folder settings file
+    SETTINGS_FILE = os.path.expanduser('~/config/settings.json')
+else:
+    # In production, use the config folder
+    SETTINGS_FILE = '/config/settings.json'
+
+# Log the SETTINGS_FILE path
+logger.info(f'ENV: {os.getenv('FLASK_ENV')}')
+logger.info(f'Settings file path: {SETTINGS_FILE}')
 
 # Load settings.json
 with open(SETTINGS_FILE, 'r') as f:
     settings = json.load(f)
 
 # Access configuration files and video directory
 config_files = settings['config_files']
-VIDEO_DIR = settings['VIDEO_DIR']
+VIDEO_DIR = os.path.expanduser(settings['VIDEO_DIR']) 
 SERVER_PORT = settings['SERVER_PORT']
 
 logger.debug(f'Loaded settings: {settings}')
@@ -86,10 +96,41 @@ def videos():
     logger.debug(f'Video files found: {video_files}')
     return render_template('videos.html', video_files=video_files)
 
+# @app.route('/videos')
+# def videos():
+#     video_files = [f for f in os.listdir(VIDEO_DIR) if f.endswith(('.mp4', '.mkv', '.avi'))]
+#     logger.debug(f'VIDEO_DIR: {VIDEO_DIR}')
+#     logger.debug(f'Video files found: {video_files}')
+#     return render_template('videos.html', video_files=video_files)
+
+# @app.route('/play/<filename>')
+# def play(filename):
+#     logger.debug(f'PLAY: {filename}')
+#     return render_template('play.html', filename=filename)
+
+# @app.route('/play/<filename>')
+# def play(filename):
+#     logger.debug(f'PLAY: {filename}')
+
+#     # Serve the video file from VIDEO_DIR
+#     try:
+#         return send_from_directory(VIDEO_DIR, filename)
+#     except FileNotFoundError:
+#         logger.error(f'File not found: {filename}')
+#         return f"File {filename} not found", 404
+# @app.route('/play/<filename>')
+# def play(filename):
+#     return render_template('play.html', filename=filename)
 @app.route('/play/<filename>')
 def play(filename):
-    return render_template('play.html', filename=filename)
+    try:
+        # Ensure the file exists in the VIDEO_DIR and is served from there
+        return send_from_directory(VIDEO_DIR, filename)
+    except FileNotFoundError:
+        logger.error(f'Video file not found: {filename}')
+        return "File not found", 404
 
+
 # @app.route('/play/<filename>')
 # def play(filename):
 #     return send_from_directory(VIDEO_DIR, filename)

diff --git a/py_config_gs/static/styles.css → py_config_gs/static/css/styles.css b/py_config_gs/static/styles.css → py_config_gs/static/css/styles.css
@@ -86,9 +86,17 @@ p {
 }
 
 /* Footer Styles */
-footer {
+/* footer {
     margin-top: 20px;
     text-align: center;
     font-size: 0.8em;
     color: #666;
+} */
+footer {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    background-color: #f1f1f1;
+    text-align: center;
+    padding: 10px;
 }
diff --git a/py_config_gs/static/js/script.js b/py_config_gs/static/js/script.js
@@ -0,0 +1,3 @@
+
+
+
diff --git a/py_config_gs/templates/base.html b/py_config_gs/templates/base.html
@@ -0,0 +1,38 @@
+<!-- templates/base.html -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}My Flask App{% endblock %}</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+</head>
+<body>
+
+  <!-- Header Section -->
+  <header>
+    <h1>Welcome to the Configuration Manager</h1>
+
+    <div class="tabs">
+        <ul>
+            <li><a href="{{ url_for('home') }}">Home</a></li>
+            <li><a href="{{ url_for('journal') }}">Journal</a></li>
+            <li><a href="{{ url_for('videos') }}">Videos</a></li>
+        </ul>
+    </div>
+
+  </header>
+
+  <!-- Main Content Block -->
+  <main>
+    {% block content %}
+    {% endblock %}
+  </main>
+
+  <!-- Footer Section -->
+  <footer>
+    <p>&copy; 2024 My Flask App</p>
+  </footer>
+
+</body>
+</html>
diff --git a/py_config_gs/templates/edit.html b/py_config_gs/templates/edit.html
@@ -1,22 +1,7 @@
 <!-- templates/edit.html -->
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Edit {{ filename }}</title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
-</head>
-<body>
-    <h1>Welcome to the Configuration Manager</h1>
-
-    <div class="tabs">
-        <ul>
-            <li><a href="{{ url_for('home') }}">Home</a></li>
-            <li><a href="{{ url_for('journal') }}">Journal</a></li>
-            <li><a href="{{ url_for('videos') }}">Videos</a></li>
-        </ul>
-    </div>
+{% extends "base.html" %}
+
+{% block content %}
     <div class="content">
         <h2>Edit Configuration File: {{ filename }}</h2>
         <form method="POST">
@@ -25,6 +10,4 @@ <h2>Edit Configuration File: {{ filename }}</h2>
         </form>
         <a href="{{ url_for('home') }}">Cancel</a>
     </div>
-    {% include 'footer.html' %}
-</body>
-</html>
+{% endblock %}
diff --git a/py_config_gs/templates/home.html b/py_config_gs/templates/home.html
@@ -1,43 +1,7 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Home</title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
-    <script>
-        async function fetchTemperatures() {
-            try {
-                const response = await fetch('/temperature');
-                const data = await response.json();
-
-                if (response.ok) {
-                    document.getElementById('soc-temp').innerText = `SOC Temperature: ${data.soc_temperature} °C`;
-                    document.getElementById('gpu-temp').innerText = `GPU Temperature: ${data.gpu_temperature} °C`;
-                    document.getElementById('soc-temp-f').innerText = `SOC Temperature: ${data.soc_temperature_f} °F`;
-                    document.getElementById('gpu-temp-f').innerText = `GPU Temperature: ${data.gpu_temperature_f} °F`;
-                } else {
-                    console.error('Error fetching temperature:', data.error);
-                }
-            } catch (error) {
-                console.error('Fetch error:', error);
-            }
-        }
-
-        setInterval(fetchTemperatures, 5000); // Update every 5 seconds
-    </script>
-</head>
-<body>
-    <h1>Welcome to the Configuration Manager</h1>
-
-    <div class="tabs">
-        <ul>
-            <li><a href="{{ url_for('home') }}">Home</a></li>
-            <li><a href="{{ url_for('journal') }}">Journal</a></li>
-            <li><a href="{{ url_for('videos') }}">Videos</a></li>
-        </ul>
-    </div>
+<!-- templates/home.html -->
+{% extends "base.html" %}
 
+{% block content %}
     <h2>Configuration Files</h2>
     {% if config_files %}
         <ul>
@@ -59,11 +23,33 @@ <h2>Radxa Temps</h2>
     <li><div id="soc-temp-f">SOC Temperature: N/A</div></li>
     <li><div id="gpu-temp-f">GPU Temperature: N/A</div></li>
     </ul>
-
-    {% include 'footer.html' %}
+
 
     <script>
+
+        async function fetchTemperatures() {
+            try {
+                const response = await fetch('/temperature');
+                const data = await response.json();
+
+                if (response.ok) {
+                    document.getElementById('soc-temp').innerText = `SOC Temperature: ${data.soc_temperature} °C`;
+                    document.getElementById('gpu-temp').innerText = `GPU Temperature: ${data.gpu_temperature} °C`;
+                    document.getElementById('soc-temp-f').innerText = `SOC Temperature: ${data.soc_temperature_f} °F`;
+                    document.getElementById('gpu-temp-f').innerText = `GPU Temperature: ${data.gpu_temperature_f} °F`;
+                } else {
+                    console.error('Error fetching temperature:', data.error);
+                }
+            } catch (error) {
+                console.error('Fetch error:', error);
+            }
+        }
+
+        setInterval(fetchTemperatures, 5000); // Update every 5 seconds
+
+
+
         fetchTemperatures(); // Initial fetch
     </script>
-</body>
-</html>
+
+{% endblock %}
diff --git a/py_config_gs/templates/journal.html b/py_config_gs/templates/journal.html
@@ -1,46 +1,33 @@
 <!-- templates/journal.html -->
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Journal Logs</title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
-    <script>
-        function startStream() {
-            const eventSource = new EventSource("/stream");
-            const logBox = document.getElementById("logBox");
-
-            eventSource.onmessage = function(event) {
-                logBox.value += event.data + "\n";
-                logBox.scrollTop = logBox.scrollHeight; // Auto-scroll to the bottom
-            };
+{% extends "base.html" %}
 
-            eventSource.onerror = function() {
-                console.error("EventSource failed.");
-                eventSource.close();
-            };
-        }
+{% block content %}
+<div class="content">
+    <h2>Journal Logs</h2>
+    <textarea id="logBox" rows="20" cols="100" readonly></textarea>
+</div>
 
-        window.onload = startStream;
-    </script>
-</head>
-<body>
-    <h1>Welcome to the Configuration Manager</h1>
+
+
+<!-- Include the JavaScript file -->
+ <script>
+    function startStream() {
+    const eventSource = new EventSource("/stream");
+    const logBox = document.getElementById("logBox");
 
-    <div class="tabs">
-        <ul>
-            <li><a href="{{ url_for('home') }}">Home</a></li>
-            <li><a href="{{ url_for('journal') }}">Journal</a></li>
-            <li><a href="{{ url_for('videos') }}">Videos</a></li>
-        </ul>
-    </div>
+    eventSource.onmessage = function(event) {
+        logBox.value += event.data + "\n";
+        logBox.scrollTop = logBox.scrollHeight; // Auto-scroll to the bottom
+    };
+
+    eventSource.onerror = function() {
+        console.error("EventSource failed.");
+        eventSource.close();
+    };
+}
 
+window.onload = startStream;
+ </script>
+<!-- <script src="{{ url_for('static', filename='js/script.js') }}"></script> -->
 
-    <div class="content">
-        <h2>Journal Logs</h2>
-        <textarea id="logBox" rows="20" cols="100" readonly></textarea>
-    </div>
-    {% include 'footer.html' %}
-</body>
-</html>
+{% endblock %}
diff --git a/py_config_gs/templates/play.html b/py_config_gs/templates/play.html
@@ -1,31 +1,11 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Play Video</title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
-</head>
-<body>
-    <h1>Welcome to the Configuration Manager</h1>
-
-    <div class="tabs">
-        <ul>
-            <li><a href="{{ url_for('home') }}">Home</a></li>
-            <li><a href="{{ url_for('journal') }}">Journal</a></li>
-            <li><a href="{{ url_for('videos') }}">Videos</a></li>
-        </ul>
-    </div>
-
+<!-- templates/play.html -->
+{% extends "base.html" %}
 
+{% block content %}
+  <div class="container">
     <h1>Playing Video: {{ filename }}</h1>
-    <video controls>
-        <source src="{{ url_for('static', filename=filename) }}" type="video/mp4">
-        Your browser does not support the video tag.
+    <video controls autoplay width="80%" src="{{ url_for('play', filename=filename) }}" type="video/mp4">
+      Your browser does not support the video tag.
     </video>
-    <br>
-    <a href="{{ url_for('videos') }}">Back to Videos</a>
-
-    {% include 'footer.html' %}
-</body>
-</html>
+  </div>
+{% endblock %}