Formatting
This commit is contained in:
Carsten Graf
783
data/index.css
783
data/index.css
@@ -1,436 +1,439 @@
|
|||||||
html {
|
html {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: "Arial", sans-serif;
|
font-family: "Arial", sans-serif;
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
color: white;
|
color: white;
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 20px;
|
top: 20px;
|
||||||
left: 20px;
|
left: 20px;
|
||||||
width: auto;
|
width: auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
||||||
transition: transform 0.3s ease;
|
transition: transform 0.3s ease;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
display: block;
|
display: block;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
padding-right: 5px;
|
padding-right: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo:hover {
|
.logo:hover {
|
||||||
transform: scale(1.1);
|
transform: scale(1.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo img {
|
.logo img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.settings-btn {
|
.settings-btn {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 20px;
|
top: 20px;
|
||||||
right: 20px;
|
right: 20px;
|
||||||
background: rgba(255, 255, 255, 0.2);
|
background: rgba(255, 255, 255, 0.2);
|
||||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||||
color: white;
|
color: white;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
width: 60px;
|
width: 60px;
|
||||||
height: 60px;
|
height: 60px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.settings-btn:hover {
|
.settings-btn:hover {
|
||||||
background: rgba(255, 255, 255, 0.3);
|
background: rgba(255, 255, 255, 0.3);
|
||||||
border-color: rgba(255, 255, 255, 0.5);
|
border-color: rgba(255, 255, 255, 0.5);
|
||||||
transform: scale(1.1);
|
transform: scale(1.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.heartbeat-indicators {
|
.heartbeat-indicators {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 20px;
|
top: 20px;
|
||||||
right: 90px;
|
right: 90px;
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 15px;
|
gap: 15px;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
background: rgba(255, 255, 255, 0.1);
|
background: rgba(255, 255, 255, 0.1);
|
||||||
backdrop-filter: blur(10px);
|
backdrop-filter: blur(10px);
|
||||||
border-radius: 25px;
|
border-radius: 25px;
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.heartbeat-indicator {
|
.heartbeat-indicator {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: #e74c3c;
|
background: #e74c3c;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.heartbeat-indicator::before {
|
.heartbeat-indicator::before {
|
||||||
content: attr(data-label);
|
content: attr(data-label);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -25px;
|
top: -25px;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
color: rgba(255, 255, 255, 0.8);
|
color: rgba(255, 255, 255, 0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
.heartbeat-indicator.active {
|
.heartbeat-indicator.active {
|
||||||
background: #2ecc71;
|
background: #2ecc71;
|
||||||
box-shadow: 0 0 10px rgba(46, 204, 113, 0.5);
|
box-shadow: 0 0 10px rgba(46, 204, 113, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Batterie-Banner Styling */
|
/* Batterie-Banner Styling */
|
||||||
.battery-banner {
|
.battery-banner {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
|
background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
|
||||||
color: white;
|
color: white;
|
||||||
padding: 15px 20px;
|
padding: 15px 20px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
z-index: 2000;
|
z-index: 2000;
|
||||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
|
||||||
border-bottom: 3px solid rgba(255, 255, 255, 0.2);
|
border-bottom: 3px solid rgba(255, 255, 255, 0.2);
|
||||||
animation: batteryPulse 2s infinite;
|
animation: batteryPulse 2s infinite;
|
||||||
transform: translateY(-100%);
|
transform: translateY(-100%);
|
||||||
transition: transform 0.5s ease;
|
transition: transform 0.5s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.battery-banner.show {
|
.battery-banner.show {
|
||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.battery-banner .banner-content {
|
.battery-banner .banner-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 15px;
|
gap: 15px;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.battery-banner .banner-icon {
|
.battery-banner .banner-icon {
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
animation: batteryBlink 1.5s infinite;
|
animation: batteryBlink 1.5s infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
.battery-banner .banner-text {
|
.battery-banner .banner-text {
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
|
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.battery-banner .banner-devices {
|
.battery-banner .banner-devices {
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
opacity: 0.9;
|
opacity: 0.9;
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.battery-banner .close-btn {
|
.battery-banner .close-btn {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
right: 20px;
|
right: 20px;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
background: rgba(255, 255, 255, 0.2);
|
background: rgba(255, 255, 255, 0.2);
|
||||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||||
color: white;
|
color: white;
|
||||||
width: 35px;
|
width: 35px;
|
||||||
height: 35px;
|
height: 35px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.battery-banner .close-btn:hover {
|
.battery-banner .close-btn:hover {
|
||||||
background: rgba(255, 255, 255, 0.3);
|
background: rgba(255, 255, 255, 0.3);
|
||||||
border-color: rgba(255, 255, 255, 0.5);
|
border-color: rgba(255, 255, 255, 0.5);
|
||||||
transform: translateY(-50%) scale(1.1);
|
transform: translateY(-50%) scale(1.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes batteryPulse {
|
@keyframes batteryPulse {
|
||||||
0%, 100% {
|
0%,
|
||||||
opacity: 1;
|
100% {
|
||||||
}
|
opacity: 1;
|
||||||
50% {
|
}
|
||||||
opacity: 0.8;
|
50% {
|
||||||
}
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes batteryBlink {
|
@keyframes batteryBlink {
|
||||||
0%, 50% {
|
0%,
|
||||||
opacity: 1;
|
50% {
|
||||||
}
|
opacity: 1;
|
||||||
51%, 100% {
|
}
|
||||||
opacity: 0.5;
|
51%,
|
||||||
}
|
100% {
|
||||||
}
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* Anpassung für mobile Geräte */
|
/* Anpassung für mobile Geräte */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.battery-banner {
|
.battery-banner {
|
||||||
padding: 12px 15px;
|
padding: 12px 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.battery-banner .banner-content {
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.battery-banner .banner-icon {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.battery-banner .banner-text {
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.battery-banner .close-btn {
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
font-size: 1rem;
|
|
||||||
right: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hauptcontent nach unten verschieben wenn Banner sichtbar */
|
.battery-banner .banner-content {
|
||||||
.content-shifted {
|
gap: 10px;
|
||||||
margin-top: 80px;
|
}
|
||||||
transition: margin-top 0.5s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
.battery-banner .banner-icon {
|
||||||
.content-shifted {
|
font-size: 1.5rem;
|
||||||
margin-top: 70px;
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
.battery-banner .banner-text {
|
||||||
text-align: center;
|
font-size: 1rem;
|
||||||
margin-bottom: 2vh;
|
}
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header h1 {
|
.battery-banner .close-btn {
|
||||||
font-size: clamp(1.8rem, 4vw, 2.5rem);
|
width: 30px;
|
||||||
margin-bottom: 0.5vh;
|
height: 30px;
|
||||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
font-size: 1rem;
|
||||||
}
|
right: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.header p {
|
/* Hauptcontent nach unten verschieben wenn Banner sichtbar */
|
||||||
font-size: clamp(0.8rem, 1.8vw, 1rem);
|
.content-shifted {
|
||||||
}
|
margin-top: 80px;
|
||||||
|
transition: margin-top 0.5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
.timer-container {
|
@media (max-width: 768px) {
|
||||||
display: grid;
|
.content-shifted {
|
||||||
grid-template-columns: 1fr 1fr;
|
margin-top: 70px;
|
||||||
gap: clamp(15px, 2vw, 30px);
|
}
|
||||||
width: 100%;
|
}
|
||||||
max-width: 100%;
|
|
||||||
flex-grow: 1;
|
|
||||||
padding: 0 2vw;
|
|
||||||
max-height: 60vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
.header {
|
||||||
.timer-container {
|
text-align: center;
|
||||||
grid-template-columns: 1fr;
|
margin-bottom: 2vh;
|
||||||
gap: clamp(15px, 3vw, 30px);
|
flex-shrink: 0;
|
||||||
padding: 0 15px;
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.lane {
|
.header h1 {
|
||||||
background: rgba(255, 255, 255, 0.1);
|
font-size: clamp(1.8rem, 4vw, 2.5rem);
|
||||||
backdrop-filter: blur(10px);
|
margin-bottom: 0.5vh;
|
||||||
border-radius: 20px;
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
||||||
padding: clamp(15px, 2.5vh, 25px);
|
}
|
||||||
text-align: center;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
||||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
|
||||||
transition: transform 0.3s ease;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lane h2 {
|
.header p {
|
||||||
font-size: clamp(1.2rem, 2.5vw, 1.8rem);
|
font-size: clamp(0.8rem, 1.8vw, 1rem);
|
||||||
margin-bottom: clamp(10px, 1vh, 15px);
|
}
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.swimmer-name {
|
.timer-container {
|
||||||
font-size: clamp(1.5rem, 3.5vw, 2.2rem);
|
display: grid;
|
||||||
font-weight: bold;
|
grid-template-columns: 1fr 1fr;
|
||||||
margin-bottom: clamp(15px, 2vh, 25px);
|
gap: clamp(15px, 2vw, 30px);
|
||||||
padding: clamp(8px, 1.5vh, 12px) clamp(12px, 2vw, 18px);
|
width: 100%;
|
||||||
background: rgba(255, 255, 255, 0.2);
|
max-width: 100%;
|
||||||
border-radius: 15px;
|
flex-grow: 1;
|
||||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
padding: 0 2vw;
|
||||||
color: #fff;
|
max-height: 60vh;
|
||||||
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
|
}
|
||||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
|
||||||
backdrop-filter: blur(5px);
|
|
||||||
animation: fadeIn 0.5s ease-in;
|
|
||||||
text-align: center;
|
|
||||||
word-wrap: break-word;
|
|
||||||
line-height: 1.2;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeIn {
|
@media (max-width: 768px) {
|
||||||
from {
|
.timer-container {
|
||||||
opacity: 0;
|
grid-template-columns: 1fr;
|
||||||
transform: translateY(-10px);
|
gap: clamp(15px, 3vw, 30px);
|
||||||
}
|
padding: 0 15px;
|
||||||
to {
|
}
|
||||||
opacity: 1;
|
}
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.time-display {
|
.lane {
|
||||||
font-size: clamp(3rem, 9vw, 10rem);
|
background: rgba(255, 255, 255, 0.1);
|
||||||
font-weight: bold;
|
backdrop-filter: blur(10px);
|
||||||
margin: clamp(10px, 1vh, 15px) 0;
|
border-radius: 20px;
|
||||||
font-family: "Courier New", monospace;
|
padding: clamp(15px, 2.5vh, 25px);
|
||||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
text-align: center;
|
||||||
line-height: 1;
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
}
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
.status {
|
.lane h2 {
|
||||||
font-size: clamp(3rem, 1.8vw, 1.2rem);
|
font-size: clamp(1.2rem, 2.5vw, 1.8rem);
|
||||||
margin: clamp(8px, 1vh, 12px) 0;
|
margin-bottom: clamp(10px, 1vh, 15px);
|
||||||
padding: clamp(6px, 1vh, 10px) clamp(12px, 2vw, 18px);
|
color: #fff;
|
||||||
border-radius: 20px;
|
}
|
||||||
display: inline-block;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status.ready {
|
.swimmer-name {
|
||||||
background-color: rgba(52, 152, 219, 0.3);
|
font-size: clamp(1.5rem, 3.5vw, 2.2rem);
|
||||||
border: 2px solid #3498db;
|
font-weight: bold;
|
||||||
}
|
margin-bottom: clamp(15px, 2vh, 25px);
|
||||||
|
padding: clamp(8px, 1.5vh, 12px) clamp(12px, 2vw, 18px);
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
border-radius: 15px;
|
||||||
|
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||||
|
color: #fff;
|
||||||
|
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
|
||||||
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
||||||
|
backdrop-filter: blur(5px);
|
||||||
|
animation: fadeIn 0.5s ease-in;
|
||||||
|
text-align: center;
|
||||||
|
word-wrap: break-word;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
.status.running {
|
@keyframes fadeIn {
|
||||||
background-color: rgba(46, 204, 113, 0.3);
|
from {
|
||||||
border: 2px solid #2ecc71;
|
opacity: 0;
|
||||||
animation: pulse 1s infinite;
|
transform: translateY(-10px);
|
||||||
}
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.status.finished {
|
.time-display {
|
||||||
background-color: rgba(231, 76, 60, 0.3);
|
font-size: clamp(3rem, 9vw, 10rem);
|
||||||
border: 2px solid #e74c3c;
|
font-weight: bold;
|
||||||
}
|
margin: clamp(10px, 1vh, 15px) 0;
|
||||||
|
font-family: "Courier New", monospace;
|
||||||
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes pulse {
|
.status {
|
||||||
0% {
|
font-size: clamp(3rem, 1.8vw, 1.2rem);
|
||||||
opacity: 1;
|
margin: clamp(8px, 1vh, 12px) 0;
|
||||||
}
|
padding: clamp(6px, 1vh, 10px) clamp(12px, 2vw, 18px);
|
||||||
50% {
|
border-radius: 20px;
|
||||||
opacity: 0.7;
|
display: inline-block;
|
||||||
}
|
font-weight: 600;
|
||||||
100% {
|
}
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.best-times {
|
.status.ready {
|
||||||
background: rgba(255, 255, 255, 0.15);
|
background-color: rgba(52, 152, 219, 0.3);
|
||||||
backdrop-filter: blur(10px);
|
border: 2px solid #3498db;
|
||||||
border-radius: 15px;
|
}
|
||||||
padding: clamp(10px, 1.5vh, 15px);
|
|
||||||
margin: 1vh 0 0 0;
|
|
||||||
width: 50%;
|
|
||||||
max-width: 50%;
|
|
||||||
text-align: center;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
||||||
flex-shrink: 0;
|
|
||||||
align-self: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.best-times h3 {
|
.status.running {
|
||||||
font-size: clamp(0.9rem, 1.8vw, 1.1rem);
|
background-color: rgba(46, 204, 113, 0.3);
|
||||||
margin-bottom: clamp(5px, 0.5vh, 8px);
|
border: 2px solid #2ecc71;
|
||||||
}
|
animation: pulse 1s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
.best-time-row {
|
.status.finished {
|
||||||
display: flex;
|
background-color: rgba(231, 76, 60, 0.3);
|
||||||
justify-content: space-between;
|
border: 2px solid #e74c3c;
|
||||||
margin: clamp(3px, 0.5vh, 5px) 0;
|
}
|
||||||
font-size: clamp(0.8rem, 1.5vw, 1rem);
|
|
||||||
font-weight: 500;
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
padding: clamp(5px, 1vh, 8px) clamp(8px, 1.5vw, 12px);
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.learning-mode {
|
@keyframes pulse {
|
||||||
background: rgba(255, 193, 7, 0.2);
|
0% {
|
||||||
border: 2px solid #ffc107;
|
opacity: 1;
|
||||||
border-radius: 15px;
|
}
|
||||||
padding: clamp(15px, 2vh, 20px);
|
50% {
|
||||||
margin: 2vh 0;
|
opacity: 0.7;
|
||||||
text-align: center;
|
}
|
||||||
animation: pulse 2s infinite;
|
100% {
|
||||||
width: 100%;
|
opacity: 1;
|
||||||
position: absolute;
|
}
|
||||||
top: 15vh;
|
}
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
z-index: 100;
|
|
||||||
}
|
|
||||||
|
|
||||||
.learning-mode h3 {
|
.best-times {
|
||||||
color: #ffc107;
|
background: rgba(255, 255, 255, 0.15);
|
||||||
margin-bottom: 10px;
|
backdrop-filter: blur(10px);
|
||||||
font-size: clamp(1rem, 2vw, 1.3rem);
|
border-radius: 15px;
|
||||||
}
|
padding: clamp(10px, 1.5vh, 15px);
|
||||||
|
margin: 1vh 0 0 0;
|
||||||
|
width: 50%;
|
||||||
|
max-width: 50%;
|
||||||
|
text-align: center;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
flex-shrink: 0;
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
.learning-mode p {
|
.best-times h3 {
|
||||||
font-size: clamp(0.9rem, 1.8vw, 1.1rem);
|
font-size: clamp(0.9rem, 1.8vw, 1.1rem);
|
||||||
}
|
margin-bottom: clamp(5px, 0.5vh, 8px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.best-time-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: clamp(3px, 0.5vh, 5px) 0;
|
||||||
|
font-size: clamp(0.8rem, 1.5vw, 1rem);
|
||||||
|
font-weight: 500;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
padding: clamp(5px, 1vh, 8px) clamp(8px, 1.5vw, 12px);
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.learning-mode {
|
||||||
|
background: rgba(255, 193, 7, 0.2);
|
||||||
|
border: 2px solid #ffc107;
|
||||||
|
border-radius: 15px;
|
||||||
|
padding: clamp(15px, 2vh, 20px);
|
||||||
|
margin: 2vh 0;
|
||||||
|
text-align: center;
|
||||||
|
animation: pulse 2s infinite;
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 15vh;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.learning-mode h3 {
|
||||||
|
color: #ffc107;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
font-size: clamp(1rem, 2vw, 1.3rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.learning-mode p {
|
||||||
|
font-size: clamp(0.9rem, 1.8vw, 1.1rem);
|
||||||
|
}
|
||||||
|
|||||||
145
data/index.html
145
data/index.html
@@ -3,12 +3,11 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<link rel="stylesheet" href="index.css" />
|
<link rel="stylesheet" href="index.css" />
|
||||||
<link rel="icon" type="image/x-icon" href="/pictures/favicon.ico">
|
<link rel="icon" type="image/x-icon" href="/pictures/favicon.ico" />
|
||||||
|
|
||||||
<title>NinjaCross Timer</title>
|
<title>NinjaCross Timer</title>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<!-- Batterie-Banner -->
|
<!-- Batterie-Banner -->
|
||||||
<div id="battery-banner" class="battery-banner">
|
<div id="battery-banner" class="battery-banner">
|
||||||
<div class="banner-content">
|
<div class="banner-content">
|
||||||
@@ -27,9 +26,17 @@
|
|||||||
<a href="/settings" class="settings-btn">⚙️</a>
|
<a href="/settings" class="settings-btn">⚙️</a>
|
||||||
|
|
||||||
<div class="heartbeat-indicators">
|
<div class="heartbeat-indicators">
|
||||||
<div class="heartbeat-indicator" id="heartbeat1" data-label="Start1"></div>
|
<div
|
||||||
|
class="heartbeat-indicator"
|
||||||
|
id="heartbeat1"
|
||||||
|
data-label="Start1"
|
||||||
|
></div>
|
||||||
<div class="heartbeat-indicator" id="heartbeat2" data-label="Stop1"></div>
|
<div class="heartbeat-indicator" id="heartbeat2" data-label="Stop1"></div>
|
||||||
<div class="heartbeat-indicator" id="heartbeat3" data-label="Start2"></div>
|
<div
|
||||||
|
class="heartbeat-indicator"
|
||||||
|
id="heartbeat3"
|
||||||
|
data-label="Start2"
|
||||||
|
></div>
|
||||||
<div class="heartbeat-indicator" id="heartbeat4" data-label="Stop2"></div>
|
<div class="heartbeat-indicator" id="heartbeat4" data-label="Stop2"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -47,14 +54,14 @@
|
|||||||
|
|
||||||
<div class="timer-container">
|
<div class="timer-container">
|
||||||
<div class="lane">
|
<div class="lane">
|
||||||
<div id="name1" class="swimmer-name" style="display: none;"></div>
|
<div id="name1" class="swimmer-name" style="display: none"></div>
|
||||||
<h2>🏊♀️ Bahn 1</h2>
|
<h2>🏊♀️ Bahn 1</h2>
|
||||||
<div id="time1" class="time-display">00.00</div>
|
<div id="time1" class="time-display">00.00</div>
|
||||||
<div id="status1" class="status ready">Bereit</div>
|
<div id="status1" class="status ready">Bereit</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="lane">
|
<div class="lane">
|
||||||
<div id="name2" class="swimmer-name" style="display: none;"></div>
|
<div id="name2" class="swimmer-name" style="display: none"></div>
|
||||||
<h2>🏊♂️ Bahn 2</h2>
|
<h2>🏊♂️ Bahn 2</h2>
|
||||||
<div id="time2" class="time-display">00.00</div>
|
<div id="time2" class="time-display">00.00</div>
|
||||||
<div id="status2" class="status ready">Bereit</div>
|
<div id="status2" class="status ready">Bereit</div>
|
||||||
@@ -86,11 +93,11 @@
|
|||||||
let learningButton = "";
|
let learningButton = "";
|
||||||
let name1 = "";
|
let name1 = "";
|
||||||
let name2 = "";
|
let name2 = "";
|
||||||
|
|
||||||
// Batterie-Banner State
|
// Batterie-Banner State
|
||||||
let lowBatteryDevices = new Set();
|
let lowBatteryDevices = new Set();
|
||||||
let batteryBannerDismissed = false;
|
let batteryBannerDismissed = false;
|
||||||
|
|
||||||
const ws = new WebSocket(`ws://${window.location.host}/ws`);
|
const ws = new WebSocket(`ws://${window.location.host}/ws`);
|
||||||
|
|
||||||
// Heartbeat timeout tracker
|
// Heartbeat timeout tracker
|
||||||
@@ -102,15 +109,15 @@
|
|||||||
};
|
};
|
||||||
|
|
||||||
// Set all heartbeats to red initially
|
// Set all heartbeats to red initially
|
||||||
["heartbeat1", "heartbeat2", "heartbeat3", "heartbeat4"].forEach(id => {
|
["heartbeat1", "heartbeat2", "heartbeat3", "heartbeat4"].forEach((id) => {
|
||||||
document.getElementById(id).classList.remove('active');
|
document.getElementById(id).classList.remove("active");
|
||||||
});
|
});
|
||||||
|
|
||||||
// Handle WebSocket events
|
// Handle WebSocket events
|
||||||
ws.onopen = () => {
|
ws.onopen = () => {
|
||||||
console.log("WebSocket connected");
|
console.log("WebSocket connected");
|
||||||
};
|
};
|
||||||
|
|
||||||
ws.onclose = () => {
|
ws.onclose = () => {
|
||||||
console.log("WebSocket disconnected");
|
console.log("WebSocket disconnected");
|
||||||
};
|
};
|
||||||
@@ -136,15 +143,21 @@
|
|||||||
|
|
||||||
if (indicatorId) {
|
if (indicatorId) {
|
||||||
heartbeatTimeouts[data.button] = Date.now();
|
heartbeatTimeouts[data.button] = Date.now();
|
||||||
document.getElementById(indicatorId).classList.add('active');
|
document.getElementById(indicatorId).classList.add("active");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Namen-Handling
|
// Namen-Handling
|
||||||
if ((data.firstname == "" || data.lastname == "") && data.lane == "start1") {
|
if (
|
||||||
|
(data.firstname == "" || data.lastname == "") &&
|
||||||
|
data.lane == "start1"
|
||||||
|
) {
|
||||||
name1 = "";
|
name1 = "";
|
||||||
}
|
}
|
||||||
if ((data.firstname == "" || data.lastname == "") && data.lane == "start2") {
|
if (
|
||||||
|
(data.firstname == "" || data.lastname == "") &&
|
||||||
|
data.lane == "start2"
|
||||||
|
) {
|
||||||
name2 = "";
|
name2 = "";
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -164,10 +177,10 @@
|
|||||||
// Batterie-Status Handler für einzelne Geräte
|
// Batterie-Status Handler für einzelne Geräte
|
||||||
function handleSingleBatteryStatus(data) {
|
function handleSingleBatteryStatus(data) {
|
||||||
// Format: {button: "start2", mac: "98:3D:AE:AA:CF:94", batteryLevel: 0}
|
// Format: {button: "start2", mac: "98:3D:AE:AA:CF:94", batteryLevel: 0}
|
||||||
|
|
||||||
const deviceKey = `${data.button}-${data.mac}`;
|
const deviceKey = `${data.button}-${data.mac}`;
|
||||||
const batteryLevel = data.batteryLevel || 0;
|
const batteryLevel = data.batteryLevel || 0;
|
||||||
|
|
||||||
// Batterie als niedrig betrachten wenn <= 15%
|
// Batterie als niedrig betrachten wenn <= 15%
|
||||||
if (batteryLevel <= 15) {
|
if (batteryLevel <= 15) {
|
||||||
// Gerät zu niedrige Batterie Liste hinzufügen
|
// Gerät zu niedrige Batterie Liste hinzufügen
|
||||||
@@ -179,26 +192,26 @@
|
|||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!found) {
|
if (!found) {
|
||||||
lowBatteryDevices.add({
|
lowBatteryDevices.add({
|
||||||
button: data.button,
|
button: data.button,
|
||||||
mac: data.mac,
|
mac: data.mac,
|
||||||
battery: batteryLevel
|
battery: batteryLevel,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!batteryBannerDismissed) {
|
if (!batteryBannerDismissed) {
|
||||||
showBatteryBanner();
|
showBatteryBanner();
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
// Gerät aus niedrige Batterie Liste entfernen
|
// Gerät aus niedrige Batterie Liste entfernen
|
||||||
lowBatteryDevices.forEach(device => {
|
lowBatteryDevices.forEach((device) => {
|
||||||
if (device.button === data.button && device.mac === data.mac) {
|
if (device.button === data.button && device.mac === data.mac) {
|
||||||
lowBatteryDevices.delete(device);
|
lowBatteryDevices.delete(device);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Banner verstecken wenn keine Geräte mehr niedrige Batterie haben
|
// Banner verstecken wenn keine Geräte mehr niedrige Batterie haben
|
||||||
if (lowBatteryDevices.size === 0) {
|
if (lowBatteryDevices.size === 0) {
|
||||||
hideBatteryBanner();
|
hideBatteryBanner();
|
||||||
@@ -213,18 +226,18 @@
|
|||||||
function handleBatteryStatus(data) {
|
function handleBatteryStatus(data) {
|
||||||
// data.devices ist ein Array mit Geräten die niedrige Batterie haben
|
// data.devices ist ein Array mit Geräten die niedrige Batterie haben
|
||||||
// Format: [{button: "start1", mac: "XX:XX:XX", battery: 15}, ...]
|
// Format: [{button: "start1", mac: "XX:XX:XX", battery: 15}, ...]
|
||||||
|
|
||||||
lowBatteryDevices.clear();
|
lowBatteryDevices.clear();
|
||||||
|
|
||||||
if (data.devices && data.devices.length > 0) {
|
if (data.devices && data.devices.length > 0) {
|
||||||
data.devices.forEach(device => {
|
data.devices.forEach((device) => {
|
||||||
lowBatteryDevices.add({
|
lowBatteryDevices.add({
|
||||||
button: device.button,
|
button: device.button,
|
||||||
mac: device.mac,
|
mac: device.mac,
|
||||||
battery: device.battery || 0
|
battery: device.battery || 0,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
if (!batteryBannerDismissed) {
|
if (!batteryBannerDismissed) {
|
||||||
showBatteryBanner();
|
showBatteryBanner();
|
||||||
}
|
}
|
||||||
@@ -235,27 +248,29 @@
|
|||||||
|
|
||||||
// Batterie-Banner anzeigen
|
// Batterie-Banner anzeigen
|
||||||
function showBatteryBanner() {
|
function showBatteryBanner() {
|
||||||
const banner = document.getElementById('battery-banner');
|
const banner = document.getElementById("battery-banner");
|
||||||
const deviceList = document.getElementById('low-battery-list');
|
const deviceList = document.getElementById("low-battery-list");
|
||||||
|
|
||||||
// Geräteliste erstellen
|
// Geräteliste erstellen
|
||||||
const deviceNames = Array.from(lowBatteryDevices).map(device => {
|
const deviceNames = Array.from(lowBatteryDevices)
|
||||||
const buttonName = getButtonDisplayName(device.button);
|
.map((device) => {
|
||||||
return `${buttonName} (${device.battery}%)`;
|
const buttonName = getButtonDisplayName(device.button);
|
||||||
}).join(', ');
|
return `${buttonName} (${device.battery}%)`;
|
||||||
|
})
|
||||||
|
.join(", ");
|
||||||
|
|
||||||
deviceList.textContent = deviceNames;
|
deviceList.textContent = deviceNames;
|
||||||
|
|
||||||
// Banner anzeigen
|
// Banner anzeigen
|
||||||
banner.classList.add('show');
|
banner.classList.add("show");
|
||||||
document.body.classList.add('content-shifted');
|
document.body.classList.add("content-shifted");
|
||||||
}
|
}
|
||||||
|
|
||||||
// Batterie-Banner verstecken
|
// Batterie-Banner verstecken
|
||||||
function hideBatteryBanner() {
|
function hideBatteryBanner() {
|
||||||
const banner = document.getElementById('battery-banner');
|
const banner = document.getElementById("battery-banner");
|
||||||
banner.classList.remove('show');
|
banner.classList.remove("show");
|
||||||
document.body.classList.remove('content-shifted');
|
document.body.classList.remove("content-shifted");
|
||||||
batteryBannerDismissed = false;
|
batteryBannerDismissed = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -267,12 +282,17 @@
|
|||||||
|
|
||||||
// Button-Namen für Anzeige
|
// Button-Namen für Anzeige
|
||||||
function getButtonDisplayName(button) {
|
function getButtonDisplayName(button) {
|
||||||
switch(button) {
|
switch (button) {
|
||||||
case 'start1': return 'Start Bahn 1';
|
case "start1":
|
||||||
case 'stop1': return 'Stop Bahn 1';
|
return "Start Bahn 1";
|
||||||
case 'start2': return 'Start Bahn 2';
|
case "stop1":
|
||||||
case 'stop2': return 'Stop Bahn 2';
|
return "Stop Bahn 1";
|
||||||
default: return button;
|
case "start2":
|
||||||
|
return "Start Bahn 2";
|
||||||
|
case "stop2":
|
||||||
|
return "Stop Bahn 2";
|
||||||
|
default:
|
||||||
|
return button;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -301,8 +321,8 @@
|
|||||||
status1 === "ready"
|
status1 === "ready"
|
||||||
? "Bereit"
|
? "Bereit"
|
||||||
: status1 === "running"
|
: status1 === "running"
|
||||||
? "Läuft..."
|
? "Läuft..."
|
||||||
: "Beendet";
|
: "Beendet";
|
||||||
|
|
||||||
document.getElementById("time2").textContent = formatTime(display2);
|
document.getElementById("time2").textContent = formatTime(display2);
|
||||||
const s2 = document.getElementById("status2");
|
const s2 = document.getElementById("status2");
|
||||||
@@ -311,8 +331,8 @@
|
|||||||
status2 === "ready"
|
status2 === "ready"
|
||||||
? "Bereit"
|
? "Bereit"
|
||||||
: status2 === "running"
|
: status2 === "running"
|
||||||
? "Läuft..."
|
? "Läuft..."
|
||||||
: "Beendet";
|
: "Beendet";
|
||||||
|
|
||||||
document.getElementById("best1").textContent =
|
document.getElementById("best1").textContent =
|
||||||
best1 > 0 ? formatTime(best1) + "s" : "--.-";
|
best1 > 0 ? formatTime(best1) + "s" : "--.-";
|
||||||
@@ -329,7 +349,7 @@
|
|||||||
} else {
|
} else {
|
||||||
name1Element.style.display = "none";
|
name1Element.style.display = "none";
|
||||||
}
|
}
|
||||||
|
|
||||||
if (name2 && name2.trim() !== "") {
|
if (name2 && name2.trim() !== "") {
|
||||||
name2Element.textContent = name2;
|
name2Element.textContent = name2;
|
||||||
name2Element.style.display = "block";
|
name2Element.style.display = "block";
|
||||||
@@ -340,7 +360,8 @@
|
|||||||
// Lernmodus
|
// Lernmodus
|
||||||
const learningDisplay = document.getElementById("learning-display");
|
const learningDisplay = document.getElementById("learning-display");
|
||||||
if (learningMode) {
|
if (learningMode) {
|
||||||
document.getElementById("learning-button").textContent = learningButton;
|
document.getElementById("learning-button").textContent =
|
||||||
|
learningButton;
|
||||||
learningDisplay.style.display = "block";
|
learningDisplay.style.display = "block";
|
||||||
} else {
|
} else {
|
||||||
learningDisplay.style.display = "none";
|
learningDisplay.style.display = "none";
|
||||||
@@ -363,7 +384,7 @@
|
|||||||
updateDisplay();
|
updateDisplay();
|
||||||
})
|
})
|
||||||
.catch((error) =>
|
.catch((error) =>
|
||||||
console.error("Fehler beim Laden der Daten:", error)
|
console.error("Fehler beim Laden der Daten:", error),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -377,13 +398,13 @@
|
|||||||
setInterval(() => {
|
setInterval(() => {
|
||||||
const now = Date.now();
|
const now = Date.now();
|
||||||
[
|
[
|
||||||
{button: "start1", id: "heartbeat1"},
|
{ button: "start1", id: "heartbeat1" },
|
||||||
{button: "stop1", id: "heartbeat2"},
|
{ button: "stop1", id: "heartbeat2" },
|
||||||
{button: "start2", id: "heartbeat3"},
|
{ button: "start2", id: "heartbeat3" },
|
||||||
{button: "stop2", id: "heartbeat4"},
|
{ button: "stop2", id: "heartbeat4" },
|
||||||
].forEach(({button, id}) => {
|
].forEach(({ button, id }) => {
|
||||||
if (now - heartbeatTimeouts[button] > 10000) {
|
if (now - heartbeatTimeouts[button] > 10000) {
|
||||||
document.getElementById(id).classList.remove('active');
|
document.getElementById(id).classList.remove("active");
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}, 1000);
|
}, 1000);
|
||||||
@@ -392,4 +413,4 @@
|
|||||||
syncFromBackend();
|
syncFromBackend();
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
415
data/rfid.css
415
data/rfid.css
@@ -1,235 +1,242 @@
|
|||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
background: rgba(255, 255, 255, 0.95);
|
background: rgba(255, 255, 255, 0.95);
|
||||||
padding: 40px;
|
padding: 40px;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||||
backdrop-filter: blur(10px);
|
backdrop-filter: blur(10px);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 500px;
|
max-width: 500px;
|
||||||
animation: slideIn 0.5s ease-out;
|
animation: slideIn 0.5s ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes slideIn {
|
@keyframes slideIn {
|
||||||
from {
|
from {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: translateY(30px);
|
transform: translateY(30px);
|
||||||
}
|
}
|
||||||
to {
|
to {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header h1 {
|
.header h1 {
|
||||||
color: #333;
|
color: #333;
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header p {
|
.header p {
|
||||||
color: #666;
|
color: #666;
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group {
|
.form-group {
|
||||||
margin-bottom: 25px;
|
margin-bottom: 25px;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group label {
|
.form-group label {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
color: #333;
|
color: #333;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group input {
|
.form-group input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
border: 2px solid #e1e5e9;
|
border: 2px solid #e1e5e9;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group input:focus {
|
.form-group input:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
border-color: #667eea;
|
border-color: #667eea;
|
||||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group input:hover {
|
.form-group input:hover {
|
||||||
border-color: #667eea;
|
border-color: #667eea;
|
||||||
}
|
}
|
||||||
|
|
||||||
.required {
|
.required {
|
||||||
color: #e74c3c;
|
color: #e74c3c;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-container {
|
.btn-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 15px;
|
gap: 15px;
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 15px 25px;
|
padding: 15px 25px;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary {
|
.btn-primary {
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary:hover {
|
.btn-primary:hover {
|
||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
|
box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-secondary {
|
.btn-secondary {
|
||||||
background: #f8f9fa;
|
background: #f8f9fa;
|
||||||
color: #666;
|
color: #666;
|
||||||
border: 2px solid #e1e5e9;
|
border: 2px solid #e1e5e9;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-secondary:hover {
|
.btn-secondary:hover {
|
||||||
background: #e9ecef;
|
background: #e9ecef;
|
||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.success-message {
|
.success-message {
|
||||||
background: #d4edda;
|
background: #d4edda;
|
||||||
color: #155724;
|
color: #155724;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
border: 1px solid #c3e6cb;
|
border: 1px solid #c3e6cb;
|
||||||
animation: fadeIn 0.3s ease-out;
|
animation: fadeIn 0.3s ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.read-uid-btn {
|
.read-uid-btn {
|
||||||
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
|
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
|
||||||
color: white;
|
color: white;
|
||||||
border: none;
|
border: none;
|
||||||
padding: 15px 20px;
|
padding: 15px 20px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.5px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
min-width: 120px;
|
min-width: 120px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.read-uid-btn:hover {
|
.read-uid-btn:hover {
|
||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
box-shadow: 0 8px 16px rgba(40, 167, 69, 0.3);
|
box-shadow: 0 8px 16px rgba(40, 167, 69, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.read-uid-btn:disabled {
|
.read-uid-btn:disabled {
|
||||||
background: #6c757d;
|
background: #6c757d;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
transform: none;
|
transform: none;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.read-uid-btn.reading {
|
.read-uid-btn.reading {
|
||||||
background: linear-gradient(135deg, #fd7e14 0%, #e83e8c 100%);
|
background: linear-gradient(135deg, #fd7e14 0%, #e83e8c 100%);
|
||||||
animation: pulse 1.5s infinite;
|
animation: pulse 1.5s infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes pulse {
|
@keyframes pulse {
|
||||||
0% { transform: scale(1); }
|
0% {
|
||||||
50% { transform: scale(1.05); }
|
transform: scale(1);
|
||||||
100% { transform: scale(1); }
|
}
|
||||||
}
|
50% {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes fadeIn {
|
@keyframes fadeIn {
|
||||||
from {
|
from {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: translateX(-20px);
|
transform: translateX(-20px);
|
||||||
}
|
}
|
||||||
to {
|
to {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Geburtsdatum Styling */
|
/* Geburtsdatum Styling */
|
||||||
.date-input-group {
|
.date-input-group {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.date-input-group input[type="date"] {
|
.date-input-group input[type="date"] {
|
||||||
position: relative;
|
position: relative;
|
||||||
color-scheme: light;
|
color-scheme: light;
|
||||||
}
|
}
|
||||||
|
|
||||||
.date-input-group input[type="date"]::-webkit-calendar-picker-indicator {
|
.date-input-group input[type="date"]::-webkit-calendar-picker-indicator {
|
||||||
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23667eea" viewBox="0 0 16 16"><path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/></svg>') no-repeat;
|
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23667eea" viewBox="0 0 16 16"><path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/></svg>')
|
||||||
background-size: contain;
|
no-repeat;
|
||||||
width: 20px;
|
background-size: contain;
|
||||||
height: 20px;
|
width: 20px;
|
||||||
cursor: pointer;
|
height: 20px;
|
||||||
}
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
.age-display {
|
.age-display {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 15px;
|
right: 15px;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
color: #667eea;
|
color: #667eea;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
background: rgba(255, 255, 255, 0.9);
|
background: rgba(255, 255, 255, 0.9);
|
||||||
padding: 2px 8px;
|
padding: 2px 8px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
border: 1px solid #e1e5e9;
|
border: 1px solid #e1e5e9;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
.container {
|
.container {
|
||||||
padding: 30px 20px;
|
padding: 30px 20px;
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-container {
|
.btn-container {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
715
data/rfid.html
715
data/rfid.html
@@ -1,206 +1,278 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="de">
|
<html lang="de">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<link rel="stylesheet" href="rfid.css" />
|
<link rel="stylesheet" href="rfid.css" />
|
||||||
<link rel="icon" type="image/x-icon" href="/pictures/favicon.ico">
|
<link rel="icon" type="image/x-icon" href="/pictures/favicon.ico" />
|
||||||
|
|
||||||
<title>RFID Daten Eingabe</title>
|
<title>RFID Daten Eingabe</title>
|
||||||
|
</head>
|
||||||
</head>
|
<body>
|
||||||
<body>
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
|
<div
|
||||||
<button onclick="window.location.href='/settings'" class="back-btn" style="background: #6c757d; color: white; border: none; padding: 8px 15px; border-radius: 5px; cursor: pointer; font-size: 14px; display: flex; align-items: center; gap: 5px;">
|
style="
|
||||||
← Zurück zu Einstellungen
|
display: flex;
|
||||||
</button>
|
justify-content: space-between;
|
||||||
</div>
|
align-items: center;
|
||||||
<h1>🏷️ RFID Daten Eingabe</h1>
|
margin-bottom: 10px;
|
||||||
<p>Erfassen Sie RFID-Tag Informationen</p>
|
"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
onclick="window.location.href='/settings'"
|
||||||
|
class="back-btn"
|
||||||
|
style="
|
||||||
|
background: #6c757d;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 8px 15px;
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 5px;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
← Zurück zu Einstellungen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<h1>🏷️ RFID Daten Eingabe</h1>
|
||||||
|
<p>Erfassen Sie RFID-Tag Informationen</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="successMessage" class="success-message" style="display: none">
|
||||||
|
✅ Daten erfolgreich gespeichert!
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form id="rfidForm">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="uid">RFID UID <span class="required">*</span></label>
|
||||||
|
<div style="display: flex; gap: 10px; align-items: stretch">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="uid"
|
||||||
|
name="uid"
|
||||||
|
placeholder="z.B. A1:B2:C3:D4"
|
||||||
|
required
|
||||||
|
style="flex: 1"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
id="readUidBtn"
|
||||||
|
class="read-uid-btn"
|
||||||
|
onclick="readRFIDUID()"
|
||||||
|
>
|
||||||
|
📡 Read Chip
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="successMessage" class="success-message" style="display: none;">
|
<div class="form-group">
|
||||||
✅ Daten erfolgreich gespeichert!
|
<label for="vorname">Vorname <span class="required">*</span></label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="vorname"
|
||||||
|
name="vorname"
|
||||||
|
placeholder="Vorname eingeben"
|
||||||
|
required
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<form id="rfidForm">
|
<div class="form-group">
|
||||||
<div class="form-group">
|
<label for="nachname">Nachname <span class="required">*</span></label>
|
||||||
<label for="uid">RFID UID <span class="required">*</span></label>
|
<input
|
||||||
<div style="display: flex; gap: 10px; align-items: stretch;">
|
type="text"
|
||||||
<input type="text" id="uid" name="uid" placeholder="z.B. A1:B2:C3:D4" required style="flex: 1;">
|
id="nachname"
|
||||||
<button type="button" id="readUidBtn" class="read-uid-btn" onclick="readRFIDUID()">
|
name="nachname"
|
||||||
📡 Read Chip
|
placeholder="Nachname eingeben"
|
||||||
</button>
|
required
|
||||||
</div>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="vorname">Vorname <span class="required">*</span></label>
|
<label for="geburtsdatum"
|
||||||
<input type="text" id="vorname" name="vorname" placeholder="Vorname eingeben" required>
|
>Geburtsdatum <span class="required">*</span></label
|
||||||
</div>
|
>
|
||||||
|
<div class="date-input-group">
|
||||||
<div class="form-group">
|
<input
|
||||||
<label for="nachname">Nachname <span class="required">*</span></label>
|
type="date"
|
||||||
<input type="text" id="nachname" name="nachname" placeholder="Nachname eingeben" required>
|
id="geburtsdatum"
|
||||||
</div>
|
name="geburtsdatum"
|
||||||
|
required
|
||||||
<div class="form-group">
|
max=""
|
||||||
<label for="geburtsdatum">Geburtsdatum <span class="required">*</span></label>
|
/>
|
||||||
<div class="date-input-group">
|
<div
|
||||||
<input type="date" id="geburtsdatum" name="geburtsdatum" required max="">
|
id="ageDisplay"
|
||||||
<div id="ageDisplay" class="age-display" style="display: none;"></div>
|
class="age-display"
|
||||||
</div>
|
style="display: none"
|
||||||
</div>
|
></div>
|
||||||
|
</div>
|
||||||
<div class="btn-container">
|
</div>
|
||||||
<button type="submit" class="btn btn-primary">💾 Speichern</button>
|
|
||||||
<button type="button" class="btn btn-secondary" onclick="clearForm()">🗑️ Zurücksetzen</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
|
<div class="btn-container">
|
||||||
|
<button type="submit" class="btn btn-primary">💾 Speichern</button>
|
||||||
|
<button type="button" class="btn btn-secondary" onclick="clearForm()">
|
||||||
|
🗑️ Zurücksetzen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// Globale Variablen
|
// Globale Variablen
|
||||||
let rfidData = [];
|
let rfidData = [];
|
||||||
let isLoading = false;
|
let isLoading = false;
|
||||||
let DBUrl = "db.reptilfpv.de:3000";
|
let DBUrl = "db.reptilfpv.de:3000";
|
||||||
var APIKey;
|
var APIKey;
|
||||||
|
|
||||||
// Maximales Datum auf heute setzen
|
// Maximales Datum auf heute setzen
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
const today = new Date().toISOString().split('T')[0];
|
const today = new Date().toISOString().split("T")[0];
|
||||||
document.getElementById('geburtsdatum').setAttribute('max', today);
|
document.getElementById("geburtsdatum").setAttribute("max", today);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Alter berechnen und anzeigen
|
// Alter berechnen und anzeigen
|
||||||
function calculateAge(birthDate) {
|
function calculateAge(birthDate) {
|
||||||
const today = new Date();
|
const today = new Date();
|
||||||
const birth = new Date(birthDate);
|
const birth = new Date(birthDate);
|
||||||
let age = today.getFullYear() - birth.getFullYear();
|
let age = today.getFullYear() - birth.getFullYear();
|
||||||
const monthDiff = today.getMonth() - birth.getMonth();
|
const monthDiff = today.getMonth() - birth.getMonth();
|
||||||
|
|
||||||
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) {
|
if (
|
||||||
age--;
|
monthDiff < 0 ||
|
||||||
}
|
(monthDiff === 0 && today.getDate() < birth.getDate())
|
||||||
|
) {
|
||||||
return age;
|
age--;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Geburtsdatum Change Event
|
return age;
|
||||||
document.getElementById('geburtsdatum').addEventListener('change', function(e) {
|
}
|
||||||
const birthDate = e.target.value;
|
|
||||||
const ageDisplay = document.getElementById('ageDisplay');
|
// Geburtsdatum Change Event
|
||||||
|
document
|
||||||
if (birthDate) {
|
.getElementById("geburtsdatum")
|
||||||
const age = calculateAge(birthDate);
|
.addEventListener("change", function (e) {
|
||||||
if (age >= 0 && age <= 150) {
|
const birthDate = e.target.value;
|
||||||
ageDisplay.textContent = `${age} Jahre`;
|
const ageDisplay = document.getElementById("ageDisplay");
|
||||||
ageDisplay.style.display = 'block';
|
|
||||||
} else {
|
if (birthDate) {
|
||||||
ageDisplay.style.display = 'none';
|
const age = calculateAge(birthDate);
|
||||||
if (age < 0) {
|
if (age >= 0 && age <= 150) {
|
||||||
showErrorMessage('Das Geburtsdatum kann nicht in der Zukunft liegen!');
|
ageDisplay.textContent = `${age} Jahre`;
|
||||||
e.target.value = '';
|
ageDisplay.style.display = "block";
|
||||||
} else {
|
|
||||||
showErrorMessage('Bitte überprüfen Sie das Geburtsdatum!');
|
|
||||||
e.target.value = '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
ageDisplay.style.display = 'none';
|
ageDisplay.style.display = "none";
|
||||||
|
if (age < 0) {
|
||||||
|
showErrorMessage(
|
||||||
|
"Das Geburtsdatum kann nicht in der Zukunft liegen!",
|
||||||
|
);
|
||||||
|
e.target.value = "";
|
||||||
|
} else {
|
||||||
|
showErrorMessage("Bitte überprüfen Sie das Geburtsdatum!");
|
||||||
|
e.target.value = "";
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
|
ageDisplay.style.display = "none";
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Form Submit Handler
|
// Form Submit Handler
|
||||||
document.getElementById('rfidForm').addEventListener('submit', async function(e) {
|
document
|
||||||
e.preventDefault();
|
.getElementById("rfidForm")
|
||||||
|
.addEventListener("submit", async function (e) {
|
||||||
if (isLoading) return;
|
e.preventDefault();
|
||||||
|
|
||||||
// Daten aus dem Formular holen
|
|
||||||
const uid = document.getElementById('uid').value.trim();
|
|
||||||
const vorname = document.getElementById('vorname').value.trim();
|
|
||||||
const nachname = document.getElementById('nachname').value.trim();
|
|
||||||
const geburtsdatum = document.getElementById('geburtsdatum').value;
|
|
||||||
|
|
||||||
// Validierung
|
if (isLoading) return;
|
||||||
if (!uid || !vorname || !nachname || !geburtsdatum) {
|
|
||||||
showErrorMessage('Bitte füllen Sie alle Pflichtfelder aus!');
|
// Daten aus dem Formular holen
|
||||||
return;
|
const uid = document.getElementById("uid").value.trim();
|
||||||
}
|
const vorname = document.getElementById("vorname").value.trim();
|
||||||
|
const nachname = document.getElementById("nachname").value.trim();
|
||||||
// Alter berechnen
|
const geburtsdatum = document.getElementById("geburtsdatum").value;
|
||||||
const alter = calculateAge(geburtsdatum);
|
|
||||||
if (alter < 0) {
|
// Validierung
|
||||||
showErrorMessage('Das Geburtsdatum kann nicht in der Zukunft liegen!');
|
if (!uid || !vorname || !nachname || !geburtsdatum) {
|
||||||
return;
|
showErrorMessage("Bitte füllen Sie alle Pflichtfelder aus!");
|
||||||
}
|
return;
|
||||||
|
}
|
||||||
// Loading State
|
|
||||||
setLoadingState(true);
|
// Alter berechnen
|
||||||
|
const alter = calculateAge(geburtsdatum);
|
||||||
try {
|
if (alter < 0) {
|
||||||
// API Aufruf zum Erstellen des Benutzers
|
showErrorMessage(
|
||||||
const response = await fetch(`/api/users/insert`, {
|
"Das Geburtsdatum kann nicht in der Zukunft liegen!",
|
||||||
method: 'POST',
|
);
|
||||||
headers: {
|
return;
|
||||||
'Content-Type': 'application/json',
|
}
|
||||||
},
|
|
||||||
body: JSON.stringify({
|
// Loading State
|
||||||
uid: uid,
|
setLoadingState(true);
|
||||||
vorname: vorname,
|
|
||||||
nachname: nachname,
|
try {
|
||||||
geburtsdatum: geburtsdatum,
|
// API Aufruf zum Erstellen des Benutzers
|
||||||
alter: alter // Berechnetes Alter wird mit gesendet
|
const response = await fetch(`/api/users/insert`, {
|
||||||
})
|
method: "POST",
|
||||||
});
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
const result = await response.json();
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
if (result.success) {
|
uid: uid,
|
||||||
// Erfolg anzeigen
|
vorname: vorname,
|
||||||
showSuccessMessage('Benutzer erfolgreich gespeichert!');
|
nachname: nachname,
|
||||||
|
geburtsdatum: geburtsdatum,
|
||||||
// Formular zurücksetzen
|
alter: alter, // Berechnetes Alter wird mit gesendet
|
||||||
clearForm();
|
}),
|
||||||
|
});
|
||||||
// UID Feld fokussieren für nächsten Eintrag
|
|
||||||
setTimeout(() => {
|
const result = await response.json();
|
||||||
document.getElementById('uid').focus();
|
|
||||||
}, 100);
|
if (result.success) {
|
||||||
} else {
|
// Erfolg anzeigen
|
||||||
// Fehler anzeigen
|
showSuccessMessage("Benutzer erfolgreich gespeichert!");
|
||||||
showErrorMessage(result.error || 'Fehler beim Speichern der Daten');
|
|
||||||
}
|
// Formular zurücksetzen
|
||||||
|
clearForm();
|
||||||
} catch (error) {
|
|
||||||
console.error('Fehler beim Speichern:', error);
|
// UID Feld fokussieren für nächsten Eintrag
|
||||||
showErrorMessage('Verbindungsfehler zum Server. Bitte versuchen Sie es später erneut.');
|
setTimeout(() => {
|
||||||
} finally {
|
document.getElementById("uid").focus();
|
||||||
setLoadingState(false);
|
}, 100);
|
||||||
|
} else {
|
||||||
|
// Fehler anzeigen
|
||||||
|
showErrorMessage(
|
||||||
|
result.error || "Fehler beim Speichern der Daten",
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Fehler beim Speichern:", error);
|
||||||
|
showErrorMessage(
|
||||||
|
"Verbindungsfehler zum Server. Bitte versuchen Sie es später erneut.",
|
||||||
|
);
|
||||||
|
} finally {
|
||||||
|
setLoadingState(false);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
function showSuccessMessage(message = 'Daten erfolgreich gespeichert!') {
|
|
||||||
const successMsg = document.getElementById('successMessage');
|
|
||||||
successMsg.textContent = `✅ ${message}`;
|
|
||||||
successMsg.style.display = 'block';
|
|
||||||
setTimeout(() => {
|
|
||||||
successMsg.style.display = 'none';
|
|
||||||
}, 3000);
|
|
||||||
}
|
|
||||||
|
|
||||||
function showErrorMessage(message) {
|
function showSuccessMessage(message = "Daten erfolgreich gespeichert!") {
|
||||||
// Fehlermeldung dynamisch erstellen
|
const successMsg = document.getElementById("successMessage");
|
||||||
let errorDiv = document.getElementById('errorMessage');
|
successMsg.textContent = `✅ ${message}`;
|
||||||
if (!errorDiv) {
|
successMsg.style.display = "block";
|
||||||
errorDiv = document.createElement('div');
|
setTimeout(() => {
|
||||||
errorDiv.id = 'errorMessage';
|
successMsg.style.display = "none";
|
||||||
errorDiv.className = 'error-message';
|
}, 3000);
|
||||||
errorDiv.style.cssText = `
|
}
|
||||||
|
|
||||||
|
function showErrorMessage(message) {
|
||||||
|
// Fehlermeldung dynamisch erstellen
|
||||||
|
let errorDiv = document.getElementById("errorMessage");
|
||||||
|
if (!errorDiv) {
|
||||||
|
errorDiv = document.createElement("div");
|
||||||
|
errorDiv.id = "errorMessage";
|
||||||
|
errorDiv.className = "error-message";
|
||||||
|
errorDiv.style.cssText = `
|
||||||
background: #f8d7da;
|
background: #f8d7da;
|
||||||
color: #721c24;
|
color: #721c24;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
@@ -210,159 +282,164 @@
|
|||||||
animation: fadeIn 0.3s ease-out;
|
animation: fadeIn 0.3s ease-out;
|
||||||
display: none;
|
display: none;
|
||||||
`;
|
`;
|
||||||
document.querySelector('.container').insertBefore(errorDiv, document.getElementById('rfidForm'));
|
document
|
||||||
}
|
.querySelector(".container")
|
||||||
|
.insertBefore(errorDiv, document.getElementById("rfidForm"));
|
||||||
errorDiv.textContent = `❌ ${message}`;
|
}
|
||||||
errorDiv.style.display = 'block';
|
|
||||||
|
errorDiv.textContent = `❌ ${message}`;
|
||||||
|
errorDiv.style.display = "block";
|
||||||
|
setTimeout(() => {
|
||||||
|
errorDiv.style.display = "none";
|
||||||
|
}, 10000);
|
||||||
|
}
|
||||||
|
|
||||||
|
function setLoadingState(loading) {
|
||||||
|
isLoading = loading;
|
||||||
|
const submitBtn = document.querySelector(".btn-primary");
|
||||||
|
const form = document.getElementById("rfidForm");
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
submitBtn.textContent = "⏳ Speichern...";
|
||||||
|
submitBtn.disabled = true;
|
||||||
|
form.style.opacity = "0.7";
|
||||||
|
} else {
|
||||||
|
submitBtn.textContent = "💾 Speichern";
|
||||||
|
submitBtn.disabled = false;
|
||||||
|
form.style.opacity = "1";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearForm() {
|
||||||
|
document.getElementById("rfidForm").reset();
|
||||||
|
document.getElementById("ageDisplay").style.display = "none";
|
||||||
|
document.getElementById("uid").focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Beim Laden der Seite
|
||||||
|
window.addEventListener("load", function () {
|
||||||
|
document.getElementById("uid").focus();
|
||||||
|
checkServerStatus();
|
||||||
|
loadLicence();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Enter-Taste in UID Feld zum nächsten Feld springen
|
||||||
|
document.getElementById("uid").addEventListener("keydown", function (e) {
|
||||||
|
if (e.key === "Enter") {
|
||||||
|
e.preventDefault();
|
||||||
|
document.getElementById("vorname").focus();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Automatische UID Formatierung
|
||||||
|
document.getElementById("uid").addEventListener("input", function (e) {
|
||||||
|
let value = e.target.value.toUpperCase();
|
||||||
|
// Entfernen aller nicht-hexadezimalen Zeichen außer Doppelpunkt
|
||||||
|
value = value.replace(/[^0-9A-F:]/g, "");
|
||||||
|
e.target.value = value;
|
||||||
|
});
|
||||||
|
|
||||||
|
// RFID UID lesen
|
||||||
|
async function readRFIDUID() {
|
||||||
|
const readBtn = document.getElementById("readUidBtn");
|
||||||
|
const uidInput = document.getElementById("uid");
|
||||||
|
|
||||||
|
// Button Status ändern
|
||||||
|
readBtn.disabled = true;
|
||||||
|
readBtn.className = "read-uid-btn reading";
|
||||||
|
readBtn.innerHTML = "📡 Lese UID...";
|
||||||
|
|
||||||
|
try {
|
||||||
|
// API Aufruf zum RFID Reader
|
||||||
|
const response = await fetch(`/api/rfid/read`, {
|
||||||
|
method: "GET",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const result = await response.json();
|
||||||
|
|
||||||
|
if (result.success && result.uid) {
|
||||||
|
// UID in das Eingabefeld setzen
|
||||||
|
uidInput.value = result.uid
|
||||||
|
.match(/.{1,2}/g)
|
||||||
|
.join(":")
|
||||||
|
.toUpperCase();
|
||||||
|
uidInput.focus();
|
||||||
|
|
||||||
|
// Visuelles Feedback
|
||||||
|
uidInput.style.borderColor = "#28a745";
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
errorDiv.style.display = 'none';
|
uidInput.style.borderColor = "#e1e5e9";
|
||||||
|
}, 2000);
|
||||||
|
|
||||||
|
showSuccessMessage("UID erfolgreich gelesen!");
|
||||||
|
|
||||||
|
// Automatisch zum nächsten Feld springen
|
||||||
|
setTimeout(() => {
|
||||||
|
document.getElementById("vorname").focus();
|
||||||
|
}, 500);
|
||||||
|
} else {
|
||||||
|
// Fehler beim Lesen
|
||||||
|
const errorMsg = result.error || "Keine UID gefunden";
|
||||||
|
showErrorMessage(`RFID Fehler: ${errorMsg}`);
|
||||||
|
|
||||||
|
// UID Feld rot markieren
|
||||||
|
uidInput.style.borderColor = "#dc3545";
|
||||||
|
setTimeout(() => {
|
||||||
|
uidInput.style.borderColor = "#e1e5e9";
|
||||||
}, 10000);
|
}, 10000);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Fehler beim Lesen der UID:", error);
|
||||||
|
showErrorMessage(
|
||||||
|
"Verbindungsfehler zum RFID Reader. Bitte prüfen Sie die Verbindung.",
|
||||||
|
);
|
||||||
|
|
||||||
|
// UID Feld rot markieren
|
||||||
|
uidInput.style.borderColor = "#dc3545";
|
||||||
|
setTimeout(() => {
|
||||||
|
uidInput.style.borderColor = "#e1e5e9";
|
||||||
|
}, 3000);
|
||||||
|
} finally {
|
||||||
|
// Button Status zurücksetzen
|
||||||
|
readBtn.disabled = false;
|
||||||
|
readBtn.className = "read-uid-btn";
|
||||||
|
readBtn.innerHTML = "📡 Read Chip";
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function setLoadingState(loading) {
|
async function checkServerStatus() {
|
||||||
isLoading = loading;
|
try {
|
||||||
const submitBtn = document.querySelector('.btn-primary');
|
const response = await fetch("/api/health");
|
||||||
const form = document.getElementById('rfidForm');
|
const data = await response.json();
|
||||||
|
|
||||||
if (loading) {
|
if (!data.status || data.status !== "connected") {
|
||||||
submitBtn.textContent = '⏳ Speichern...';
|
showErrorMessage(
|
||||||
submitBtn.disabled = true;
|
"Server nicht verbunden. Einige Funktionen könnten eingeschränkt sein.",
|
||||||
form.style.opacity = '0.7';
|
);
|
||||||
} else {
|
return false;
|
||||||
submitBtn.textContent = '💾 Speichern';
|
}
|
||||||
submitBtn.disabled = false;
|
|
||||||
form.style.opacity = '1';
|
return true;
|
||||||
}
|
} catch (error) {
|
||||||
|
console.error("Server Status Check fehlgeschlagen:", error);
|
||||||
|
showErrorMessage("Verbindung zum Server nicht möglich.");
|
||||||
|
return false;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function clearForm() {
|
function loadLicence() {
|
||||||
document.getElementById('rfidForm').reset();
|
|
||||||
document.getElementById('ageDisplay').style.display = 'none';
|
|
||||||
document.getElementById('uid').focus();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Beim Laden der Seite
|
|
||||||
window.addEventListener('load', function() {
|
|
||||||
document.getElementById('uid').focus();
|
|
||||||
checkServerStatus();
|
|
||||||
loadLicence();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Enter-Taste in UID Feld zum nächsten Feld springen
|
|
||||||
document.getElementById('uid').addEventListener('keydown', function(e) {
|
|
||||||
if (e.key === 'Enter') {
|
|
||||||
e.preventDefault();
|
|
||||||
document.getElementById('vorname').focus();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Automatische UID Formatierung
|
|
||||||
document.getElementById('uid').addEventListener('input', function(e) {
|
|
||||||
let value = e.target.value.toUpperCase();
|
|
||||||
// Entfernen aller nicht-hexadezimalen Zeichen außer Doppelpunkt
|
|
||||||
value = value.replace(/[^0-9A-F:]/g, '');
|
|
||||||
e.target.value = value;
|
|
||||||
});
|
|
||||||
|
|
||||||
// RFID UID lesen
|
|
||||||
async function readRFIDUID() {
|
|
||||||
const readBtn = document.getElementById('readUidBtn');
|
|
||||||
const uidInput = document.getElementById('uid');
|
|
||||||
|
|
||||||
// Button Status ändern
|
|
||||||
readBtn.disabled = true;
|
|
||||||
readBtn.className = 'read-uid-btn reading';
|
|
||||||
readBtn.innerHTML = '📡 Lese UID...';
|
|
||||||
|
|
||||||
try {
|
|
||||||
// API Aufruf zum RFID Reader
|
|
||||||
const response = await fetch(`/api/rfid/read`, {
|
|
||||||
method: 'GET',
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const result = await response.json();
|
|
||||||
|
|
||||||
if (result.success && result.uid) {
|
|
||||||
// UID in das Eingabefeld setzen
|
|
||||||
uidInput.value = result.uid.match(/.{1,2}/g).join(':').toUpperCase();
|
|
||||||
uidInput.focus();
|
|
||||||
|
|
||||||
// Visuelles Feedback
|
|
||||||
uidInput.style.borderColor = '#28a745';
|
|
||||||
setTimeout(() => {
|
|
||||||
uidInput.style.borderColor = '#e1e5e9';
|
|
||||||
}, 2000);
|
|
||||||
|
|
||||||
showSuccessMessage('UID erfolgreich gelesen!');
|
|
||||||
|
|
||||||
// Automatisch zum nächsten Feld springen
|
|
||||||
setTimeout(() => {
|
|
||||||
document.getElementById('vorname').focus();
|
|
||||||
}, 500);
|
|
||||||
|
|
||||||
} else {
|
|
||||||
// Fehler beim Lesen
|
|
||||||
const errorMsg = result.error || 'Keine UID gefunden';
|
|
||||||
showErrorMessage(`RFID Fehler: ${errorMsg}`);
|
|
||||||
|
|
||||||
// UID Feld rot markieren
|
|
||||||
uidInput.style.borderColor = '#dc3545';
|
|
||||||
setTimeout(() => {
|
|
||||||
uidInput.style.borderColor = '#e1e5e9';
|
|
||||||
}, 10000);
|
|
||||||
}
|
|
||||||
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Fehler beim Lesen der UID:', error);
|
|
||||||
showErrorMessage('Verbindungsfehler zum RFID Reader. Bitte prüfen Sie die Verbindung.');
|
|
||||||
|
|
||||||
// UID Feld rot markieren
|
|
||||||
uidInput.style.borderColor = '#dc3545';
|
|
||||||
setTimeout(() => {
|
|
||||||
uidInput.style.borderColor = '#e1e5e9';
|
|
||||||
}, 3000);
|
|
||||||
|
|
||||||
} finally {
|
|
||||||
// Button Status zurücksetzen
|
|
||||||
readBtn.disabled = false;
|
|
||||||
readBtn.className = 'read-uid-btn';
|
|
||||||
readBtn.innerHTML = '📡 Read Chip';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function checkServerStatus() {
|
|
||||||
try {
|
|
||||||
const response = await fetch('/api/health');
|
|
||||||
const data = await response.json();
|
|
||||||
|
|
||||||
if (!data.status || data.status !== 'connected') {
|
|
||||||
showErrorMessage('Server nicht verbunden. Einige Funktionen könnten eingeschränkt sein.');
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
return true;
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Server Status Check fehlgeschlagen:', error);
|
|
||||||
showErrorMessage('Verbindung zum Server nicht möglich.');
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadLicence() {
|
|
||||||
fetch("/api/get-licence")
|
fetch("/api/get-licence")
|
||||||
.then((response) => response.json())
|
.then((response) => response.json())
|
||||||
.then((data) => {
|
.then((data) => {
|
||||||
APIKey = data.licence || "";
|
APIKey = data.licence || "";
|
||||||
|
|
||||||
})
|
})
|
||||||
.catch((error) =>
|
.catch((error) =>
|
||||||
showMessage("Fehler beim Laden der Lizenz", "error")
|
showMessage("Fehler beim Laden der Lizenz", "error"),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -1,340 +1,340 @@
|
|||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
max-width: 600px;
|
max-width: 600px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
background: rgba(255, 255, 255, 0.95);
|
background: rgba(255, 255, 255, 0.95);
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
backdrop-filter: blur(10px);
|
backdrop-filter: blur(10px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
color: white;
|
color: white;
|
||||||
padding: 30px;
|
padding: 30px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header::before {
|
.header::before {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><defs><radialGradient id="a" cx="50%" cy="40%" r="50%"><stop offset="0%" stop-color="white" stop-opacity="0.1"/><stop offset="100%" stop-color="white" stop-opacity="0"/></radialGradient></defs><rect width="100" height="20" fill="url(%23a)"/></svg>');
|
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><defs><radialGradient id="a" cx="50%" cy="40%" r="50%"><stop offset="0%" stop-color="white" stop-opacity="0.1"/><stop offset="100%" stop-color="white" stop-opacity="0"/></radialGradient></defs><rect width="100" height="20" fill="url(%23a)"/></svg>');
|
||||||
opacity: 0.3;
|
opacity: 0.3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header h1 {
|
.header h1 {
|
||||||
font-size: 2.5em;
|
font-size: 2.5em;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header p {
|
.header p {
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
opacity: 0.9;
|
opacity: 0.9;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
padding: 40px;
|
padding: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-buttons {
|
.nav-buttons {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 15px;
|
gap: 15px;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-button {
|
.nav-button {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 12px 20px;
|
padding: 12px 20px;
|
||||||
background: #f8f9fa;
|
background: #f8f9fa;
|
||||||
border: 2px solid #e9ecef;
|
border: 2px solid #e9ecef;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
color: #495057;
|
color: #495057;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-button:hover {
|
.nav-button:hover {
|
||||||
background: #667eea;
|
background: #667eea;
|
||||||
color: white;
|
color: white;
|
||||||
border-color: #667eea;
|
border-color: #667eea;
|
||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
|
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.section {
|
.section {
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
background: #f8f9fa;
|
background: #f8f9fa;
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
padding: 25px;
|
padding: 25px;
|
||||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
.section h2 {
|
.section h2 {
|
||||||
color: #495057;
|
color: #495057;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
font-size: 1.4em;
|
font-size: 1.4em;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section h2::before {
|
.section h2::before {
|
||||||
content: "";
|
content: "";
|
||||||
width: 4px;
|
width: 4px;
|
||||||
height: 25px;
|
height: 25px;
|
||||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group {
|
.form-group {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group label {
|
.form-group label {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
color: #495057;
|
color: #495057;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group input {
|
.form-group input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 12px 15px;
|
padding: 12px 15px;
|
||||||
border: 2px solid #e9ecef;
|
border: 2px solid #e9ecef;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group input:focus {
|
.form-group input:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
border-color: #667eea;
|
border-color: #667eea;
|
||||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.time-row {
|
.time-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 15px;
|
gap: 15px;
|
||||||
align-items: end;
|
align-items: end;
|
||||||
}
|
}
|
||||||
|
|
||||||
.time-input {
|
.time-input {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.current-time {
|
.current-time {
|
||||||
background: white;
|
background: white;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
color: #495057;
|
color: #495057;
|
||||||
border: 2px solid #e9ecef;
|
border: 2px solid #e9ecef;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-group {
|
.button-group {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 15px;
|
gap: 15px;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
padding: 15px 25px;
|
padding: 15px 25px;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
min-width: 150px;
|
min-width: 150px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary {
|
.btn-primary {
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary:hover {
|
.btn-primary:hover {
|
||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
|
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-secondary {
|
.btn-secondary {
|
||||||
background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
|
background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-secondary:hover {
|
.btn-secondary:hover {
|
||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
box-shadow: 0 10px 25px rgba(116, 185, 255, 0.3);
|
box-shadow: 0 10px 25px rgba(116, 185, 255, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-warning {
|
.btn-warning {
|
||||||
background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
|
background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
|
||||||
color: #d84315;
|
color: #d84315;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-warning:hover {
|
.btn-warning:hover {
|
||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
box-shadow: 0 10px 25px rgba(252, 182, 159, 0.3);
|
box-shadow: 0 10px 25px rgba(252, 182, 159, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-danger {
|
.btn-danger {
|
||||||
background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
|
background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
|
||||||
color: #c62828;
|
color: #c62828;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-danger:hover {
|
.btn-danger:hover {
|
||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
box-shadow: 0 10px 25px rgba(255, 154, 158, 0.3);
|
box-shadow: 0 10px 25px rgba(255, 154, 158, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-disabled {
|
.btn-disabled {
|
||||||
background: #e9ecef !important;
|
background: #e9ecef !important;
|
||||||
color: #6c757d !important;
|
color: #6c757d !important;
|
||||||
cursor: not-allowed !important;
|
cursor: not-allowed !important;
|
||||||
transform: none !important;
|
transform: none !important;
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-disabled:hover {
|
.btn-disabled:hover {
|
||||||
transform: none !important;
|
transform: none !important;
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.restriction-notice {
|
.restriction-notice {
|
||||||
background: #fff3cd;
|
background: #fff3cd;
|
||||||
color: #856404;
|
color: #856404;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
border: 2px solid #ffeaa7;
|
border: 2px solid #ffeaa7;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-message {
|
.status-message {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-success {
|
.status-success {
|
||||||
background: #d4edda;
|
background: #d4edda;
|
||||||
color: #155724;
|
color: #155724;
|
||||||
border: 2px solid #c3e6cb;
|
border: 2px solid #c3e6cb;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-error {
|
.status-error {
|
||||||
background: #f8d7da;
|
background: #f8d7da;
|
||||||
color: #721c24;
|
color: #721c24;
|
||||||
border: 2px solid #f5c6cb;
|
border: 2px solid #f5c6cb;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-info {
|
.status-info {
|
||||||
background: #cce7ff;
|
background: #cce7ff;
|
||||||
color: #004085;
|
color: #004085;
|
||||||
border: 2px solid #b3d9ff;
|
border: 2px solid #b3d9ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.learning-mode {
|
.learning-mode {
|
||||||
display: none;
|
display: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 30px;
|
padding: 30px;
|
||||||
background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
|
background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.learning-mode h3 {
|
.learning-mode h3 {
|
||||||
color: #d84315;
|
color: #d84315;
|
||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.learning-mode p {
|
.learning-mode p {
|
||||||
color: #bf360c;
|
color: #bf360c;
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pulse {
|
.pulse {
|
||||||
animation: pulse 2s infinite;
|
animation: pulse 2s infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes pulse {
|
@keyframes pulse {
|
||||||
0% {
|
0% {
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
}
|
}
|
||||||
50% {
|
50% {
|
||||||
transform: scale(1.05);
|
transform: scale(1.05);
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
.container {
|
.container {
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-buttons {
|
.nav-buttons {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-group {
|
.button-group {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.time-row {
|
.time-row {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.section select {
|
.section select {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 12px 16px;
|
padding: 12px 16px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
@@ -413,4 +413,4 @@
|
|||||||
font-size: 16px; /* Verhindert Zoom auf iOS */
|
font-size: 16px; /* Verhindert Zoom auf iOS */
|
||||||
padding: 14px 16px;
|
padding: 14px 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,11 +1,11 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="de">
|
<html lang="de">
|
||||||
<head>
|
<head>
|
||||||
<!-- Meta Tags -->
|
<!-- Meta Tags -->
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<link rel="icon" type="image/x-icon" href="/pictures/favicon.ico">
|
<link rel="icon" type="image/x-icon" href="/pictures/favicon.ico" />
|
||||||
|
|
||||||
<!-- Stylesheets -->
|
<!-- Stylesheets -->
|
||||||
<link rel="stylesheet" href="settings.css" />
|
<link rel="stylesheet" href="settings.css" />
|
||||||
<title>Ninjacross Timer - Einstellungen</title>
|
<title>Ninjacross Timer - Einstellungen</title>
|
||||||
@@ -103,7 +103,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Times Management Section -->
|
<!-- Times Management Section -->
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<h2>🏆 Zeiten verwalten</h2>
|
<h2>🏆 Zeiten verwalten</h2>
|
||||||
@@ -143,8 +143,14 @@
|
|||||||
<!-- WiFi Configuration Section -->
|
<!-- WiFi Configuration Section -->
|
||||||
<div class="section" id="wifiSection">
|
<div class="section" id="wifiSection">
|
||||||
<h2>📡 WLAN-Konfiguration</h2>
|
<h2>📡 WLAN-Konfiguration</h2>
|
||||||
<div id="wifiRestrictionNotice" class="restriction-notice" style="display: none;">
|
<div
|
||||||
🔒 WLAN-Konfiguration ist nur mit Lizenz Level 3 oder höher verfügbar. Aktuelle Lizenz: Level <span id="currentLicenseLevel">0</span>
|
id="wifiRestrictionNotice"
|
||||||
|
class="restriction-notice"
|
||||||
|
style="display: none"
|
||||||
|
>
|
||||||
|
🔒 WLAN-Konfiguration ist nur mit Lizenz Level 3 oder höher
|
||||||
|
verfügbar. Aktuelle Lizenz: Level
|
||||||
|
<span id="currentLicenseLevel">0</span>
|
||||||
</div>
|
</div>
|
||||||
<form id="wifiForm">
|
<form id="wifiForm">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
@@ -176,8 +182,14 @@
|
|||||||
|
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<h2>📍 Standort</h2>
|
<h2>📍 Standort</h2>
|
||||||
<div id="locationRestrictionNotice" class="restriction-notice" style="display: none;">
|
<div
|
||||||
🔒 Standort-Konfiguration ist nur mit Lizenz Level 3 oder höher verfügbar. Aktuelle Lizenz: Level <span id="currentLocationLicenseLevel">0</span>
|
id="locationRestrictionNotice"
|
||||||
|
class="restriction-notice"
|
||||||
|
style="display: none"
|
||||||
|
>
|
||||||
|
🔒 Standort-Konfiguration ist nur mit Lizenz Level 3 oder höher
|
||||||
|
verfügbar. Aktuelle Lizenz: Level
|
||||||
|
<span id="currentLocationLicenseLevel">0</span>
|
||||||
</div>
|
</div>
|
||||||
<form id="locationForm">
|
<form id="locationForm">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
@@ -187,7 +199,11 @@
|
|||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div class="button-group">
|
<div class="button-group">
|
||||||
<button type="submit" id="locationSubmitBtn" class="btn btn-primary">
|
<button
|
||||||
|
type="submit"
|
||||||
|
id="locationSubmitBtn"
|
||||||
|
class="btn btn-primary"
|
||||||
|
>
|
||||||
💾 Standort speichern
|
💾 Standort speichern
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -197,8 +213,13 @@
|
|||||||
<!-- OTA Update Section -->
|
<!-- OTA Update Section -->
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<h2>🔄 OTA Update</h2>
|
<h2>🔄 OTA Update</h2>
|
||||||
<div id="otaRestrictionNotice" class="restriction-notice" style="display: none;">
|
<div
|
||||||
🔒 OTA Updates sind nur mit Lizenz Level 2 oder höher verfügbar. Aktuelle Lizenz: Level <span id="currentLicenseLevel">0</span>
|
id="otaRestrictionNotice"
|
||||||
|
class="restriction-notice"
|
||||||
|
style="display: none"
|
||||||
|
>
|
||||||
|
🔒 OTA Updates sind nur mit Lizenz Level 2 oder höher verfügbar.
|
||||||
|
Aktuelle Lizenz: Level <span id="currentLicenseLevel">0</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="button-group">
|
<div class="button-group">
|
||||||
<button
|
<button
|
||||||
@@ -235,7 +256,9 @@
|
|||||||
<div>Kanal: <span id="channel">Laden...</span></div>
|
<div>Kanal: <span id="channel">Laden...</span></div>
|
||||||
<div>MAC-Adresse: <span id="macAddress">Laden...</span></div>
|
<div>MAC-Adresse: <span id="macAddress">Laden...</span></div>
|
||||||
<div>Freier Speicher: <span id="freeMemory">Laden...</span></div>
|
<div>Freier Speicher: <span id="freeMemory">Laden...</span></div>
|
||||||
<div>Verbundene Buttons: <span id="connectedButtons">Laden...</span></div>
|
<div>
|
||||||
|
Verbundene Buttons: <span id="connectedButtons">Laden...</span>
|
||||||
|
</div>
|
||||||
<div>Lizenz gültig: <span id="isLicenceValid">Laden...</span></div>
|
<div>Lizenz gültig: <span id="isLicenceValid">Laden...</span></div>
|
||||||
<div>Lizenz Level: <span id="licenceLevel">Laden...</span></div>
|
<div>Lizenz Level: <span id="licenceLevel">Laden...</span></div>
|
||||||
</div>
|
</div>
|
||||||
@@ -247,7 +270,12 @@
|
|||||||
<form id="licenceForm">
|
<form id="licenceForm">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="licencekey">Lizensschlüssel:</label>
|
<label for="licencekey">Lizensschlüssel:</label>
|
||||||
<input type="password" id="licencekey" name="licence" value="Key" />
|
<input
|
||||||
|
type="password"
|
||||||
|
id="licencekey"
|
||||||
|
name="licence"
|
||||||
|
value="Key"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="button-group">
|
<div class="button-group">
|
||||||
<button type="submit" class="btn btn-primary">
|
<button type="submit" class="btn btn-primary">
|
||||||
@@ -297,9 +325,8 @@
|
|||||||
minute: "2-digit",
|
minute: "2-digit",
|
||||||
second: "2-digit",
|
second: "2-digit",
|
||||||
});
|
});
|
||||||
document.getElementById(
|
document.getElementById("currentTime").textContent =
|
||||||
"currentTime"
|
`System Zeit: ${timeString}`;
|
||||||
).textContent = `System Zeit: ${timeString}`;
|
|
||||||
} else {
|
} else {
|
||||||
document.getElementById("currentTime").textContent =
|
document.getElementById("currentTime").textContent =
|
||||||
"Aktuelle Zeit: Fehler beim Laden";
|
"Aktuelle Zeit: Fehler beim Laden";
|
||||||
@@ -329,7 +356,7 @@
|
|||||||
})
|
})
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
console.log(
|
console.log(
|
||||||
"Zeit konnte nicht geladen werden, verwende Browser-Zeit"
|
"Zeit konnte nicht geladen werden, verwende Browser-Zeit",
|
||||||
);
|
);
|
||||||
syncWithBrowserTime();
|
syncWithBrowserTime();
|
||||||
});
|
});
|
||||||
@@ -374,12 +401,13 @@
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch((error) =>
|
.catch((error) =>
|
||||||
showMessage("Verbindungsfehler beim Setzen der Zeit", "error")
|
showMessage("Verbindungsfehler beim Setzen der Zeit", "error"),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Zeit setzen
|
// Zeit setzen
|
||||||
document.getElementById("timeForm")
|
document
|
||||||
|
.getElementById("timeForm")
|
||||||
.addEventListener("submit", function (e) {
|
.addEventListener("submit", function (e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
@@ -410,14 +438,16 @@
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch((error) =>
|
.catch((error) =>
|
||||||
showMessage("Verbindungsfehler beim Setzen der Zeit", "error")
|
showMessage("Verbindungsfehler beim Setzen der Zeit", "error"),
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
document.getElementById("licenceForm").addEventListener("submit", function(e) {
|
document
|
||||||
e.preventDefault();
|
.getElementById("licenceForm")
|
||||||
saveLicence();
|
.addEventListener("submit", function (e) {
|
||||||
});
|
e.preventDefault();
|
||||||
|
saveLicence();
|
||||||
|
});
|
||||||
|
|
||||||
// Einstellungen laden
|
// Einstellungen laden
|
||||||
function loadSettings() {
|
function loadSettings() {
|
||||||
@@ -429,7 +459,7 @@
|
|||||||
data.maxTimeDisplay || 20;
|
data.maxTimeDisplay || 20;
|
||||||
})
|
})
|
||||||
.catch((error) =>
|
.catch((error) =>
|
||||||
showMessage("Fehler beim Laden der Einstellungen", "error")
|
showMessage("Fehler beim Laden der Einstellungen", "error"),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -448,14 +478,14 @@
|
|||||||
(data.freeMemory || 0) + " Bytes";
|
(data.freeMemory || 0) + " Bytes";
|
||||||
document.getElementById("connectedButtons").textContent =
|
document.getElementById("connectedButtons").textContent =
|
||||||
data.connectedButtons || 0;
|
data.connectedButtons || 0;
|
||||||
document.getElementById("isLicenceValid").textContent =
|
document.getElementById("isLicenceValid").textContent =
|
||||||
data.valid || "";
|
data.valid || "";
|
||||||
document.getElementById("licenceLevel").textContent =
|
document.getElementById("licenceLevel").textContent =
|
||||||
data.tier || "";
|
data.tier || "";
|
||||||
|
|
||||||
// Check license level and update OTA button accordingly
|
// Check license level and update OTA button accordingly
|
||||||
updateOTAButtonAccess(data.tier || 0);
|
updateOTAButtonAccess(data.tier || 0);
|
||||||
updateWifiButtonAccess(data.tier || 0)
|
updateWifiButtonAccess(data.tier || 0);
|
||||||
updateLocationAccess(data.tier || 0);
|
updateLocationAccess(data.tier || 0);
|
||||||
})
|
})
|
||||||
.catch((error) => console.log("Info konnte nicht geladen werden"));
|
.catch((error) => console.log("Info konnte nicht geladen werden"));
|
||||||
@@ -469,7 +499,7 @@
|
|||||||
loadLocations();
|
loadLocations();
|
||||||
})
|
})
|
||||||
.catch((error) =>
|
.catch((error) =>
|
||||||
showMessage("Fehler beim Laden der Lizenz", "error")
|
showMessage("Fehler beim Laden der Lizenz", "error"),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -500,59 +530,77 @@
|
|||||||
// WLAN-Einstellungen laden
|
// WLAN-Einstellungen laden
|
||||||
function loadWifiSettings() {
|
function loadWifiSettings() {
|
||||||
fetch("/api/get-wifi")
|
fetch("/api/get-wifi")
|
||||||
.then(response => response.json())
|
.then((response) => response.json())
|
||||||
.then(data => {
|
.then((data) => {
|
||||||
document.getElementById("wifi-ssid").value = data.ssid || "";
|
document.getElementById("wifi-ssid").value = data.ssid || "";
|
||||||
document.getElementById("wifi-password").value = data.password || "";
|
document.getElementById("wifi-password").value =
|
||||||
|
data.password || "";
|
||||||
})
|
})
|
||||||
.catch(error => showMessage("Fehler beim Laden der WLAN-Einstellungen", "error"));
|
.catch((error) =>
|
||||||
|
showMessage("Fehler beim Laden der WLAN-Einstellungen", "error"),
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// WLAN-Einstellungen beim Laden der Seite abrufen
|
// WLAN-Einstellungen beim Laden der Seite abrufen
|
||||||
window.addEventListener('load', loadWifiSettings);
|
window.addEventListener("load", loadWifiSettings);
|
||||||
|
|
||||||
// WLAN-Formular Handler
|
// WLAN-Formular Handler
|
||||||
document.getElementById("wifiForm").addEventListener("submit", function(e) {
|
document
|
||||||
e.preventDefault();
|
.getElementById("wifiForm")
|
||||||
|
.addEventListener("submit", function (e) {
|
||||||
const ssid = document.getElementById("wifi-ssid").value;
|
e.preventDefault();
|
||||||
const password = document.getElementById("wifi-password").value;
|
|
||||||
|
|
||||||
if (!ssid) {
|
|
||||||
showMessage("Bitte WLAN-Namen eingeben", "error");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (!confirm("Der Server wird nach dem setzten neu gestartet. Fortsetzten?")) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
fetch("/api/set-wifi", {
|
|
||||||
method: "POST",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/x-www-form-urlencoded",
|
|
||||||
},
|
|
||||||
body: `ssid=${encodeURIComponent(ssid)}&password=${encodeURIComponent(password)}`,
|
|
||||||
})
|
|
||||||
.then(response => response.json())
|
|
||||||
.then(data => {
|
|
||||||
if (data.success) {
|
|
||||||
showMessage("WLAN-Einstellungen erfolgreich gespeichert!", "success");
|
|
||||||
} else {
|
|
||||||
showMessage(data.error || "Fehler beim Speichern der WLAN-Einstellungen", "error");
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch(error => showMessage("Verbindungsfehler", "error"));
|
|
||||||
});
|
|
||||||
|
|
||||||
|
const ssid = document.getElementById("wifi-ssid").value;
|
||||||
|
const password = document.getElementById("wifi-password").value;
|
||||||
|
|
||||||
|
if (!ssid) {
|
||||||
|
showMessage("Bitte WLAN-Namen eingeben", "error");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
!confirm(
|
||||||
|
"Der Server wird nach dem setzten neu gestartet. Fortsetzten?",
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
fetch("/api/set-wifi", {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/x-www-form-urlencoded",
|
||||||
|
},
|
||||||
|
body: `ssid=${encodeURIComponent(ssid)}&password=${encodeURIComponent(password)}`,
|
||||||
|
})
|
||||||
|
.then((response) => response.json())
|
||||||
|
.then((data) => {
|
||||||
|
if (data.success) {
|
||||||
|
showMessage(
|
||||||
|
"WLAN-Einstellungen erfolgreich gespeichert!",
|
||||||
|
"success",
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
showMessage(
|
||||||
|
data.error || "Fehler beim Speichern der WLAN-Einstellungen",
|
||||||
|
"error",
|
||||||
|
);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => showMessage("Verbindungsfehler", "error"));
|
||||||
|
});
|
||||||
|
|
||||||
// Update OTA button access based on license level
|
// Update OTA button access based on license level
|
||||||
function updateOTAButtonAccess(licenseLevel) {
|
function updateOTAButtonAccess(licenseLevel) {
|
||||||
const otaButton = document.getElementById("otaUpdateBtn");
|
const otaButton = document.getElementById("otaUpdateBtn");
|
||||||
const otarestrictionNotice = document.getElementById("otaRestrictionNotice");
|
const otarestrictionNotice = document.getElementById(
|
||||||
const otacurrentLevelSpan = document.getElementById("currentLicenseLevel");
|
"otaRestrictionNotice",
|
||||||
|
);
|
||||||
|
const otacurrentLevelSpan = document.getElementById(
|
||||||
|
"currentLicenseLevel",
|
||||||
|
);
|
||||||
|
|
||||||
const level = parseInt(licenseLevel) || 0;
|
const level = parseInt(licenseLevel) || 0;
|
||||||
|
|
||||||
if (level >= 2) {
|
if (level >= 2) {
|
||||||
// License level 2 or higher - enable OTA
|
// License level 2 or higher - enable OTA
|
||||||
otaButton.classList.remove("btn-disabled");
|
otaButton.classList.remove("btn-disabled");
|
||||||
@@ -569,71 +617,91 @@
|
|||||||
|
|
||||||
// MQTT Message publish function
|
// MQTT Message publish function
|
||||||
function updateButtons() {
|
function updateButtons() {
|
||||||
if (confirm("Update Buttons?")) {
|
if (confirm("Update Buttons?")) {
|
||||||
fetch("/api/updateButtons", {
|
fetch("/api/updateButtons", {
|
||||||
method: "GET"
|
method: "GET",
|
||||||
})
|
})
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
if (response.status === 200) {
|
if (response.status === 200) {
|
||||||
showMessage("Buttons führen das Update erfolgreich aus!", "success");
|
showMessage(
|
||||||
} else {
|
"Buttons führen das Update erfolgreich aus!",
|
||||||
showMessage("Fehler beim Senden der MQTT Message", "error");
|
"success",
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
showMessage("Fehler beim Senden der MQTT Message", "error");
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) =>
|
||||||
|
showMessage("Verbindungsfehler beim MQTT Publish", "error"),
|
||||||
|
);
|
||||||
}
|
}
|
||||||
})
|
}
|
||||||
.catch((error) => showMessage("Verbindungsfehler beim MQTT Publish", "error"));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateWifiButtonAccess(licenseLevel) {
|
function updateWifiButtonAccess(licenseLevel) {
|
||||||
const wifiSubmitBtn = document.getElementById("wifiSubmitBtn");
|
const wifiSubmitBtn = document.getElementById("wifiSubmitBtn");
|
||||||
const wifiForm = document.getElementById("wifiForm");
|
const wifiForm = document.getElementById("wifiForm");
|
||||||
const wifiRestrictionNotice = document.getElementById("wifiRestrictionNotice");
|
const wifiRestrictionNotice = document.getElementById(
|
||||||
const wifiCurrentLevelSpan = document.getElementById("currentLicenseLevel");
|
"wifiRestrictionNotice",
|
||||||
|
);
|
||||||
const level = parseInt(licenseLevel) || 0;
|
const wifiCurrentLevelSpan = document.getElementById(
|
||||||
|
"currentLicenseLevel",
|
||||||
if (level >= 3) {
|
);
|
||||||
// License level 3 or higher - enable form
|
|
||||||
wifiSubmitBtn.classList.remove("btn-disabled");
|
const level = parseInt(licenseLevel) || 0;
|
||||||
wifiSubmitBtn.disabled = false;
|
|
||||||
wifiForm.querySelectorAll('input').forEach(input => {
|
if (level >= 3) {
|
||||||
|
// License level 3 or higher - enable form
|
||||||
|
wifiSubmitBtn.classList.remove("btn-disabled");
|
||||||
|
wifiSubmitBtn.disabled = false;
|
||||||
|
wifiForm.querySelectorAll("input").forEach((input) => {
|
||||||
input.disabled = false;
|
input.disabled = false;
|
||||||
});
|
});
|
||||||
wifiRestrictionNotice.style.display = "none";
|
wifiRestrictionNotice.style.display = "none";
|
||||||
} else {
|
} else {
|
||||||
// License level below 3 - disable form
|
// License level below 3 - disable form
|
||||||
wifiSubmitBtn.classList.add("btn-disabled");
|
wifiSubmitBtn.classList.add("btn-disabled");
|
||||||
wifiSubmitBtn.disabled = true;
|
wifiSubmitBtn.disabled = true;
|
||||||
wifiForm.querySelectorAll('input').forEach(input => {
|
wifiForm.querySelectorAll("input").forEach((input) => {
|
||||||
input.disabled = true;
|
input.disabled = true;
|
||||||
});
|
});
|
||||||
wifiRestrictionNotice.style.display = "block";
|
wifiRestrictionNotice.style.display = "block";
|
||||||
wifiCurrentLevelSpan.textContent = level;
|
wifiCurrentLevelSpan.textContent = level;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// OTA Update function with license check
|
// OTA Update function with license check
|
||||||
function performOTAUpdate() {
|
function performOTAUpdate() {
|
||||||
const otaButton = document.getElementById("otaUpdateBtn");
|
const otaButton = document.getElementById("otaUpdateBtn");
|
||||||
|
|
||||||
if (otaButton.disabled || otaButton.classList.contains("btn-disabled")) {
|
if (
|
||||||
showMessage("OTA Update erfordert Lizenz Level 2 oder höher", "error");
|
otaButton.disabled ||
|
||||||
|
otaButton.classList.contains("btn-disabled")
|
||||||
|
) {
|
||||||
|
showMessage(
|
||||||
|
"OTA Update erfordert Lizenz Level 2 oder höher",
|
||||||
|
"error",
|
||||||
|
);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (confirm("Möchten Sie wirklich ein OTA Update durchführen? Das Gerät wird während des Updates neu gestartet.")) {
|
if (
|
||||||
window.location.href = '/update';
|
confirm(
|
||||||
|
"Möchten Sie wirklich ein OTA Update durchführen? Das Gerät wird während des Updates neu gestartet.",
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
window.location.href = "/update";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Einstellungen speichern
|
// Einstellungen speichern
|
||||||
document.getElementById("settingsForm")
|
document
|
||||||
|
.getElementById("settingsForm")
|
||||||
.addEventListener("submit", function (e) {
|
.addEventListener("submit", function (e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
const maxTime = parseInt(document.getElementById("maxTime").value);
|
const maxTime = parseInt(document.getElementById("maxTime").value);
|
||||||
const maxTimeDisplay = parseInt(
|
const maxTimeDisplay = parseInt(
|
||||||
document.getElementById("maxTimeDisplay").value
|
document.getElementById("maxTimeDisplay").value,
|
||||||
);
|
);
|
||||||
|
|
||||||
fetch("/api/set-max-time", {
|
fetch("/api/set-max-time", {
|
||||||
@@ -652,7 +720,7 @@
|
|||||||
if (data.success) {
|
if (data.success) {
|
||||||
showMessage(
|
showMessage(
|
||||||
"Einstellungen erfolgreich gespeichert!",
|
"Einstellungen erfolgreich gespeichert!",
|
||||||
"success"
|
"success",
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
showMessage("Fehler beim Speichern der Einstellungen", "error");
|
showMessage("Fehler beim Speichern der Einstellungen", "error");
|
||||||
@@ -670,7 +738,7 @@
|
|||||||
if (data.success) {
|
if (data.success) {
|
||||||
showMessage(
|
showMessage(
|
||||||
"Beste Zeiten erfolgreich zurückgesetzt!",
|
"Beste Zeiten erfolgreich zurückgesetzt!",
|
||||||
"success"
|
"success",
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
showMessage("Fehler beim Zurücksetzen", "error");
|
showMessage("Fehler beim Zurücksetzen", "error");
|
||||||
@@ -718,13 +786,11 @@
|
|||||||
// Anlern-Anweisung aktualisieren
|
// Anlern-Anweisung aktualisieren
|
||||||
function updateLearningInstruction() {
|
function updateLearningInstruction() {
|
||||||
if (learningStep < learningSteps.length) {
|
if (learningStep < learningSteps.length) {
|
||||||
document.getElementById(
|
document.getElementById("learningInstruction").innerHTML =
|
||||||
"learningInstruction"
|
`Drücken Sie jetzt den Button für: <strong>${learningSteps[learningStep]}</strong>`;
|
||||||
).innerHTML = `Drücken Sie jetzt den Button für: <strong>${learningSteps[learningStep]}</strong>`;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Anlern-Status abfragen
|
// Anlern-Status abfragen
|
||||||
function pollLearningStatus() {
|
function pollLearningStatus() {
|
||||||
const pollInterval = setInterval(() => {
|
const pollInterval = setInterval(() => {
|
||||||
@@ -748,7 +814,7 @@
|
|||||||
if (learningStep > 0) {
|
if (learningStep > 0) {
|
||||||
showMessage(
|
showMessage(
|
||||||
`${learningSteps[learningStep - 1]} erfolgreich angelernt!`,
|
`${learningSteps[learningStep - 1]} erfolgreich angelernt!`,
|
||||||
"success"
|
"success",
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -770,13 +836,13 @@
|
|||||||
if (data.success) {
|
if (data.success) {
|
||||||
showMessage(
|
showMessage(
|
||||||
"Button-Zuweisungen erfolgreich zurückgesetzt!",
|
"Button-Zuweisungen erfolgreich zurückgesetzt!",
|
||||||
"success"
|
"success",
|
||||||
);
|
);
|
||||||
loadSystemInfo();
|
loadSystemInfo();
|
||||||
} else {
|
} else {
|
||||||
showMessage(
|
showMessage(
|
||||||
"Fehler beim Zurücksetzen der Button-Zuweisungen",
|
"Fehler beim Zurücksetzen der Button-Zuweisungen",
|
||||||
"error"
|
"error",
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@@ -806,48 +872,47 @@
|
|||||||
alert(statusText);
|
alert(statusText);
|
||||||
})
|
})
|
||||||
.catch((error) =>
|
.catch((error) =>
|
||||||
showMessage("Fehler beim Laden des Button-Status", "error")
|
showMessage("Fehler beim Laden des Button-Status", "error"),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
//location functions
|
//location functions
|
||||||
// Locations laden und Dropdown befüllen
|
// Locations laden und Dropdown befüllen
|
||||||
function loadLocations() {
|
function loadLocations() {
|
||||||
const licence = document.getElementById("licencekey").value; // Get the licence key from the input field
|
const licence = document.getElementById("licencekey").value; // Get the licence key from the input field
|
||||||
fetch("http://db.reptilfpv.de:3000/api/location/", {
|
fetch("http://db.reptilfpv.de:3000/api/location/", {
|
||||||
method: "GET",
|
method: "GET",
|
||||||
headers: {
|
headers: {
|
||||||
Authorization: `Bearer ${licence}`, // Add Bearer token using licenkey
|
Authorization: `Bearer ${licence}`, // Add Bearer token using licenkey
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
.then((response) => response.json())
|
.then((response) => response.json())
|
||||||
.then((data) => {
|
.then((data) => {
|
||||||
|
const select = document.getElementById("locationSelect");
|
||||||
|
|
||||||
const select = document.getElementById("locationSelect");
|
// Vorhandene Optionen löschen (außer der ersten "Bitte wählen...")
|
||||||
|
while (select.children.length > 1) {
|
||||||
|
select.removeChild(select.lastChild);
|
||||||
|
}
|
||||||
|
|
||||||
// Vorhandene Optionen löschen (außer der ersten "Bitte wählen...")
|
// Neue Optionen aus Backend-Response hinzufügen
|
||||||
while (select.children.length > 1) {
|
// Neue Optionen aus Backend-Response hinzufügen
|
||||||
select.removeChild(select.lastChild);
|
data.forEach((location) => {
|
||||||
|
const option = document.createElement("option");
|
||||||
|
option.value = location.id;
|
||||||
|
option.textContent = location.name;
|
||||||
|
select.appendChild(option);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Aktuell gespeicherten Standort laden
|
||||||
|
loadCurrentLocation();
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.log("Locations konnten nicht geladen werden:", error);
|
||||||
|
showMessage("Fehler beim Laden der Locations", "error");
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Neue Optionen aus Backend-Response hinzufügen
|
|
||||||
// Neue Optionen aus Backend-Response hinzufügen
|
|
||||||
data.forEach((location) => {
|
|
||||||
const option = document.createElement("option");
|
|
||||||
option.value = location.id;
|
|
||||||
option.textContent = location.name;
|
|
||||||
select.appendChild(option);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Aktuell gespeicherten Standort laden
|
|
||||||
loadCurrentLocation();
|
|
||||||
})
|
|
||||||
.catch((error) => {
|
|
||||||
console.log("Locations konnten nicht geladen werden:", error);
|
|
||||||
showMessage("Fehler beim Laden der Locations", "error");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Aktuell gespeicherten Standort laden
|
// Aktuell gespeicherten Standort laden
|
||||||
function loadCurrentLocation() {
|
function loadCurrentLocation() {
|
||||||
fetch("/api/get-location")
|
fetch("/api/get-location")
|
||||||
@@ -858,19 +923,26 @@
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
console.log("Aktueller Standort konnte nicht geladen werden:", error);
|
console.log(
|
||||||
|
"Aktueller Standort konnte nicht geladen werden:",
|
||||||
|
error,
|
||||||
|
);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Location-Zugriff basierend auf Lizenz-Level kontrollieren
|
// Location-Zugriff basierend auf Lizenz-Level kontrollieren
|
||||||
function updateLocationAccess(licenseLevel) {
|
function updateLocationAccess(licenseLevel) {
|
||||||
const locationSubmitBtn = document.getElementById("locationSubmitBtn");
|
const locationSubmitBtn = document.getElementById("locationSubmitBtn");
|
||||||
const locationRestrictionNotice = document.getElementById("locationRestrictionNotice");
|
const locationRestrictionNotice = document.getElementById(
|
||||||
const locationCurrentLevelSpan = document.getElementById("currentLocationLicenseLevel");
|
"locationRestrictionNotice",
|
||||||
|
);
|
||||||
|
const locationCurrentLevelSpan = document.getElementById(
|
||||||
|
"currentLocationLicenseLevel",
|
||||||
|
);
|
||||||
const locationSelect = document.getElementById("locationSelect");
|
const locationSelect = document.getElementById("locationSelect");
|
||||||
|
|
||||||
const level = parseInt(licenseLevel) || 0;
|
const level = parseInt(licenseLevel) || 0;
|
||||||
|
|
||||||
if (level >= 3) {
|
if (level >= 3) {
|
||||||
// Lizenz Level 3 oder höher - Form aktivieren
|
// Lizenz Level 3 oder höher - Form aktivieren
|
||||||
locationSubmitBtn.classList.remove("btn-disabled");
|
locationSubmitBtn.classList.remove("btn-disabled");
|
||||||
@@ -888,42 +960,51 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Location Form Handler
|
// Location Form Handler
|
||||||
document.getElementById("locationForm").addEventListener("submit", function(e) {
|
document
|
||||||
e.preventDefault();
|
.getElementById("locationForm")
|
||||||
|
.addEventListener("submit", function (e) {
|
||||||
const locationSubmitBtn = document.getElementById("locationSubmitBtn");
|
e.preventDefault();
|
||||||
|
|
||||||
// Lizenz-Level prüfen
|
const locationSubmitBtn =
|
||||||
if (locationSubmitBtn.disabled || locationSubmitBtn.classList.contains("btn-disabled")) {
|
document.getElementById("locationSubmitBtn");
|
||||||
showMessage("Standort-Konfiguration erfordert Lizenz Level 3 oder höher", "error");
|
|
||||||
return;
|
// Lizenz-Level prüfen
|
||||||
}
|
if (
|
||||||
|
locationSubmitBtn.disabled ||
|
||||||
const locationId = document.getElementById("locationSelect").value;
|
locationSubmitBtn.classList.contains("btn-disabled")
|
||||||
|
) {
|
||||||
if (!locationId) {
|
showMessage(
|
||||||
showMessage("Bitte einen Standort auswählen", "error");
|
"Standort-Konfiguration erfordert Lizenz Level 3 oder höher",
|
||||||
return;
|
"error",
|
||||||
}
|
);
|
||||||
|
return;
|
||||||
// Standort an Backend senden
|
}
|
||||||
fetch("/api/set-location", {
|
|
||||||
method: "POST",
|
const locationId = document.getElementById("locationSelect").value;
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/x-www-form-urlencoded",
|
if (!locationId) {
|
||||||
},
|
showMessage("Bitte einen Standort auswählen", "error");
|
||||||
body: "locationId=" + encodeURIComponent(locationId),
|
return;
|
||||||
})
|
}
|
||||||
.then((response) => response.json())
|
|
||||||
.then((data) => {
|
// Standort an Backend senden
|
||||||
if (data.success) {
|
fetch("/api/set-location", {
|
||||||
showMessage("Standort erfolgreich gespeichert!", "success");
|
method: "POST",
|
||||||
} else {
|
headers: {
|
||||||
showMessage("Fehler beim Speichern des Standorts", "error");
|
"Content-Type": "application/x-www-form-urlencoded",
|
||||||
}
|
},
|
||||||
|
body: "locationId=" + encodeURIComponent(locationId),
|
||||||
})
|
})
|
||||||
.catch((error) => showMessage("Verbindungsfehler", "error"));
|
.then((response) => response.json())
|
||||||
});
|
.then((data) => {
|
||||||
|
if (data.success) {
|
||||||
|
showMessage("Standort erfolgreich gespeichert!", "success");
|
||||||
|
} else {
|
||||||
|
showMessage("Fehler beim Speichern des Standorts", "error");
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => showMessage("Verbindungsfehler", "error"));
|
||||||
|
});
|
||||||
|
|
||||||
// Status-Nachricht anzeigen
|
// Status-Nachricht anzeigen
|
||||||
function showMessage(message, type) {
|
function showMessage(message, type) {
|
||||||
|
|||||||
Reference in New Issue
Block a user