- Get link
- X
- Other Apps
<!-- ============================================== -->
<!-- BOOTSTRAP CSS (BLOGGER-SAFE VERSION) -->
<!-- ============================================== -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"/>
<!-- ============================================== -->
<!-- FIREBASE (BLOGGER-SAFE VERSION) -->
<!-- ============================================== -->
<script src="https://www.gstatic.com/firebasejs/9.22.2/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.22.2/firebase-database-compat.js"></script>
<script>
firebase.initializeApp({
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"
});
var dbRef = firebase.database().ref("JobDoneData");
</script>
<!-- ============================================== -->
<!-- MOBILE-FIRST RESPONSIVE CSS (BLOGGER SAFE) -->
<!-- ============================================== -->
<style>
@media (max-width: 575px) {
.desktop-view { display:none !important; }
.mobile-view { display:block !important; }
}
@media (min-width: 576px) {
.desktop-view { display:block !important; }
.mobile-view { display:none !important; }
}
.date-month {
font-weight: bold;
font-size: 1.05rem;
display: block;
}
.date-year {
display: block;
margin-top: -4px;
font-size: 0.85rem;
color: #666;
}
.icon-btn {
font-size: 22px;
cursor: pointer;
margin-right: 10px;
}
.glass-modal {
position:fixed; left:0; top:0;
width:100%; height:100%;
background:rgba(0,0,0,0.55);
display:none; justify-content:center; align-items:center;
z-index:9999;
}
.glass-modal-content {
background:white;
padding:20px; border-radius:12px;
width:90%; max-width:420px;
}
</style>
<!-- ============================================== -->
<!-- ADD NEW RECORD (BOOTSTRAP FORM) -->
<!-- ============================================== -->
<div class="container my-3">
<div class="card shadow-sm">
<div class="card-body">
<h4 class="mb-3">➕ Add Job Done</h4>
<label class="form-label fw-bold">Month</label>
<select id="monthSelect" class="form-select mb-3"></select>
<label class="form-label fw-bold">Year</label>
<select id="yearSelect" class="form-select mb-3"></select>
<label class="form-label fw-bold">Description</label>
<textarea id="jobDesc" class="form-control mb-3" rows="3"></textarea>
<button onclick="addRecord()" class="btn btn-primary w-100">💾 Save</button>
</div>
</div>
</div>
<!-- ============================================== -->
<!-- SEARCH + SORT -->
<!-- ============================================== -->
<div class="container my-3">
<div class="card shadow-sm">
<div class="card-body">
<label class="form-label fw-bold">Search</label>
<input id="searchInput" onkeyup="renderAll()" class="form-control mb-3" placeholder="Search…"/>
<label class="form-label fw-bold">Sort</label>
<select id="sortSelect" onchange="renderAll()" class="form-select">
<option value="desc">Newest First</option>
<option value="asc">Oldest First</option>
</select>
</div>
</div>
</div>
<!-- ============================================== -->
<!-- DESKTOP TABLE -->
<!-- ============================================== -->
<div class="container desktop-view my-3">
<div class="card shadow-sm">
<div class="card-body">
<table class="table table-striped align-middle">
<thead>
<tr>
<th width="150">Date</th>
<th>Description</th>
<th width="100">Action</th>
</tr>
</thead>
<tbody id="tableList"></tbody>
</table>
</div>
</div>
</div>
<!-- ============================================== -->
<!-- MOBILE CARD VIEW -->
<!-- ============================================== -->
<div class="container mobile-view my-3" id="cardList"></div>
<!-- ============================================== -->
<!-- MODAL -->
<!-- ============================================== -->
<div id="modalGlass" class="glass-modal">
<div class="glass-modal-content">
<h4 id="modalTitle"></h4>
<div id="modalBody" class="mt-2"></div>
<button onclick="closeModal()" class="btn btn-secondary w-100 mt-3">Close</button>
</div>
</div>
<!-- ============================================== -->
<!-- LOGIC SCRIPT -->
<!-- ============================================== -->
<script>
var allData = [];
var monthNames = [
"January","February","March","April","May","June",
"July","August","September","October","November","December"
];
function loadMonthYear() {
var mSel = document.getElementById("monthSelect");
var ySel = document.getElementById("yearSelect");
var now = new Date();
var curM = now.getMonth() + 1;
var curY = now.getFullYear();
for (var i=1;i<=12;i++) {
var opt = document.createElement("option");
opt.value = i;
opt.text = monthNames[i-1];
if (i === curM) opt.selected = true;
mSel.appendChild(opt);
}
for (var y=2023;y<=curY+5;y++) {
var opt2 = document.createElement("option");
opt2.value = y;
opt2.text = y;
if (y === curY) opt2.selected = true;
ySel.appendChild(opt2);
}
}
loadMonthYear();
function addRecord() {
var m = document.getElementById("monthSelect").value;
var y = document.getElementById("yearSelect").value;
var d = document.getElementById("jobDesc").value.trim();
if (!m || !y || !d) { alert("Please fill all fields"); return; }
var id = dbRef.push().key;
dbRef.child(id).set({
id:id,
month:parseInt(m),
year:parseInt(y),
description:d,
sortKey:(parseInt(y)*100)+parseInt(m)
});
document.getElementById("jobDesc").value = "";
}
dbRef.on("value", function(snap){
allData = [];
snap.forEach(function(c){ allData.push(c.val()); });
renderAll();
});
function renderAll(){
renderTable();
renderCards();
}
function renderTable(){
var tbody = document.getElementById("tableList");
tbody.innerHTML = "";
var list = filteredSorted();
for (var i=0;i<list.length;i++){
var r=list[i];
var tr=document.createElement("tr");
tr.innerHTML = `
<td>
<span class="date-month">${monthNames[r.month-1]}</span>
<span class="date-year">${r.year}</span>
</td>
<td>${r.description.replace(/\n/g,"<br>")}</td>
<td>
<span class="icon-btn" onclick="viewRec('${r.id}')">👁️</span>
<span class="icon-btn" onclick="editRec('${r.id}')">✏️</span>
<span class="icon-btn" onclick="delRec('${r.id}')">🗑️</span>
</td>
`;
tbody.appendChild(tr);
}
}
function renderCards(){
var wrap = document.getElementById("cardList");
wrap.innerHTML = "";
var list = filteredSorted();
for (var i=0;i<list.length;i++){
var r=list[i];
var card=document.createElement("div");
card.className="card p-3 mb-3 shadow-sm";
card.innerHTML = `
<h6><b>${monthNames[r.month-1]} ${r.year}</b></h6>
<p>${r.description.replace(/\n/g,"<br>")}</p>
<span class="icon-btn" onclick="viewRec('${r.id}')">👁️</span>
<span class="icon-btn" onclick="editRec('${r.id}')">✏️</span>
<span class="icon-btn" onclick="delRec('${r.id}')">🗑️</span>
`;
wrap.appendChild(card);
}
}
function filteredSorted(){
var s=document.getElementById("searchInput").value.toLowerCase();
var st=document.getElementById("sortSelect").value;
var arr=allData.filter(function(d){
return (monthNames[d.month-1] + " " + d.year + " " + d.description)
.toLowerCase().includes(s);
});
arr.sort(function(a,b){
return st==="desc" ? b.sortKey-a.sortKey : a.sortKey-b.sortKey;
});
return arr;
}
/* RECORD ACTIONS */
function viewRec(id){
var r=allData.find(function(x){return x.id===id;});
if (!r) return;
openModal(
"View Record",
monthNames[r.month-1]+" "+r.year+"\n\n"+r.description
);
}
function editRec(id){
var r=allData.find(function(x){return x.id===id;});
if (!r) return;
var newDesc = prompt("Edit description:", r.description);
if (newDesc!==null){
dbRef.child(id).update({description:newDesc});
}
}
function delRec(id){
if (confirm("Delete this record?")){
dbRef.child(id).remove();
}
}
/* MODAL CONTROL */
function openModal(t,b){
document.getElementById("modalTitle").textContent=t;
document.getElementById("modalBody").textContent=b;
document.getElementById("modalGlass").style.display="flex";
}
function closeModal(){
document.getElementById("modalGlass").style.display="none";
}
</script>
Comments