Add toggle button to card

src/content/add-billability-chart.ts

@@ -3,7 +3,8 @@ import { TimeChimpApi, User } from '../TimeChimpApi';
 import { toIsoDate } from '../date';
 import { endOfWeek, getWeek, startOfWeek, subWeeks } from 'date-fns';
 import { calculateTimeStats } from './stats';
-import { getSettings } from './settings';
+import { getSettings, updateSettings } from './settings';
+import { render } from './index';
 
 const api = new TimeChimpApi();
 
@@ -35,7 +36,7 @@ async function doAddBillabilityChart(date: Date, user: User) {
     // If not, create a new element which can be used as the chart parent.
     let chartContainer: HTMLElement | undefined;
     if (!addTimePanel.querySelector('#billability-card')) {
-        chartContainer = addTimePanel.appendChild(createBillabilityCard());
+        chartContainer = createBillabilityCard(addTimePanel);
     }
 
     const [times, company] = await Promise.all([
@@ -59,11 +60,32 @@ async function doAddBillabilityChart(date: Date, user: User) {
     );
 }
 
-function createBillabilityCard() {
+function createBillabilityCard(addTimePanel: Element) {
     const card = document.createElement('div');
     card.className = 'card billability-card';
     card.id = 'billability-card';
-    return card;
+
+    const chartContainer = document.createElement('div');
+    chartContainer.className = 'chart';
+    card.appendChild(chartContainer);
+
+    const actions = document.createElement('div');
+    card.appendChild(actions);
+    actions.className = 'actions text-align-right';
+
+    const toggleViewBtn = document.createElement('button');
+    actions.appendChild(toggleViewBtn);
+    toggleViewBtn.className = 'btn btn-timechimp-border';
+    toggleViewBtn.textContent = 'Toggle!';
+    toggleViewBtn.addEventListener('click', () => {
+        updateSettings({
+            relativeToContractHours: !getSettings().relativeToContractHours,
+        });
+        render();
+    });
+
+    addTimePanel.appendChild(card);
+    return chartContainer;
 }
 
 /**

src/content/index.ts

@@ -28,15 +28,16 @@ chrome.runtime.onMessage.addListener(async (msg: Message) => {
         currentDate = new Date(msg.date);
     }
 
-    if (
-        !currentUser ||
-        (msg.userName && msg.userName !== currentUser.userName)
-    ) {
-        currentUser = await getUser(msg.userName);
+    await render(msg.userName);
+});
+
+export async function render(userName?: string) {
+    if (!currentUser || (userName && userName !== currentUser.userName)) {
+        currentUser = await getUser(userName);
     }
 
     await addBillabilityChart(currentDate, currentUser);
-});
+}
 
 /**
  * Get the user info based on a userName.

src/content/style.css

@@ -1,4 +1,8 @@
-.billability-card {
-    padding-top: 4px;
+.billability-card > .chart {
     height: 350px;
 }
+
+.billability-card > .actions > button {
+    margin-right: 20px;
+    margin-bottom: 20px;
+}