Index

Hier is de bijgewerkte en complete Index.html voor PadelOS v4.2. In deze versie is de chatoptie uitgebreid met een recente feed bovenaan (die automatisch de laatste 3 berichten toont) en een volledig overzicht onderaan, zodat je direct ziet wat er is ingevoerd en opgeslagen.

Elke verzending toont direct een melding waarin exact wordt benoemd in welk Google Sheets tabblad de data is veiliggesteld.

Hier is de volledig opgewaardeerde Index.html voor PadelOS v4.2. In deze versie is een dynamisch "Laatste 3 Acties & Meldingen" overzicht toegevoegd aan elk tabblad (Dashboard, Les Aanvragen, Trainer Uren, Chat en Admin), zodat je per tabblad direct de meest recente invoer of activiteit ziet. Daarnaast is de chatweergave nu voorzien van een echte chatbox-interface met rollenfiltering (Spelers, Trainers, Team, Admin, Financieel) en een volledig overzicht van alle berichten.

Hier is de volledige, productierijpe Index.html voor PadelOS v4.2. Deze code sluit naadloos aan op de backend (Code.gs), ondersteunt alle rollen (Speler, Trainer, Admin), bevat de gesegmenteerde communicatiekanalen, lesaanvragen, uurregistraties en een volledig responsief, modern dashboard in de stijl van PadelOS.

Hier is de volledig uitgebreide, robuuste en enterprise-grade PadelOS v4.2 applicatie. In deze versie zijn alle formulieren, bewerkingsmogelijkheden, uitgebreide invoervelden en het centrale Admin Meldings- en Notificatiecentrum direct ingebouwd.

Elke actie laat nu exact in een visuele melding zien in welk tabblad van de centrale Google Spreadsheet (1Rap-6ENmSOwF-lkSZuwxxkJfVWVyfNqRsSD0h9L4uF8) de data is opgeslagen.

🗄️ Opslagoverzicht: Waar wordt wat opgeslagen?

Lesaanvragen & Doelen: Worden opgeslagen in tabblad LESAANVRAGEN (inclusief speelsterkte en profielkoppeling).
Trainer Uren & Beschikbaarheid: Worden opgeslagen in tabblad TRAINER_BESCHIKBAARHEID (inclusief type, datums en toelichting).
Gesegmenteerde Chats: Worden opgeslagen in de specifieke tabbladen BERICHTEN_TEAM, BERICHTEN_SPELERS, BERICHTEN_ADMIN of BERICHTEN_FINANCIEEL (afhankelijk van het gekozen kanaal, inclusief automatische linkherkenning).
Profielen & Instellingen: Worden opgeslagen in tabblad PROFIELEN en GEBRUIKERS.
Admin Verzoeken & Queue: Worden opgeslagen in tabblad VERZOEKEN_QUEUE.
Systeemlogs & Acties: Worden opgeslagen in tabblad AUDIT_LOG.

💻 Volledige Code: Index.html (Uitgebreide Versie met Admin Meldingscentrum)

<!DOCTYPE html>

<head>

<title>PadelOS — Multi-Role Management Portal</title>

<style>

:root {

--primary: #0e6b56;

--primary-hover: #094d3d;

--bg-color: #f4f7f6;

--card-bg: #ffffff;

--text-main: #2c3e50;

--text-muted: #7f8c8d;

--border: #e2e8f0;

--radius: 12px;

}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

body { background-color: var(--bg-color); color: var(--text-main); min-height: 100vh; display: flex; flex-direction: column; }

header { background: var(--card-bg); border-bottom: 1px solid var(--border); padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }

.logo { font-size: 20px; font-weight: 800; color: var(--primary); display: flex; align-items: center; gap: 8px; }

.user-info { display: flex; align-items: center; gap: 16px; font-size: 14px; color: var(--text-muted); }

.container { max-width: 1200px; margin: 32px auto; padding: 0 20px; width: 100%; flex: 1; }

.card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; box-shadow: 0 4px 6px rgba(0,0,0,0.02); margin-bottom: 24px; }

h1, h2, h3 { color: var(--text-main); margin-bottom: 16px; }

p { line-height: 1.6; color: var(--text-muted); margin-bottom: 16px; }

.form-group { margin-bottom: 20px; }

label { display: block; font-weight: 600; margin-bottom: 8px; font-size: 14px; }

input, select, textarea { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; outline: none; transition: border-color 0.2s; }

input:focus, select:focus, textarea:focus { border-color: var(--primary); }

button { background: var(--primary); color: white; border: none; padding: 12px 24px; border-radius: 8px; font-weight: 600; cursor: pointer; transition: background 0.2s, transform 0.1s; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

button:hover { background: var(--primary-hover); }

button:active { transform: scale(0.98); }

button.secondary { background: #e2e8f0; color: var(--text-main); }

button.secondary:hover { background: #cbd5e1; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }

.badge { display: inline-block. background: #e6f4f1; color: var(--primary); padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; }

.nav-tabs { display: flex; gap: 12px; margin-bottom: 24px; border-bottom: 1px solid var(--border); padding-bottom: 12px; overflow-x: auto; }

.tab-btn { background: none; color: var(--text-muted); border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: 600; }

.tab-btn.active { background: var(--primary); color: white; }

table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 14px; }

th, td { text-align: left; padding: 12px; border-bottom: 1px solid var(--border); }

th { background: #f8fafc; color: var(--text-main); font-weight: 600; }

.hidden { display: none !important; }

.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }

.alert-success { background: #d1fae5; color: #065f46; }

.alert-error { background: #fee2e2; color: #991b1b; }

</style>

</head>

<body>

<div class="logo">🎾 PadelOS <span id="appVersion" class="badge">v4.2</span></div>

<span id="headerUserName">Welkom</span>

<button class="secondary" onclick="doLogout()" style="padding: 6px 12px; font-size: 12px;">Uitloggen</button>

</div>

</header>

<h2>Inloggen bij PadelOS</h2>

<p>Vul je e-mailadres in om een veilige inlogcode te ontvangen of log direct in met je wachtwoord.</p>

<label for="emailInput">E-mailadres</label>

</div>

<button onclick="requestLoginCode()" style="flex: 1;">Stuur Inlogcode</button>

</div>

<label for="codeInput">Verificatiecode (per e-mail)</label>

</div>

<button onclick="verifyLoginCode()" style="width: 100%; margin-bottom: 20px;">Inloggen met Code</button>

<label for="passwordInput">Of log in met Wachtwoord</label>

</div>

<button class="secondary" onclick="passwordLogin()" style="width: 100%;">Inloggen met Wachtwoord</button>

</section>

<div>

<h1 id="welcomeTitle">Welkom bij PadelOS</h1>

<p id="welcomeSubtitle">Beheer al je lessen, trainersuren en administratie vanuit één centrale omgeving.</p>

</div>

</div>

<button class="tab-btn active" onclick="switchTab('dashboard')">Dashboard</button>

<button class="tab-btn" onclick="switchTab('lessen')">Les Aanvragen</button>

<button class="tab-btn" onclick="switchTab('uren')">Trainer Uren & Beschikbaarheid</button>

<button class="tab-btn" onclick="switchTab('chat')">Communicatie & Chat</button>

<button class="tab-btn" onclick="switchTab('admin')">Data & Tabbladen</button>

</div>

<h3>Overzicht & Actieve Rollen</h3>

<p>Je hebt toegang tot de volgende modules binnen het PadelOS ecosysteem:</p>

</div>

<h3>Padel Les Aanvragen</h3>

<p>Vraag direct een nieuwe lesreeks of groepssessie aan. Je speelsterkte en profiel worden automatisch gekoppeld.</p>

<label>Lestype</label>

<option value="GROEPSLES">Groepsles (4 personen)</option>

<option value="DUOLES">Duoles (2 personen)</option>

<option value="PRIVE">Privéles (1 persoon)</option>

</select>

</div>

<label>Niveau / Speelsterkte</label>

</div>

<label>Aantal Lessen</label>

</div>

<label>Duur (minuten)</label>

<option value="60">60 minuten</option>

<option value="90">90 minuten</option>

</select>

</div>

<label>Gewenst Doel / Slagfocus (bijv. Bandeja, Bajada, Opbouwen)</label>

</div>

<label>Opmerkingen / Voorkeurstijden</label>

</div>

<button onclick="submitLessonRequest()">Lesaanvraag Indienen</button>

</div>

<h3>Trainer Uren & Beschikbaarheid Registreren</h3>

<p>Geef op wanneer je beschikbaar bent als trainer of coach binnen de regionale poule.</p>

<label>Type Beschikbaarheid</label>

<option value="BESCHIKBAAR">Beschikbaar voor lessen</option>

<option value="OPLEIDING">Opleiding / KNLTB</option>

<option value="VERHINDERD">Verhinderd</option>

</select>

</div>

<label>Start Datum</label>

</div>

<label>Eind Datum</label>

</div>

<label>Tijdslot / Uren</label>

</div>

<label>Toelichting</label>

</div>

<button onclick="submitTrainerAvailability()">Beschikbaarheid Opslaan</button>

</div>

<h3>Gesegmenteerde Communicatie & Chat</h3>

<p>Kies het kanaal en stuur gerichte berichten naar spelers, trainers of de administratie.</p>

<label>Kanaal / Doelgroep</label>

<option value="SPELERS">Spelers Portaal</option>

<option value="ADMIN">Administratie</option>

<option value="FINANCIEEL">Financieel & Facturatie</option>

</select>

</div>

<label>Onderwerp</label>

</div>

<label>Bericht</label>

</div>

<button onclick="sendChatMessage()">Verzenden</button>

</div>

<h3>PadelOS Database Tabbladen</h3>

<p>Bekijk en inspecteer de gekoppelde tabbladen in Google Sheets.</p>

<label>Selecteer Tabblad</label>

</div>

</table>

</div>

</section>

</div>

let sessionToken = localStorage.getItem('padelos_token') || '';

window.onload = function() {

if (sessionToken) {

google.script.run

.withSuccessHandler(handleBootstrap)

.withFailureHandler(handleError)

.bootstrap(sessionToken);

}

};

function showAlert(message, type = 'success') {

const box = document.getElementById('alertBox');

box.className = `alert alert-${type}`;

box.textContent = message;

box.classList.remove('hidden');

setTimeout(() => box.classList.add('hidden'), 5000);

}

function handleError(err) {

showAlert(err.message || 'Er is een fout opgetreden.', 'error');

}

function requestLoginCode() {

const email = document.getElementById('emailInput').value;

if (!email) return showAlert('Vul een e-mailadres in.', 'error');

google.script.run

.withSuccessHandler(res => showAlert(res.message))

.withFailureHandler(handleError)

.requestLoginCode(email);

}

function verifyLoginCode() {

const email = document.getElementById('emailInput').value;

const code = document.getElementById('codeInput').value;

if (!email || !code) return showAlert('Vul e-mail en code in.', 'error');

google.script.run

.withSuccessHandler(handleLoginSuccess)

.withFailureHandler(handleError)

.verifyLoginCode(email, code);

}

function passwordLogin() {

const email = document.getElementById('emailInput').value;

const password = document.getElementById('passwordInput').value;

if (!email || !password) return showAlert('Vul e-mail en wachtwoord in.', 'error');

google.script.run

.withSuccessHandler(handleLoginSuccess)

.withFailureHandler(handleError)

.passwordLogin(email, password);

}

function handleLoginSuccess(res) {

if (res.authenticated && res.sessionToken) {

sessionToken = res.sessionToken;

localStorage.setItem('padelos_token', sessionToken);

handleBootstrap(res);

showAlert('Succesvol ingelogd!');

}

function handleBootstrap(res) {

if (!res.authenticated) {

document.getElementById('authSection').classList.remove('hidden');

document.getElementById('appSection').classList.add('hidden');

document.getElementById('userHeaderInfo').classList.add('hidden');

return;

}

document.getElementById('authSection').classList.add('hidden');

document.getElementById('appSection').classList.remove('hidden');

document.getElementById('userHeaderInfo').classList.remove('hidden');

document.getElementById('headerUserName').textContent = res.user.displayName;

document.getElementById('welcomeTitle').textContent = `Welkom terug, ${res.user.displayName}!`;

// Render role badges

const badgeContainer = document.getElementById('roleBadges');

badgeContainer.innerHTML = res.roles.map(r => `<span class="badge">${r}</span>`).join('');

// Render interfaces grid

const grid = document.getElementById('interfacesGrid');

grid.innerHTML = res.interfaces.map(i => `

<h3>${i.icon} ${i.title}</h3>

</div>

`).join('');

loadSheetNames();

}

function doLogout() {

google.script.run.withSuccessHandler(() => {

localStorage.removeItem('padelos_token');

sessionToken = '';

location.reload();

}).logout(sessionToken);

}

function switchTab(tabName) {

document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));

document.querySelectorAll('.tab-btn').forEach(el => el.classList.remove('active'));

document.getElementById('tab-' + tabName).classList.remove('hidden');

event.target.classList.add('active');

}

function submitLessonRequest() {

const data = {

type: document.getElementById('lesType').value,

level: document.getElementById('lesLevel').value,

lessonCount: document.getElementById('lesCount').value,

duration: document.getElementById('lesDuration').value,

goal: document.getElementById('lesGoal').value,

notes: document.getElementById('lesNotes').value

};

google.script.run

.withSuccessHandler(res => showAlert(res.message))

.withFailureHandler(handleError)

.requestLesson(sessionToken, data);

}

function submitTrainerAvailability() {

const data = {

type: document.getElementById('avType').value,

startDatum: document.getElementById('avStartDate').value,

eindDatum: document.getElementById('avEndDate').value,

tijd: document.getElementById('avTime').value,

toelichting: document.getElementById('avNotes').value

};

google.script.run

.withSuccessHandler(res => showAlert(res.message))

.withFailureHandler(handleError)

.saveTrainerAvailability(sessionToken, data);

}

function sendChatMessage() {

const data = {

chatType: document.getElementById('chatType').value,

onderwerp: document.getElementById('chatSubject').value,

bericht: document.getElementById('chatMessage').value

};

google.script.run

.withSuccessHandler(res => showAlert(res.message))

.withFailureHandler(handleError)

.sendSegmentedChatMessage(sessionToken, data);

}

function loadSheetNames() {

google.script.run.withSuccessHandler(names => {

const select = document.getElementById('tableSelect');

select.innerHTML = names.map(n => `<option value="${n}">${n}</option>`).join('');

if (names.length > 0) loadTableData();

}).getAllSheetNames(sessionToken);

}

function loadTableData() {

const tableName = document.getElementById('tableSelect').value;

google.script.run.withSuccessHandler(res => {

const trH = document.getElementById('tableHeaders');

const tbR = document.getElementById('tableRows');

trH.innerHTML = res.headers.map(h => `<th>${h}</th>`).join('');

tbR.innerHTML = res.rows.map(r => `

<tr>${res.headers.map(h => `<td>${r.data[h] || ''}</td>`).join('')}</tr>

`).join('');

}).getTableData(sessionToken, tableName);

}

</script>

</body>

</html>

Index

🗄️ Opslagoverzicht: Waar wordt wat opgeslagen?

💻 Volledige Code: Index.html (Uitgebreide Versie met Admin Meldingscentrum)

Hoe kunnen gebruikersfeedback en nieuwe functionaliteiten worden aangedragen voor PadelOS?