Further refactor, still need to cleanup db.py

app.py

@@ -38,7 +38,7 @@ init_app(app)
 app.register_blueprint(timer, url_prefix='/timer')
 app.register_blueprint(test, url_prefix='/test')
 app.register_blueprint(home, url_prefix='/home')
-app.register_blueprint(http, url_prefix='/dashboard/http_functions')
+app.register_blueprint(http, url_prefix='/http')
 
 class User(UserMixin):
     def __init__(self, id, username, password_hash, created_at):
@@ -123,11 +123,7 @@ def documentation():
 @ app.route("/dashboard", methods=["GET"])
 @login_required
 def dashboard():
-    user_id = current_user.id
+    return redirect(url_for("home.index"))
-    http_functions = db.get_http_functions_for_user(user_id)
-    http_functions = create_http_functions_view_model(http_functions)
-    return render_template("dashboard/http_functions/overview.html", http_functions=http_functions)
-
 
 def _generate_script_from_natural_language(natural_query):
     """Generates a Javascript function from natural language using Gemini REST API."""

routes/http.py

@@ -30,7 +30,7 @@ DECLARE
     next_version INT;
 BEGIN
     IF TG_OP = 'INSERT' THEN
-        INSERT INTO http_function_versions (http_function_id, script_content, version_number)
+        INSERT INTO http_functions_versions (http_function_id, script_content, version_number)
         VALUES (NEW.id, NEW.script_content, 1);
 
         UPDATE http_functions
@@ -43,10 +43,10 @@ BEGIN
         IF NEW.script_content IS DISTINCT FROM OLD.script_content THEN
             SELECT COALESCE(MAX(version_number), 0) + 1
               INTO next_version
-              FROM http_function_versions
+              FROM http_functions_versions
              WHERE http_function_id = NEW.id;
 
-            INSERT INTO http_function_versions (http_function_id, script_content, version_number)
+            INSERT INTO http_functions_versions (http_function_id, script_content, version_number)
             VALUES (NEW.id, NEW.script_content, next_version);
 
             UPDATE http_functions
@@ -101,51 +101,52 @@ DEFAULT_ENVIRONMENT = """{
 
 http = Blueprint('http', __name__)
 
-@http.route("/", methods=["GET"])
+@http.route("/overview", methods=["GET"])
 @login_required
-def dashboard_http_functions():
+def overview():
     user_id = current_user.id
-    http_functions = db.get_http_functions_for_user(user_id)
+    http_functions = db.execute(
+            'SELECT id, user_id, NAME, script_content, invoked_count, environment_info, is_public, log_request, log_response, version_number FROM http_functions WHERE user_id=%s ORDER by id DESC', [user_id])
     http_functions = create_http_functions_view_model(http_functions)
     if htmx:
         return render_block(environment, "dashboard/http_functions/overview.html", "page", http_functions=http_functions)
     return render_template("dashboard/http_functions/overview.html", http_functions=http_functions)
 
 
-@http.route("/add_form", methods=["GET"])
+@http.route("/new", methods=["GET", "POST"])
 @login_required
-def get_http_function_add_form():
+def new():
     user_id = current_user.id
-    if htmx:
+    if request.method == "GET":
-        return render_block(environment, 'dashboard/http_functions/new.html', 'page', user_id=user_id, name='foo', script=DEFAULT_SCRIPT, environment_info=DEFAULT_ENVIRONMENT, is_public=False, log_request=True, log_response=False)
+        if htmx:
-    return render_template("dashboard/http_functions/new.html", user_id=user_id, name='foo', script=DEFAULT_SCRIPT, environment_info=DEFAULT_ENVIRONMENT, is_public=False, log_request=True, log_response=False)
+            return render_block(environment, 'dashboard/http_functions/new.html', 'page', user_id=user_id, name='foo', script=DEFAULT_SCRIPT, environment_info=DEFAULT_ENVIRONMENT, is_public=False, log_request=True, log_response=False)
-
+        return render_template("dashboard/http_functions/new.html", user_id=user_id, name='foo', script=DEFAULT_SCRIPT, environment_info=DEFAULT_ENVIRONMENT, is_public=False, log_request=True, log_response=False)
-
-@http.route("/create", methods=["POST"])
-@login_required
-def create_http_function():
     try:
-        user_id = current_user.id
+        name = request.json.get('name')
-        name = request.form.get('name')
+        script_content = request.json.get('script_content')
-        script_content = request.form.get('script_content')
+        environment_info = request.json.get('environment_info')
-        environment_info = request.form.get('environment_info')
+        is_public = request.json.get('is_public')
-        is_public = request.form.get('is_public')
+        log_request = request.json.get('log_request')
-        log_request = request.form.get('log_request')
+        log_response = request.json.get('log_response')
-        log_response = request.form.get('log_response')
-
-        db.create_new_http_function(user_id, name, script_content, environment_info, is_public, log_request, log_response)
         
-        http_functions = db.get_http_functions_for_user(user_id)
+        db.execute(
-        http_functions = create_http_functions_view_model(http_functions)
+            'INSERT INTO http_functions (user_id, NAME, script_content, environment_info, is_public, log_request, log_response) VALUES (%s, %s, %s, %s, %s, %s, %s)',
-        return render_block(environment, "dashboard/http_functions/overview.html", "page", http_functions=http_functions), 200, {"HX-Push-Url": url_for('http.dashboard_http_functions')}
+            [user_id, name, script_content, environment_info, is_public, log_request, log_response],
+            commit=True
+        )
+
+        return jsonify({
+            "status": "success",
+            "message": "Http function created successfully"
+        }), 200
     except Exception as e:
         print(e)
         return { "status": "error", "message": str(e) }
 
 
-@http.route("/<int:function_id>/edit", methods=["POST"])
+@http.route("/edit/<int:function_id>", methods=["POST"])
 @login_required
-def edit_http_function(function_id):
+def edit(function_id):
     try:
         user_id = current_user.id
         name = request.json.get('name')
@@ -155,35 +156,45 @@ def edit_http_function(function_id):
         log_request = request.json.get('log_request')
         log_response = request.json.get('log_response')
         
-        updated_version = db.edit_http_function(user_id, function_id, name, script_content, environment_info, is_public, log_request, log_response)
+        updated_version = db.execute(
+            'UPDATE http_functions SET NAME=%s, script_content=%s, environment_info=%s, is_public=%s, log_request=%s, log_response=%s WHERE user_id=%s AND id=%s RETURNING version_number',
+            [name, script_content, environment_info, is_public, log_request, log_response, user_id, function_id],
+            commit=True, one=True
+        )
 
         return { "status": "success", "message": f'{name} updated' }
     except Exception as e:
         print(e)
         return { "status": "error", "message": str(e) }
 
-@http.route("/<int:function_id>/delete", methods=["DELETE"])
+@http.route("/delete/<int:function_id>", methods=["DELETE"])
 @login_required
-def delete_http_function(function_id):
+def delete(function_id):
     try:
         user_id = current_user.id
-        db.delete_http_function(user_id, function_id)
+
+        db.execute(
+            'DELETE FROM http_functions WHERE user_id=%s AND id=%s', [user_id, function_id], commit=True)
         
-        http_functions = db.get_http_functions_for_user(user_id)
+        return { "status": "success", "message": f'Function deleted' }
-        http_functions = create_http_functions_view_model(http_functions)
-        return render_block(environment, "dashboard/http_functions/overview.html", "page", http_functions=http_functions), 200, {"HX-Push-Url": url_for('http.dashboard_http_functions')}
     except Exception as e:
         return jsonify({"status": 'error', "message": str(e)}), 500
 
-@http.route("/<int:function_id>/logs", methods=["GET"])
+@http.route("/logs/<int:function_id>", methods=["GET"])
 @login_required
-def get_http_function_logs(function_id):
+def logs(function_id):
     user_id = current_user.id
-    http_function = db.get_http_function_by_id(user_id, function_id)
+    http_function = db.execute(
+        'SELECT id, user_id, NAME, script_content, invoked_count, environment_info, is_public, log_request, log_response, version_number, created_at FROM http_functions WHERE user_id=%s AND id=%s',
+        [user_id, function_id], one=True)
     if not http_function:
         return jsonify({'error': 'Function not found'}), 404
     name = http_function['name']
-    http_function_invocations = db.get_http_function_invocations(function_id)
+    http_function_invocations = db.execute("""
+        SELECT id, http_function_id, STATUS, invocation_time, request_data, response_data, LOGS, version_number
+        FROM http_function_invocations
+        WHERE http_function_id=%s
+        ORDER BY invocation_time DESC""", [function_id])
     if htmx:
         return render_block(environment, 'dashboard/http_functions/logs.html', 'page', user_id=user_id, function_id=function_id, name=name, http_function_invocations=http_function_invocations)
     return render_template("dashboard/http_functions/logs.html", user_id=user_id, name=name, function_id=function_id, http_function_invocations=http_function_invocations)
@@ -192,7 +203,9 @@ def get_http_function_logs(function_id):
 @login_required
 def client(function_id):
     user_id = current_user.id
-    http_function = db.get_http_function_by_id(user_id, function_id)
+    http_function = db.execute(
+        'SELECT id, user_id, NAME, script_content, invoked_count, environment_info, is_public, log_request, log_response, version_number, created_at FROM http_functions WHERE user_id=%s AND id=%s',
+        [user_id, function_id], one=True)
     if not http_function:
         return jsonify({'error': 'Function not found'}), 404
     
@@ -201,44 +214,46 @@ def client(function_id):
         return render_block(environment, 'dashboard/http_functions/client.html', 'page', function_id=function_id, **http_function)
     return render_template("dashboard/http_functions/client.html", function_id=function_id, **http_function)
 
-@http.route("/<int:function_id>/history", methods=["GET"])
+@http.route('/history/<int:function_id>')
 @login_required
-def get_http_function_history(function_id):
+def history(function_id):
-    user_id = current_user.id
+    # Fetch the http function to verify ownership
-    http_function = db.get_http_function_by_id(user_id, function_id)
+    http_function = db.execute("""
+        SELECT id, name, script_content AS code, version_number
+        FROM http_functions 
+        WHERE id = %s AND user_id = %s
+    """, [function_id, current_user.id], one=True)
+
     if not http_function:
-        return jsonify({'error': 'Function not found'}), 404
+        flash('Http function not found', 'error')
-    
+        return redirect(url_for('http.overview'))
-    name = http_function['name']
-    version_number = http_function['version_number']
-    original_script = http_function['script_content'] if version_number == 1 else None
 
-    http_function_history = []
+    # Fetch all versions
-    if version_number > 1:
+    versions = db.execute("""
-        raw_history = db.get_http_function_history(function_id)
+        SELECT version_number, script_content AS script, updated_at AS versioned_at
+        FROM http_functions_versions
+        WHERE http_function_id = %s
+        ORDER BY version_number DESC
+    """, [function_id])
 
-        for i in range(len(raw_history) - 1):
+    # Convert datetime objects to ISO format strings
-            pre_version = raw_history[i + 1]
+    for version in versions:
-            post_version = raw_history[i]
+        version['versioned_at'] = version['versioned_at'].isoformat() if version['versioned_at'] else None
 
-            http_function_history.append({
+    args = {
-                'pre': pre_version['script_content'],
+        'user_id': current_user.id,
-                'post': post_version['script_content'],
+        'function_id': function_id,
-                'version_id': post_version['version_id'],
+        'http_function': http_function,
-                'version_number': post_version['version_number'],
+        'versions': versions
-                'updated_at': post_version['updated_at']
+    }
-            })
-        
-            if raw_history:
-                original_script = raw_history[-1]['script_content']
 
     if htmx:
-        return render_block(environment, 'dashboard/http_functions/history.html', 'page', user_id=user_id, function_id=function_id, name=name, http_function=http_function, http_function_history=http_function_history, original_script=original_script)
+        return render_block(environment, 'dashboard/http_functions/history.html', 'page', **args)
-    return render_template("dashboard/http_functions/history.html", user_id=user_id, name=name, function_id=function_id, http_function=http_function, http_function_history=http_function_history, original_script=original_script)
+    return render_template('dashboard/http_functions/history.html', **args)
 
 @http.route("/editor/<int:function_id>", methods=["GET"])
 @login_required
-def http_function_editor(function_id):
+def editor(function_id):
     user_id = current_user.id
     http_function = db.get_http_function_by_id(user_id, function_id)
     if not http_function:
@@ -257,104 +272,11 @@ def http_function_editor(function_id):
         'user_id': user_id,
         'function_id': function_id,
         # Add new URLs for navigation
-        'cancel_url': url_for('http.dashboard_http_functions'),
+        'cancel_url': url_for('http.overview'),
-        'edit_url': url_for('http.http_function_editor', function_id=function_id),
+        'edit_url': url_for('http.editor', function_id=function_id),
     }
 
     if htmx:
         return render_block(environment, "dashboard/http_functions/editor.html", "page", **editor_data)
     
-    return render_template("dashboard/http_functions/editor.html", **editor_data)
+    return render_template("dashboard/http_functions/editor.html", **editor_data)
-@http.route("/api", methods=["POST"])
-@login_required
-def api_create_http_function():
-    try:
-        user_id = current_user.id
-        data = request.get_json()
-        name = data.get('name')
-        script_content = data.get('script_content')
-        environment_info = data.get('environment_info')
-        is_public = data.get('is_public')
-        log_request = data.get('log_request')
-        log_response = data.get('log_response')
-
-        # Check if function with same name already exists for this user
-        existing_function = db.get_http_function(user_id, name)
-        if existing_function:
-            return jsonify({
-                "status": "error",
-                "message": f"A function with the name '{name}' already exists"
-            }), 400
-
-        http_function = db.create_new_http_function(
-            user_id, 
-            name, 
-            script_content, 
-            environment_info, 
-            is_public, 
-            log_request, 
-            log_response
-        )
-        
-        return jsonify({
-            "status": "success",
-            "message": f'{name} created',
-            "function": http_function
-        })
-    except Exception as e:
-        return jsonify({
-            "status": "error",
-            "message": str(e)
-        }), 400
-
-@http.route("/api/<int:function_id>", methods=["POST"])
-@login_required
-def api_update_http_function(function_id):
-    try:
-        user_id = current_user.id
-        data = request.get_json()
-        name = data.get('name')
-        script_content = data.get('script_content')
-        environment_info = data.get('environment_info')
-        is_public = data.get('is_public')
-        log_request = data.get('log_request')
-        log_response = data.get('log_response')
-        
-        updated_function = db.edit_http_function(
-            user_id,
-            function_id, 
-            name, 
-            script_content, 
-            environment_info, 
-            is_public, 
-            log_request, 
-            log_response
-        )
-
-        return jsonify({
-            "status": "success",
-            "message": f'{name} updated',
-            "function": updated_function
-        })
-    except Exception as e:
-        return jsonify({
-            "status": "error", 
-            "message": str(e)
-        }), 400
-
-@http.route("/api/<int:function_id>", methods=["DELETE"])
-@login_required
-def api_delete_http_function(function_id):
-    try:
-        user_id = current_user.id
-        db.delete_http_function(user_id, function_id)
-        
-        return jsonify({
-            "status": "success",
-            "message": "Function deleted successfully"
-        })
-    except Exception as e:
-        return jsonify({
-            "status": "error",
-            "message": str(e)
-        }), 400

static/js/mithril/editor.js

@@ -168,6 +168,9 @@ const Editor = {
             name: this.name,
             script_content: this.jsValue,
             environment_info: this.jsonValue,
+            is_public: this.isPublic,
+            log_request: this.logRequest,
+            log_response: this.logResponse,
           };
 
       const response = await m.request({

templates/dashboard.html

@@ -33,10 +33,9 @@
                         Home
                     </a><a
                         class="flex items-center gap-3 rounded-lg px-3 py-2 text-gray-500 transition-all hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-50  cursor-pointer"
-                        data-id="15" hx-get="{{ url_for('http.dashboard_http_functions') }}" hx-target="#container"
+                        data-id="15" hx-get="{{ url_for('http.overview') }}" hx-target="#container" hx-swap="innerHTML"
-                        hx-swap="innerHTML" hx-push-url="true"><svg xmlns="http://www.w3.org/2000/svg" width="18"
+                        hx-push-url="true"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none"
-                            height="18" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+                            viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
-                            class="size-6">
                             <path stroke-linecap="round" stroke-linejoin="round"
                                 d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418" />
                         </svg>

templates/dashboard/home.html

@@ -270,7 +270,7 @@
                     class="inline-flex items-center justify-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors duration-200">
                     View Timer Functions
                 </a>
-                <a href="{{ url_for('http.dashboard_http_functions') }}"
+                <a href="{{ url_for('http.overview') }}"
                     class="inline-flex items-center justify-center px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white font-medium rounded-lg transition-colors duration-200">
                     View HTTP Functions
                 </a>

templates/dashboard/http_functions/client.html

@@ -8,10 +8,10 @@ show_edit_form=True,
 show_logs=True,
 show_client=True,
 show_history=True,
-edit_url=url_for('http.http_function_editor', function_id=function_id),
+edit_url=url_for('http.editor', function_id=function_id),
-cancel_url=url_for('http.dashboard_http_functions'),
+cancel_url=url_for('http.overview'),
-logs_url=url_for('http.get_http_function_logs', function_id=function_id),
+logs_url=url_for('http.logs', function_id=function_id),
-history_url=url_for('http.get_http_function_history', function_id=function_id)) }}
+history_url=url_for('http.history', function_id=function_id)) }}
 
 <div class="mx-auto w-full pt-4" id="client-u{{ user_id }}-f{{ function_id }}">
 </div>

templates/dashboard/http_functions/editor.html

@@ -10,8 +10,8 @@ show_client=True,
 show_history=True,
 edit_url=edit_url,
 cancel_url=cancel_url,
-logs_url=url_for('http.get_http_function_logs', function_id=function_id),
+logs_url=url_for('http.logs', function_id=function_id),
-history_url=url_for('http.get_http_function_history', function_id=function_id)) }}
+history_url=url_for('http.history', function_id=function_id)) }}
 
 
 <div id="app" class="p-1">
@@ -33,8 +33,9 @@ history_url=url_for('http.get_http_function_history', function_id=function_id))
     logResponse: {{ log_response | tojson }},
     versionNumber: {{ version_number }},
     executeUrl: "{{ url_for('execute_code', playground='true') }}",
-    saveUrl: "{{ url_for('http.api_update_http_function', function_id=id) if id else url_for('http.api_create_http_function') }}",
+    saveUrl: "{{ url_for('http.edit', function_id=id) if id else url_for('http.new') }}",
-    deleteUrl: "{{ url_for('http.api_delete_http_function', function_id=id) if id else '' }}",
+    deleteUrl: "{{ url_for('http.delete', function_id=id) if id else '' }}",
+    cancelUrl: "{{ url_for('http.overview') }}",
     showDeleteButton: true
     })
   })

templates/dashboard/http_functions/history.html

@@ -8,196 +8,17 @@ show_edit_form=True,
 show_logs=True,
 show_client=True,
 show_history=True,
-edit_url=url_for('http.http_function_editor', function_id=function_id),
+edit_url=url_for('http.editor', function_id=function_id),
-cancel_url=url_for('http.dashboard_http_functions'),
+cancel_url=url_for('http.overview'),
-logs_url=url_for('http.get_http_function_logs', function_id=function_id),
+logs_url=url_for('http.logs', function_id=function_id),
-history_url=url_for('http.get_http_function_history', function_id=function_id)) }}
+history_url=url_for('http.history', function_id=function_id)) }}
-
-<!-- Timeline -->
-<div>
-    {% if http_function.version_number > 1 %}
-    {% for entry in http_function_history %}
-    <!-- Item -->
-    <div class="flex gap-x-3">
-        <!-- Left Content -->
-        <div class="w-24 text-end">
-            <span class="text-xs text-gray-500">{{ entry.updated_at.strftime('%b %d %Y %I:%M %p').lstrip("0").replace("
-                0", " ") }}
-            </span>
-        </div>
-        <!-- End Left Content -->
-
-        <!-- Icon -->
-        <div
-            class="relative last:after:hidden after:absolute after:top-7 after:bottom-0 after:start-3.5 after:w-px after:-translate-x-[0.5px] after:bg-gray-200">
-            <div class="relative z-10 size-7 flex justify-center items-center">
-                <div class="size-2 rounded-full bg-gray-400"></div>
-            </div>
-        </div>
-        <!-- End Icon -->
-
-        <!-- Right Content -->
-        <div class="grow pt-0.5 pb-4 cursor-pointer">
-            <h3 class="flex gap-x-1.5 font-semibold text-gray-800">
-                v{{ entry.version_number }}
-            </h3>
-            <p class="mt-1 text-sm text-gray-600">
-            </p>
-
-            <button type="button"
-                class="mt-1 -ms-1 p-1 inline-flex items-center gap-x-2 text-xs rounded-lg border border-transparent text-gray-500 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none">
-                Revert
-            </button>
-
-        </div>
-        <!-- End Right Content -->
-    </div>
-    <div class="block">
-        <div id="diff_{{ entry.version_id }}" class="relative h-80"></div>
-    </div>
-    <script>
-        (function () {
-            // Assigning JSON content to a JavaScript variable
-            var preContent = '{{ entry.pre | tojson | safe }}';
-            var postContent = '{{ entry.post | tojson | safe }}';
-
-            var aceDiffer = new AceDiff({
-                element: '#diff_{{ entry.version_id }}',
-                mode: "ace/mode/javascript",
-                left: {
-                    content: preContent,
-                    editable: false,
-                },
-                right: {
-                    content: postContent,
-                    editable: false,
-                },
-            });
-
-            // Retrieve the individual editors
-            var editors = aceDiffer.getEditors();
-
-            // Set the maxLines property on each editor
-            editors.left.setOptions({
-                maxLines: 20, // Set the maximum number of lines
-                autoScrollEditorIntoView: true,
-            });
-            editors.left.session.setOption("useWorker", false);
-
-            editors.right.setOptions({
-                maxLines: 20, // Set the maximum number of lines
-                autoScrollEditorIntoView: true,
-            });
-            editors.right.session.setOption("useWorker", false);
-
-        })();
-    </script>
-
-    <!-- End Item -->
-    {% endfor %}
-    <!-- Item -->
-    <div class="flex gap-x-3">
-        <!-- Left Content -->
-        <div class="w-24 text-end">
-            <span class="text-xs text-gray-500">{{ http_function.created_at.strftime('%b %d %Y %I:%M
-                %p').lstrip("0").replace("
-                0", " ") }}
-            </span>
-        </div>
-        <!-- End Left Content -->
-
-        <!-- Icon -->
-        <div
-            class="relative last:after:hidden after:absolute after:top-7 after:bottom-0 after:start-3.5 after:w-px after:-translate-x-[0.5px] after:bg-gray-200">
-            <div class="relative z-10 size-7 flex justify-center items-center">
-                <div class="size-2 rounded-full bg-gray-400"></div>
-            </div>
-        </div>
-        <!-- End Icon -->
-
-        <!-- Right Content -->
-        <div class="grow pt-0.5 pb-4 cursor-pointer">
-            <h3 class="flex gap-x-1.5 font-semibold text-gray-800">
-                v1
-            </h3>
-            <p class="mt-1 text-sm text-gray-600">
-            </p>
-            <button type="button"
-                class="mt-1 -ms-1 p-1 inline-flex items-center gap-x-2 text-xs rounded-lg border border-transparent text-gray-500 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none">
-                Revert
-            </button>
-        </div>
-        <!-- End Right Content -->
-    </div>
-
-    <div id="diff_1_editor" class="relative rounded-lg shadow-lg p-4 text-opacity-0">{{ original_script }}</div>
-    <script>
-        var editor = ace.edit("diff_1_editor");
-        editor.setOptions({
-            maxLines: 100
-        });
-        editor.setTheme("ace/theme/github_dark");
-        editor.session.setMode("ace/mode/javascript");
-
-        editor.session.$worker.send("changeOptions", [{ asi: true }]);
-    </script>
-    <!-- End Item -->
-    {% else %}
-
-    <!-- Item -->
-    <div class="flex gap-x-3">
-        <!-- Left Content -->
-        <div class="w-24 text-end">
-            <span class="text-xs text-gray-500">{{ http_function.created_at.strftime('%b %d %Y %I:%M
-                %p').lstrip("0").replace("
-                0", " ") }}
-            </span>
-        </div>
-        <!-- End Left Content -->
-
-        <!-- Icon -->
-        <div
-            class="relative last:after:hidden after:absolute after:top-7 after:bottom-0 after:start-3.5 after:w-px after:-translate-x-[0.5px] after:bg-gray-200">
-            <div class="relative z-10 size-7 flex justify-center items-center">
-                <div class="size-2 rounded-full bg-gray-400"></div>
-            </div>
-        </div>
-        <!-- End Icon -->
-
-        <!-- Right Content -->
-        <div class="grow pt-0.5 pb-4 cursor-pointer">
-            <h3 class="flex gap-x-1.5 font-semibold text-gray-800">
-                v1
-            </h3>
-            <p class="mt-1 text-sm text-gray-600">
-            </p>
-            <button type="button"
-                class="mt-1 -ms-1 p-1 inline-flex items-center gap-x-2 text-xs rounded-lg border border-transparent text-gray-500 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none">
-                Revert
-            </button>
-        </div>
-        <!-- End Right Content -->
-
-    </div>
-
-    <div id="diff_1_editor" class="relative rounded-lg shadow-lg p-4 text-opacity-0">{{ original_script }}</div>
-    <script>
-        var editor = ace.edit("diff_1_editor");
-        editor.setOptions({
-            maxLines: 100,
-            readOnly: true,  // Disable editing
-            highlightActiveLine: false,  // Optionally, disable highlighting the active line
-            highlightGutterLine: false   // Optionally, disable highlighting the gutter line
-        });
-        editor.setTheme("ace/theme/github_dark");
-        editor.session.setMode("ace/mode/javascript");
-    </script>
-
-    <!-- End Item -->
-    {% endif %}
-
-</div>
-<!-- End Timeline -->
 
+<div id="version-diff"></div>
 
+<script>
+    // Mount the Mithril component with versions as an attribute
+    m.mount(document.getElementById("version-diff"), {
+        view: () => m(DiffView, { versions: {{ versions| tojson }} })
+    });
+</script>
 {% endblock %}

templates/dashboard/http_functions/logs.html

@@ -8,10 +8,10 @@ show_edit_form=True,
 show_logs=True,
 show_client=True,
 show_history=True,
-edit_url=url_for('http.http_function_editor', function_id=function_id),
+edit_url=url_for('http.editor', function_id=function_id),
-cancel_url=url_for('http.dashboard_http_functions'),
+cancel_url=url_for('http.overview'),
-logs_url=url_for('http.get_http_function_logs', function_id=function_id),
+logs_url=url_for('http.logs', function_id=function_id),
-history_url=url_for('http.get_http_function_history', function_id=function_id)) }}
+history_url=url_for('http.history', function_id=function_id)) }}
 
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
     <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">

templates/dashboard/http_functions/new.html

@@ -9,8 +9,8 @@ show_refresh=False,
 show_logs=False,
 show_client=False,
 show_link=False,
-dashboardUrl=url_for('http.dashboard_http_functions'),
+dashboardUrl=url_for('http.overview'),
-cancel_url=url_for('http.dashboard_http_functions'),
+cancel_url=url_for('http.overview'),
 title='New HTTP Function')
 }}
 
@@ -32,9 +32,9 @@ title='New HTTP Function')
         logRequest: {{ log_request | tojson }},
         logResponse: {{ log_response | tojson }},
         executeUrl: "{{ url_for('execute_code', playground='true') }}",
-        saveUrl: "{{ url_for('http.api_create_http_function') }}",
+        saveUrl: "{{ url_for('http.new') }}",
         showDeleteButton: false,
-        dashboardUrl: "{{ url_for('http.dashboard_http_functions') }}"
+        dashboardUrl: "{{ url_for('http.overview') }}"
       })
     })
 </script>

templates/dashboard/http_functions/overview.html

@@ -7,8 +7,7 @@
         <h1 class="text-2xl font-bold text-gray-900">HTTP Functions</h1>
         <button
             class="inline-flex items-center px-4 py-2 ml-auto bg-green-600 hover:bg-green-700 text-white font-medium rounded-lg transition-colors duration-200"
-            hx-get="{{ url_for('http.get_http_function_add_form') }}" hx-target="#container" hx-swap="innerHTML"
+            hx-get="{{ url_for('http.new') }}" hx-target="#container" hx-swap="innerHTML" hx-push-url="true">
-            hx-push-url="true">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                 stroke="currentColor" class="w-5 h-5 mr-2">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path>
@@ -34,8 +33,8 @@
                     <tr class="hover:bg-gray-50">
                         <td class="px-6 py-4">
                             <div class="flex items-center gap-2 cursor-pointer"
-                                hx-get="{{ url_for('http.http_function_editor', function_id=function.id) }}"
+                                hx-get="{{ url_for('http.editor', function_id=function.id) }}" hx-target="#container"
-                                hx-target="#container" hx-swap="innerHTML" hx-push-url="true">
+                                hx-swap="innerHTML" hx-push-url="true">
                                 <span class="font-medium text-gray-900">{{ function.name }}</span>
                                 <span
                                     class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full">
@@ -76,8 +75,8 @@
                             <div class="flex gap-3">
                                 <button
                                     class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-indigo-700 bg-indigo-50 rounded-md hover:bg-indigo-100 transition-colors duration-200"
-                                    hx-get="{{ url_for('http.get_http_function_logs', function_id=function.id) }}"
+                                    hx-get="{{ url_for('http.logs', function_id=function.id) }}" hx-target="#container"
-                                    hx-target="#container" hx-swap="innerHTML" hx-push-url="true">
+                                    hx-swap="innerHTML" hx-push-url="true">
                                     <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-1.5" fill="none"
                                         viewBox="0 0 24 24" stroke="currentColor">
                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"