path: root/views/eventgroup.handlebars

{{#if eventGroupHasCoverImage}}
  <div id="eventImageContainer" style="background-image: url(/events/{{eventGroupData.image}});"></div>
{{else}}
  <div id="genericEventImageContainer" style="background-image: url(/images/seigaiha.png);"></div>
{{/if}}
<div class="row">
  <div class="col-lg">
    <h3 id="eventGroupName" data-event-id="{{eventGroupData.id}}">{{eventGroupData.name}}</h3>
  </div>
  <div class="col-lg-2 ml-2 edit-buttons">
    {{#if editingEnabled}}
      <button type="button" id="editEvent" class="btn btn-success text-nowrap" data-event-id="{{eventGroupData.id}}" data-toggle="modal" data-target="#editModal"><i class="fas fa-edit"></i> Edit group</button>
    {{else}}
      <button type="button" id="editEvent" class="btn btn-success text-nowrap" data-event-id="{{eventGroupData.id}}" data-toggle="modal" data-target="#editTokenModal"><i class="fas fa-edit"></i> Edit group</button>
    {{/if}}
  </div>
</div>
{{#if firstLoad}}
<div class="alert alert-success alert-dismissible fade show mt-4" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  Welcome to your event group! We've just sent you an email with your secret editing link, which you can also see in the address bar above. Haven't got the email? Check your spam or junk folder. To share your event group, use the link you can see just below this message - that way your attendees won't be able to edit or delete your event group!
</div>
{{/if}}
<div class="container my-4 pr-0">
  <div class="row">
    <div class="col-lg-9 card p-0">
      <div class="card">
        <div class="card-body">
          <ul class="fa-ul eventInformation">
            {{#if eventGroupHasHost}}
              <li id="hostName">
                <span class="fa-li">
                  <i class="fas fa-fw fa-user-circle"></i>
                </span>
                <span class="text-muted">Hosted by</span> {{eventGroupData.hostName}}
              </li>
            {{/if}}
            {{#if eventGroupData.url}}
              <li id="eventGroupURL">
                <span class="fa-li">
                  <i class="fas fa-link"></i>
                </span>
                <a href="{{eventGroupData.url}}">
                  {{eventGroupData.url}}
                </a>
              </li>
            {{/if}}
            <li>
              <span class="fa-li">
                <i class="fas fa-share-square"></i>
              </span>
              <a href="https://{{domain}}/group/{{eventGroupData.id}}">https://{{domain}}/group/{{eventGroupData.id}}</a>
              <button type="button" id="copyEventLink" class="eventInformationAction btn btn-outline-secondary btn-sm" data-clipboard-text="https://{{domain}}/group/{{eventGroupData.id}}">
                <i class="fas fa-copy"></i> Copy
              </button>
            </li>
            <li>
              <span class="fa-li">
                <i class="fas fa-rss"></i>
              </span>
              <a
                href="https://{{domain}}/group/{{eventGroupData.id}}/feed.ics">https://{{domain}}/group/{{eventGroupData.id}}/feed.ics</a>&nbsp;
              <button type="button" id="copyFeedLink"
                class="eventInformationAction btn btn-outline-secondary btn-sm"
                data-clipboard-text="https://{{domain}}/group/{{eventGroupData.id}}/feed.ics">
                <i class="fas fa-copy"></i> Copy
              </button>
              <p class="text-muted small">Paste this URL into your calendar app
                to subscribe to a live feed of events from this group.</p>
            </li>
          </ul>
        </div>
      </div> <!-- /card -->
    </div>
    <div class="col-lg-3" id="eventActions">
      <aside class="btn-group-vertical d-flex" role="group" aria-label="Event actions">
        <button type="button" class="btn btn-outline-secondary btn-sm"
          data-event-id="{{eventGroupData.id}}" data-toggle="modal"
          data-target="#subscribeModal">
          <i class="fas fa-envelope"></i> Subscribe to updates
        </button>
        <button type="button" id="exportICS" class="btn btn-outline-secondary
          btn-sm" data-event-id="{{eventGroupData.id}}">
          <i class="fas fa-download"></i> Export as ICS
        </button>
      </aside>
    </div>
  </div>
</div>

{{#if editingEnabled}}
  <div class="alert alert-info">
    <p>To add an event to this group, copy and paste the two codes below into the 'Event Group' box when creating a new event or editing an existing event.</p>
    <div class="table-responsive">
      <table style="width:100%">
        <tr style="border-bottom:1px solid rgba(0,0,0,0.2)">
          <td><strong>Event group ID</strong></td>
          <td><span class="code" id="eventGroupID">{{eventGroupData.id}}</span></td>
        </tr>
        <tr>
          <td><strong>Event group editing password</strong></td>
          <td><span class="code" id="eventGroupEditToken">{{eventGroupData.editToken}}</span></td>
        </tr>
      </table>
    </div>
    
  </div>
{{/if}}

<div class="card mb-4" id="eventDescription">
    <h5 class="card-header">About</h5>  
  <div class="card-body">
    {{{parsedDescription}}}
  </div>
</div>
<div class="card mt-4 mb-4" id="upcomingEvents">
  <h5 class="card-header">Upcoming events</h5>
  <div class="list-group list-group-flush">
  {{#if upcomingEventsExist}}
    {{#each events}}
      {{#unless this.eventHasConcluded}}
        <a href="/{{this.id}}" class="list-group-item list-group-item-action" target="_blank">
          <i class="fas fa-fw fa-calendar-day"></i>
          <strong>{{this.name}}</strong>
          <span class="ml-2 text-muted">{{this.displayDate}}</span>
        </a>
      {{/unless}}
    {{/each}}
  {{else}}
      <div class="list-group-item">No events!</div>
  {{/if}}
  </div>
</div>

{{#if editingEnabled}}
{{> editeventgroupmodal }}

<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="deleteModalLabel">Delete '{{eventGroupData.name}}'</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form id="deleteEventGroupForm" action="/deleteeventgroup/{{eventGroupData.id}}/{{eventGroupData.editToken}}" method="post">
      <div class="modal-body">
        <p>Are you sure you want to delete this event group? This action cannot be undone.</p>
        <p>This will <strong>not</strong> delete the individual events contained in this group. They can be linked to another group later.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-danger">Delete event group</button>
      </div>
      </form>
    </div>
  </div>
</div>

{{/if}}

<div class="modal fade" id="subscribeModal" tabindex="-1" role="dialog"
  aria-labelledby="subscribeModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="subscribeModalLabel">Subscribe to '{{eventGroupData.name}}'</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form id="subscribeForm" action="/subscribe/{{eventGroupData.id}}" method="post">
      <div class="modal-body">
        <div class="form-group">
          <p class="form-text small">Enter your email address to receive updates
            whenever a new event is created in this group.</p>
        </div>
        <div class="form-group">
          <input type="email" class="form-control" id="emailAddress"
          name="emailAddress" placeholder="email@example.com" data-validation="required">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-success">Subscribe</button>
      </div>
      </form>
    </div>
  </div>
</div>

<div class="modal fade" id="editTokenModal" tabindex="-1" role="dialog" aria-labelledby="editTokenModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="editTokenModalLabel">Enter editing password</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form id="verifyTokenForm" action="/verifytoken/group/{{eventGroupData.id}}" method="post">
      <div class="modal-body">
        <div class="form-group">
          <p class="form-text small">Enter the editing password you received by email or were shown when the event was created.</p>
          <div class="form-group">
            <input type="text" class="form-control" id="editToken" name="editToken" placeholder="Get it right!" data-validation="required">
          </div>
          <div class="form-group">
              <div class="alert alert-danger" style="display:none;"></div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Edit group</button>
      </div>
      </form>
    </div>
  </div>
</div>

<script>
window.groupData = {{{ json jsonData }}};
</script>

<script>
  $(document).ready(function() {
    // Save the editing token from the URL, if it is valid
    const eventID = $('#eventName').attr('data-event-id');
    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.has('e')) {
      $.ajax({
        type: "POST",
        url: `/verifytoken/group/${eventID}`,
        data: { editToken: urlParams.get('e') },
        success: function(response, status, xhr) {
          if (xhr.status === 200) {
            addStoredToken(eventID, urlParams.get('e'));
          }
        },
        error: function(response, status, xhr) {
          // The editing token is wrong - remove it
          removeStoredToken(eventID);
          window.location = window.location.pathname;
        }
      });
    } else if (getStoredToken(eventID)) {
      const editToken = getStoredToken(eventID);
      $.ajax({
        type: "POST",
        url: `/verifytoken/group/${eventID}`,
        data: { editToken },
        success: function(response, status, xhr) {
          if (xhr.status === 200) {
            window.location.search = `?e=${editToken}`;
          }
        },
        error: function(response, status, xhr) {
          // The editing token is wrong - remove it
          removeStoredToken(eventID);
        }
      });
    }

    if (urlParams.has('show_edit')) {
      $('#editModal').modal('show');
    }

    new ClipboardJS('#copyEventLink');
    new ClipboardJS('#copyFeedLink');
    autosize($('textarea'));
    $("#exportICS").click(function(){
      let eventGroupID = $(this).attr('data-event-id');
      $.get('/export/group/' + eventGroupID, function(response) {
        downloadFile(response, eventGroupID + '.ics');
      })
    })
    $("#copyEventLink").click(function(){
      $(this).html('<i class="fas fa-copy"></i> Copied!');
      setTimeout(function(){ $("#copyEventLink").html('<i class="fas fa-copy"></i> Copy');}, 5000);
    });
    $("#copyFeedLink").click(function(){
      $(this).html('<i class="fas fa-copy"></i> Copied!');
      setTimeout(function(){ $("#copyFeedLink").html('<i class="fas fa-copy"></i> Copy');}, 5000);
    });

      $('#verifyTokenForm').on('submit', function(e) {
        e.preventDefault();
        let form = $(this);
        $.ajax({
            type: "POST",
            url: form.attr('action'),
            data: form.serialize(),
            success: function(response, status, xhr) {
                if (xhr.status === 200) {
                    // Save the token to localStorage for later
                    addStoredToken($('#eventName').attr('data-event-id'), new FormData(form[0]).get('editToken'));
                    window.location.search = `?e=${new FormData(form[0]).get('editToken')}&show_edit=true`;
                }
            },
            error: function(response, status, xhr) {
               form.find('.alert').text('That editing password is incorrect. Try again.').show();
            }
        });
      });

    $('#deleteEvent').on('click', function() {
        $('#editModal').modal('hide');
    })

    // From https://davidwalsh.name/javascript-download
    function downloadFile(data, fileName, type="text/plain") {
      // Create an invisible A element
      const a = document.createElement("a");
      a.style.display = "none";
      document.body.appendChild(a);

      // Set the HREF to a Blob representation of the data to be downloaded
      a.href = window.URL.createObjectURL(
        new Blob([data], { type })
      );

      // Use download attribute to set set desired file name
      a.setAttribute("download", fileName);

      // Trigger the download by simulating click
      a.click();

      // Cleanup
      window.URL.revokeObjectURL(a.href);
      document.body.removeChild(a);
    }

  });
</script>