oxibase 0.5.9

Autonomous relational database management system with MVCC, time-travel queries, and full ACID compliance
Documentation
{% extends "workspace_layout.html" %}
{% block content %}
<div class="h-full flex flex-col gap-4">
    <div class="flex items-center gap-3">
        <div class="bg-primary/10 text-primary p-2 rounded-box">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
        </div>
        <h2 class="text-2xl font-bold">SQL Editor</h2>
    </div>
    
    <div class="card bg-base-100 shadow-sm border border-base-200 flex-1 flex flex-col min-h-[250px]">
        <form up-submit up-target="#query-results" action="/workspace/sql" method="post" class="flex-1 flex flex-col m-0 h-full">
            <div class="flex-1 p-0 relative h-full">
                <textarea name="query" class="textarea textarea-ghost w-full h-full p-4 font-mono text-sm resize-none focus:outline-none focus:bg-base-100 rounded-b-none" placeholder="-- Enter your SQL query here...&#10;SELECT * FROM public.my_table limit 10;" required spellcheck="false">{% if query is defined %}{{ query }}{% endif %}</textarea>
            </div>
            <div class="bg-base-200/50 border-t border-base-200 p-3 flex justify-between items-center rounded-b-box shrink-0">
                <div class="text-xs opacity-60 flex items-center gap-1">
                    <kbd class="kbd kbd-sm"></kbd> + <kbd class="kbd kbd-sm">Enter</kbd> to execute
                </div>
                <button type="submit" class="btn btn-primary btn-sm">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                    Run Query
                </button>
            </div>
        </form>
    </div>
    
    <div class="card bg-base-100 shadow-sm border border-base-200 flex-1 flex flex-col min-h-[300px]">
        <div class="bg-base-200/50 border-b border-base-200 px-4 py-3 rounded-t-box shrink-0">
            <h3 class="text-sm font-semibold">Results</h3>
        </div>
        <div id="query-results" class="flex-1 overflow-auto p-0 flex items-center justify-center relative">
            <div class="text-center opacity-40">
                <svg class="w-12 h-12 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"></path></svg>
                <p class="text-sm">Execute a query to view results</p>
            </div>
        </div>
    </div>
</div>
<script>
    document.querySelector('textarea[name="query"]').addEventListener('keydown', function(e) {
        if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
            e.preventDefault();
            this.form.dispatchEvent(new Event('submit', { cancelable: true, bubbles: true }));
        }
    });
</script>
{% endblock %}