Merge pull request #9 from MauGaP/hotfix

Revert "Revert "added the frontend with basic styles and a basic serv…

client/assignsecretsantas.script.js

@@ -0,0 +1,28 @@
+function shuffleArray(array) {
+  for (let i = array.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [array[i], array[j]] = [array[j], array[i]];
+  }
+}
+
+function assignSecretSantas(participants) {
+  shuffleArray(participants);
+  let assignments = new Map();
+
+  for (let i = 0; i < participants.length; i++) {
+    let nextIndex = (i + 1) % participants.length;
+    while (participants[i].partner === participants[nextIndex].name) {
+      nextIndex = (nextIndex + 1) % participants.length;
+
+      if (nextIndex === i) {
+        throw new Error('Unsolvable Secret Santa assignment for the given constraints.');
+      }
+    }
+    assignments.set(participants[i].name, participants[nextIndex].name);
+  }
+
+  return participants.map(participant => ({
+    ...participant,
+    secretSantaFor: assignments.get(participant.name),
+  }));
+}

client/clearparticipants.script.js

@@ -0,0 +1,15 @@
+let defaultNumberOfRows = 2;
+
+function clearParticipants() {
+  // Clear the table
+  const tableBody = document.getElementById('friendsTable').getElementsByTagName('tbody')[0];
+  tableBody.innerHTML = '';
+
+  // Optionally, clear the participants from session storage
+  sessionStorage.removeItem('secretSantaAssignments');
+
+  // If you want to restore the table to a default state with a specific number of empty rows
+  for (let i = 0; i < defaultNumberOfRows; i++) {
+    addFriendRow(); // Assuming addFriendRow is your function to add an empty row
+  }
+}

client/restoresession.script.js

@@ -0,0 +1,21 @@
+function restoreFromSessionStorage() {
+  const participants = JSON.parse(sessionStorage.getItem('secretSantaAssignments'));
+  if (participants) {
+    const table = document.getElementById('friendsTable').getElementsByTagName('tbody')[0];
+    // Clear existing table rows
+    table.innerHTML = '';
+
+    // Iterate over participants and recreate table rows
+    participants.forEach((participant, index) => {
+      const row = table.insertRow();
+      const idCell = row.insertCell(0);
+      const nameCell = row.insertCell(1);
+      const emailCell = row.insertCell(2);
+      const partnerCell = row.insertCell(3);
+      idCell.textContent = index + 1;
+      nameCell.innerHTML = `<input type="text" value="${participant.name}">`;
+      emailCell.innerHTML = `<input type="email" value="${participant.email}">`;
+      partnerCell.innerHTML = `<input type="text" value="${participant.partner}">`;
+    });
+  }
+}

client/savesession.script.js

@@ -0,0 +1,22 @@
+function saveToSessionStorage() {
+  const table = document.getElementById('friendsTable').getElementsByTagName('tbody')[0];
+  const rows = table.rows;
+  const participants = [];
+
+  // Gather participant data
+  for (let i = 0; i < rows.length; i++) {
+    const cells = rows[i].cells;
+    const participant = {
+      name: cells[1].getElementsByTagName('input')[0].value,
+      email: cells[2].getElementsByTagName('input')[0].value,
+      partner: cells[3].getElementsByTagName('input')[0].value,
+    };
+    participants.push(participant);
+  }
+
+  // Assign Secret Santas
+  const assignedParticipants = assignSecretSantas(participants);
+
+  // Save assignments to session storage
+  sessionStorage.setItem('secretSantaAssignments', JSON.stringify(assignedParticipants));
+}

client/sendassignments.script.js

@@ -0,0 +1,24 @@
+function sendAssignmentsToServer() {
+    const assignments = JSON.parse(sessionStorage.getItem('secretSantaAssignments'));
+    if (!assignments) {
+        console.error('No assignments found in session storage');
+        return;
+    }
+
+    fetch('http://localhost:3500/send-emails', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ assignments: assignments })
+    })
+    .then(response => response.text())
+    .then(data => {
+        console.log('Response from server:', data);
+        // You can add more UI feedback here, e.g., a success message
+    })
+    .catch(error => {
+        console.error('Error sending assignments:', error);
+        // Handle the error in the UI as well
+    });
+}

css/styles.css

@@ -0,0 +1,72 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f4;
+    color: #333;
+    margin: 0;
+    padding: 20px;
+}
+
+header {
+    text-align: center;
+    margin-bottom: 30px;
+}
+
+h1 {
+    color: #d33;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-bottom: 20px;
+}
+
+th, td {
+    border: 1px solid #ddd;
+    padding: 8px;
+    text-align: left;
+}
+
+th {
+    background-color: #eee;
+}
+
+button {
+    background-color: #4CAF50; /* Green */
+    border: none;
+    color: white;
+    padding: 10px 20px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px;
+    cursor: pointer;
+}
+
+button:hover {
+    opacity: 0.8;
+}
+
+footer {
+    text-align: center;
+    padding-top: 20px;
+    font-size: 0.8em;
+}
+
+/* Classes for specific elements */
+.instructions {
+    margin-bottom: 20px;
+}
+
+.friend-list {
+    background-color: #fff;
+    padding: 15px;
+    border-radius: 5px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.actions {
+    text-align: center;
+    padding-top: 20px;
+}

index.html

@@ -1,11 +1,12 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="es">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Secret Santa</title>
-    <link rel="stylesheet" href="styles.css">
+    <title>Sorteo del Amigo Invisible</title>
+    <link rel="stylesheet" href="css/styles.css">
+    <!-- Add any additional CSS libraries or frameworks you might be using -->
 </head>
 
 <body>