Actions

Template

JourneyPage: Difference between revisions

From Dune Awakening DB

Newer edit →
VisualWikitext
Created page with "<templatestyles src="Template:JourneysPage/styles.css" /> <div class="journeys-page-container"> <div class="journeys-main-content"> <div class="journeys-tabs"> <span class="journeys-tab">{{{tab_z_name|Z}}}</span> <span class="journeys-tab">{{{tab_c_name|C}}}</span> <span class="journeys-tab active">{{{tab_story_name|STORY}}}</span> </div> {{#get_external_data:source=externaldb |from=data_journ..."
 
mNo edit summary
Line 1: Line 1:
<templatestyles src="Template:JourneysPage/styles.css" />
<includeonly><templatestyles src="Template:JourneyPage/styles.css" />
<div class="dune-breadcrumb-nav">
  <span id="menuRadialTrigger" class="menu-button-wrapper" style="cursor:pointer;">[[File:MenuButton.png|100px|link=|alt=Menu]]</span><span class="dune-breadcrumb-separator">/</span>[[Main Page|Home]]<span class="dune-breadcrumb-separator">/</span>[[Journeys]]<span class="dune-breadcrumb-separator">/</span><span>Journey Tracker</span>
</div>


<div class="journeys-page-container">
<!-- Alternative: Let JavaScript build the data structure from HTML data attributes -->
<!-- This avoids complex JSON generation in templates -->


    <div class="journeys-main-content">
<!-- Main Journey Container -->
        <div class="journeys-tabs">
<div class="journey-main-container">
            <span class="journeys-tab">{{{tab_z_name|Z}}}</span>
  <!-- Journey Categories (Left Column - 60%) -->
            <span class="journeys-tab">{{{tab_c_name|C}}}</span>
  <div class="journey-categories">
            <span class="journeys-tab active">{{{tab_story_name|STORY}}}</span>
    <!-- Get unique journey groups -->
    {{#get_external_data:source=externaldb
    |from=data_journeys
    |data=Group=journey_group
    |cache=yes
    |group by=journey_group
    |order by=journey_group
    }}
    {{#for_external_table:|
      <div class="journey-section" data-group="{{{Group}}}">
        <div class="journey-section-header">
          <span class="section-icon">{{#invoke:JourneySystem|getGroupIcon|{{{Group}}}}}</span>
          <span class="section-title">{{{Group}}}</span>
         </div>
         </div>
 
        <div class="journey-grid">
        {{#get_external_data:source=externaldb
          <!-- Get journeys for this group -->
            |from=data_journeys
          {{#get_external_data:source=externaldb
            |data=JourneyID=id,Slug=slug,Name=name,ImageSlug=image_file_slug |where=journey_category='STORY' |order by=tier, id
          |from=data_journeys
            |cache=yes
          |data=ID=id,Slug=slug,Name=name,Description=description,Tier=tier,Icon=journey_icon,Category=journey_category,Location=location,Reward=reward_json
        }}
          |cache=yes
        <div class="journey-group">
          |where=journey_group='{{{Group}}}'
            <div class="journey-card-grid">
          |order by=tier, id
            {{#for_external_table:|
          }}
                {{#vardefine:cardImage|{{#if:{{{ImageSlug|}}}|File:Journey_{{{ImageSlug}}}_Card.png|File:Journey_Placeholder_Card.png}} }} <div class="journey-card {{#ifeq: {{{Slug}}} | {{{selected_journey_slug|}}} | active-journey }}">
          {{#for_external_table:|
                    <div class="journey-card-border-outer">
            <div class="journey-card"  
                        <div class="journey-card-border-inner">
                data-journey-id="{{{ID}}}"
                            <div class="journey-card-image-wrapper">
                data-group="{{{Group}}}"
                                <img src="{{#var:cardImage}}" alt="{{{Name}}}">
                data-name="{{{Name}}}"
                            </div>
                data-description="{{#invoke:JourneySystem|escapeHtml|{{{Description}}}}}"
                            <div class="journey-card-title-container">
                data-tier="{{{Tier}}}"
                                <span class="journey-card-title-text">{{{Name}}}</span>
                data-slug="{{{Slug}}}"
                            </div>
                data-category="{{{Category}}}"
                        </div>
                data-location="{{{Location|}}}"
                    </div>
                data-reward='{{{Reward|}}}'>
                 </div>
              <div class="journey-card-inner">
            }}
                <div class="journey-icon">{{#invoke:JourneySystem|getIcon|{{{Icon}}}|{{{Group}}}}}</div>
            {{! <div class="journey-card locked empty"></div> }}
                <div class="journey-name">{{{Name}}}</div>
            {{! <div class="journey-card locked empty"></div> }}
                 <div class="journey-tier">Tier {{{Tier}}}</div>
              </div>
             </div>
             </div>
          }}
         </div>
         </div>
      </div>
    }}
  </div>


        <div class="journey-section-label">
  <!-- Journey Details Panel (Right Column - 40%) -->
            {{{section_vermillius_name|VERMILLIUS GAP}}}
  <div class="journey-details-panel" id="journeyDetailsPanel">
        </div>
    <div class="journey-details-header">
 
      <div class="journey-tier-badge">
         {{#get_external_data:source=externaldb
         <span class="tier-number">1</span>
            |from=data_journeys
      </div>
            |data=JourneyID=id,Slug=slug,Name=name,ImageSlug=image_file_slug
      <h2 class="journey-title">SELECT A JOURNEY</h2>
            |where=journey_category='Vermillius Gap' |order by=tier, id
      <span class="completion-status">0% COMPLETE</span>
            |cache=yes
    </div>
        }}
   
        <div class="journey-group">
    <div class="journey-description">Click on any journey card to view objectives and track your progress.</div>
            <div class="journey-card-grid">
   
            {{#for_external_table:|
    <div class="journey-rewards">
                {{#vardefine:cardImage|{{#if:{{{ImageSlug|}}}|File:Journey_{{{ImageSlug}}}_Card.png|File:Journey_Placeholder_Card.png}} }}
      <div class="rewards-header">REWARD</div>
                <div class="journey-card {{#ifeq: {{{Slug}}} | {{{selected_journey_slug|}}} | active-journey }}">
      <div class="rewards-content">
                    <div class="journey-card-border-outer">
        <span class="xp-icon">XP</span>
                        <div class="journey-card-border-inner">
        <span class="xp-amount">--</span>
                            <div class="journey-card-image-wrapper">
      </div>
                                <img src="{{#var:cardImage}}" alt="{{{Name}}}">
    </div>
                            </div>
   
                            <div class="journey-card-title-container">
    <div class="journey-objectives">
                                <span class="journey-card-title-text">{{{Name}}}</span>
      <div class="objectives-header">OBJECTIVES</div>
                            </div>
      <div class="objectives-list">
                        </div>
        <div class="objective-item">
                    </div>
          <div class="objective-header">
                </div>
            <div class="objective-title" style="color: var(--color-secondary);">Select a journey to view objectives</div>
            }}
          </div>
            </div>
         </div>
         </div>
      </div>
     </div>
     </div>


     <div class="journeys-sidebar">
     <div class="journey-actions">
        {{#get_external_data:source=externaldb
      <button class="action-button view-items" disabled>
            |from=data_journeys
        <span class="button-icon">📋</span>
            |data=SelectedJourneyID=id,SelectedName=name,SelectedDescription=description,SelectedRewardJSON=reward_json
        View Item Prep List
            |where=slug='{{{selected_journey_slug}}}' |limit=1
      </button>
            |cache=yes
      <button class="action-button view-guide" disabled>
        }}
        <span class="button-icon">▶️</span>
        {{#for_external_table:| {{#vardefine:journeyName|{{{SelectedName}}}}}
         View Guide
            {{#vardefine:journeyDesc|{{{SelectedDescription}}}}}
      </button>
            {{#vardefine:journeyIDForObjectives|{{{SelectedJourneyID}}}}}
            {{#vardefine:rewardJson|{{{SelectedRewardJSON}}}}}
 
            <div class="journey-details-card">
                <div class="journey-details-content">
                    <div class="journey-details-header">
                        <h2 class="selected-journey-title">{{#var:journeyName}}</h2>
                        <div class="selected-journey-progress">
                            <span class="progress-text">{{{progress_text_override|0% COMPLETE}}}</span>
                            <div class="progress-bar-container">
                                <div class="progress-bar-fill" style="width: {{{progress_percent_override|0}}}%;"></div>
                            </div>
                        </div>
                    </div>
 
                    <div class="selected-journey-description">
                        <p>{{#invoke:Plaintext|parse|{{#var:journeyDesc}}}}</p> </div>
 
                    <div class="selected-journey-rewards">
                        <h3 class="details-section-title">REWARD</h3>
                        <p class="reward-text">
                            {{#if: {{#var:rewardJson}} |
                                XP {{#invoke:StringJson|get|{{#var:rewardJson}}|xp|notfound=0}}
                                | No reward data.
                            }}
                        </p>
                    </div>
 
                    <div class="selected-journey-objectives">
                        <h3 class="details-section-title">OBJECTIVES</h3>
                        <ul>
                        {{#get_external_data:source=externaldb
                            |from=data_journey_objectives
                            |data=ObjectiveID=id,ObjectiveTitle=title,ObjectiveGoalCount=goal_count
                            |where=journey_id={{#var:journeyIDForObjectives}}
                            |order by=seq
                            |cache=yes
                        }}
                        {{#for_external_table:|
                            {{#vardefine:objTitle|{{{ObjectiveTitle}}}}}
                            {{#vardefine:objGoal|{{{ObjectiveGoalCount|1}}}}} {{#vardefine:objID|{{{ObjectiveID}}}}}
 
                            {{#get_external_data:source=externaldb|from=data_journey_tasks
                                |data=PartyCompletable=party_completable
                                |where=objective_id={{#var:objID}} AND party_completable=1
                                |limit=1
                                |cache=yes
                            }}
                            {{#vardefine:partyText|{{#for_external_table:|Completable by a party member}}}}
 
                            <li class="objective-item {{{objective_status_{{{!}}var:objID}|incomplete}}}">
                                <span class="objective-status-icon"></span>
                                <span class="objective-text">{{#var:objTitle}}</span>
                                {{#if: {{#var:objGoal}} |
                                    <span class="objective-meta">
                                        {{{objective_current_{{{!}}var:objID}|0}}}/{{#var:objGoal}} </span>
                                }}
                                {{#if: {{#var:partyText}} |
                                    <span class="objective-subtext">({{#var:partyText}})</span>
                                }}
                            </li>
                        }} </ul>
                    </div>
 
                    <div class="selected-journey-actions">
                        <button class="journey-track-button">
                            <span class="track-button-keybind">T</span> TRACK
                        </button>
                    </div>
                </div>
            </div>
         }} {{#if:{{#var:journeyName|}}||
            <div class="journey-details-card">
                <div class="journey-details-content">
                    <p>Select a journey to see details, or no journey specified.</p>
                </div>
            </div>
        }}
     </div>
     </div>
  </div>
</div>
</div>
<!-- Initialize journey data from HTML attributes -->
<script>
// Build journey data from HTML data attributes
(function() {
    var journeyData = {};
    document.querySelectorAll('.journey-card').forEach(function(card) {
        var group = card.getAttribute('data-group');
        var journey = {
            id: parseInt(card.getAttribute('data-journey-id')),
            name: card.getAttribute('data-name'),
            slug: card.getAttribute('data-slug'),
            description: card.getAttribute('data-description'),
            tier: parseInt(card.getAttribute('data-tier')),
            category: card.getAttribute('data-category'),
            location: card.getAttribute('data-location'),
            group: group,
            reward_json: {}
        };
       
        // Parse reward JSON
        var rewardStr = card.getAttribute('data-reward');
        if (rewardStr) {
            try {
                journey.reward_json = JSON.parse(rewardStr);
            } catch(e) {}
        }
       
        if (!journeyData[group]) {
            journeyData[group] = [];
        }
        journeyData[group].push(journey);
    });
   
    // Store in global variable for JavaScript to use
    window.journeyDataFromHTML = journeyData;
})();
</script>
</includeonly><noinclude>
{{Documentation}}
</noinclude>

Revision as of 15:42, 25 May 2025

Template:Documentation

Retrieved from "https://dunedb.com/index.php?title=Template:JourneyPage&oldid=648"