Anwesenheit

<div style="font-family: Arial; max-width: 1100px; margin: auto; padding: 20px;">

  <h1>📋 Anwesenheitsverwaltung</h1>

  <div style="margin-bottom: 20px;">
    <button onclick="showView('terminal')">Terminal</button>
    <button onclick="showView('admin')">Admin</button>
  </div>

  <div id="message" style="margin:10px 0; color: white; background: black; padding: 10px;"></div>

  <!-- REGISTRIERUNG -->
  <div style="border:1px solid #ddd; padding:10px; margin-bottom:20px;">
    <h3>Neuer Mitarbeiter</h3>
    <input id="newName" placeholder="Name">
    <input id="newPin" placeholder="PIN" type="password">
    <button onclick="register()">Registrieren</button>
  </div>

  <!-- TERMINAL -->
  <div id="terminal">

    <h2>Mitarbeiter</h2>

    <input id="search" placeholder="Suche..." oninput="render()">

    <div id="list"></div>

  </div>

  <!-- ADMIN -->
  <div id="admin" style="display:none;">
    <h2>Admin Login</h2>

    <input id="adminPin" type="password" placeholder="Admin PIN">
    <button onclick="loginAdmin()">Login</button>

    <div id="adminArea" style="display:none;">
      <h3>Übersicht</h3>
      <div id="overview"></div>

      <button onclick="resetDay()">Tagesliste löschen</button>
    </div>
  </div>

</div>

<script>
const ADMIN_PIN = "1234";

let employees = JSON.parse(localStorage.getItem("employees") || "null") || [
  { name: "Dominik", pin: "1111" },
  { name: "Marcel", pin: "2222" },
  { name: "Steffi", pin: "3333" }
];

let entries = JSON.parse(localStorage.getItem("entries") || "[]");
let pins = {};
let admin = false;

function save() {
  localStorage.setItem("employees", JSON.stringify(employees));
  localStorage.setItem("entries", JSON.stringify(entries));
}

function msg(t) {
  document.getElementById("message").innerText = t;
  setTimeout(() => document.getElementById("message").innerText = "", 3000);
}

function today() {
  return new Date().toLocaleDateString("de-DE");
}

function register() {
  const name = document.getElementById("newName").value;
  const pin = document.getElementById("newPin").value;

  if (!name || !pin) return msg("Bitte ausfüllen");

  if (employees.find(e => e.name.toLowerCase() === name.toLowerCase())) {
    return msg("Mitarbeiter existiert bereits");
  }

  employees.push({ name, pin });
  save();
  msg("Registriert");
  render();
}

function checkPin(emp) {
  return pins[emp.name] === emp.pin;
}

function checkIn(emp) {
  if (!checkPin(emp)) return msg("Falsche PIN");

  if (entries.find(e => e.name === emp.name && !e.out)) {
    return msg("Schon eingestempelt");
  }

  entries.push({
    name: emp.name,
    date: today(),
    in: new Date().toLocaleTimeString(),
    out: null
  });

  pins[emp.name] = "";
  save();
  render();
}

function checkOut(emp) {
  if (!checkPin(emp)) return msg("Falsche PIN");

  const e = entries.find(x => x.name === emp.name && !x.out);
  if (e) e.out = new Date().toLocaleTimeString();

  pins[emp.name] = "";
  save();
  render();
}

function render() {
  const q = document.getElementById("search").value.toLowerCase();
  const list = document.getElementById("list");
  list.innerHTML = "";

  employees
    .filter(e => e.name.toLowerCase().includes(q))
    .forEach(emp => {

      const active = entries.find(e => e.name === emp.name && !e.out);

      const div = document.createElement("div");
      div.style.border = "1px solid #ddd";
      div.style.margin = "10px 0";
      div.style.padding = "10px";

      div.innerHTML = `
        <b>${emp.name}</b> ${active ? "🟢" : "🔴"}<br><br>

        <input type="password" placeholder="PIN" 
          oninput="pins['${emp.name}']=this.value"
        ><br><br>

        ${!active
          ? `<button onclick='checkIn(${JSON.stringify(emp)})'>Einstempeln</button>`
          : `<button onclick='checkOut(${JSON.stringify(emp)})'>Ausstempeln</button>`
        }
      `;

      list.appendChild(div);
    });

  if (admin) renderAdmin();
}

function showView(v) {
  document.getElementById("terminal").style.display = v === "terminal" ? "block" : "none";
  document.getElementById("admin").style.display = v === "admin" ? "block" : "none";
}

function loginAdmin() {
  if (document.getElementById("adminPin").value === ADMIN_PIN) {
    admin = true;
    document.getElementById("adminArea").style.display = "block";
    renderAdmin();
  } else msg("Falscher Admin PIN");
}

function renderAdmin() {
  const el = document.getElementById("overview");
  if (!el) return;

  el.innerHTML = entries.map(e => `
    <div style="border:1px solid #ddd; margin:5px; padding:5px;">
      <b>${e.name}</b><br>
      rein: ${e.in}<br>
      raus: ${e.out || "-"}
    </div>
  `).join("");
}

function resetDay() {
  if (confirm("wirklich löschen?")) {
    entries = [];
    save();
    render();
  }
}

render();
</script>

Kontaktformular