app/views/timelines/show.html.erb
<%= form_for @timeline, html: { class: 'autosave-form' }, remote: true do |f| %>
<div class="row">
<div class="col s12">
<h1 style="font-size: 3em;">
<% if @timeline.universe %>
<%= link_to @timeline.universe do %>
<i class="material-icons right medium <%= Universe.text_color %> tooltipped" data-tooltip="A timeline in the <%= @timeline.universe.name %> universe."><%= Universe.icon %></i>
<% end %>
<% end %>
<% if user_signed_in? && current_user == @timeline.user %>
<%= link_to edit_timeline_path(@timeline) do %>
<i class="material-icons right medium <%= Timeline.text_color %> tooltipped" data-tooltip="Edit this timeline">edit</i>
<% end %>
<% end %>
<%= @timeline.name %><br />
<small class="grey-text"><%= @timeline.subtitle %></small>
</h1>
<%= simple_format @timeline.description %>
</div>
<div class="col s12">
<% if @timeline.notes.present? || (@timeline.private_notes.present? && user_signed_in? && current_user == @timeline.user) %>
<ul class="hoverable collapsible">
<li>
<div class=" collapsible-header">
<i class="material-icons <%= Timeline.text_color %>"><%= Timeline.icon %></i>
Timeline notes
</div>
<div class="collapsible-body">
<% if @timeline.notes.present? %>
<div class='grey-text uppercase'>Notes</div>
<%= simple_format @timeline.notes %>
<% end %>
<% if @timeline.private_notes.present? && user_signed_in? && current_user == @timeline.user %>
<div class="grey-text uppercase">Private notes (only visible to you)</div>
<%= simple_format @timeline.private_notes %>
<% end %>
<div class="clearfix"></div>
</div>
</li>
</ul>
<% end %>
</div>
</div>
<% end %>
<div class="timeline-viewer" data-timeline-id="<%= @timeline.id %>">
<!--
<div class="filter-bar">
(filter events by character, location, etc)
</div>
-->
<div class="timeline-events-container" data-timeline-id="<%= @timeline.id %>">
<% @timeline.timeline_events.includes(:timeline_event_entities).each do |event| %>
<div class="timeline-event-container" data-event-id="<%= event.id %>" data-timeline-id="<%= @timeline.id %>">
<%= form_for event, html: { class: 'autosave-form' }, remote: true do |f| %>
<%= f.hidden_field :timeline_id %>
<div class="row">
<div class="col l2">
<% if event.time_label.present? %>
<div class="grey-text uppercase">Time label</div>
<%= simple_format event.time_label %>
<% end %>
</div>
<div class="col l1" style="margin-bottom: -60px; margin-left: -7px; margin-right: -40px;">
<%= image_tag 'graphics/timeline-line.webp' %>
</div>
<div class="col l6">
<div class="hoverable clearfix card" style="border-top: 5px solid <%= Timeline.hex_color %>">
<div class="card-content">
<span class="card-title">
<%= simple_format(event.title.presence || 'Untitled event') %>
</span>
<% if event.description.present? %>
<div class="grey-text uppercase">Description</div>
<%= simple_format(event.description) %>
<% end %>
<br />
<% if event.notes.present? %>
<div class="grey-text uppercase">Notes</div>
<%= simple_format(event.notes) %>
<% end %>
</div>
</div>
</div>
<div class="col l3">
<%
event_entities = event.timeline_event_entities.order('entity_type').preload(:entity).group_by(&:entity_type)
%>
<% unless event_entities == {} %>
<div class="grey-text uppercase">
In this event
</div>
<ul class="collapsible">
<% event_entities.each do |entity_type, entity_list| %>
<% entity_list.reject! { |te_entity| te_entity.entity.nil? } %>
<li>
<% klass = content_class_from_name(entity_type) %>
<div class="collapsible-header">
<i class="material-icons <%= klass.text_color %>"><%= klass.icon %></i>
<%= entity_type.pluralize %>
<span class="badge"><%= entity_list.count %></span>
</div>
<div class="collapsible-body">
<% entity_list.each do |te_entity| %>
<div class="chip">
<%= link_to(te_entity.entity.name.presence || "Untitled #{te_entity.entity_type}", te_entity.entity) %>
</div>
<% end %>
</div>
</li>
<% end %>
</ul>
<% end %>
</div>
</div>
<% end %>
</div>
<% end %>
</div>
</div>