From 6ac861a4247297eda3de9f851191f9dfc8cda188 Mon Sep 17 00:00:00 2001
From: SethBurkart123 <hi25S.burkart@hills.adventist.edu.au>
Date: Wed, 15 Nov 2023 17:31:38 +1100
Subject: [PATCH] fixed image deleting not working

---
 .../DownloadProgressCircle.tsx                |  2 +-
 src/background.js                             | 55 +++++++++++++++++++
 2 files changed, 56 insertions(+), 1 deletion(-)

diff --git a/interface/src/components/backgroundSelector/DownloadProgressCircle.tsx b/interface/src/components/backgroundSelector/DownloadProgressCircle.tsx
index 220585df..333ca789 100644
--- a/interface/src/components/backgroundSelector/DownloadProgressCircle.tsx
+++ b/interface/src/components/backgroundSelector/DownloadProgressCircle.tsx
@@ -8,7 +8,7 @@ export const DownloadProgressCircle: React.FC<DownloadProgressCircleProps> = ({
   const calcCircumference = (radius: number) => 2 * Math.PI * radius;
 
   return (
-    <svg className="w-full h-full text-zinc-100 dark:text-zinc-700" viewBox="0 0 36 36">
+    <svg className="absolute z-10 w-full h-full text-zinc-100 dark:text-zinc-700" viewBox="0 0 36 36">
       <circle stroke="currentColor" fill="none" strokeWidth="4" strokeLinecap="round" cx="18" cy="18" r="10" strokeDasharray={`${calcCircumference(14)} ${calcCircumference(14)}`} strokeDashoffset="0" transform="rotate(-90 18 18)"></circle>
       <circle stroke="#3B82F6" fill="none" strokeWidth="4" strokeLinecap="round" cx="18" cy="18" r="10" strokeDasharray={`${calcCircumference(14)} ${calcCircumference(14)}`} strokeDashoffset={`${calcCircumference(14) * (1 - (progress / 100))}`} transform="rotate(-90 18 18)"></circle>
     </svg>
diff --git a/src/background.js b/src/background.js
index 52a8a1c9..78639f0e 100644
--- a/src/background.js
+++ b/src/background.js
@@ -1,4 +1,59 @@
 /*global chrome*/
+export const openDB = () => {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open('MyDatabase', 1);
+
+    request.onupgradeneeded = (event) => {
+      const db = event.target.result;
+      db.createObjectStore('backgrounds', { keyPath: 'id' });
+    };
+
+    request.onsuccess = () => {
+      resolve(request.result);
+    };
+
+    request.onerror = (event) => {
+      reject('Error opening database: ' + event.target.errorCode);
+    };
+  });
+};
+
+export const writeData = async (type, data) => {
+  const db = await openDB();
+
+  const tx = db.transaction('backgrounds', 'readwrite');
+  const store = tx.objectStore('backgrounds');
+  const request = await store.put({ id: 'customBackground', type, data });
+
+  return request.result;
+};
+
+export const readData = () => {
+  return new Promise((resolve, reject) => {
+    openDB()
+      .then(db => {
+        const tx = db.transaction('backgrounds', 'readonly');
+        const store = tx.objectStore('backgrounds');
+
+        // Retrieve the custom background
+        const getRequest = store.get('customBackground');
+
+        // Attach success and error event handlers
+        getRequest.onsuccess = function(event) {
+          resolve(event.target.result);
+        };
+
+        getRequest.onerror = function(event) {
+          console.error('An error occurred:', event);
+          reject(event);
+        };
+      })
+      .catch(error => {
+        console.error('An error occurred:', error);
+        reject(error);
+      });
+  });
+};
 
 function ReloadSEQTAPages() {
   chrome.tabs.query({}, function (tabs) {