azerothcore-armory/static/character-quests.hbs

<link rel="stylesheet" type="text/css" href="{{websiteRoot}}/css/character-quests.css">
{{> icons }}
<script type="application/javascript">
    const aowow_tooltips = { "renamelinks": true, };
</script>

{{> character-header }}

<div class="quest-compare-section" style="margin-bottom: 20px;">
    <div class="field is-horizontal">
        <div class="field-label is-normal">
            <label class="label">Compare with:</label>
        </div>
        <div class="field-body">
            <div class="field has-addons">
                <div class="control is-expanded">
                    <div class="select is-fullwidth">
                        <select id="compareCharacter">
                            <option value="">Select a character...</option>
                            {{#each data.otherCharacters}}
                            <option value="{{this.realmName}}/{{this.name}}">{{this.name}} ({{this.realmName}})</option>
                            {{/each}}
                        </select>
                    </div>
                </div>
                <div class="control">
                    <button class="button is-info" id="compareButton" disabled>
                        Compare Quests
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

{{#each data.categories as |quests category|}}
<div class="quests-table" style="margin-bottom: 20px;">
    {{#if (hasInProgressQuests quests)}}
    <h2 class="is-size-4 category-header collapsible expanded">
    {{else}}
    <h2 class="is-size-4 category-header collapsible">
    {{/if}}
        {{category}}
        <span class="collapse-icon">▼</span>
    </h2>
    
    {{#if (hasInProgressQuests quests)}}
    <div class="category-content expanded">
    {{else}}
    <div class="category-content">
    {{/if}}
        <!-- In Progress Quests -->
        <h3 class="is-size-5 collapsible">
            In Progress
            <span class="collapse-icon">▼</span>
        </h3>
        <div class="collapsible-content expanded">
            <table class="table is-striped is-hoverable is-fullwidth">
                <thead>
                    <tr>
                        <th>Quest</th>
                        <th>Level</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    {{#each quests}}
                    {{#if (eq this.status "In Progress")}}
                    <tr>
                        <td class="quest-name"><a href="{{@root.wowhead}}/quest={{this.id}}">{{this.title}}</a></td>
                        <td class="quest-level">{{this.questLevel}}</td>
                        <td class="quest-status {{this.status}}">{{this.status}}</td>
                    </tr>
                    {{/if}}
                    {{/each}}
                </tbody>
            </table>
        </div>

        <!-- Completed Quests -->
        <h3 class="is-size-5 collapsible">
            Completed
            <span class="collapse-icon">▼</span>
        </h3>
        <div class="collapsible-content">
            <table class="table is-striped is-hoverable is-fullwidth">
                <thead>
                    <tr>
                        <th>Quest</th>
                        <th>Level</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    {{#each quests}}
                    {{#if (eq this.status "Completed")}}
                    <tr>
                        <td class="quest-name"><a href="{{@root.wowhead}}/quest={{this.id}}">{{this.title}}</a></td>
                        <td class="quest-level">{{this.questLevel}}</td>
                        <td class="quest-status {{this.status}}">{{this.status}}</td>
                    </tr>
                    {{/if}}
                    {{/each}}
                </tbody>
            </table>
        </div>
    </div>
</div>
{{/each}}

<script>
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.collapsible').forEach(header => {
        header.addEventListener('click', function(e) {
            // Stop event from bubbling to parent collapsible elements
            e.stopPropagation();
            
            const content = this.nextElementSibling;
            content.classList.toggle('expanded');
            this.classList.toggle('expanded');
        });
    });

    const compareSelect = document.getElementById('compareCharacter');
    const compareButton = document.getElementById('compareButton');

    compareSelect.addEventListener('change', function() {
        compareButton.disabled = !this.value;
    });

    compareButton.addEventListener('click', function() {
        const selected = compareSelect.value;
        if (selected) {
            const [realm, name] = selected.split('/');
            const sanitizedRealm = encodeURIComponent(realm);
            const sanitizedName = encodeURIComponent(name);
            window.location.href = `${window.location.pathname}/compare/${sanitizedRealm}/${sanitizedName}`;
        }
    });
});
</script>