Deploying to gh-pages from @ 06731d7 🚀

background.js

@@ -60,6 +60,12 @@ chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
             }
         });
         return true; // For asynchronous response
+    } else if (request.action === "setRole") {
+        sendResponse({ response: "dit is wat ik stuurde" + request.role });
+
+        chrome.storage.local.set({ 'role': request.role }, function (result) {
+            console.log();
+        });
     }
 
     // Return true for asynchronous response, if needed

collection.html

@@ -32,23 +32,19 @@
                 </nav>
                 <div class="jumbotron">
                     <h1><img src="images/icon48.png" alt="Kerific logo" class="logo me-5">Kerific collection</h1>
+
                     <p>
                         Collection.
                     </p>
-                    <!-- <p>
-                                                        <a class="btn btn-primary btn-large" href="#">Learn more</a>
-                                                    </p> -->
                 </div>
-
             </div>
 
             <h1 class="mb-3">Your collected definitions</h1>
+            <p><span id="container-role">–</span></p>
             <div id="container-collection"></div>
         </div>
     </div>
 </body>
-<!-- <script src="assets/index.js"></script> -->
-<script src="js/index.js"></script>
 <script src="js/collection.js"></script>
 
 </html>

js/collection.js

@@ -32,4 +32,44 @@ function loadCollections() {
         }
         document.getElementById('container-collection').innerHTML = domString;
     });
-}
+
+    chrome.storage.local.get(['role'], function (result) {
+        let domStringRole = '';
+
+        switch (result.role) {
+            case 'decisionmaker':
+                domStringRole = 'Your role: Decision maker';
+                break;
+            case 'normaluser':
+                domStringRole = 'Your role: Normal user';
+                break;
+            default:
+                domStringRole = 'No role found';
+                break;
+        }
+
+        document.getElementById('container-role').innerHTML = domStringRole;
+    });
+}
+
+// Log button
+var logButton = document.getElementById('logButton');
+logButton.addEventListener('click', function () {
+    chrome.storage.local.get(['kerificTerms'], function (result) {
+        console.log('result: ', result);
+        loadCollections();
+        // if (result.kerificTerms) {
+        //     console.log('Value currently is ' + result.kerificTerms);
+        // } else {
+        //     console.log('kerificTerms not found');
+        // }
+    });
+});
+
+// Clear button
+var clearButton = document.getElementById('clearButton');
+clearButton.addEventListener('click', function () {
+    chrome.runtime.sendMessage({ action: "clearStorage" }, function (response) {
+        console.log("Response:", response);
+    });
+});

js/options.js

@@ -0,0 +1,49 @@
+function setRole(role) {
+    chrome.runtime.sendMessage({
+        action: "setRole",
+        role: role
+
+    }, function (response) {
+        console.log("Response:", response);
+    });
+}
+
+// Select the radio buttons
+var radio1 = document.getElementById('set-role-1');
+var radio2 = document.getElementById('set-role-2');
+
+// Add event listener to the first radio button
+radio1.addEventListener('change', function () {
+    if (this.checked) {
+        console.log('Decision maker selected');
+        setRole(this.value);
+        console.log('this.value: ', this.value);
+        appendAlert('Role is set!', 'success');
+    }
+});
+
+// Add event listener to the second radio button
+radio2.addEventListener('change', function () {
+    if (this.checked) {
+        console.log('Normal user selected');
+        setRole(this.value);
+        console.log('this.value: ', this.value);
+        appendAlert('Role is set!', 'success');
+    }
+});
+
+const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
+const appendAlert = (message, type) => {
+    const wrapper = document.createElement('div')
+    wrapper.innerHTML = [
+        `<div class="alert alert-${type} alert-dismissible mt-5" role="alert">`,
+        `   <div>${message}</div>`,
+        '</div>'
+    ].join('')
+
+    alertPlaceholder.append(wrapper);
+
+    setTimeout(() => {
+        wrapper.remove()
+    }, 5000)
+}

options.html

@@ -30,9 +30,10 @@
                     </div>
                 </nav>
                 <div class="jumbotron">
-                    <h1><img src="images/icon48.png" alt="Kerific logo" class="logo me-5">Kerific settings</h1>
+                    <h1><img src="images/icon48.png" alt="Kerific logo" class="logo me-5">Kerific options and settings
+                    </h1>
                     <p>
-                        Settings.
+                        Options and Settings.
                     </p>
                     <!-- <p>
                         <a class="btn btn-primary btn-large" href="#">Learn more</a>
@@ -41,50 +42,24 @@ <h1><img src="images/icon48.png" alt="Kerific logo" class="logo me-5">Kerific se
             </div>
         </div>
         <div class="row">
-            <div class="col-md-4">
+            <div class="col-md-12 text-center">
                 <h2>
-                    Heading
+                    Your role
                 </h2>
-                <p>
-                    Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor
-                    mauris
-                    condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis
-                    euismod. Donec sed odio dui.
-                </p>
-                <p>
-                    <a class="btn" href="#">View details »</a>
-                </p>
-            </div>
-            <div class="col-md-4">
-                <h2>
-                    Heading
-                </h2>
-                <p>
-                    Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor
-                    mauris
-                    condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis
-                    euismod. Donec sed odio dui.
-                </p>
-                <p>
-                    <a class="btn" href="#">View details »</a>
-                </p>
-            </div>
-            <div class="col-md-4">
-                <h2>
-                    Heading
-                </h2>
-                <p>
-                    Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor
-                    mauris
-                    condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis
-                    euismod. Donec sed odio dui.
-                </p>
-                <p>
-                    <a class="btn" href="#">View details »</a>
-                </p>
+                <p>Make a choice:</p>
+                <input type="radio" class="btn-check" name="options" id="set-role-1" value="decisionmaker"
+                    autocomplete="off">
+                <label class="btn btn-secondary" for="set-role-1">Decision maker</label>
+
+                <input type="radio" class="btn-check" name="options" id="set-role-2" value="normaluser"
+                    autocomplete="off">
+                <label class="btn btn-secondary" for="set-role-2">Normal user</label>
+
+                <div id="liveAlertPlaceholder"></div>
             </div>
         </div>
     </div>
 </body>
+<script src="js/options.js"></script>
 
 </html>