New research and technology page

* Added legacyworlds-server-beans-technologies Maven module, including
the player-level DAO and controller.

* Added session classes to carry technology information, modified web
client session façade accordingly

* Various changes to common UI elements (forms, lists, etc...) so the
start and end of some element can be drawn separately

* Added controller, templates and JavaScript for research page
This commit is contained in:
Emmanuel BENOîT 2012-04-07 13:06:03 +02:00
parent 154f215e24
commit 6dcd59d7bc
45 changed files with 2314 additions and 178 deletions
legacyworlds-web-main/Content/Raw/WEB-INF/fm

View file

@ -63,6 +63,9 @@
<div class="button">
<a href="map" title="Map of the universe">Map</a>
</div>
<div class="button">
<a href="research" title="Manage research priorities, implement new technologies and browse known technologies">Research</a>
</div>
<div class="button">
<a href="alliance" title="Alliance">Alliance</a>
</div>

View file

@ -2,7 +2,6 @@
<@page title="Empire">
<#assign ov = data.overview >
<#assign rs = data.research >
<@tabs>

View file

@ -0,0 +1,255 @@
<#--
Macro that starts a research tab for one of the 3 existing modes
Parameters:
curMode The tab to start: R for "in progress", P for pending, K for implemented
-->
<#macro startResearchTab curMode>
<#switch curMode>
<#case 'R'>
<@tabStart "research" "In progress" />
<@rawFormStart "research-set-priorities" "form-priorities" "research" />
<@listviewStart />
<@lv_line headers=true>
<@lv_column width=150>Category</@lv_column>
<@lv_column width="x">Name</@lv_column>
<@lv_column width=100 centered=true>Progress</@lv_column>
<@lv_column width=150 centered=true>Priority</@lv_column>
</@lv_line>
<#break>
<#case 'P'>
<@tabStart "pending" "Pending implementation" />
<@listviewStart />
<@lv_line headers=true>
<@lv_column width=150>Category</@lv_column>
<@lv_column width="x">Name</@lv_column>
<@lv_column width=150 right=true>Cost</@lv_column>
<@lv_column width=100 centered=true>&nbsp;</@lv_column>
</@lv_line>
<#break>
<#case 'K'>
<@tabStart "implemented" "Implemented" />
<@listviewStart />
<@lv_line headers=true>
<@lv_column width=150>Category</@lv_column>
<@lv_column width="x">Name</@lv_column>
</@lv_line>
<#break>
</#switch>
</#macro>
<#--
Macro that finishes a research tab depending on its type
Parameters:
mode The type of tab that is being closed
-->
<#macro endResearchTab mode>
<#switch mode>
<#case 'R'>
<@lv_line headers=true>
<@lv_column width="x" colspan=4>&nbsp;</@lv_column>
</@lv_line>
<@lv_line>
<@lv_column colspan=3>&nbsp;</@lv_column>
<@lv_column centered=true>
<input type="submit" value="Update" class="input" style="margin: 15px 0 0 0" />
</@lv_column>
</@lv_line>
<@listviewEnd />
</form>
<#break>
<#case 'P'>
<#case 'K'>
<@listviewEnd />
<#break>
</#switch>
<@tabEnd />
</#macro>
<#--
Macro that renders an in-progress research entry
Parameters:
entry the entry
-->
<#macro drawInProgressResearch entry>
<@lv_line id="tl-${entry.identifier?xhtml}" class="tech-line">
<@lv_column>${entry.category?xhtml}</@lv_column>
<@lv_column>
<#if entry.name?has_content>
<strong>${entry.name?xhtml}</strong>
<#else>
Unknown technology
</#if>
</@lv_column>
<@lv_column centered=true>${entry.completion} %</@lv_column>
<@lv_column centered=true>
<select name="rp-${entry.identifier?xhtml}" class="input">
<option style="padding: 0 5px" value="0" <#if entry.priority = 0>selected="selected"</#if>>lowest</option>
<option style="padding: 0 5px" value="1" <#if entry.priority = 1>selected="selected"</#if>>low</option>
<option style="padding: 0 5px" value="2" <#if entry.priority = 2>selected="selected"</#if>>normal</option>
<option style="padding: 0 5px" value="3" <#if entry.priority = 3>selected="selected"</#if>>high</option>
<option style="padding: 0 5px" value="4" <#if entry.priority = 4>selected="selected"</#if>>highest</option>
</select>
</@lv_column>
</@lv_line>
</#macro>
<#--
Macro that renders a pending technology
Parameters:
entry the technology
-->
<#macro drawPendingTechnology entry>
<@lv_line id="tl-${entry.identifier?xhtml}" class="tech-line">
<@lv_column>${entry.category?xhtml}</@lv_column>
<@lv_column>
<strong>${entry.name?xhtml}</strong>
</@lv_column>
<@lv_column right=true>
<strong>${entry.price?string(",##0")}</strong> <@abbr_bgc/>
</@lv_column>
<@lv_column right=true>
<#if data.page.cash &gt;= entry.price>
<@rawFormStart "research-implement" "form-implement-${entry.identifier}" entry.identifier />
<input type="hidden" name="technology" value="${entry.identifier?xhtml}" />
<input type="submit" value="Implement" class="input" />
</form>
<#else>
&nbsp;
</#if>
</@lv_column>
</@lv_line>
</#macro>
<#--
Macro that renders an implemented technology
Parameters:
entry the technology
-->
<#macro drawImplementedTechnology entry>
<@lv_line id="tl-${entry.identifier?xhtml}" class="tech-line">
<@lv_column>${entry.category?xhtml}</@lv_column>
<@lv_column>
<strong>${entry.name?xhtml}</strong>
</@lv_column>
</@lv_line>
</#macro>
<#--
Macro that renders a single entry
Parameters:
mode the current tab (see startResearchTab for details)
entry the entry
-->
<#macro drawResearchEntry mode entry>
<#switch mode>
<#case 'R'>
<@drawInProgressResearch entry />
<#break>
<#case 'P'>
<@drawPendingTechnology entry />
<#break>
<#case 'K'>
<@drawImplementedTechnology entry />
<#break>
</#switch>
</#macro>
<#--
Render the visible part of the research page
Parameters:
entries the sorted list of research entries
-->
<#macro renderResearchTabs entries>
<#local prevMode = ''>
<@tabs>
<#list entries as entry>
<#-- Determine type of entry to display -->
<#if entry.implemented?has_content>
<#if entry.implemented>
<#local curMode = 'K'>
<#else>
<#local curMode = 'P'>
</#if>
<#else>
<#local curMode = 'R'>
</#if>
<#-- Start/end tabs -->
<#if curMode != prevMode>
<#if prevMode != ''>
<@endResearchTab prevMode />
</#if>
<@startResearchTab curMode />
<#local prevMode = curMode>
</#if>
<@drawResearchEntry curMode entry />
</#list>
<@endResearchTab prevMode />
</@tabs>
</#macro>
<#--
Render all research information in a hidden layer which will be used by
the client-side code to display more information.
-->
<#macro renderFullResearchData entries>
<div style="display: none">
<#list entries as tech>
<div class="tech-description" id="tdesc-${tech.identifier?xhtml}">
<h4><#if tech.name?has_content>${tech.name?xhtml}<#else>Unknown technology</#if></h4>
<div class="tech-info"><strong>Category:</strong> ${tech.category?xhtml}</div>
<#if tech.description?has_content><div class="tech-info">${tech.description?xhtml}</div></#if>
<#if tech.price?has_content>
<div class="tech-info"><strong>Implementation cost:</strong> ${tech.price?string(",##0")} <@abbr_bgc /></div>
</#if>
<#if tech.dependencies?has_content>
<div class="tech-info"><strong>Depends on:</strong>
<ul>
<#list tech.dependencies as depId>
<li class="dep">${depId}</li>
</#list>
</ul>
</div>
</#if>
<#if tech.reverseDependencies?has_content>
<div class="tech-info"><strong>Required by:</strong>
<ul>
<#list tech.reverseDependencies as depId>
<li class="dep">${depId}</li>
</#list>
</ul>
</div>
</#if>
</div>
</#list>
</div>
<script type="text/javascript" charset="utf-8" src="js/research.js"></script>
</#macro>
<#--
Main research page
-->
<#macro render>
<@page title="Research">
<#local entries = data.researchData>
<@renderResearchTabs entries />
<@renderFullResearchData entries />
</@page>
</#macro>

View file

@ -63,11 +63,14 @@
<div class="button">
<a href="map" title="Carte de l'univers">Carte</a>
</div>
<div class="button">
<a href="research" title="Gestion des priorités de recherche, implémentation et visualisation de technologies">Recherche</a>
</div>
<div class="button">
<a href="alliance" title="Alliance">Alliance</a>
</div>
<div class="button">
<a href="enemies" title="Gèstion des listes de joueurs et alliances ennemis">Listes d'ennemis</a>
<a href="enemies" title="Gestion des listes de joueurs et alliances ennemis">Listes d'ennemis</a>
</div>
<div class="button">
<a href="messages" title="Messages">Messages</a>

View file

@ -2,7 +2,6 @@
<@page title="Empire">
<#assign ov = data.overview >
<#assign rs = data.research >
<@tabs>

View file

@ -0,0 +1,255 @@
<#--
Macro that starts a research tab for one of the 3 existing modes
Parameters:
curMode The tab to start: R for "in progress", P for pending, K for implemented
-->
<#macro startResearchTab curMode>
<#switch curMode>
<#case 'R'>
<@tabStart "research" "En cours" />
<@rawFormStart "research-set-priorities" "form-priorities" "research" />
<@listviewStart />
<@lv_line headers=true>
<@lv_column width=150>Catégorie</@lv_column>
<@lv_column width="x">Nom</@lv_column>
<@lv_column width=100 centered=true>Progrès</@lv_column>
<@lv_column width=150 centered=true>Priorité</@lv_column>
</@lv_line>
<#break>
<#case 'P'>
<@tabStart "pending" "En attente" />
<@listviewStart />
<@lv_line headers=true>
<@lv_column width=150>Catégorie</@lv_column>
<@lv_column width="x">Nom</@lv_column>
<@lv_column width=150 right=true>Coût</@lv_column>
<@lv_column width=100 centered=true>&nbsp;</@lv_column>
</@lv_line>
<#break>
<#case 'K'>
<@tabStart "implemented" "Recherchées" />
<@listviewStart />
<@lv_line headers=true>
<@lv_column width=150>Catégorie</@lv_column>
<@lv_column width="x">Nom</@lv_column>
</@lv_line>
<#break>
</#switch>
</#macro>
<#--
Macro that finishes a research tab depending on its type
Parameters:
mode The type of tab that is being closed
-->
<#macro endResearchTab mode>
<#switch mode>
<#case 'R'>
<@lv_line headers=true>
<@lv_column width="x" colspan=4>&nbsp;</@lv_column>
</@lv_line>
<@lv_line>
<@lv_column colspan=3>&nbsp;</@lv_column>
<@lv_column centered=true>
<input type="submit" value="Modifier" class="input" style="margin: 15px 0 0 0" />
</@lv_column>
</@lv_line>
<@listviewEnd />
</form>
<#break>
<#case 'P'>
<#case 'K'>
<@listviewEnd />
<#break>
</#switch>
<@tabEnd />
</#macro>
<#--
Macro that renders an in-progress research entry
Parameters:
entry the entry
-->
<#macro drawInProgressResearch entry>
<@lv_line id="tl-${entry.identifier?xhtml}" class="tech-line">
<@lv_column>${entry.category?xhtml}</@lv_column>
<@lv_column>
<#if entry.name?has_content>
<strong>${entry.name?xhtml}</strong>
<#else>
Technologie inconnue
</#if>
</@lv_column>
<@lv_column centered=true>${entry.completion} %</@lv_column>
<@lv_column centered=true>
<select name="rp-${entry.identifier?xhtml}" class="input">
<option style="padding: 0 5px" value="0" <#if entry.priority = 0>selected="selected"</#if>>très basse</option>
<option style="padding: 0 5px" value="1" <#if entry.priority = 1>selected="selected"</#if>>basse</option>
<option style="padding: 0 5px" value="2" <#if entry.priority = 2>selected="selected"</#if>>normale</option>
<option style="padding: 0 5px" value="3" <#if entry.priority = 3>selected="selected"</#if>>élevée</option>
<option style="padding: 0 5px" value="4" <#if entry.priority = 4>selected="selected"</#if>>très élevée</option>
</select>
</@lv_column>
</@lv_line>
</#macro>
<#--
Macro that renders a pending technology
Parameters:
entry the technology
-->
<#macro drawPendingTechnology entry>
<@lv_line id="tl-${entry.identifier?xhtml}" class="tech-line">
<@lv_column>${entry.category?xhtml}</@lv_column>
<@lv_column>
<strong>${entry.name?xhtml}</strong>
</@lv_column>
<@lv_column right=true>
<strong>${entry.price?string(",##0")}</strong> <@abbr_bgc/>
</@lv_column>
<@lv_column right=true>
<#if data.page.cash &gt;= entry.price>
<@rawFormStart "research-implement" "form-implement-${entry.identifier}" entry.identifier />
<input type="hidden" name="technology" value="${entry.identifier?xhtml}" />
<input type="submit" value="Implémenter" class="input" />
</form>
<#else>
&nbsp;
</#if>
</@lv_column>
</@lv_line>
</#macro>
<#--
Macro that renders an implemented technology
Parameters:
entry the technology
-->
<#macro drawImplementedTechnology entry>
<@lv_line id="tl-${entry.identifier?xhtml}" class="tech-line">
<@lv_column>${entry.category?xhtml}</@lv_column>
<@lv_column>
<strong>${entry.name?xhtml}</strong>
</@lv_column>
</@lv_line>
</#macro>
<#--
Macro that renders a single entry
Parameters:
mode the current tab (see startResearchTab for details)
entry the entry
-->
<#macro drawResearchEntry mode entry>
<#switch mode>
<#case 'R'>
<@drawInProgressResearch entry />
<#break>
<#case 'P'>
<@drawPendingTechnology entry />
<#break>
<#case 'K'>
<@drawImplementedTechnology entry />
<#break>
</#switch>
</#macro>
<#--
Render the visible part of the research page
Parameters:
entries the sorted list of research entries
-->
<#macro renderResearchTabs entries>
<#local prevMode = ''>
<@tabs>
<#list entries as entry>
<#-- Determine type of entry to display -->
<#if entry.implemented?has_content>
<#if entry.implemented>
<#local curMode = 'K'>
<#else>
<#local curMode = 'P'>
</#if>
<#else>
<#local curMode = 'R'>
</#if>
<#-- Start/end tabs -->
<#if curMode != prevMode>
<#if prevMode != ''>
<@endResearchTab prevMode />
</#if>
<@startResearchTab curMode />
<#local prevMode = curMode>
</#if>
<@drawResearchEntry curMode entry />
</#list>
<@endResearchTab prevMode />
</@tabs>
</#macro>
<#--
Render all research information in a hidden layer which will be used by
the client-side code to display more information.
-->
<#macro renderFullResearchData entries>
<div style="display: none">
<#list entries as tech>
<div class="tech-description" id="tdesc-${tech.identifier?xhtml}">
<h4><#if tech.name?has_content>${tech.name?xhtml}<#else>Technologie inconnue</#if></h4>
<div class="tech-info"><strong>Catégorie:</strong> ${tech.category?xhtml}</div>
<#if tech.description?has_content><div class="tech-info">${tech.description?xhtml}</div></#if>
<#if tech.price?has_content>
<div class="tech-info"><strong>Coût d'implémentation:</strong> ${tech.price?string(",##0")} <@abbr_bgc /></div>
</#if>
<#if tech.dependencies?has_content>
<div class="tech-info"><strong>Requiert:</strong>
<ul>
<#list tech.dependencies as depId>
<li class="dep">${depId}</li>
</#list>
</ul>
</div>
</#if>
<#if tech.reverseDependencies?has_content>
<div class="tech-info"><strong>Requis par:</strong>
<ul>
<#list tech.reverseDependencies as depId>
<li class="dep">${depId}</li>
</#list>
</ul>
</div>
</#if>
</div>
</#list>
</div>
<script type="text/javascript" charset="utf-8" src="js/research.js"></script>
</#macro>
<#--
Main research page
-->
<#macro render>
<@page title="Recherche">
<#local entries = data.researchData>
<@renderResearchTabs entries />
<@renderFullResearchData entries />
</@page>
</#macro>

View file

@ -1,12 +1,21 @@
<#macro form action name="" hash="">
<#macro rawFormStart action name="" hash="">
<form action="${action?url}.action<#if hash != "">#${hash?url}</#if>" method="post">
</#macro>
<#macro formStart action name="" hash="">
<div class="form-container">
<form action="${action?url}.action<#if hash != "">#${hash?url}</#if>" method="post">
<@rawFormStart action name hash />
<table>
<#nested>
</#macro>
<#macro formEnd>
</table>
</form>
</div>
</#macro>
<#macro form action name="" hash="">
<@formStart action name hash />
<#nested>
<@formEnd />
</#macro>
<#macro form_field_line label id>
<tr class="form-field">
<th><label for="ff-${id?xhtml}">${label?xhtml}:</label></th>

View file

@ -1,24 +1,30 @@
<#macro listview>
<#macro listviewStart>
<table class="list-view">
<#nested>
</#macro>
<#macro listviewEnd>
</table>
</#macro>
<#macro listview>
<@listviewStart />
<#nested>
<@listviewEnd />
</#macro>
<#macro lv_line headers=false class="">
<tr<#if class != ""> class="${class}<#if headers>headers</#if>"<#elseif headers> class="headers"</#if>>
<#macro lv_line headers=false class="" id="">
<tr<#if class != ""> class="${class}<#if headers>headers</#if>"<#elseif headers> class="headers"</#if><#if id != ""> id="${id?xhtml}"</#if>>
<#nested>
</tr>
</#macro>
<#macro lv_column width=0 centered=false right=false colspan=0>
<#macro lv_column width=0 centered=false right=false colspan=0 id="">
<#if width?is_string>
<th style="text-align: <#if centered>center<#elseif right>right<#else>left</#if>"<#if colspan gt 1> colspan="${colspan}"</#if>>
<th style="text-align: <#if centered>center<#elseif right>right<#else>left</#if>"<#if colspan gt 1> colspan="${colspan}"</#if><#if id != ""> id="${id?xhtml}"</#if>>
<#nested>
</th>
<#elseif width gt 0>
<th style="width: ${width}px; text-align: <#if centered>center<#elseif right>right<#else>left</#if>"<#if colspan gt 1> colspan="${colspan}"</#if>>
<th style="width: ${width}px; text-align: <#if centered>center<#elseif right>right<#else>left</#if>"<#if colspan gt 1> colspan="${colspan}"</#if><#if id != ""> id="${id?xhtml}"</#if>>
<#nested>
</th>
<#else>
<td style="text-align: <#if centered>center<#elseif right>right<#else>left</#if>"<#if colspan gt 1> colspan="${colspan}"</#if>>
<td style="text-align: <#if centered>center<#elseif right>right<#else>left</#if>"<#if colspan gt 1> colspan="${colspan}"</#if><#if id != ""> id="${id?xhtml}"</#if>>
<#nested>
</td>
</#if>

View file

@ -3,11 +3,17 @@
<#nested>
</div>
</#macro>
<#macro tab id title>
<#macro tabStart id title>
<div class="tab" id="${id?xhtml}">
<h3>${title?xhtml}</h3>
<div class="tab-contents">
<#nested>
</#macro>
<#macro tabEnd>
</div>
</div>
</#macro>
<#macro tab id title>
<@tabStart id title />
<#nested>
<@tabEnd />
</#macro>