prayercircle/src/client/js/CircleManager.js

import {ViewHelper} from "js-helper/dist/client/ViewHelper";
import {Helper} from "js-helper/dist/shared/Helper";

export class CircleManager {

    constructor(listSection, tableSection) {
        this._members = [];
        this._week = 0;

        this._inputTemplate = listSection.querySelector("#input-template");
        this._inputTemplate.remove();
        this._inputTemplate.removeAttribute("id");
        this._listContainer = listSection.querySelector("#list-container");
        listSection.querySelector("#add-button").addEventListener("click", () => this.addMember());

        this._tableTemplate = tableSection.querySelector("#table-template");
        this._tableTemplate.remove();
        this._tableTemplate.removeAttribute("id");
        this._tableContainer = tableSection.querySelector("#table-container");

        this._weekInput = tableSection.querySelector("#week-input");
        tableSection.querySelector("#next-week").addEventListener("click", () => this.setWeek(this._week + 1));
        tableSection.querySelector("#previous-week").addEventListener("click", () => this.setWeek(this._week - 1));

        this.load();
        this.setWeek(this._week);
    }

    setWeek(newWeek) {
        newWeek = parseInt(newWeek);
        if (!isNaN(newWeek)) {
            newWeek = Math.max(newWeek, 0);
            this._week = newWeek;
            this._weekInput.innerText = (this._week + 1);
            this.updateTables();
            this.save();
        }
    }

    save(){
        console.log("saving...");
        localStorage.setItem("list", JSON.stringify({"week": this._week, "members": this._members}));
    }

    load(){
        const jsonSavedata = localStorage.getItem("list");
        console.log("liste", jsonSavedata);
        if (jsonSavedata){
            const data = JSON.parse(jsonSavedata);
            this._week = data.week;
            this._members = data.members;
            this.updateList();
            this.updateTables();
        }
    }

    updateList() {
        ViewHelper.removeAllChildren(this._listContainer);
        this._members.forEach((member, id) => {
            const memberElement = this._inputTemplate.cloneNode(true);
            memberElement.querySelector(".delete-button").addEventListener("click", () => this.deleteMember(id))

            const inputElem =
                memberElement.querySelector(".name");
            inputElem.value = member;
            inputElem.addEventListener("input", () => {
                this._members[id] = inputElem.value;
                this.updateTables();
                this.save();
            });
            this._listContainer.appendChild(memberElement);
        })
    }

    deleteMember(index) {
        if (index >= 0 && index < this._members.length) {
            this._members.splice(index, 1);
            this.updateList();
            this.updateTables();
            this.save();
        }
    }

    addMember(name) {
        name = Helper.nonNull(name, "");
        this._members.push(name);
        this.updateList();
        this.updateTables();
        this.save();
    }

    updateTables() {
        if (this._members.length < 2) {
            return;
        }
        const tables = {};
        this._members.forEach((member, index) => {
            const listPrayers = [];
            const listPrayedBy = [];

            const otherMembers = this._members.filter((v, i) => i !== index);

            let prayersIndex = index - 1;
            let prayedIndex = index;

            const weekOffset = this._week * 7;
            prayersIndex += weekOffset;
            prayedIndex -= weekOffset;
            if (prayedIndex < 0) {
                prayedIndex += otherMembers.length * Math.floor(weekOffset / otherMembers.length);
            }

            for (let i = 0; i < 7; i++) {
                prayersIndex = (prayersIndex + 1) % otherMembers.length
                prayedIndex = (prayedIndex - 1 + otherMembers.length) % otherMembers.length;

                listPrayers.push(otherMembers[prayersIndex]);
                listPrayedBy.push(otherMembers[prayedIndex]);
            }

            tables[index] = {"for": listPrayers, "by": listPrayedBy}
        });

        ViewHelper.removeAllChildren(this._tableContainer);
        Object.keys(tables).forEach(memberIndex => {
            const tableElement = this._tableTemplate.cloneNode(true);
            tableElement.querySelector(".name").innerText = this._members[memberIndex];
            tables[memberIndex].for.forEach((otherMember, index) => {
                tableElement.querySelector(".for-" + index).innerText = otherMember;
            });
            tables[memberIndex].by.forEach((otherMember, index) => {
                tableElement.querySelector(".by-" + index).innerText = otherMember;
            });

            this._tableContainer.appendChild(tableElement);
        });
    }
}