Move moreinfo to ajax-requested sub-template

This decreases the DOM size and allows for future speed improvements
(the backend no longer needs to precalculate routes etc for all trains)

3 files changed, 185 insertions, 302 deletions

diff --git a/templates/_train_details.html.ep b/templates/_train_details.html.ep
new file mode 100644
index 0000000..5e904d9
--- /dev/null
+++ b/templates/_train_details.html.ep
@@ -0,0 +1,165 @@
+    <div class="mheader">
+    <div>
+%   if ($departure->{train_no} or $departure->{train_line}) {
+      <span class="train-line <%= $linetype %>"><%= $departure->{train_type} %>
+      <%= $departure->{train_line} // $departure->{train_no} %></span>
+%     if ($departure->{train_line}) {
+        <span class="train-no"><%= $departure->{train_no} %></span>
+%     }
+%   }
+%   else {
+      <span class="train-line"><%= $departure->{train} // q{???} %></span>
+%   }
+    </div>
+    <div>
+%   if ($departure->{origin}) {
+      <span class="train-origin"><%= $departure->{origin} %></span>
+      →
+%   }
+    <span class="train-dest"><%= $departure->{destination} // q{???} %></span>
+    </div>
+%   if ($departure->{is_cancelled}) {
+      <div class="minfo">Fahrt fällt aus</div>
+%   }
+%   elsif (defined $departure->{delay} and $departure->{delay} > 0) {
+      <div class="minfo">+<%= $departure->{delay} %>
+%     if ($departure->{departure_is_cancelled}) {
+        (endet hier)
+%     }
+      </div>
+%   }
+%   if (@{$departure->{replaced_by}}) {
+%     for my $replacement (@{$departure->{replaced_by}}) {
+        <span class="replaced">Ersatzzug: <%= $replacement %></span>
+%     }
+%   }
+%   if (@{$departure->{replacement_for}}) {
+%     for my $replacement (@{$departure->{replacement_for}}) {
+        <span class="replacement">Ersatzzug für <%= $replacement %></span>
+%     }
+%   }
+    </div> <!-- mheader -->
+    <div class="mfooter">
+    <div class="platforminfo">
+%   if ($departure->{scheduled_platform} or $departure->{platform}) {
+      Gleis <%= $departure->{scheduled_platform} // $departure->{platform} %>
+%   }
+%   if ($departure->{scheduled_platform} and $departure->{platform}
+%       and $departure->{scheduled_platform} ne $departure->{platform}) {
+      (heute Gleis <%= $departure->{platform} %>)
+%   }
+%   elsif ($departure->{changed_platform}) {
+      (Gleiswechsel)
+%   }
+    </div> <!-- platforminfo -->
+%   if (not $departure->{is_cancelled}) {
+      <div class="timeinfo">
+%     if ($departure->{sched_arrival}) {
+        Ankunft: <%= $departure->{sched_arrival} %>
+%       if ($departure->{arrival} and $departure->{arrival} ne $departure->{sched_arrival}) {
+          (heute <%= $departure->{arrival} %>)
+%       }
+        <br/>
+%     }
+%     if ($departure->{sched_departure}) {
+        Abfahrt: <%= $departure->{sched_departure} %>
+%       if ($departure->{departure} and $departure->{departure} ne $departure->{sched_departure}) {
+          (heute <%= $departure->{departure} %>)
+%       }
+        <br/>
+%     }
+%     if (not ($departure->{sched_arrival} or $departure->{sched_departure})) {
+        Abfahrt: <%= $departure->{time} %>
+%       if ($departure->{delay}) {
+          (heute +<%= $departure->{delay} %>)
+%       }
+%     }
+      </div> <!-- timeinfo -->
+%     if ($linetype eq 'fern' and $departure->{wr_link}) {
+        <div class="verbose">
+          <a href="/_wr/<%= $departure->{train_no} %>/<%= $departure->{wr_link} %>">Wagenreihung</a>
+        </div>
+%     }
+
+%   }
+%   if ($departure->{route_pre_diff} and $departure->{route_post_diff}) {
+%     if (@{$departure->{route_pre_diff}}) {
+        <div class="mroute">
+          Von:
+%         my $first = 0;
+%         for my $stop (@{$departure->{route_pre_diff}}) {
+%           if ($first++) {
+              <span class="separator">–</span>
+%           }
+            <a href="/<%= $stop->{name} %>#<%= $departure->{train_type} . $departure->{train_no} %>" class="
+%           if ($stop->{isAdditional}) {
+              additional-stop
+%           }
+%           elsif ($stop->{isCancelled}) {
+              cancelled-stop
+%           }
+%           elsif ($self->is_important($stop->{name})) {
+              important-stop
+%           }
+%           else {
+              generic-stop
+%           }
+            "><%= $stop->{name} %></a>
+%         }
+        </div> <!-- mroute -->
+%     }
+%     if (@{$departure->{route_post_diff}}) {
+        <div class="mroute">
+          Nach:
+%         my $first = 0;
+%         for my $stop (@{$departure->{route_post_diff}}) {
+%           if ($first++) {
+              <span class="separator">–</span>
+%           }
+            <a href="/<%= $stop->{name} %>#<%= $departure->{train_type} . $departure->{train_no} %>" class="
+%           if ($stop->{isAdditional}) {
+              additional-stop
+%           }
+%           elsif ($stop->{isCancelled}) {
+              cancelled-stop
+%           }
+%           elsif ($self->is_important($stop->{name})) {
+              important-stop
+%           }
+%           else {
+              generic-stop
+%           }
+            "><%= $stop->{name} %></a>
+%         }
+        </div> <!-- mroute -->
+%     }
+%   }
+%   if ($departure->{moreinfo} and @{$departure->{moreinfo}}) {
+      Meldungen:
+      <ul>
+%     for my $pair (@{$departure->{moreinfo}}) {
+        <li>
+%       if ($pair->[0]->isa('DateTime')) {
+%         if ($pair->[0]->day != $dt_now->day) {
+%           $pair->[0]->set_locale('de_DE');
+%=          $pair->[0]->strftime('%a %H:%M')
+%         }
+%         else {
+%=          $pair->[0]->strftime('%H:%M')
+%         }
+%       }
+%       else {
+%=        $pair->[0]
+%       }
+        :
+        <span class="reason">
+%=      $pair->[1]
+        </span>
+        </li>
+%     }
+%     if ($departure->{route_info}) {
+        <li><%= $departure->{route_info} %></li>
+%     }
+      </ul>
+%   }
+    </div> <!-- mfooter -->
diff --git a/templates/app.html.ep b/templates/app.html.ep
index e65ada5..e29caef 100644
--- a/templates/app.html.ep
+++ b/templates/app.html.ep
@@ -6,6 +6,20 @@
 % else {
 <div class="app applight">
 % }
+<div class="moreinfo collapsed-moreinfo">
+	<div class="mheader">
+		<div>
+			<span class="train-line"></span>
+			<span class="train-no"></span>
+		</div>
+		<div>
+			<span class="train-origin"></span>
+			→
+			<span class="train-dest"></span>
+		</div>
+	</div>
+	<div class="mfooter"></div>
+</div>
 <ul>
 % my $i = 0;
 % my $dt_now = DateTime->now;
@@ -18,13 +32,17 @@
 %     $via_cur++;
 %     $route_str .= $stop . ($via_cur < $via_max ? ' - ' : q{});
 %   }
+    <li
+      data-train="<%= ($departure->{train_type} // '') %> <%= ($departure->{train_no} // $departure->{train} // '') %>"
+      data-from="<%= $departure->{origin} // q{???} %>"
+      data-to="<%= $departure->{destination} // q{???} %>"
 %   my $extraclasses = q{};
 %   if ($departure->{is_cancelled} or $departure->{departure_is_cancelled}) {
 %     $extraclasses .= ' cancelled';
-      <li class="cancelled">
+      class="cancelled">
 %   }
 %   else {
-      <li>
+      >
 %   }
 %   my $linetype = 'bahn';
 %   if ( $departure->{train_type} eq 'S' ) {
@@ -71,174 +89,6 @@
 %     }
       </div>
 %   }
-    <div class="moreinfo collapsed-moreinfo"
-      data-train="<%= ($departure->{train_type} // 'none') . ($departure->{train_no} // 0) %>">
-    <div class="mheader">
-    <div>
-%   if ($departure->{train_no} or $departure->{train_line}) {
-      <span class="train-line <%= $linetype %>"><%= $departure->{train_type} %>
-      <%= $departure->{train_line} // $departure->{train_no} %></span>
-%     if ($departure->{train_line}) {
-        <span class="train-no"><%= $departure->{train_no} %></span>
-%     }
-%   }
-%   else {
-      <span class="train-line"><%= $departure->{train} // q{???} %></span>
-%   }
-    </div>
-    <div>
-%   if ($departure->{origin}) {
-      <span class="train-origin"><%= $departure->{origin} %></span>
-      →
-%   }
-    <span class="train-dest"><%= $departure->{destination} // q{???} %></span>
-    </div>
-%   if ($departure->{is_cancelled}) {
-      <div class="minfo">Fahrt fällt aus</div>
-%   }
-%   elsif (defined $departure->{delay} and $departure->{delay} > 0) {
-      <div class="minfo">+<%= $departure->{delay} %>
-%     if ($departure->{departure_is_cancelled}) {
-        (endet hier)
-%     }
-      </div>
-%   }
-%   if (@{$departure->{replaced_by}}) {
-%     for my $replacement (@{$departure->{replaced_by}}) {
-        <span class="replaced">Ersatzzug: <%= $replacement %></span>
-%     }
-%   }
-%   if (@{$departure->{replacement_for}}) {
-%     for my $replacement (@{$departure->{replacement_for}}) {
-        <span class="replacement">Ersatzzug für <%= $replacement %></span>
-%     }
-%   }
-    </div> <!-- mheader -->
-    <div class="mfooter">
-    <div class="platforminfo">
-%   if ($departure->{scheduled_platform} or $departure->{platform}) {
-      Gleis <%= $departure->{scheduled_platform} // $departure->{platform} %>
-%   }
-%   if ($departure->{scheduled_platform} and $departure->{platform}
-%       and $departure->{scheduled_platform} ne $departure->{platform}) {
-      (heute Gleis <%= $departure->{platform} %>)
-%   }
-%   elsif ($departure->{changed_platform}) {
-      (Gleiswechsel)
-%   }
-    </div> <!-- platforminfo -->
-%   if (not $departure->{is_cancelled}) {
-      <div class="timeinfo">
-%     if ($departure->{sched_arrival}) {
-        Ankunft: <%= $departure->{sched_arrival} %>
-%       if ($departure->{arrival} and $departure->{arrival} ne $departure->{sched_arrival}) {
-          (heute <%= $departure->{arrival} %>)
-%       }
-        <br/>
-%     }
-%     if ($departure->{sched_departure}) {
-        Abfahrt: <%= $departure->{sched_departure} %>
-%       if ($departure->{departure} and $departure->{departure} ne $departure->{sched_departure}) {
-          (heute <%= $departure->{departure} %>)
-%       }
-        <br/>
-%     }
-%     if (not ($departure->{sched_arrival} or $departure->{sched_departure})) {
-        Abfahrt: <%= $departure->{time} %>
-%       if ($departure->{delay}) {
-          (heute +<%= $departure->{delay} %>)
-%       }
-%     }
-      </div> <!-- timeinfo -->
-%     if ($linetype eq 'fern' and $departure->{wr_link}) {
-        <div class="verbose">
-          <a href="/_wr/<%= $departure->{train_no} %>/<%= $departure->{wr_link} %>">Wagenreihung</a>
-        </div>
-%     }
-
-%   }
-%   if ($departure->{route_pre_diff} and $departure->{route_post_diff}) {
-%     if (@{$departure->{route_pre_diff}}) {
-        <div class="mroute">
-          Von:
-%         my $first = 0;
-%         for my $stop (@{$departure->{route_pre_diff}}) {
-%           if ($first++) {
-              <span class="separator">–</span>
-%           }
-            <a href="/<%= $stop->{name} %>#<%= $departure->{train_type} . $departure->{train_no} %>" class="
-%           if ($stop->{isAdditional}) {
-              additional-stop
-%           }
-%           elsif ($stop->{isCancelled}) {
-              cancelled-stop
-%           }
-%           elsif ($self->is_important($stop->{name})) {
-              important-stop
-%           }
-%           else {
-              generic-stop
-%           }
-            "><%= $stop->{name} %></a>
-%         }
-        </div> <!-- mroute -->
-%     }
-%     if (@{$departure->{route_post_diff}}) {
-        <div class="mroute">
-          Nach:
-%         my $first = 0;
-%         for my $stop (@{$departure->{route_post_diff}}) {
-%           if ($first++) {
-              <span class="separator">–</span>
-%           }
-            <a href="/<%= $stop->{name} %>#<%= $departure->{train_type} . $departure->{train_no} %>" class="
-%           if ($stop->{isAdditional}) {
-              additional-stop
-%           }
-%           elsif ($stop->{isCancelled}) {
-              cancelled-stop
-%           }
-%           elsif ($self->is_important($stop->{name})) {
-              important-stop
-%           }
-%           else {
-              generic-stop
-%           }
-            "><%= $stop->{name} %></a>
-%         }
-        </div> <!-- mroute -->
-%     }
-%   }
-%   if ($departure->{moreinfo} and @{$departure->{moreinfo}}) {
-      Meldungen:
-      <ul>
-%     for my $pair (@{$departure->{moreinfo}}) {
-        <li>
-%       if ($pair->[0]->isa('DateTime')) {
-%         if ($pair->[0]->day != $dt_now->day) {
-%           $pair->[0]->set_locale('de_DE');
-%=          $pair->[0]->strftime('%a %H:%M')
-%         }
-%         else {
-%=          $pair->[0]->strftime('%H:%M')
-%         }
-%       }
-%       else {
-%=        $pair->[0]
-%       }
-        :
-        <span class="reason">
-%=      $pair->[1]
-        </span>
-        </li>
-%     }
-%     if ($departure->{route_info}) {
-        <li><%= $departure->{route_info} %></li>
-%     }
-      </ul>
-%   }
-    </div> <!-- mfooter -->
-    </div> <!-- moreinfo -->
 %   if ($departure->{info} and length $departure->{info}) {
       <span class="info">
 %=    $departure->{info}
diff --git a/templates/infoscreen.html.ep b/templates/infoscreen.html.ep
index 1202dd7..0e22b4a 100644
--- a/templates/infoscreen.html.ep
+++ b/templates/infoscreen.html.ep
@@ -70,138 +70,6 @@
 %     }
       </div>
 %   }
-    <div class="moreinfo collapsed-moreinfo">
-    <div class="mheader">
-    <div>
-%   if ($departure->{train_no} or $departure->{train_line}) {
-      <span class="train-line <%= $linetype %>"><%= $departure->{train_type} %>
-      <%= $departure->{train_line} // $departure->{train_no} %></span>
-%     if ($departure->{train_line}) {
-        <span class="train-no"><%= $departure->{train_no} %></span>
-%     }
-%   }
-%   else {
-      <span class="train-line"><%= $departure->{train} // q{???} %></span>
-%   }
-    </div>
-    <div>
-%   if ($departure->{origin}) {
-      <span class="train-origin"><%= $departure->{origin} %></span>
-      →
-%   }
-    <span class="train-dest"><%= $departure->{destination} // q{???} %></span>
-    </div>
-%   if ($departure->{is_cancelled}) {
-      <div class="minfo">Fahrt fällt aus</div>
-%   }
-%   elsif (defined $departure->{delay} and $departure->{delay} > 0) {
-      <div class="minfo">+<%= $departure->{delay} %>
-%     if ($departure->{departure_is_cancelled}) {
-        (endet hier)
-%     }
-      </div>
-%   }
-%   if (@{$departure->{replaced_by}}) {
-%     for my $replacement (@{$departure->{replaced_by}}) {
-        <span class="replaced">Ersatzzug: <%= $replacement %></span>
-%     }
-%   }
-%   if (@{$departure->{replacement_for}}) {
-%     for my $replacement (@{$departure->{replacement_for}}) {
-        <span class="replacement">Ersatzzug für <%= $replacement %></span>
-%     }
-%   }
-    </div> <!-- mheader -->
-    <div class="mfooter">
-    <div class="platforminfo">
-%   if ($departure->{scheduled_platform} or $departure->{platform}) {
-      Gleis <%= $departure->{scheduled_platform} // $departure->{platform} %>
-%   }
-%   if ($departure->{scheduled_platform} and $departure->{platform}
-%       and $departure->{scheduled_platform} ne $departure->{platform}) {
-      (heute Gleis <%= $departure->{platform} %>)
-%   }
-%   elsif ($departure->{changed_platform}) {
-      (Gleiswechsel)
-%   }
-    </div> <!-- platforminfo -->
-%   if (not $departure->{is_cancelled}) {
-      <div class="timeinfo">
-%     if ($departure->{sched_arrival}) {
-        Ankunft: <%= $departure->{sched_arrival} %>
-%       if ($departure->{arrival} and $departure->{arrival} ne $departure->{sched_arrival}) {
-          (heute <%= $departure->{arrival} %>)
-%       }
-        <br/>
-%     }
-%     if ($departure->{sched_departure}) {
-        Abfahrt: <%= $departure->{sched_departure} %>
-%       if ($departure->{departure} and $departure->{departure} ne $departure->{sched_departure}) {
-          (heute <%= $departure->{departure} %>)
-%       }
-        <br/>
-%     }
-%     if (not ($departure->{sched_arrival} or $departure->{sched_departure})) {
-        Abfahrt: <%= $departure->{time} %>
-%       if ($departure->{delay}) {
-          (heute +<%= $departure->{delay} %>)
-%       }
-%     }
-      </div> <!-- timeinfo -->
-%   }
-%   if ($departure->{route_post_diff} and @{$departure->{route_post_diff}}) {
-      <div class="mroute">
-      Über:
-%       my $first = 0;
-%       for my $stop (@{$departure->{route_post_diff} // q{???}}) {
-%         if ($first++) {
-            <span class="separator">–</span>
-%         }
-%         if ($stop->{isAdditional}) {
-            <span class="additional-stop"><%= $stop->{name} %></span>
-%         }
-%         elsif ($stop->{isCancelled}) {
-            <span class="cancelled-stop"><%= $stop->{name} %></span>
-%         }
-%         elsif ($self->is_important($stop->{name})) {
-            <span class="important-stop"><%= $stop->{name} %></span>
-%         }
-%         else {
-            <span class="generic-stop"><%= $stop->{name} %></span>
-%         }
-%       }
-      </div> <!-- mroute -->
-%   }
-%   if ($departure->{moreinfo} and @{$departure->{moreinfo}}) {
-      Meldungen:
-      <ul>
-%     for my $pair (@{$departure->{moreinfo}}) {
-        <li>
-%       if ($pair->[0]->isa('DateTime')) {
-%         if ($pair->[0]->day != $dt_now->day) {
-%           $pair->[0]->set_locale('de_DE');
-%=          $pair->[0]->strftime('%a %H:%M')
-%         }
-%         else {
-%=          $pair->[0]->strftime('%H:%M')
-%         }
-%       }
-%       else {
-%=        $pair->[0]
-%       }
-        :
-        <span class="reason">
-%=      $pair->[1]
-        </span>
-        </li>
-%     }
-%     if ($departure->{route_info}) {
-        <li><%= $departure->{route_info} %></li>
-%     }
-      </ul>
-%   }
-    </div> <!-- mfooter -->
-    </div> <!-- moreinfo -->
 %   if ($departure->{info} and length $departure->{info}) {
       <span class="info">
 %=    $departure->{info}