nicht angemeldet
Hallo Zusammen,
ich bin grad an nem PWA Projekt für eine Berufsfeuerwehr. Ziel ist, ein Kalender, der die 3 Schichten farbig darstellt, welche man aus- und einblenden kann. Zusätzlich soll noch eine Notizfunktion entstehen. Aber so weit bin ich noch nicht ;)
Zu meinem Problem: Soweit funktioniert alles und sieht auch so aus wie ich es will. Aber, wenn ich die Webseite auf dem Iphone aufrufe und als PWA auf dem Homescreen ablege, haben die drei Buttons mit denen man die Schichtfarben ausblenden kann, auf einmal Rahmen? Im Browser stimmt noch alles, sobalds auf dem Homescreen liegt haben die Buttons Rahmen und sind verrutscht.
Hab leider keine Idee woran das liegen kann.
Ich häng mal mein js an, kann gern auch noch css und html nachliefern. Am besten ihr schaut euch den Fall einfach mal live an, vielleicht hat jemand eine Idee: Dienstplan
var onOffA = 0;
var onOffB = 0;
var onOffC = 0;
function schichtA(){
var a = document.getElementsByClassName("schichtA");
var b = document.getElementById("buttonSa");
if(onOffA === 0) {
for (var i=0; i<a.length; i++) {
a[i].style.backgroundColor = "white";
}
b.style.color="black";
onOffA = 1;
return onOffA;
console.log(onOffA)
}else if(onOffA === 1) {
for (i=0; i<a.length; i++) {
a[i].style.backgroundColor = "#f9c0ce";
}
b.style.color="#f9c0ce";
onOffA = 0;
return onOffA;
console.log(onOffA)
}
console.log("Schicht A gedrueckt");
}
function schichtB(){
var a = document.getElementsByClassName("schichtB");
var b = document.getElementById("buttonSb");
if(onOffB === 0) {
for (var i=0; i<a.length; i++) {
a[i].style.backgroundColor = "white";
}
b.style.color="black";
onOffB = 1;
}else if(onOffB === 1) {
for (i=0; i<a.length; i++) {
a[i].style.backgroundColor = "#c1f3cf";
}
b.style.color="#c1f3cf";
onOffB = 0;
}
console.log("Schicht B gedrueckt");
}
function schichtC(){
var a = document.getElementsByClassName("schichtC");
var b = document.getElementById("buttonSc");
if(onOffC === 0) {
for (var i=0; i<a.length; i++) {
a[i].style.backgroundColor = "white";
}
b.style.color="black";
onOffC = 1;
}else if(onOffC === 1) {
for (i=0; i<a.length; i++) {
a[i].style.backgroundColor = "#91d1fc";
}
b.style.color="#91d1fc";
onOffC = 0;
}
console.log("Schicht C gedrueckt; onOffC = " );
}
let today = new Date();
let currentMonth = today.getMonth();
let currentYear = today.getFullYear();
let selectYear = document.getElementById("year");
let selectMonth = document.getElementById("month");
let months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
let monthAndYear = document.getElementById("monthAndYear");
showCalendar(currentMonth, currentYear);
function next() {
currentYear = (currentMonth === 11) ? currentYear + 1 : currentYear;
currentMonth = (currentMonth + 1) % 12;
showCalendar(currentMonth, currentYear);
}
function previous() {
currentYear = (currentMonth === 0) ? currentYear - 1 : currentYear;
currentMonth = (currentMonth === 0) ? 11 : currentMonth - 1;
showCalendar(currentMonth, currentYear);
}
function jump() {
currentYear = parseInt(selectYear.value);
currentMonth = parseInt(selectMonth.value);
showCalendar(currentMonth, currentYear);
}
function showCalendar(month, year) {
let firstDay = (new Date(year, month)).getDay();
let daysInMonth = 32 - new Date(year, month, 32).getDate();
let tbl = document.getElementById("calendar-body"); // body of the calendar
// clearing all previous cells
tbl.innerHTML = "";
let today = new Date();
let currentMonth = today.getMonth();
let currentYear = today.getFullYear();
let selectYear = currentYear;
let selectMonth = currentMonth;
let months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"];
let monthAndYear = document.getElementById("monthAndYear");
showCalendar(currentMonth, currentYear);
function next() {
currentYear = (currentMonth === 11) ? currentYear + 1 : currentYear;
currentMonth = (currentMonth + 1) % 12;
showCalendar(currentMonth, currentYear);
}
function previous() {
currentYear = (currentMonth === 0) ? currentYear - 1 : currentYear;
currentMonth = (currentMonth === 0) ? 11 : currentMonth - 1;
showCalendar(currentMonth, currentYear);
}
function jump() {
currentYear = parseInt(currentYear.value);
currentMonth = parseInt(currentMonth.value);
showCalendar(currentMonth, currentYear);
}
function showCalendar(month, year) {
let firstDay = (new Date(year, month)).getDay();
let daysInMonth = 32 - new Date(year, month, 32).getDate();
let tbl = document.getElementById("calendar-body"); // body of the calendar
// clearing all previous cells
tbl.innerHTML = "";
// filing data about month and in the page via DOM.
monthAndYear.innerHTML = months[month] + " " + year;
selectYear.value = year;
selectMonth.value = month;
}
//filing data about month and in the page via DOM.
monthAndYear.innerHTML = months[month] + " " + year;
selectYear.value = year;
selectMonth.value = month;
// Variablen für Schichtberechnung festlegen
var heute = new Date(year, month, 00);
var start = new Date(2010, 00, 00, 00, 00, 00, 0);
var check1 = new Date(heute.getFullYear(), heute.getMonth(), heute.getDate());
var check2 = new Date(start.getFullYear(), start.getMonth(), start.getDate());
var unterschied = Math.round((check1 - check2)/(1000 * 60 * 60 * 24));
//console.log("Starttag: " + start);
//console.log("Erster Tag des Monats: " + heute);
//console.log("Unterschied: " + unterschied);
// creating all cells
let date = 1;
//alert(unterschied-date)
for (let i = 0; i < 5; i++) {
// creates a table row
let row = document.createElement("tr");
//creating individual cells, filing them up with data.
for (let j = 0; j < 7; j++) {
if (i === 0 && j < firstDay -1) {
let cell = document.createElement("td");
let cellText = document.createTextNode("");
cell.appendChild(cellText);
row.appendChild(cell);
}
else if (date > daysInMonth) {
console.log("Zähler i: " + i);
console.log("Zähler j: " + j);
if (i === 6 && j === 7){
break;
} else {
let cell = document.createElement("td");
let cellText = document.createTextNode("");
cell.appendChild(cellText);
row.appendChild(cell);
i++;
}
}
else {
let cell = document.createElement("td");
let cellText = document.createTextNode(date);
if (date === today.getDate() && year === today.getFullYear() && month === today.getMonth()) {
cell.classList.add("bg-info");
} // color today's date
switch((unterschied + date) % 9){
case 0:
cell.classList.add("schichtC");
break;
case 1:
cell.classList.add("schichtB");
break;
case 2:
cell.classList.add("schichtA");
break;
case 3:
cell.classList.add("schichtB"); // 1.1.
break;
case 4:
cell.classList.add("schichtA"); // 2.1.
break;
case 5:
cell.classList.add("schichtC");
break;
case 6:
cell.classList.add("schichtA");
break;
case 7:
cell.classList.add("schichtC");
break;
case 8:
cell.classList.add("schichtB");
break;
}
cell.appendChild(cellText);
row.appendChild(cell);
date++;
}
}
tbl.appendChild(row); // gibt eine Reihe aus.
console.log("onOffA: " + onOffA);
}
// SchichtA initialisieren
var aA = document.getElementsByClassName("schichtA");
var bA = document.getElementById("buttonSa");
if(onOffA === 1) {
for (var i=0; i<aA.length; i++) {
aA[i].style.backgroundColor = "white";
}
bA.style.color="black";
}else if(onOffA === 0) {
for (i=0; i<aA.length; i++) {
aA[i].style.backgroundColor = "#f9c0ce";
}
bA.style.color="#f9c0ce";
}
// SchichtB initialisieren
var aB = document.getElementsByClassName("schichtB");
var bB = document.getElementById("buttonSb");
if(onOffB === 1) {
for (var i=0; i<aB.length; i++) {
aB[i].style.backgroundColor = "white";
}
bB.style.color="black";
}else if(onOffB === 0) {
for (i=0; i<aB.length; i++) {
aB[i].style.backgroundColor = "#c1f3cf";
}
bB.style.color="#c1f3cf";
}
// SchichtC initialisieren
var aC = document.getElementsByClassName("schichtC");
var bC = document.getElementById("buttonSc");
if(onOffC === 1) {
for (var i=0; i<aC.length; i++) {
aC[i].style.backgroundColor = "white";
}
bC.style.color="black";
}else if(onOffC === 0) {
for (i=0; i<aC.length; i++) {
aC[i].style.backgroundColor = "#91d1fc";
}
bC.style.color="#91d1fc";
}
document.getElementsByClassName("buttonS").borderColor = "white";
}
Linuchs
Matthias Apsel
Der Martin
Gunnar Bittersmann