MediaWiki:CustomItemTracker.js

mw.hook('wikipage.content').add(function () {

    const container = document.getElementById(
        "customItemTracker"
    );

    if (!container) return;


    const infoBox =
        document.getElementById(
            "customItemTrackerInfo"
        );


    const allowedUsers = [
        "Hefner"
    ];


    const currentUser =
        mw.config.get('wgUserName');


    let trackerData = {
        items:[],
        completed:{}
    };


    function loadData(){

        $.getJSON(
            mw.util.wikiScript('api'),
            {
                action:'query',
                titles:'Module:CustomItemTracker/data.json',
                prop:'revisions',
                rvprop:'content',
                format:'json',
                formatversion:2

            }

        ).done(function(data){


            let page =
            data.query.pages[0];


            if(!page.revisions)
                return;


            trackerData =
            JSON.parse(
                page.revisions[0].content
            );


            render();


        });

    }



    function render(){


        container.innerHTML="";


        let completed =
        Object.keys(
            trackerData.completed
        ).length;


        let total =
        trackerData.items.length;



        let progress =
        document.createElement("div");


        progress.className=
        "trackerProgress";


        progress.innerHTML=
        `
        Completed:
        <strong>${completed}/${total}</strong>
        (${Math.floor((completed/total)*100)}%)
        `;


        container.appendChild(progress);



        let grid =
        document.createElement("div");


        grid.className=
        "trackerGrid";


        container.appendChild(grid);



        trackerData.items.forEach(
        function(item,index){


            let tile =
            document.createElement("div");


            tile.className=
            "trackerTile";


            if(
            trackerData.completed[index]
            )
            {
                tile.classList.add(
                    "completed"
                );
            }



            tile.innerHTML=
            `
            <div class="itemImage">
            </div>

            <div class="itemName">
            ${item.name}
            </div>
            `;



            tile.onclick=function(){


                showInfo(item);


                if(
                !allowedUsers.includes(
                    currentUser
                ))
                {
                    return;
                }


                trackerData.completed[index]
                =
                !trackerData.completed[index];


                saveData();


            };



            grid.appendChild(tile);



            getImage(
                item.name,
                tile.querySelector(".itemImage")
            );


        });


    }





    function getImage(name,target){


        let text =
        "{{plinkp|" +
        name +
        "}}";


        $.getJSON(
        "/api.php",
        {
            action:"parse",
            text:text,
            format:"json"
        })

        .done(function(data){


            if(!data.parse)
                return;


            let div =
            document.createElement("div");


            div.innerHTML =
            data.parse.text["*"];


            let img =
            div.querySelector("img");


            if(img)
            {
                img.style.width="50px";
                target.appendChild(img);
            }


        });


    }





    function showInfo(item){


        infoBox.innerHTML=
        `
        <h3>${item.name}</h3>

        <b>Category:</b>
        ${item.category}

        <br><br>

        ${item.info.replaceAll(
            "%%",
            "<br>"
        )}

        `;

    }




    function saveData(){


        $.post(
        mw.util.wikiScript('api'),
        {

            action:'edit',

            title:
            'Module:CustomItemTracker/data.json',

            token:
            mw.user.tokens.get(
                'csrfToken'
            ),

            format:'json',

            text:
            JSON.stringify(
                trackerData,
                null,
                4
            )

        })

        .done(function(){

            render();

        });


    }



    loadData();


});