SOURCE CODE: My Pending and Delayed POSTs SUMMARY (Made by ChatGPT)

<style>

body {

font-family: Arial, sans-serif;

}

.section-title {

text-align: center;

font-size: 26px;

margin-bottom: 25px;

}

.res-box {

margin: auto;

max-width: 900px;

padding-bottom: 40px;

}

.search-bar {

width: 100%;

padding: 10px;

border-radius: 6px;

border: 1px solid #aaa;

margin-bottom: 15px;

}

.sort-box {

display: flex;

gap: 10px;

margin-bottom: 15px;

}

.sort-box select {

padding: 8px;

border-radius: 6px;

border: 1px solid #999;

}

.responsive-table {

width: 100%;

display: block;

}

.responsive-row {

display: flex;

flex-wrap: wrap;

border-bottom: 1px solid #ccc;

padding: 10px 0;

}

.responsive-head {

background: #eee;

font-weight: bold;

}

.col-date { flex: 0 0 18%; max-width: 18%; padding: 5px; }

.col-status { flex: 0 0 10%; max-width: 10%; padding: 5px; text-align:center; }

.col-auto { flex: 0 0 26%; max-width: 26%; padding: 5px; }

.col-my { flex: 0 0 26%; max-width: 26%; padding: 5px; }

.col-url { flex: 0 0 10%; max-width: 10%; padding: 5px; text-align:center; }

.col-act { flex: 0 0 10%; max-width: 10%; padding: 5px; text-align:center; }

.link-btn {

background: #0078ff;

color: white;

padding: 6px 12px;

border-radius: 6px;

text-decoration: none;

display: inline-block;

}

.icon-btn {

background: none;

border: none;

cursor: pointer;

font-size: 20px;

margin: 6px;

}

.icon-edit { color: #ffaa00; }

.icon-del { color: #ff4444; }

.done-row {

background: #c2e6c2;

}

.inline-edit-row {

display: none;

width: 100%;

box-sizing: border-box;

}

.inline-edit-inner {

background: #f4f4f4;

border: 1px solid #ccc;

border-radius: 8px;

padding: 10px;

margin: 8px 0 4px 0;

}

.inline-edit-inner b {

display: block;

margin-bottom: 6px;

}

.inline-edit-inner input,

.inline-edit-inner textarea,

.inline-edit-inner select {

width: 100%;

padding: 6px;

margin: 4px 0 10px 0;

box-sizing: border-box;

border-radius: 5px;

border: 1px solid #aaa;

}

.inline-btn-row {

display: flex;

gap: 10px;

flex-wrap: wrap;

}

.status-box {

display: flex;

align-items: center;

gap: 25px;

padding: 8px 14px;

border: 1px solid #ccc;

border-radius: 10px;

background: #f5f5f5;

width: max-content;

margin: 6px 0;

}

.status-box label {

display: flex;

align-items: center;

gap: 6px;

font-size: 15px;

white-space: nowrap;

}

.inline-edit-inner .status-box {

margin-top: 10px;

}

@media (max-width: 768px) {

.col-date,

.col-status,

.col-auto,

.col-my,

.col-url,

.col-act {

flex: 0 0 100%;

max-width: 100%;

text-align: left;

}

</style>

const firebaseConfig = {

apiKey: "AIzaSyAF5r6Rvu-DmoV-vf47wYTZfarpVGmNYR0",

authDomain: "ronin-11938.firebaseapp.com",

databaseURL: "https://ronin-11938-default-rtdb.firebaseio.com",

projectId: "ronin-11938",

storageBucket: "ronin-11938.firebasestorage.app",

messagingSenderId: "823368889742",

appId: "1:823368889742:web:609e16ace214b94a0df"

};

if (!firebase.apps.length) firebase.initializeApp(firebaseConfig);

const rdb = firebase.database();

const refCRUD = rdb.ref("urlCrudData");

const refAPP = rdb.ref("webAppData");

function nowDateTime() {

const d = new Date();

const yy = d.getFullYear();

const mm = String(d.getMonth() + 1).padStart(2, "0");

const dd = String(d.getDate()).padStart(2, "0");

const hh = String(d.getHours()).padStart(2, "0");

const mi = String(d.getMinutes()).padStart(2, "0");

const ss = String(d.getSeconds()).padStart(2, "0");

return yy + "-" + mm + "-" + dd + " " + hh + ":" + mi + ":" + ss;

}

function todayLong() {

return new Date().toLocaleString("en-US", {

month: "short",

day: "2-digit",

year: "numeric"

});

}

function formatDateWithFallback(val) {

if (!val) return "";

if (val.includes(":")) return val;

return val + " 00:00:00";

}

function parseDateSafe(val) {

if (!val) return 0;

const t = Date.parse(val);

if (!isNaN(t)) return t;

return 0;

}

function isBlog(url) {

return url.includes("ronin1985.blogspot.com");

}

function blogTitle(url) {

try {

let last = url.split("/").pop().replace(".html", "");

return last

.replace(/[-_]+/g, " ")

.replace(/\b\w/g, function(m){ return m.toUpperCase(); });

} catch (e) {

return url;

}

function guessTitle(url) {

return url.replace("https://", "").replace("http://", "").split("/")[0];

}

</script>

<h2 style="text-align: center;">🔗 My Pending and Delayed POSTs SUMMARY</h2>

<option value="autoTitle">Sort by Auto Title</option>

<option value="myTitle">Sort by My Title</option>

</select>

<option value="asc">Ascending</option>

<option selected="" value="desc">Descending (Newest First)</option>

</select>

</div>

<b>Insert URL:</b><br />

<b>Your Own Title (Optional):</b><br />

<b>Status:</b><br />

<label>

<input checked="" name="statusCRUD" type="radio" value="PENDING" /> Pending

</label>

<label>

<input name="statusCRUD" type="radio" value="DONE" /> Done

</label>

</div>

<br />

➕ ADD ENTRY

</button>

💾 SAVE EDIT (MAIN FORM)

</button>

</div>

<div class="col-auto">AUTO TITLE</div>

<div class="col-my">MY TITLE</div>

<div class="col-status">STATUS</div>

<div class="col-act">ACTIONS</div>

</div>

</div>

document.getElementById("todayHeader").innerHTML = "📅 Today: " + todayLong();

let crudData = [];

let currentEditID_CRUD = null;

refCRUD.on("value", function(snap){

crudData = snap.val() ? Object.values(snap.val()) : [];

renderCRUD();

});

document.getElementById("searchCRUD").oninput = renderCRUD;

document.getElementById("sortByCRUD").onchange = renderCRUD;

document.getElementById("sortOrderCRUD").onchange= renderCRUD;

function getStatusCRUD(){

const radios = document.querySelectorAll('input[name="statusCRUD"]');

for (const r of radios) {

if (r.checked) return r.value;

}

return "PENDING";

}

function findCRUDById(id){

return crudData.find(function(e){ return e.id === id; }) || null;

}

function closeAllInlineCRUD(){

crudData.forEach(function(e){

const box = document.getElementById("inlineCRUD-" + e.id);

if (box) box.style.display = "none";

});

}

function renderCRUD(){

let search = document.getElementById("searchCRUD").value.toLowerCase();

let sortBy = document.getElementById("sortByCRUD").value;

let order = document.getElementById("sortOrderCRUD").value;

let data = crudData.filter(function(e){

const autoT = (e.autoTitle || "").toLowerCase();

const myT = (e.myTitle || "").toLowerCase();

const url = (e.url || "").toLowerCase();

return autoT.includes(search) || myT.includes(search) || url.includes(search);

});

data.sort(function(a,b){

if (sortBy === "date") {

const x = parseDateSafe(a.date);

const y = parseDateSafe(b.date);

return (order === "asc") ? (x - y) : (y - x);

} else {

let x = (a[sortBy] || "").toString().toLowerCase();

let y = (b[sortBy] || "").toString().toLowerCase();

return (order === "asc") ? x.localeCompare(y) : y.localeCompare(x);

}

});

let html = "";

data.forEach(function(e){

const statusLabel = e.status || "PENDING";

const rowClass = (statusLabel === "DONE") ? "responsive-row done-row" : "responsive-row";

html += ""

+ "<div class='" + rowClass + "'>"

+ "<div class='col-date'>" + formatDateWithFallback(e.date) + "</div>"

+ "<div class='col-auto' style='font-weight:bold;'>" + (e.autoTitle || "") + "</div>"

+ "<div class='col-my'>" + (e.myTitle || "") + "</div>"

+ "<div class='col-status'><span>" + statusLabel + "</span></div>"

+ "<div class='col-url'><a href='" + (e.url || "#") + "' target='_blank' class='link-btn'>LINK</a></div>"

+ "<div class='col-act'>"

+ "<button class='icon-btn icon-edit' onclick=\"openInlineCRUD('" + e.id + "')\">✏</button>"

+ "<button class='icon-btn icon-del' onclick=\"deleteCRUD('" + e.id + "')\">🗑</button>"

+ "</div>"

+ "<div class='inline-edit-row' id='inlineCRUD-" + e.id + "'>"

+ "<div class='inline-edit-inner'>"

+ "<b>Inline Edit — Pending POST</b>"

+ "<label>URL:</label>"

+ "<input id='inlineCRUD-url-" + e.id + "' value='" + (e.url || "") + "' />"

+ "<label>My Title:</label>"

+ "<input id='inlineCRUD-myTitle-" + e.id + "' value='" + (e.myTitle || "") + "' />"

+ "<label>Status:</label>"

+ "<div class='status-box'>"

+ "<label><input type='radio' name='inlineCRUD-status-" + e.id + "' value='PENDING'" + (statusLabel === "PENDING" ? " checked" : "") + "> Pending</label>"

+ "<label><input type='radio' name='inlineCRUD-status-" + e.id + "' value='DONE'" + (statusLabel === "DONE" ? " checked" : "") + "> Done</label>"

+ "</div>"

+ "<div class='inline-btn-row'>"

+ "<button onclick=\"saveInlineCRUD('" + e.id + "')\">💾 Save Inline</button>"

+ "<button onclick=\"closeInlineCRUD('" + e.id + "')\">✖ Cancel</button>"

+ "</div>"

+ "</div>";

});

document.getElementById("tableBodyCRUD").innerHTML = html;

}

function autoAddCRUD(){

let url = document.getElementById("urlInputCRUD").value.trim();

let myT = document.getElementById("myTitleInputCRUD").value.trim();

if (!url) {

alert("URL cannot be empty.");

return;

}

let autoT = isBlog(url) ? blogTitle(url) : guessTitle(url);

let key = refCRUD.push().key;

let status = getStatusCRUD();

refCRUD.child(key).set({

id: key,

date: nowDateTime(),

autoTitle: autoT,

myTitle: myT,

url: url,

status: status

});

document.getElementById("urlInputCRUD").value = "";

document.getElementById("myTitleInputCRUD").value = "";

}

function openInlineCRUD(id){

const rec = findCRUDById(id);

if (!rec) return;

currentEditID_CRUD = id;

closeAllInlineCRUD();

const box = document.getElementById("inlineCRUD-" + id);

if (box) box.style.display = "block";

const urlInput = document.getElementById("inlineCRUD-url-" + id);

const myInput = document.getElementById("inlineCRUD-myTitle-" + id);

if (urlInput) urlInput.value = rec.url || "";

if (myInput) myInput.value = rec.myTitle || "";

const radios = document.querySelectorAll("input[name='inlineCRUD-status-" + id + "']");

radios.forEach(function(r){

r.checked = (r.value === (rec.status || "PENDING"));

});

document.getElementById("urlInputCRUD").value = rec.url || "";

document.getElementById("myTitleInputCRUD").value = rec.myTitle || "";

document.getElementById("saveBtnCRUD").style.display = "inline-block";

const mainStatus = rec.status || "PENDING";

const mainRadios = document.querySelectorAll('input[name="statusCRUD"]');

mainRadios.forEach(function(r){

r.checked = (r.value === mainStatus);

});

}

function closeInlineCRUD(id){

const box = document.getElementById("inlineCRUD-" + id);

if (box) box.style.display = "none";

}

function saveEditCRUD(){

if (!currentEditID_CRUD){

alert("No record selected for editing (click ✏ Edit first).");

return;

}

let newUrl = document.getElementById("urlInputCRUD").value.trim();

let newMyT = document.getElementById("myTitleInputCRUD").value.trim();

let newStatus = getStatusCRUD();

refCRUD.child(currentEditID_CRUD).update({

url: newUrl,

myTitle: newMyT,

autoTitle: isBlog(newUrl) ? blogTitle(newUrl) : guessTitle(newUrl),

status: newStatus

});

currentEditID_CRUD = null;

document.getElementById("urlInputCRUD").value = "";

document.getElementById("myTitleInputCRUD").value = "";

document.getElementById("saveBtnCRUD").style.display = "none";

closeAllInlineCRUD();

}

function saveInlineCRUD(id){

const urlInput = document.getElementById("inlineCRUD-url-" + id);

const myInput = document.getElementById("inlineCRUD-myTitle-" + id);

if (!urlInput || !myInput) return;

const radios = document.querySelectorAll("input[name='inlineCRUD-status-" + id + "']");

let st = "PENDING";

radios.forEach(function(r){

if (r.checked) st = r.value;

});

const newUrl = urlInput.value.trim();

const newMyT = myInput.value.trim();

refCRUD.child(id).update({

url: newUrl,

myTitle: newMyT,

autoTitle: isBlog(newUrl) ? blogTitle(newUrl) : guessTitle(newUrl),

status: st

});

currentEditID_CRUD = null;

document.getElementById("urlInputCRUD").value = "";

document.getElementById("myTitleInputCRUD").value = "";

document.getElementById("saveBtnCRUD").style.display = "none";

closeInlineCRUD(id);

}

function deleteCRUD(id){

if (confirm("Delete this entry?")){

refCRUD.child(id).remove();

}

</script>

ANDREAS TOMMY PARLAUNGAN MANURUNG

Search This Blog