Actions

Template

JourneyPage: Difference between revisions

From Dune Awakening DB

← Older editNewer edit →
VisualWikitext
mNo edit summary
mNo edit summary
Line 8: Line 8:
   <!-- Journey Categories (Left Column - 60%) -->
   <!-- Journey Categories (Left Column - 60%) -->
   <div class="journey-categories">
   <div class="journey-categories">
     <!-- A New Beginning Section -->
     <!-- A New Beginning -->
     {{#get_external_data:source=externaldb
     <div class="journey-section" data-section="A New Beginning">
    |from=data_journeys
        <div class="journey-section-header">
    |data=ID=id,Slug=slug,Name=name,Description=description,Tier=tier,Icon=journey_icon,Category=journey_category,Location=location,Reward=reward_json
            <span class="section-icon">🌅</span>
    |cache=yes
            <h3 class="section-title">A New Beginning</h3>
    |where=journey_group='A New Beginning'
        </div>
    |order by=tier, id
        <div class="journey-grid">
     }}
{{#get_external_data: source=externaldb
     {{#if:{{{ID|}}}|
|from=data_journeys
     <div class="journey-section" data-group="A New Beginning">
|data=ID=id,Slug=slug,Name=name,Description=description,Tier=tier,Category=journey_category,Location=location,Icon=journey_icon,Reward=reward_json
      <div class="journey-section-header">
|cache=yes
        <span class="section-icon">🏜️</span>
|where=journey_group='A New Beginning' AND id IS NOT NULL AND name IS NOT NULL AND name != ''
        <span class="section-title">A NEW BEGINNING</span>
|order by=tier, id
      </div>
}}
      <div class="journey-grid">
{{#for_external_table:|<div class="journey-card" data-journey-id="{{{ID}}}" data-name="{{{Name}}}" data-slug="{{{Slug}}}" data-description="{{{Description}}}" data-tier="{{{Tier}}}" data-category="{{{Category}}}" data-location="{{{Location}}}" data-group="A New Beginning" data-reward="{{{Reward}}}" data-icon="{{{Icon|}}}">
        {{#for_external_table:|{{JourneyCard|id={{{ID}}}|name={{{Name}}}|slug={{{Slug}}}|description={{{Description}}}|tier={{{Tier}}}|icon={{{Icon|}}}|category={{{Category}}}|location={{{Location|}}}|reward={{{Reward|}}}|group=A New Beginning}}}}
     <div class="journey-card-inner">
      </div>
        <div class="journey-icon">🌅</div>
        <div class="journey-name">{{{Name}}}</div>
        <div class="journey-tier">TIER {{{Tier}}}</div>
    </div>
     {{#if:{{{Icon|}}}|<div class="journey-bg-source">[[File:{{{Icon}}}|link=]]</div>|}}
</div>
}}
        </div>
    </div>
 
    <!-- Vermillius Gap -->
     <div class="journey-section" data-section="Vermillius Gap">
        <div class="journey-section-header">
            <span class="section-icon">🏜️</span>
            <h3 class="section-title">Vermillius Gap</h3>
        </div>
        <div class="journey-grid">
{{#get_external_data: source=externaldb
|from=data_journeys
|data=ID=id,Slug=slug,Name=name,Description=description,Tier=tier,Category=journey_category,Location=location,Icon=journey_icon,Reward=reward_json
|cache=yes
|where=journey_group='Vermillius Gap' AND id IS NOT NULL AND name IS NOT NULL AND name != ''
|order by=tier, id
}}
{{#for_external_table:|<div class="journey-card" data-journey-id="{{{ID}}}" data-name="{{{Name}}}" data-slug="{{{Slug}}}" data-description="{{{Description}}}" data-tier="{{{Tier}}}" data-category="{{{Category}}}" data-location="{{{Location}}}" data-group="Vermillius Gap" data-reward="{{{Reward}}}" data-icon="{{{Icon|}}}">
    <div class="journey-card-inner">
        <div class="journey-icon">🏜️</div>
        <div class="journey-name">{{{Name}}}</div>
        <div class="journey-tier">TIER {{{Tier}}}</div>
    </div>
    {{#if:{{{Icon|}}}|<div class="journey-bg-source">[[File:{{{Icon}}}|link=]]</div>|}}
</div>
}}
        </div>
    </div>
 
    <!-- Jabal Eifrit & Hagga Rift -->
    <div class="journey-section" data-section="Jabal Eifrit & Hagga Rift">
        <div class="journey-section-header">
            <span class="section-icon">⛰️</span>
            <h3 class="section-title">Jabal Eifrit & Hagga Rift</h3>
        </div>
        <div class="journey-grid">
{{#get_external_data: source=externaldb
|from=data_journeys
|data=ID=id,Slug=slug,Name=name,Description=description,Tier=tier,Category=journey_category,Location=location,Icon=journey_icon,Reward=reward_json
|cache=yes
|where=journey_group='Jabal Eifrit & Hagga Rift' AND id IS NOT NULL AND name IS NOT NULL AND name != ''
|order by=tier, id
}}
{{#for_external_table:|<div class="journey-card" data-journey-id="{{{ID}}}" data-name="{{{Name}}}" data-slug="{{{Slug}}}" data-description="{{{Description}}}" data-tier="{{{Tier}}}" data-category="{{{Category}}}" data-location="{{{Location}}}" data-group="Jabal Eifrit & Hagga Rift" data-reward="{{{Reward}}}" data-icon="{{{Icon|}}}">
    <div class="journey-card-inner">
        <div class="journey-icon">⛰️</div>
        <div class="journey-name">{{{Name}}}</div>
        <div class="journey-tier">TIER {{{Tier}}}</div>
    </div>
    {{#if:{{{Icon|}}}|<div class="journey-bg-source">[[File:{{{Icon}}}|link=]]</div>|}}
</div>
}}
        </div>
    </div>
 
    <!-- Find The Fremen -->
    <div class="journey-section" data-section="Find The Fremen">
        <div class="journey-section-header">
            <span class="section-icon">🏃</span>
            <h3 class="section-title">Find The Fremen</h3>
        </div>
        <div class="journey-grid">
{{#get_external_data: source=externaldb
|from=data_journeys
|data=ID=id,Slug=slug,Name=name,Description=description,Tier=tier,Category=journey_category,Location=location,Icon=journey_icon,Reward=reward_json
|cache=yes
|where=journey_group='Find The Fremen' AND id IS NOT NULL AND name IS NOT NULL AND name != ''
|order by=tier, id
}}
{{#for_external_table:|<div class="journey-card" data-journey-id="{{{ID}}}" data-name="{{{Name}}}" data-slug="{{{Slug}}}" data-description="{{{Description}}}" data-tier="{{{Tier}}}" data-category="{{{Category}}}" data-location="{{{Location}}}" data-group="Find The Fremen" data-reward="{{{Reward}}}" data-icon="{{{Icon|}}}">
    <div class="journey-card-inner">
        <div class="journey-icon">🏃</div>
        <div class="journey-name">{{{Name}}}</div>
        <div class="journey-tier">TIER {{{Tier}}}</div>
     </div>
     </div>
    |}}
     {{#if:{{{Icon|}}}|<div class="journey-bg-source">[[File:{{{Icon}}}|link=]]</div>|}}
   
</div>
    <!-- Vermillius Gap Section -->
}}
    {{#get_external_data:source=externaldb
        </div>
    |from=data_journeys
    |data=ID=id,Slug=slug,Name=name,Description=description,Tier=tier,Icon=journey_icon,Category=journey_category,Location=location,Reward=reward_json
    |cache=yes
    |where=journey_group='Vermillius Gap'
    |order by=tier, id
    }}
     {{#if:{{{ID|}}}|
    <div class="journey-section" data-group="Vermillius Gap">
      <div class="journey-section-header">
        <span class="section-icon">⛰️</span>
        <span class="section-title">VERMILLIUS GAP</span>
      </div>
      <div class="journey-grid">
        {{#for_external_table:|{{JourneyCard|id={{{ID}}}|name={{{Name}}}|slug={{{Slug}}}|description={{{Description}}}|tier={{{Tier}}}|icon={{{Icon|}}}|category={{{Category}}}|location={{{Location|}}}|reward={{{Reward|}}}|group=Vermillius Gap}}}}
      </div>
     </div>
     </div>
    |}}
 
      
     <!-- Miscellaneous -->
     <!-- Jabal Eifrit & Hagga Rift Section -->
     <div class="journey-section" data-section="Miscellaneous">
    {{#get_external_data:source=externaldb
        <div class="journey-section-header">
    |from=data_journeys
            <span class="section-icon">📋</span>
    |data=ID=id,Slug=slug,Name=name,Description=description,Tier=tier,Icon=journey_icon,Category=journey_category,Location=location,Reward=reward_json
            <h3 class="section-title">Miscellaneous</h3>
    |cache=yes
        </div>
    |where=journey_group='Jabal Eifrit & Hagga Rift'
        <div class="journey-grid">
    |order by=tier, id
{{#get_external_data: source=externaldb
    }}
|from=data_journeys
    {{#if:{{{ID|}}}|
|data=ID=id,Slug=slug,Name=name,Description=description,Tier=tier,Category=journey_category,Location=location,Icon=journey_icon,Reward=reward_json
    <div class="journey-section" data-group="Jabal Eifrit & Hagga Rift">
|cache=yes
      <div class="journey-section-header">
|where=journey_group='Miscellaneous' AND id IS NOT NULL AND name IS NOT NULL AND name != ''
        <span class="section-icon">🗿</span>
|order by=tier, id
        <span class="section-title">JABAL EIFRIT & HAGGA RIFT</span>
}}
      </div>
{{#for_external_table:|<div class="journey-card" data-journey-id="{{{ID}}}" data-name="{{{Name}}}" data-slug="{{{Slug}}}" data-description="{{{Description}}}" data-tier="{{{Tier}}}" data-category="{{{Category}}}" data-location="{{{Location}}}" data-group="Miscellaneous" data-reward="{{{Reward}}}" data-icon="{{{Icon|}}}">
      <div class="journey-grid">
    <div class="journey-card-inner">
        {{#for_external_table:|{{JourneyCard|id={{{ID}}}|name={{{Name}}}|slug={{{Slug}}}|description={{{Description}}}|tier={{{Tier}}}|icon={{{Icon|}}}|category={{{Category}}}|location={{{Location|}}}|reward={{{Reward|}}}|group=Jabal Eifrit & Hagga Rift}}}}
        <div class="journey-icon">📋</div>
      </div>
        <div class="journey-name">{{{Name}}}</div>
        <div class="journey-tier">TIER {{{Tier}}}</div>
     </div>
     </div>
    |}}
     {{#if:{{{Icon|}}}|<div class="journey-bg-source">[[File:{{{Icon}}}|link=]]</div>|}}
   
</div>
    <!-- Find The Fremen Section -->
}}
    {{#get_external_data:source=externaldb
        </div>
    |from=data_journeys
    |data=ID=id,Slug=slug,Name=name,Description=description,Tier=tier,Icon=journey_icon,Category=journey_category,Location=location,Reward=reward_json
    |cache=yes
    |where=journey_group='Find The Fremen'
    |order by=tier, id
    }}
     {{#if:{{{ID|}}}|
    <div class="journey-section" data-group="Find The Fremen">
      <div class="journey-section-header">
        <span class="section-icon">👁️</span>
        <span class="section-title">FIND THE FREMEN</span>
      </div>
      <div class="journey-grid">
        {{#for_external_table:|{{JourneyCard|id={{{ID}}}|name={{{Name}}}|slug={{{Slug}}}|description={{{Description}}}|tier={{{Tier}}}|icon={{{Icon|}}}|category={{{Category}}}|location={{{Location|}}}|reward={{{Reward|}}}|group=Find The Fremen}}}}
      </div>
     </div>
     </div>
    |}}
 
      
     <!-- Factions -->
     <!-- Miscellaneous Section -->
     <div class="journey-section" data-section="Factions">
    {{#get_external_data:source=externaldb
        <div class="journey-section-header">
    |from=data_journeys
            <span class="section-icon">🏛️</span>
    |data=ID=id,Slug=slug,Name=name,Description=description,Tier=tier,Icon=journey_icon,Category=journey_category,Location=location,Reward=reward_json
            <h3 class="section-title">Factions</h3>
    |cache=yes
        </div>
    |where=journey_group='Miscellaneous'
        <div class="journey-grid">
    |order by=tier, id
{{#get_external_data: source=externaldb
    }}
|from=data_journeys
    {{#if:{{{ID|}}}|
|data=ID=id,Slug=slug,Name=name,Description=description,Tier=tier,Category=journey_category,Location=location,Icon=journey_icon,Reward=reward_json
    <div class="journey-section" data-group="Miscellaneous">
|cache=yes
      <div class="journey-section-header">
|where=journey_group='Factions' AND id IS NOT NULL AND name IS NOT NULL AND name != ''
        <span class="section-icon">📜</span>
|order by=tier, id
        <span class="section-title">MISCELLANEOUS</span>
}}
      </div>
{{#for_external_table:|<div class="journey-card" data-journey-id="{{{ID}}}" data-name="{{{Name}}}" data-slug="{{{Slug}}}" data-description="{{{Description}}}" data-tier="{{{Tier}}}" data-category="{{{Category}}}" data-location="{{{Location}}}" data-group="Factions" data-reward="{{{Reward}}}" data-icon="{{{Icon|}}}">
      <div class="journey-grid">
    <div class="journey-card-inner">
        {{#for_external_table:|{{JourneyCard|id={{{ID}}}|name={{{Name}}}|slug={{{Slug}}}|description={{{Description}}}|tier={{{Tier}}}|icon={{{Icon|}}}|category={{{Category}}}|location={{{Location|}}}|reward={{{Reward|}}}|group=Miscellaneous}}}}
        <div class="journey-icon">🏛️</div>
      </div>
        <div class="journey-name">{{{Name}}}</div>
        <div class="journey-tier">TIER {{{Tier}}}</div>
     </div>
     </div>
    |}}
     {{#if:{{{Icon|}}}|<div class="journey-bg-source">[[File:{{{Icon}}}|link=]]</div>|}}
   
</div>
    <!-- Factions Section -->
}}
    {{#get_external_data:source=externaldb
        </div>
    |from=data_journeys
    |data=ID=id,Slug=slug,Name=name,Description=description,Tier=tier,Icon=journey_icon,Category=journey_category,Location=location,Reward=reward_json
    |cache=yes
    |where=journey_group='Factions'
    |order by=tier, id
    }}
     {{#if:{{{ID|}}}|
    <div class="journey-section" data-group="Factions">
      <div class="journey-section-header">
        <span class="section-icon">🏛️</span>
        <span class="section-title">FACTIONS</span>
      </div>
      <div class="journey-grid">
        {{#for_external_table:|{{JourneyCard|id={{{ID}}}|name={{{Name}}}|slug={{{Slug}}}|description={{{Description}}}|tier={{{Tier}}}|icon={{{Icon|}}}|category={{{Category}}}|location={{{Location|}}}|reward={{{Reward|}}}|group=Factions}}}}
      </div>
     </div>
     </div>
    |}}
   </div>
   </div>


Line 173: Line 209:
</div>
</div>


<!-- Initialize journey data from HTML attributes -->
<script>
<script>
// Build journey data from HTML data attributes
// Build journey data from HTML data attributes
Line 210: Line 245:
})();
})();
</script>
</script>
<!-- Popup container will be added by JavaScript -->
</includeonly><noinclude>
</includeonly><noinclude>
{{Documentation}}
{{Documentation}}
== Journey Page Template ==
This template displays the journey tracking system for Dune Awakening.
=== Usage ===
Simply add <code><nowiki>{{JourneyPage}}</nowiki></code> to any page where you want the journey tracker to appear.
=== Features ===
* Displays all journeys grouped by category
* Interactive journey cards that show details when clicked
* Progress tracking with checkboxes
* Material prep list for each journey
* Video guide links (when available)
* Responsive design for different screen sizes
=== Dependencies ===
* Template:JourneyPage/styles.css - Styling
* MediaWiki:Common.js - JavaScript functionality
=== Database Tables ===
This template pulls data from:
* data_journeys - Main journey information
* data_journey_objectives - Objectives for each journey
* data_journey_tasks - Tasks within objectives
* data_journey_task_components - Materials needed for tasks
[[Category:Dune Templates]]
[[Category:Interactive Templates]]
</noinclude>
</noinclude>

Revision as of 01:36, 26 May 2025

Template:Documentation

Journey Page Template

This template displays the journey tracking system for Dune Awakening.

Usage

Simply add {{JourneyPage}} to any page where you want the journey tracker to appear.

Features

  • Displays all journeys grouped by category
  • Interactive journey cards that show details when clicked
  • Progress tracking with checkboxes
  • Material prep list for each journey
  • Video guide links (when available)
  • Responsive design for different screen sizes

Dependencies

  • Template:JourneyPage/styles.css - Styling
  • MediaWiki:Common.js - JavaScript functionality

Database Tables

This template pulls data from:

  • data_journeys - Main journey information
  • data_journey_objectives - Objectives for each journey
  • data_journey_tasks - Tasks within objectives
  • data_journey_task_components - Materials needed for tasks
Retrieved from "https://dunedb.com/index.php?title=Template:JourneyPage&oldid=662"