Checkbox need two clicks to uncheck? - html

Question

My checkboxes need 2 clicks to be unchecked.
I have the issue in all 7 checkboxes.
To check the boxes, one click is enough.
I have no onchange() function or something in TS.
.............................................................................................................................................................
import { Component, OnInit, Inject } from '#angular/core';
import { PHPAPIService } from '../../php-api.service';
import * as socketIO from 'socket.io-client';
import {MatTableModule} from '#angular/material/table';
import * as $ from 'jquery';
import { ToastrService } from 'ngx-toastr';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '#angular/material';
export interface DialogData {
name: string;
}
#Component({
selector: 'app-module',
templateUrl: './module.component.html',
styleUrls: ['./module.component.css'],
providers: [PHPAPIService]
})
export class ModuleComponent implements OnInit {
toastChanges = 0;
xForToastMSG = 1;
moduleTimer = [];
fileToUpload: File = null;
moduleExpandState = [];
constructor(public PHPAPIService:PHPAPIService, private toastrService: ToastrService, public dialog: MatDialog) {
}
ngOnInit() {
for(var i=0;i<1000;i++)
this.moduleExpandState[i] = false;
this.PHPAPIService.get("tprofile").subscribe(
(data) => this.PHPAPIService.profiles = data
);
this.PHPAPIService.get("ttimer").subscribe(
(data) => this.PHPAPIService.timers = data
);
this.PHPAPIService.get("tmodule").subscribe(
(data) => this.PHPAPIService.modules = data
);
const socket = socketIO(this.PHPAPIService.apiUrl);
socket.on('tmodule', (snapshot) => this.PHPAPIService.modules = snapshot);
socket.on('timeUpdate', (snapshot) => this.PHPAPIService.date = snapshot);
setTimeout(()=>{
for(var i=0; i< this.PHPAPIService.modules.length ;i++){
/*Konvertiert die einelenen Daten HH und MM in ein String HH:MM*/
this.moduleTimer[i] = this.PHPAPIService.modules[i].time_h + ":" + this.PHPAPIService.modules[i].time_m;
//console.log(this.localTimerVar[i].on);
}
},1200);
//socket.on('tmodule', () => this.showSuccess());
}
/* showSuccess(text) {
/* if(this.xForToastMSG == 1){
this.xForToastMSG = 0;*/
// this.toastrService.success(text,'',{
// positionClass: 'toast-bottom-right'
// });
/* this.toastChanges = 1;*/
// }
/* setTimeout(()=>{
this.toastChanges = 0;
this.xForToastMSG = 1;
},500);*/
//}*/
showWarning(text) {
this.toastrService.warning(text,'',{
positionClass: 'toast-bottom-right'
});
}
/* showDownload() {
this.toastrService.success('Datensicherung wird erstellt','',{
positionClass: 'toast-bottom-right'
});
}*/
/*NUR FÜR MEHERERE FILES*/
/*handleFileInput(files: FileList) {
// console.log("TEST");
this.fileToUpload = files.item(0);
this.uploadFileToActivity();
}
*/
uploadFileToActivity(files: FileList) {
this.fileToUpload = files.item(0);
console.log(files.item(0));
if(files.item(0).name.substring(0,6) === 'module'){
this.PHPAPIService.uploadBackupModule(files.item(0)).subscribe(data => {
// do something, if upload success
this.showSuccess('Import erfolgreich!');
console.log(data);
}, error => {
console.log(error);
});
}else{
this.showWarning('fehlerhafte Datei');
}
}
backupModule(m_id, m_name){
this.showSuccess('Datensicherung wird erstellt');
this.PHPAPIService.backupModule(m_id, m_name).subscribe(response => this.downLoadFile(response.text(), "application/plain", m_name));
}
downLoadFile(data: any, type: string, name) {
var blob = new Blob([data], { type: type});
var url = window.URL.createObjectURL(blob);
// var pwa = window.open(url);
var anchor = document.createElement("a");
anchor.setAttribute("type", "hidden"); // make it hidden if needed
anchor.download = "module_"+name+".sql";
anchor.href = url;
document.body.appendChild(anchor);
anchor.click();
anchor.remove();
/*if (!pwa || pwa.closed || typeof pwa.closed == 'undefined') {
alert( 'Please disable your Pop-up blocker and try again.');
}*/
}
showSuccessNoChanges() {
this.toastrService.warning('keine Änderungen','',{
positionClass: 'toast-bottom-right'
});
}
showSuccess(x){
console.log(this.PHPAPIService.modules[x].time_h);
if(this.PHPAPIService.modules[x].time_h != '' && this.PHPAPIService.modules[x].time_m != ''){
this.toastrService.success('Änderung gespeichert','',{
positionClass: 'toast-bottom-right'
});
}else{
this.toastrService.error('Bitte Zeit eintragen','',{
positionClass: 'toast-bottom-right'
});
}
if(x == "zeit verfügbar"){
this.toastrService.error('Zeit bereits verfügbar','Die eingetragene Zeit ist bereits in einem andern Modul verfügbar, bitte eine andere Uhrzeit eintragen.',{
positionClass: 'toast-bottom-right'
});
}
}
togglePanel(x){
this.moduleExpandState[x] = !this.moduleExpandState[x];
$('#nameInput-'+x+' ').toggleClass('inputEdit');
}
saveModule(mID, x){
if(this.PHPAPIService.modules[x]['0'] == false) this.PHPAPIService.modules[x]['0'] = "";
if(this.PHPAPIService.modules[x]['1'] == false) this.PHPAPIService.modules[x]['1'] = "";
if(this.PHPAPIService.modules[x]['2'] == false) this.PHPAPIService.modules[x]['2'] = "";
if(this.PHPAPIService.modules[x]['3'] == false) this.PHPAPIService.modules[x]['3'] = "";
if(this.PHPAPIService.modules[x]['4'] == false) this.PHPAPIService.modules[x]['4'] = "";
if(this.PHPAPIService.modules[x]['5'] == false) this.PHPAPIService.modules[x]['5'] = "";
if(this.PHPAPIService.modules[x]['6'] == false) this.PHPAPIService.modules[x]['6'] = "";
if(this.PHPAPIService.modules[x]['0'] == true) this.PHPAPIService.modules[x]['0'] = "checked";
if(this.PHPAPIService.modules[x]['1'] == true) this.PHPAPIService.modules[x]['1'] = "checked";
if(this.PHPAPIService.modules[x]['2'] == true) this.PHPAPIService.modules[x]['2'] = "checked";
if(this.PHPAPIService.modules[x]['3'] == true) this.PHPAPIService.modules[x]['3'] = "checked";
if(this.PHPAPIService.modules[x]['4'] == true) this.PHPAPIService.modules[x]['4'] = "checked";
if(this.PHPAPIService.modules[x]['5'] == true) this.PHPAPIService.modules[x]['5'] = "checked";
if(this.PHPAPIService.modules[x]['6'] == true) this.PHPAPIService.modules[x]['6'] = "checked";
/*checke ob gleiche Uhrzeiten verfügbar sind*/
/*for(var i = 0; i < this.PHPAPIService.modules.length+1; i++){
console.log(this.moduleTimer[x]);
console.log(this.PHPAPIService.modules[x].time_h+":"+this.PHPAPIService.modules[x].time_m);
if(this.PHPAPIService.modules[i].time_h+":"+this.PHPAPIService.modules[i].time_m == this.moduleTimer[x]){
this.showSuccess("zeit verfügbar");
return null;
}
}*/
/*Konvertiert den 19:45 String in 19 und 45*/
//console.log(this.PHPAPIService.modules[x]);
if(this.PHPAPIService.modules[x].m_active == false){
this.PHPAPIService.modules[x].m_active = "";
}
if(this.PHPAPIService.modules[x].m_active == true){
this.PHPAPIService.modules[x].m_active = "checked";
// this.PHPAPIService.saveModule(mID, this.PHPAPIService.modules[x]).subscribe();
}
if(this.moduleTimer[x] != ''){
this.PHPAPIService.modules[x].time_h = this.moduleTimer[x].split(":")[0];
this.PHPAPIService.modules[x].time_m = this.moduleTimer[x].split(":")[1];
}
if(this.PHPAPIService.modules[x].time_h != '' && this.PHPAPIService.modules[x].time_m != ''){
this.PHPAPIService.saveModule(mID, this.PHPAPIService.modules[x]).subscribe();
}
setTimeout(()=>{
// if(this.toastChanges != 1){
this.showSuccess(x);
// };
},200);
}
deleteModule(mID, x){
const dialogRef = this.dialog.open(DialogOverviewModule, {
width: '250px',
data: {name: this.PHPAPIService.modules[x].m_name}
});
dialogRef.afterClosed().subscribe(result => {
console.log(result);
if(result == true){
this.PHPAPIService.deleteModule(mID).subscribe();
}
});
//this.PHPAPIService.deleteModule(mID).subscribe();
// this.PHPAPIService.profiles[x] = null;
}
addModule(){
this.PHPAPIService.addModule().subscribe();
for(var i=0;i<1000;i++)
this.moduleExpandState[i] = false;
// this.PHPAPIService.profiles[x] = null;
}
}
#Component({
selector: 'dialog-overview-example-dialog',
templateUrl: 'dialog-overview-example-dialog.html',
})
export class DialogOverviewModule {
constructor(
public dialogRef: MatDialogRef<DialogOverviewModule>,
#Inject(MAT_DIALOG_DATA) public data: DialogData) {}
save = true;
onNoClick(): void {
this.dialogRef.close();
}
}
h1{
display: block;
margin: 0;
padding: 20px;
padding-left: 220px;
}
h4{
margin: auto 0px;
padding: 0;
font-weight: 200;
padding-right: 50px;
}
h2{
margin: 10px;
font-weight: 100;
}
header{
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 0;
margin-left:200px;
padding-left: 20px;
padding-right: 20px;
background-color: #323741;
color: #D7E2F7;
}
input[type="file"] + label {
margin: 0;
padding: 0;
}
/*input[type="file"]:focus + label,
input[type="file"] + label:hover {
background-color: red;
}*/
input[type="file"]{
float: right;
margin: 20px;
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.modSelect, .modSelect option{
font-size: 1.2em;
width: 250px !important;
}
input{
height: 30px;
outline: none;
border: none;
background: transparent;
font-size: 1.2em;
}
input:focus{
background: white;
outline: none;
border: solid 1px black;
}
input[type="checkbox"]{
margin: auto 0px;
margin-left: 10px;
width: 18px;
}
/deep/ .mat-expansion-panel-header{
padding-top: 10px !important;
padding-bottom: 10px !important;
margin-left:200px;
}
.row_expansion_column{
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: center;
align-items: center;
flex-grow: 0;
text-align: center;
margin-left:200px;
}
.row_expansion_column select{
margin: 10px;
width: 100px;
}
.delBtn{
background-color: #ed1212;
border: 1px solid #ed1212;
font-size: 1.2em;
color: white;
}
.saveBtn{
background-color: green;
border: 1px solid green;
font-size: 1.2em;
color: white;
}
.exportBtn{
background-color: #707070FF;
border: 1px solid #707070FF;
font-size: 1.2em;
color: white;
}
.addBtn{
background-color: #707070FF;
border: 1px solid #707070FF;
float: right;
margin: 20px;
padding: 0 10px;
font-size: 1.2em;
color : white;
}
.importBtn{
background-color: #707070FF;
border: 1px solid #707070FF;
float: right;
margin: 20px;
padding: 0;
font-size: 1.2em;
color : white;
}
.fileBtn{
background-color: #707070FF;
border: 1px solid #707070FF;
float: right;
padding: 0px 20px;
font-size: 1em;
color : white;
line-height: 34px;
cursor: pointer;
}
.editBtn{
margin: 0 0 0 auto;
//background-color: #DADADAFF;
border: 1px solid #707070FF;
color : #707070FF;
padding: 2px 10px 2px 10px;
font-size: 1.2em;
}
input[type="text"]{
outline: none;
border: none;
background: transparent;
height: 30px;
font-size: 1.2em;
pointer-events: none;
}
input[type="text"]:hover{
cursor: default;
pointer-events: none;
}
input[type="text"].inputEdit:hover{
pointer-events: auto;
outline: none;
cursor: text;
border: 1px solid #707070FF;
}
input[type="text"].inputEdit{
background: white;
pointer-events: auto;
outline: none;
cursor: text;
border: 1px solid #707070FF;
}
img{
width: 120px;
position: absolute;
right: 20px;
bottom: 20px;
}
/deep/ .mat-slide-toggle.mat-warn.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
background-color: blue;
float: right;
}
/deep/ .mat-slide-toggle.mat-warn.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
background-color: rgba(124, 172, 249,.5);
float: right;
}
/deep/ .mat-slide-toggle{
position: relative;
top: 15px;
padding-right: 10px;
margin-left: 20px;
}
/deep/ .mat-slide-toggle-bar {
height: 15px !important;
width: 40px !important;
}
/deep/ .mat-slide-toggle-thumb {
height: 25px !important;
width: 25px !important;
background-color: #ececec;
margin-left: -2px;
margin-top: -2px;
}
/deep/ .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb-container {
transform: translate3d(23px,0,0) !important;
}
.seperateContainer{
padding-left: 20px;
display: inherit;
background-color: #f5f5f5;
}
#modAct{
margin-left: 20px;
}
#media only screen and (max-width: 600px) {
header h2{
padding-left: 20px;
}
.row_expansion_column{
margin-left:0px;
}
/deep/ .mat-expansion-panel-header{
margin-left:0px;
}
header{
margin-left:0px;
}
}
<header>
<h2>Module</h2>
<h4 [(ngModel)]="PHPAPIService.date" ngDefaultControl>
{{PHPAPIService.date | date:'HH:mm:ss dd.MM.yyyy'}}
</h4>
</header>
<mat-expansion-panel *ngFor="let module of PHPAPIService.modules; let x = index" [expanded]="moduleExpandState[module.m_id]"
[disabled]="true">
<mat-expansion-panel-header>
<input type="text" name="" id="{{ 'nameInput-' + module.m_id }}" placeholder="Bezeichnung"
required [(ngModel)]="module.m_name" [value]="module.m_name"/>
<button mat-button class="editBtn" (click)="togglePanel(module.m_id)">Bearbeiten</button>
</mat-expansion-panel-header>
<div class="row_expansion">
<div class=row_expansion_column>
<h3>Profil</h3>
<select class="modSelect" required [(ngModel)]="module.m_profile">
<option [value]="profile.profileID" *ngFor="let profile of PHPAPIService.profiles">{{profile.Name}}</option>
</select>
<h3>schaltetzeit</h3>
<input type="time" name="" required [(ngModel)]="moduleTimer[x]" value="{{module.time_h}}:{{module.time_m}}"/>
<div class="seperateContainer">
<div class="dayCheckBox"><h3>MO</h3>
<input type="checkbox" required [(ngModel)]="module['1']" checked="{{module['1']}}"/> <!-- timer.1 funktiniert nicht, DB hat leider 0 - 7 als spalten -->
</div>
<div class="dayCheckBox"><h3>DI</h3>
<input type="checkbox" required [(ngModel)]="module['2']" checked="{{module['2']}}"/></div>
<div class="dayCheckBox"><h3>MI</h3>
<input type="checkbox" required [(ngModel)]="module['3']" checked="{{module['3']}}"/></div>
<div class="dayCheckBox"><h3>DO</h3>
<input type="checkbox" required [(ngModel)]="module['4']" checked="{{module['4']}}"/></div>
<div class="dayCheckBox"><h3>FR</h3>
<input type="checkbox" required [(ngModel)]="module['5']" checked="{{module['5']}}"/></div>
<div class="dayCheckBox"><h3>SA</h3>
<input type="checkbox" required [(ngModel)]="module['6']" checked="{{module['6']}}"/></div>
<div class="dayCheckBox"><h3>SO</h3>
<input type="checkbox" required [(ngModel)]="module['0']" checked="{{module['0']}}"/></div>
</div>
<h3 id="modAct">Active</h3>
<mat-slide-toggle [(ngModel)]="module.m_active" color="warn"
[checked]="module.m_active"></mat-slide-toggle>
</div>
</div>
<mat-action-row>
<button mat-button class="exportBtn" (click)="backupModule(module.m_id, module.m_name)">Export</button>
<button mat-button class="delBtn" (click)="deleteModule(module.m_id, x)">Löschen</button>
<button mat-button class="saveBtn" (click)="saveModule(module.m_id, x)">Speichern</button>
</mat-action-row>
</mat-expansion-panel>
<button mat-button class="addBtn" (click)="addModule()">neues Modul erstellen</button>
<!-- <div class="form-group"> -->
<!-- <button mat-button class="fileBtn"> <label for="file">Datei auswählen</label></button> -->
<input type="file"
class="inputfile"
enctype="multipart/form-data"
id="file"
name="filetoupload"
(change)="uploadFileToActivity($event.target.files)" >
<button mat-button class="importBtn" ><label for="file"class="fileBtn">Import</label></button>
<!-- <label for="file"class="fileBtn">Import</label> -->
<!-- </div> -->

Answer 1

You don't need checked="{{module['1']}}", data binding is handling that. So please remove below code from your check boxes and it would work.
checked="{{module['1']}}" //Remove this
Let me know if you need full code, I can share.
Check running code at below repository.
https://stackblitz.com/github/nitin1982/StackOverFlowProblems/tree/master/CheckBoxIssue?file=src%2Fapp%2Fapp.component.html