diff --git a/idb-notes.html b/idb-notes.html
index 6ddd881..61bc3d2 100644
--- a/idb-notes.html
+++ b/idb-notes.html
@@ -99,6 +99,11 @@
border: 1px solid #eee;
}
+ .doc-single-line.active-doc {
+ background: #e8f0fe;
+ border-color: #007bff;
+ }
+
.doc-line1 {
font-size: 11px;
color: #333;
@@ -140,6 +145,14 @@
font-size: 28px;
}
+ #docStatus {
+ font-size: 13px;
+ color: #555;
+ margin-bottom: 8px;
+ min-height: 18px;
+ font-style: italic;
+ }
+
textarea {
width: 100%;
height: 500px;
@@ -185,28 +198,26 @@
<div class="content-column">
<h1>IndexedDB Notes</h1>
-
+ <div id="docStatus"></div>
<textarea id="editor" placeholder="Write something..."></textarea>
<br>
-
<button class="link-btn" id="saveBtn">Save Doc</button>
<button class="link-btn" id="newBtn">New Doc</button>
<button class="link-btn" id="exportBtn">Export as TXT</button>
<button class="link-btn" id="exportDbBtn">Export NotesDB</button>
<button class="link-btn" id="importDbBtn">Import NotesDB</button>
-
<input type="file" id="importFile" accept=".json" style="display:none;">
</div>
</div>
<script>
let db;
+ let currentDocId = null; // track loaded doc id
const request = indexedDB.open("NotesDB", 1);
request.onupgradeneeded = function(event) {
db = event.target.result;
-
if (!db.objectStoreNames.contains("documents")) {
db.createObjectStore("documents", {
keyPath: "id",
@@ -224,32 +235,49 @@ request.onerror = function() {
alert("Failed to open IndexedDB");
};
+ function updateStatus() {
+ const status = document.getElementById("docStatus");
+ if (currentDocId !== null) {
+ status.textContent = `Editing: Document #${currentDocId} — saving will overwrite the original`;
+ } else {
+ status.textContent = "New document — saving will create a new entry";
+ }
+ }
+
function saveDocument(text) {
const tx = db.transaction("documents", "readwrite");
const store = tx.objectStore("documents");
- const doc = {
- content: text,
- created: new Date().toLocaleString()
- };
-
- store.add(doc);
+ if (currentDocId !== null) {
+ // Overwrite existing doc
+ const doc = {
+ id: currentDocId,
+ content: text,
+ created: new Date().toLocaleString()
+ };
+ store.put(doc);
+ } else {
+ // Create new doc
+ const doc = {
+ content: text,
+ created: new Date().toLocaleString()
+ };
+ store.add(doc);
+ }
tx.oncomplete = function() {
- document.getElementById("editor").value = "";
loadDocuments();
+ updateStatus();
};
}
function loadDocuments() {
const tx = db.transaction("documents", "readonly");
const store = tx.objectStore("documents");
-
const request = store.getAll();
request.onsuccess = function() {
const docs = request.result;
-
const list = document.getElementById("docList");
list.innerHTML = "";
@@ -257,7 +285,7 @@ function loadDocuments() {
docs.forEach(doc => {
const div = document.createElement("div");
- div.className = "doc-single-line";
+ div.className = "doc-single-line" + (doc.id === currentDocId ? " active-doc" : "");
const line1 = document.createElement("div");
line1.className = "doc-line1";
@@ -276,6 +304,9 @@ function loadDocuments() {
loadBtn.onclick = function() {
document.getElementById("editor").value = doc.content;
+ currentDocId = doc.id;
+ loadDocuments();
+ updateStatus();
};
deleteBtn.onclick = function() {
@@ -294,175 +325,118 @@ function loadDocuments() {
}
function deleteDocument(id) {
- if (!confirm("Delete this document?")) {
- return;
- }
+ if (!confirm("Delete this document?")) return;
const tx = db.transaction("documents", "readwrite");
const store = tx.objectStore("documents");
-
store.delete(id);
tx.oncomplete = function() {
+ if (currentDocId === id) {
+ currentDocId = null;
+ document.getElementById("editor").value = "";
+ updateStatus();
+ }
loadDocuments();
};
}
function exportDocument() {
const text = document.getElementById("editor").value;
+ if (!text.trim()) { alert("Nothing to export"); return; }
- if (!text.trim()) {
- alert("Nothing to export");
- return;
- }
-
- const blob = new Blob([text], {
- type: "text/plain"
- });
-
+ const blob = new Blob([text], { type: "text/plain" });
const url = URL.createObjectURL(blob);
-
const a = document.createElement("a");
a.href = url;
-
- const timestamp = new Date()
- .toISOString()
- .replace(/[:.]/g, "-");
-
- a.download = `document-${timestamp}.txt`;
-
+ a.download = `document-${new Date().toISOString().replace(/[:.]/g, "-")}.txt`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
-
URL.revokeObjectURL(url);
}
function exportDatabase() {
const tx = db.transaction("documents", "readonly");
const store = tx.objectStore("documents");
-
const request = store.getAll();
request.onsuccess = function() {
const data = request.result;
+ if (!data.length) { alert("No documents to export"); return; }
- if (!data.length) {
- alert("No documents to export");
- return;
- }
-
- const json = JSON.stringify(data, null, 2);
-
- const blob = new Blob([json], {
- type: "application/json"
- });
-
+ const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" });
const url = URL.createObjectURL(blob);
-
const a = document.createElement("a");
a.href = url;
-
- const timestamp = new Date()
- .toISOString()
- .replace(/[:.]/g, "-");
-
- a.download = `NotesDB-${timestamp}.json`;
-
+ a.download = `NotesDB-${new Date().toISOString().replace(/[:.]/g, "-")}.json`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
-
URL.revokeObjectURL(url);
};
- request.onerror = function() {
- alert("Export failed");
- };
+ request.onerror = function() { alert("Export failed"); };
}
function importDatabase(file) {
const reader = new FileReader();
-
reader.onload = function(event) {
try {
const data = JSON.parse(event.target.result);
-
- if (!Array.isArray(data)) {
- alert("Invalid backup file");
- return;
- }
+ if (!Array.isArray(data)) { alert("Invalid backup file"); return; }
const tx = db.transaction("documents", "readwrite");
const store = tx.objectStore("documents");
-
store.clear();
-
- data.forEach(doc => {
- store.put(doc);
- });
+ data.forEach(doc => store.put(doc));
tx.oncomplete = function() {
+ currentDocId = null;
+ document.getElementById("editor").value = "";
loadDocuments();
+ updateStatus();
alert("Import complete");
};
-
} catch (err) {
alert("Failed to import JSON");
}
};
-
reader.readAsText(file);
}
document.getElementById("saveBtn").onclick = function() {
const text = document.getElementById("editor").value.trim();
-
- if (!text) {
- alert("Enter some text first");
- return;
- }
-
+ if (!text) { alert("Enter some text first"); return; }
saveDocument(text);
};
document.getElementById("newBtn").onclick = function() {
document.getElementById("editor").value = "";
+ currentDocId = null;
+ loadDocuments();
+ updateStatus();
};
- document.getElementById("exportBtn").onclick = function() {
- exportDocument();
- };
-
- document.getElementById("exportDbBtn").onclick = function() {
- exportDatabase();
- };
-
+ document.getElementById("exportBtn").onclick = exportDocument;
+ document.getElementById("exportDbBtn").onclick = exportDatabase;
document.getElementById("importDbBtn").onclick = function() {
document.getElementById("importFile").click();
};
-
document.getElementById("importFile").onchange = function(event) {
const file = event.target.files[0];
-
- if (file) {
- importDatabase(file);
- }
+ if (file) importDatabase(file);
};
- // Toggle +/- button
const savedColumn = document.getElementById('savedColumn');
const toggleBtn = document.getElementById('toggleBtn');
-
toggleBtn.addEventListener('click', function() {
savedColumn.classList.toggle('collapsed');
- if (savedColumn.classList.contains('collapsed')) {
- toggleBtn.textContent = '+';
- } else {
- toggleBtn.textContent = '−';
- }
+ toggleBtn.textContent = savedColumn.classList.contains('collapsed') ? '+' : '−';
});
- </script>
+ updateStatus();
+ </script>
</body>
</html>
+