Skip to content

Commit

Permalink
Improve styling of popup & content
Browse files Browse the repository at this point in the history
  • Loading branch information
@juliancasaburi
juliancasaburi committed Sep 10, 2023
1 parent c581bd7 commit ef5b1a0
Show file tree
Hide file tree
Showing 4 changed files with 188 additions and 92 deletions.
108 changes: 76 additions & 32 deletions content.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,48 +2,97 @@
const averageWithoutFailsRegex = /(\d+) \(([^)]+)\) Aprobado/g;
const averageWithFailsRegex = /(\d+) \(([^)]+)\) Desaprobado/g;

// Create a MutationObserver to watch for changes in the "kernel_contenido" div
const kernelContenido = document.getElementById("kernel_contenido");
const observer = new MutationObserver(handleKernelContenidoChange);
if (kernelContenido) {
observer.observe(kernelContenido, { childList: true, subtree: true });

// Also, check if the "catedras" elements are already present when the page loads
let catedras = document.getElementsByClassName("catedras");
if (catedras.length > 0) {
extractAndCalculateScores();
}
}

// Initialize score arrays
const scoresWithoutFails = [];
const scoresWithFails = [];
let scoresWithoutFails = [];
let scoresWithFails = [];

// Function to extract and calculate exam scores
function extractAndCalculateScores() {
// Extract scores from the page content
extractScoresWithoutFails(document.body.innerText, averageWithoutFailsRegex, scoresWithoutFails);
extractScoresWithFails(document.body.innerText, averageWithFailsRegex, scoresWithFails);
// Extract passed exams from the page content
extractScores(document.body.innerText, averageWithoutFailsRegex, scoresWithoutFails);

// Copy the content of scoresWithoutFails to scoresWithFails and add the failed exams
scoresWithFails = [...scoresWithoutFails];
extractScores(document.body.innerText, averageWithFailsRegex, scoresWithFails);

// Calculate the average scores
const averageWithoutFails = calculateAverage(scoresWithoutFails);
const averageWithFails = calculateAverage(scoresWithFails);

// Update or create the averageDivs
// Create a new div element
var averagesDiv = document.createElement("div");

// Set the id attribute
averagesDiv.id = "averagesDiv";

// Set the inline styles for the new div
averagesDiv.className = "titulo_operacion";
averagesDiv.style.backgroundColor = "#f1f0f5"; // White background
averagesDiv.style.border = "4px";
averagesDiv.style.borderRadius = "24px";
averagesDiv.style.padding = "20px 20px";
averagesDiv.style.margin = "20px 20px";
averagesDiv.style.textAlign = "center";

// Create a new h2 element for the title
var titleElement = document.createElement("h2");

// Create an anchor element
var linkElement = document.createElement("a");
linkElement.href = "https://github.com/juliancasaburi/siu-guarani-unlp-promedio-extension/";

// Set the text content for the anchor element (the title)
linkElement.textContent = "Extensión SIU Guaraní UNLP Promedio";

// Apply an inline style to the h2 element
titleElement.style.fontWeight = "bold"; // Example: Making it bold

// Append the anchor element to the title element
titleElement.appendChild(linkElement);

// Append the title element to the averagesDiv
averagesDiv.appendChild(titleElement);

// Get the div with id "listado"
var listadoDiv = document.getElementById("listado");

// Get the parent of the "listadoDiv" div
var parentOfListadoDiv = listadoDiv.parentElement;

// Insert the new div before the "listadoDiv" div
observer.disconnect();
parentOfListadoDiv.insertBefore(averagesDiv, listadoDiv);

updateOrCreateAverageDiv("averageWithoutFailsDiv", "Promedio sin aplazos: ", averageWithoutFails, "teal");
updateOrCreateAverageDiv("averageWithFailsDiv", "Promedio con aplazos: ", averageWithFails, "firebrick");

// Save both average scores
chrome.storage.local.set({ 'averageWithoutFails': averageWithoutFails });
chrome.storage.local.set({ 'averageWithFails': averageWithFails });
}

// Function to extract scores with fails from the page content and store them in the specified array
function extractScoresWithFails(content, regex, scoresArray) {
const matches = content.match(regex);
if (matches) {
for (const match of matches) {
const score = parseInt(match.match(/\d+/)[0]);
scoresArray.push(score);
}
}
observer.observe(document.getElementById("kernel_contenido"), { childList: true, subtree: true });
}

// Function to extract scores without fails from the page content and store them in the specified array
function extractScoresWithoutFails(content, regex, scoresArray) {
// Function to extract scores from the page content and store them in the specified array
function extractScores(content, regex, scoresArray) {
const matches = content.match(regex);
if (matches) {
for (const match of matches) {
const score = parseInt(match.match(/\d+/)[0]);
scoresArray.push(score);
scoresWithFails.push(score);
}
}
}
Expand All @@ -67,7 +116,8 @@ function updateOrCreateAverageDiv(divId, prefix, average, backgroundColor) {

// Create an h3 element with the class "titulo-corte" and set its text content
const h3Element = document.createElement("h3");
h3Element.textContent = prefix + average.toFixed(2) + " [Extensión SIU Guaraní UNLP Promedio]";
h3Element.style.display = "inline";
h3Element.textContent = prefix + average.toFixed(2);

h3Element.classList.add("titulo-corte");

Expand All @@ -79,27 +129,21 @@ function updateOrCreateAverageDiv(divId, prefix, average, backgroundColor) {
// Append the h3 element to the newAverageDiv
averageDiv.appendChild(h3Element);

// Find the div with ID "listado"
const listadoDiv = document.getElementById("listado");
// Find the div with ID "averagesDiv"
const averagesDiv = document.getElementById("averagesDiv");

// Insert the new average div before the "listado" div
if (listadoDiv) {
listadoDiv.parentNode.insertBefore(averageDiv, listadoDiv);
// Append the new "averageDiv" to "averagesDiv"
if (averagesDiv) {
averagesDiv.appendChild(averageDiv);
}
}
}

// Function to be called when the "kernel_contenido" div changes
function handleKernelContenidoChange(mutationsList, observer) {
// check if the "catedras" elements are present
let catedras = document.getElementsByClassName("catedras");
if (catedras.length > 0) {
extractAndCalculateScores();
}
}

// Create a MutationObserver to watch for changes in the "kernel_contenido" div
const kernelContenido = document.getElementById("kernel_contenido");
if (kernelContenido) {
const observer = new MutationObserver(handleKernelContenidoChange);
observer.observe(kernelContenido, { childList: true, subtree: true });
}
129 changes: 75 additions & 54 deletions popup.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,71 +2,92 @@

/* Default light theme styles */
body {
font-family: Arial, sans-serif;
background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent background */
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.popup-container {
background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white background */
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
padding: 20px;
text-align: center;
}

h1 {
color: #333;
font-size: 24px;
margin: 0;
}

h2 {
color: #666;
font-size: 18px;
margin: 10px 0;
}

a {
color: #0078D4;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

.github-link {
margin-top: 20px;
font-size: 18px;
padding: 10px;
}
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
background-color: #f5f5f5; /* Light gray background */
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

/* Style the container */
.popup-container {
font-family: 'Roboto', sans-serif;
background-color: #ffffff; /* White background */
border-radius: 8px; /* Rounded corners */
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
padding: 20px;
text-align: center;
}

/* Style the h1 */
.popup-container h1 {
color: #333; /* Dark gray text */
font-size: 28px;
margin-bottom: 10px;
}

/* Style the h2 elements */
.popup-container h2 {
font-size: 18px;
color: #666; /* Gray text */
margin-top: 10px;
border-radius: 10px; /* Rounded background */
padding: 8px 12px; /* Padding inside the rounded background */
background-color: #f3f3f3; /* Background color for h2 elements */
color: #000000; /* Text color inside the rounded background */
}

/* Style the GitHub link */
.github-link {
margin-top: 20px;
}

.github-link a {
color: #0078D4; /* Blue link color */
text-decoration: none;
font-weight: bold;
}

.github-link a:hover {
color: #0056b3; /* Darker blue on hover */
}

/* Icon styles (Font Awesome) */
.github-link i {
font-size: 24px;
margin-right: 8px;
color: #0078D4; /* Blue icon color */
}

/* Dark theme styles when dark mode is enabled */
@media (prefers-color-scheme: dark) {
body {
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent dark background */
background-color: #0f0f0f; /* Dark background */
}

.popup-container {
background-color: rgba(0, 0, 0, 0.9); /* Semi-transparent dark background */
color: #fff; /* White text color for dark theme */
background-color: #0f0f0f; /* Dark background for the container */
color: #fff; /* White text color */
}

h1 {
color: #fff; /* White text color for dark theme */
.popup-container h1 {
color: #ddd; /* Light gray text color in dark mode */
}

h2 {
color: #ccc; /* Light gray text color for dark theme */
.popup-container h2 {
font-size: 18px;
color: #ccc; /* Light gray text color in dark theme */
margin-top: 10px;
border-radius: 10px; /* Rounded background for dark theme */
padding: 8px 12px; /* Padding inside the rounded background in dark theme */
background-color: #242323; /* Background color for h2 elements in dark theme */
color: #ccc; /* Text color inside the rounded background in dark theme */
}

a {
color: #1E90FF; /* Light blue link color for dark theme */
.github-link a {
color: #1E90FF; /* Light blue link color in dark mode */
}
}

}
10 changes: 7 additions & 3 deletions popup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,12 @@
<body>
<div class="popup-container">
<h1>SIU Guaraní UNLP Promedio</h1>
<h2 id="averageWithFails" style="color: teal">Sin datos</h2>
<h2 id="averageWithoutFails" style="color: firebrick">Ir a Reportes -> Historia Académica -> Historia completa</h2>
<h2 id="noData">Sin datos <i class="fas fa-arrow-down"></i></h2>
<h2 id="instructions">
<a href="https://autogestion.guarani.unlp.edu.ar/historia_academica">
Ir a Reportes → Historia Académica → Historia completa
</a>
</h2>
<div class="github-link">
<a href="https://github.com/juliancasaburi/siu-guarani-unlp-promedio-extension" target="_blank" rel="noopener noreferrer">
<i class="fab fa-github"></i> GitHub Repo
Expand All @@ -19,4 +23,4 @@ <h2 id="averageWithoutFails" style="color: firebrick">Ir a Reportes -> Historia
</div>
<script src="popup.js"></script>
</body>
</html>
</html>
33 changes: 30 additions & 3 deletions popup.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,37 @@
function updatePopup() {
chrome.storage.local.get(['averageWithoutFails', 'averageWithFails'], function (data) {
if(data.averageWithoutFails && data.averageWithFails){
document.getElementById("averageWithoutFails").innerText = "Promedio sin aplazos: " + data.averageWithoutFails.toFixed(2);
document.getElementById("averageWithFails").innerText = "Promedio con aplazos: " + data.averageWithFails.toFixed(2);
// Get the noData <h2> element
var noData = document.getElementById("noData");

// Set up averageWithFails
var text = document.createElement("h2");
text.style.color = "teal"; // Set text color
text.innerText = "Promedio sin aplazos: " + data.averageWithoutFails.toFixed(2);

// Replace the averageWithoutFails <h2> element
noData.parentNode.replaceChild(text, noData);

// Get the instructions <h2> element
var instructions = document.getElementById("instructions");

// Set up averageWithtFails
var text = document.createElement("h2");
text.style.color = "firebrick"; // Set text color
text.innerText = "Promedio con aplazos: " + data.averageWithFails.toFixed(2);

// Replace the instructions <h2> element
instructions.parentNode.replaceChild(text, instructions);
}
});
}

document.addEventListener('DOMContentLoaded', updatePopup);
document.addEventListener('DOMContentLoaded', updatePopup);

document.addEventListener("DOMContentLoaded", function () {
var link = document.getElementById("instructions");
link.addEventListener("click", function (event) {
event.preventDefault();
window.open("https://autogestion.guarani.unlp.edu.ar/historia_academica", "_blank");
});
});

0 comments on commit ef5b1a0

Please sign in to comment.