Updates to the competencies

2026-03-08 17:37:21 +00:00
parent d391094ad6
commit 980f66d77d
7 changed files with 114 additions and 15 deletions
--- a/assets/scripts/competency-status-board.js
+++ b/assets/scripts/competency-status-board.js
@@ -6,10 +6,68 @@ const STATES = [
  { key: "comments", label: "Comments" },
 ];

+const LEVELS = [
+  { key: "graduate", label: "Graduate" },
+  { key: "engineer", label: "Engineer" },
+];
+
+let currentLevel = LEVELS[0].key;
+
 function isMobile() {
  return window.matchMedia("(max-width: 600px)").matches;
 }

+function renderLevelTabs() {
+  const board = document.getElementById("kanban-board");
+  if (!board || document.getElementById("level-tabs")) return;
+
+  const nav = document.createElement("div");
+  nav.id = "level-tabs";
+
+  LEVELS.forEach(({ key, label }) => {
+    const btn = document.createElement("button");
+    btn.textContent = label;
+    btn.dataset.level = key;
+    btn.className = "level-tab" + (key === currentLevel ? " active" : "");
+    btn.addEventListener("click", () => {
+      currentLevel = key;
+      document.querySelectorAll(".level-tab").forEach(b =>
+        b.classList.toggle("active", b.dataset.level === key)
+      );
+      loadBoard();
+    });
+    nav.appendChild(btn);
+  });
+
+  board.insertAdjacentElement("beforebegin", nav);
+
+  if (!document.getElementById("level-tab-styles")) {
+    const style = document.createElement("style");
+    style.id = "level-tab-styles";
+    style.textContent = `
+      #level-tabs {
+        display: flex;
+        gap: 0.5em;
+        margin-bottom: 1em;
+      }
+      .level-tab {
+        padding: 0.4em 1.2em;
+        border: 1px solid #ccc;
+        background: none;
+        cursor: pointer;
+        border-radius: 4px;
+        font-size: 0.95em;
+      }
+      .level-tab.active {
+        background: #333;
+        color: #fff;
+        border-color: #333;
+      }
+    `;
+    document.head.appendChild(style);
+  }
+}
+
 function populateMobileControls(items) {
  if (!isMobile()) return;

@@ -35,7 +93,6 @@ function populateMobileControls(items) {
    toSelect.appendChild(new Option(s.label, s.key));
  });

-  // Auto-fill "from" when item selected
  itemSelect.onchange = () => {
    const selected = itemSelect.selectedOptions[0];
    if (selected?.dataset.state) {
@@ -84,12 +141,8 @@ function countByState(items) {
 async function updateProgress(items) {
  const total = items.length;
  const completed = items.filter(i => i.state === "completed").length;
-
-  
  const percent = total === 0 ? 0 : Math.round((completed / total) * 100);

-  console.log(`Progress: ${percent}% (${completed}/${total})`);
-  
  const fill = document.getElementById("progress-fill");
  const label = document.getElementById("progress-label");

@@ -143,7 +196,7 @@ function createColumn(state, items, counts) {
    });

    if (res.ok) {
-      loadBoard(); // simple & safe re-render
+      loadBoard();
    } else {
      alert("Failed to update state");
    }
@@ -172,11 +225,13 @@ function renderBoard(items) {
 }

 async function loadBoard() {
-  const res = await fetch("/api/competencies/items");
+  const res = await fetch(`/api/competencies/items?group=${currentLevel}`);
  const items = await res.json();

  updateProgress(items);
  renderBoard(items);
  populateMobileControls(items);
 }
+
+renderLevelTabs();
 loadBoard();
--- a/assets/styles/kanban.css
+++ b/assets/styles/kanban.css
@@ -206,3 +206,48 @@
  background: #22c55e; 
  transition: width 0.3s ease;
 }
+#level-tabs {
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+  margin-bottom: 1rem;
+
+  //border: 1px solid var(--border-color, #ccc);
+  border-radius: 999px;
+  padding: 3px;
+
+  background: var(--bg, #fff);
+  width: fit-content;
+}
+
+.level-tab {
+  border: none;
+  background: transparent;
+
+  padding: 0.35rem 1rem;
+  font-size: 0.85rem;
+
+  border-radius: 999px;
+  cursor: pointer;
+
+  color: var(--fg, #333);
+
+  transition: 
+    background 0.2s ease,
+    color 0.2s ease,
+    transform 0.1s ease;
+}
+
+.level-tab:hover {
+  background: rgba(0,0,0,0.05);
+}
+
+.level-tab.active {
+  background: #333;
+  color: white;
+  font-weight: 500;
+}
+
+.level-tab:active {
+  transform: scale(0.97);
+}
--- a/blogs/blogs-list.org
+++ b/blogs/blogs-list.org
@@ -4,8 +4,8 @@
 See the categories: @@html:<a href="../home/categories.html">Categories</a>@@

 * Blogs:
- [[file:2026/2026-list.org][2026 List]] @@html:<span class="post-date">08-03-2026 12:51</span>@@ 
- [[file:2025/2025-list.org][2025 List]] @@html:<span class="post-date">08-03-2026 12:51</span>@@ 
+- [[file:2026/2026-list.org][2026 List]] @@html:<span class="post-date">08-03-2026 17:33</span>@@ 
+- [[file:2025/2025-list.org][2025 List]] @@html:<span class="post-date">08-03-2026 17:33</span>@@ 
 - [[file:2026/03-march/01-03-week-review.org][[01-03-2026] - Weekly Review]] @@html:<span class="post-date">01-03-2026 12:00</span>@@ @@html:<a href="/tags/review.html"> <span class="post-tag">review</span> </a>@@
 - [[file:2026/02-february/27-02-26.org][Journeys rambles again...]] @@html:<span class="post-date">27-02-2026 17:12</span>@@ @@html:<a href="/tags/life.html"> <span class="post-tag">life</span> </a>@@
 - [[file:2026/02-february/26-02-26.org][Starting the Journeys Upgrade]] @@html:<span class="post-date">26-02-2026 17:32</span>@@ @@html:<a href="/tags/life.html"> <span class="post-tag">life</span> </a>@@
--- a/home/status.org
+++ b/home/status.org
@@ -4,8 +4,7 @@
 #+COMMENTS: t
 #+SLUG: competency-board

-
-This page shows the status of the competencies I am working on (*grad*)
+This page shows the status of the competencies I am working on.

 #+BEGIN_EXPORT html
 <div id="progress-wrapper">
--- a/posts/posts-list.org
+++ b/posts/posts-list.org
@@ -4,7 +4,7 @@
 See the categories: @@html:<a href="../home/categories.html">Categories</a>@@

 * Posts:
- [[file:career/career-list.org][Career List]] @@html:<span class="post-date">08-03-2026 12:51</span>@@ 
+- [[file:career/career-list.org][Career List]] @@html:<span class="post-date">08-03-2026 17:34</span>@@ 
 - [[file:career/restful-api.org][Restful API]] @@html:<span class="post-date">15-02-2026 23:00</span>@@ @@html:<a href="/tags/learning.html"> <span class="post-tag">learning</span> </a>@@ @@html:<a href="/tags/notes.html"> <span class="post-tag">notes</span> </a>@@
 - [[file:career/database-permissions.org][Database Permissions, Roles, and Accounts]] @@html:<span class="post-date">18-01-2026 23:00</span>@@ @@html:<a href="/tags/learning.html"> <span class="post-tag">learning</span> </a>@@ @@html:<a href="/tags/notes.html"> <span class="post-tag">notes</span> </a>@@
 - [[file:career/monitoring-and-logging.org][Monitoring and Logging]] @@html:<span class="post-date">18-01-2026 23:00</span>@@ @@html:<a href="/tags/learning.html"> <span class="post-tag">learning</span> </a>@@ @@html:<a href="/tags/notes.html"> <span class="post-tag">notes</span> </a>@@
--- a/recently-updated.org
+++ b/recently-updated.org
@@ -2,9 +2,10 @@
 #+OPTIONS: toc:nil num:nil

 * Recently Updated (top 26 files - per lima's request)
+- [[file:posts/career/restful-api.org][Restful API]] @@html:<span class="post-date">2026-03-08 17:23</span>@@
+- [[file:home/status.org][Competency Status Board]] @@html:<span class="post-date">2026-03-08 16:28</span>@@
 - [[file:blogs/2026/02-february/27-02-26.org][Journeys rambles again...]] @@html:<span class="post-date">2026-03-07 16:33</span>@@
 - [[file:blogs/2026/03-march/01-03-week-review.org][[01-03-2026] - Weekly Review]] @@html:<span class="post-date">2026-03-07 12:45</span>@@
- [[file:posts/career/restful-api.org][Restful API]] @@html:<span class="post-date">2026-03-05 13:20</span>@@
 - [[file:posts/career/database-permissions.org][Database Permissions, Roles, and Accounts]] @@html:<span class="post-date">2026-03-05 13:06</span>@@
 - [[file:posts/career/monitoring-and-logging.org][Monitoring and Logging]] @@html:<span class="post-date">2026-03-05 12:58</span>@@
 - [[file:posts/career/pipelines.org][Pipelines and how they work (as well as CI/CD)]] @@html:<span class="post-date">2026-03-05 11:52</span>@@
@@ -26,5 +27,4 @@
 - [[file:blogs/2025/12-december/28-12-week-review.org][[28-12-2025] - Weekly Review]] @@html:<span class="post-date">2026-01-17 21:08</span>@@
 - [[file:blogs/2026/01-january/04-01-week-review.org][[04-01-2026] - Weekly Review]] @@html:<span class="post-date">2026-01-17 21:08</span>@@
 - [[file:posts/career/probation-objectives.org][Probation Objectives:]] @@html:<span class="post-date">2026-01-17 21:06</span>@@
- [[file:home/status.org][Competency Status Board]] @@html:<span class="post-date">2026-01-10 20:47</span>@@
 - [[file:posts/career/invest-principles.org][Invest Principles]] @@html:<span class="post-date">2026-01-04 17:15</span>@@
--- a/sitemap.org
+++ b/sitemap.org
@@ -9,8 +9,8 @@
  - [[file:home/backlog.org][Backlog]]
  - [[file:home/setup.org][Setup]]
  - [[file:home/notes.org][Notes]]
-  - [[file:home/status.org][Competency Status Board]]
  - [[file:home/services.org][Service]]
+  - [[file:home/status.org][Competency Status Board]]
  - [[file:home/categories.org][Categories]]
 - posts
  - [[file:posts/posts-intro.org][Posts Introduction]]