MediaWiki:CustomItemTracker.js

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

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

    if (!container) return;


    const allowedUsers = [
        "Hefner"
    ];


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


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



    // Load tracker JSON
    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) {


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


            if (!page.revisions)
                return;


            try {

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


                render();


            } catch(e) {

                console.error(
                    "Failed loading tracker JSON",
                    e
                );

            }


        });

    }





    // Render tracker
    function render() {


        container.innerHTML = "";



        const completed =
            Object.keys(
                trackerData.completed
            ).filter(
                key => trackerData.completed[key]
            ).length;



        const total =
            trackerData.items.length;



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


        progress.className =
            "trackerProgress";


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


        container.appendChild(progress);



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


        grid.className =
            "trackerGrid";


        container.appendChild(grid);





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


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


            tile.className =
                "trackerTile";



            if(
                trackerData.completed[index]
            ) {

                tile.classList.add(
                    "completed"
                );

            }



            const image =
                document.createElement("div");


            image.className =
                "itemImage";


            tile.appendChild(image);




            const name =
                document.createElement("div");


            name.className =
                "itemName";


            name.textContent =
                item.name;


            tile.appendChild(name);




            loadImage(
                item.name,
                image
            );





            tile.onclick = function() {


                // View only for everyone else
                if(
                    !allowedUsers.includes(
                        currentUser
                    )
                ) {

                    return;

                }



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



                saveData();


            };



            grid.appendChild(tile);


        });


    }







    // Get wiki item image
    function loadImage(
        itemName,
        target
    ) {


        const template =
            "{{plinkp|" +
            itemName +
            "}}";



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

        ).done(function(data) {


            if(
                !data.parse
            )
                return;



            const wrapper =
                document.createElement("div");


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



            const img =
                wrapper.querySelector("img");



            if(img) {


                img.style.maxWidth =
                    "50px";


                img.style.maxHeight =
                    "50px";


                img.style.width =
                    "auto";


                img.style.height =
                    "auto";


                img.style.objectFit =
                    "contain";



                target.appendChild(img);

            }


        });


    }







    // Save changes
    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();


            console.log(
                "Tracker updated"
            );


        });


    }






    loadData();


});