Add recent sql history component

Author: swordfish444

debug-db-base/src/main/assets/app.js

@@ -28,12 +28,88 @@ $( document ).ready(function() {
         $(this).addClass('selected');
     });
 
+    $( document ).on( "click", "#addb-query-history-toggle", function() {
+        renderQueryHistoryMenu();
+    });
+
+    $( document ).on( "click", ".addb-query-history-item", function(e) {
+        e.preventDefault();
+        var query = $(this).data("query");
+        if (query != null) {
+            $("#query").val(query).focus();
+        }
+    });
 
 });
 
 var isDatabaseSelected = true;
 var isDemoModeEnabled = false;
 
+var QUERY_HISTORY_STORAGE_KEY = "addb.queryHistory.v1";
+var QUERY_HISTORY_MAX_ITEMS = 10;
+
+function loadQueryHistory() {
+    try {
+        if (!window.localStorage) return [];
+        var raw = window.localStorage.getItem(QUERY_HISTORY_STORAGE_KEY);
+        if (!raw) return [];
+        var parsed = JSON.parse(raw);
+        if (!Array.isArray(parsed)) return [];
+        return parsed.filter(function (item) { return typeof item === "string" && item.trim().length > 0; });
+    } catch (e) {
+        return [];
+    }
+}
+
+function saveQueryHistory(history) {
+    try {
+        if (!window.localStorage) return;
+        window.localStorage.setItem(QUERY_HISTORY_STORAGE_KEY, JSON.stringify(history));
+    } catch (e) {
+        // ignore (e.g. storage disabled)
+    }
+}
+
+function addQueryToHistory(query) {
+    var normalizedQuery = (query == null ? "" : String(query)).trim();
+    if (!normalizedQuery) return;
+
+    var history = loadQueryHistory();
+
+    for (var i = history.length - 1; i >= 0; i--) {
+        if (history[i] === normalizedQuery) {
+            history.splice(i, 1);
+        }
+    }
+
+    history.unshift(normalizedQuery);
+    if (history.length > QUERY_HISTORY_MAX_ITEMS) {
+        history = history.slice(0, QUERY_HISTORY_MAX_ITEMS);
+    }
+    saveQueryHistory(history);
+}
+
+function renderQueryHistoryMenu() {
+    var menu = $("#addb-query-history-menu");
+    if (!menu.length) return;
+
+    menu.empty();
+
+    var history = loadQueryHistory();
+    if (!history.length) {
+        menu.append($("<li>", { "class": "disabled" }).append($("<a>", { href: "#", tabindex: -1 }).text("No recent queries")));
+        return;
+    }
+
+    for (var i = 0; i < history.length; i++) {
+        menu.append(
+            $("<li>").append(
+                $("<a>", { href: "#", "class": "addb-query-history-item" }).text(history[i]).data("query", history[i])
+            )
+        );
+    }
+}
+
 function shouldUseDemoData() {
     try {
         var search = window.location.search || "";
@@ -197,6 +273,8 @@ function queryFunction() {
        return;
    }
 
+   addQueryToHistory(query);
+
    $.ajax({url: "query?query="+escape(query), success: function(result){
 
            result = JSON.parse(result);

debug-db-base/src/main/assets/custom.css

@@ -44,6 +44,33 @@ body.addb-sidebar-compact #table-list .list-group-item {
     margin-right: 8px;
 }
 
+.addb-query-history {
+    display: inline-block;
+    margin-left: 6px;
+}
+
+.addb-query-history-toggle {
+    padding: 0 4px;
+    color: #777;
+}
+
+.addb-query-history-toggle:hover,
+.addb-query-history-toggle:focus {
+    color: #333;
+    text-decoration: none;
+}
+
+#addb-query-history-menu {
+    max-width: 720px;
+}
+
+#addb-query-history-menu > li > a {
+    white-space: normal;
+    word-break: break-word;
+    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+    font-size: 12px;
+}
+
 @font-face {
     font-family: "AddbGlyphicons";
     src: url("fonts/glyphicons-halflings-regular.ttf") format("truetype");

debug-db-base/src/main/assets/index.html

@@ -109,7 +109,21 @@
     <div class="row padding-twenty">
         <div class="col-sm-12">
             <div class="form-group">
-                <label for="query">Query</label>
+                <label for="query">
+                    Query
+                    <span class="dropdown addb-query-history">
+                        <button id="addb-query-history-toggle"
+                                type="button"
+                                class="btn btn-link btn-xs dropdown-toggle addb-query-history-toggle"
+                                data-toggle="dropdown"
+                                aria-haspopup="true"
+                                aria-expanded="false"
+                                title="Recent queries">
+                            <span class="glyphicon glyphicon-time" aria-hidden="true"></span>
+                        </button>
+                        <ul class="dropdown-menu" id="addb-query-history-menu" aria-labelledby="addb-query-history-toggle"></ul>
+                    </span>
+                </label>
                 <input class="form-control" id="query">
             </div>
             <button id="selected-db-download" type="button" onclick="downloadDb()"