blackboard.html

<template name="blackboard">

<!-- puzzles w/ index -->
<div class="row-fluid">
  <div id="bb-sidebar" class="span2">
    <ul class="nav nav-list bb-sidenav span2">
      <li><a class="bb-wiki" href="{{wiki title=""}}"
             target="_blank">Codex Wiki</a></li>
      <li class="divider"></li>
      {{#each roundgroups}}
      <li class="nav-header">{{name}}</li>
      {{#each rounds}}
      <li><a title="r{{round_num}}" href="#r{{round._id}}{{updateScrollSpy}}"><i class="icon-chevron-right"></i>
      {{round.name}}</a></li>
      {{/each}}
      {{/each}}
    </ul>
  </div>
  <div id="bb-tables" class="{{#if hideStatus}}span10{{else}}span8{{/if}} {{#if canEdit}}bb-canEdit{{/if}}">
    <!-- content div -->
<div class="btn-toolbar pull-right text-right bb-top-buttons">
    {{#if canEdit}}
     <div class="btn-group">
     <button class="btn btn-mini btn-inverse bb-add-round-group">
       <i class="bb-add-icon icon-plus icon-white"></i>
       Add new round group
     </button>
     </div>
    {{else}}
     <div class="btn-group text-left">
     {{#if notificationsEnabled}}
     <button class="btn btn-small bb-notification-enabled{{#if anyNotificationsEnabled}} btn-inverse{{/if}}">
       <i class="{{#if anyNotificationsEnabled}}icon-bullhorn icon-white{{else}}icon-off{{/if}}"></i>
       Notifications
     </button>
     <button class="btn btn-small dropdown-toggle{{#if anyNotificationsEnabled}} btn-inverse{{/if}}" data-toggle="dropdown">
       <span class="caret"></span>
     </button>
     <ul class="dropdown-menu pull-left bb-notification-controls">
      {{#each notificationStreams}}
        <li><a href="#"><label for="bb-notification-{{name}}">
          <input type="checkbox" id="bb-notification-{{name}}"
                 data-notification-stream="{{name}}"
                 checked="{{notificationStreamEnabled name}}">
        {{label}}
        </label></a></li>
      {{/each}}
     </ul>
     {{else if notificationsAsk}}
     <button class="btn btn-small bb-notification-ask">
       <i class="icon-off"></i>
       Enable notifications
     </button>
     {{/if}}
     </div>
    {{/if}}
<div class="btn-group bb-sort-order">
  <button class="btn btn-small {{#if sortReverse}}active{{/if}}"
          data-sortReverse="true">Newest rounds first</button>
  <button class="btn btn-small {{#unless sortReverse}}active{{/unless}}"
          data-sortReverse="false">Oldest rounds first</button>
</div>
    {{#unless canEdit}}<br/>
<div class="btn-group btn-group-vertical">
  <label class="checkbox bb-hide-solved">
    <input type="checkbox" id="bb-hide-solved-input" checked="{{hideSolved}}">
    Hide solved puzzles
  </label>
  <label class="checkbox bb-hide-rounds-solved-meta">
    <input type="checkbox" id="bb-hide-rounds-solved-meta-input" checked="{{hideRoundsSolvedMeta}}">
    Hide rounds with solved metas
  </label>
  <label class="checkbox bb-compact-mode">
    <input type="checkbox" id="bb-compact-mode" checked="{{compactMode}}">
    Compact mode
  </label>
</div>
    {{/unless}}
</div>
    <h1 align="center" class="bb-blackboard-h1">
      <span class="bb-no-wrap">
      <span class="bb-hide-when-narrower">Codex</span></span> <span class="bb-hide-when-narrow">Puzzle </span><span class="bb-no-wrap">Blackboard
      </span>
    </h1>
  <table class="table table-bordered table-condensed bb-puzzle">
  <thead>
    {{#unless compactMode}}
    <tr>
      <th class="puzzle-name">Name</th>
      <th class="puzzle-answer">Solution</th>
      <th class="puzzle-status">Status</th>
      {{#unless canEdit}}
      <th class="puzzle-working">Working on this</th>
      <th class="puzzle-update">Last update</th>
      {{/unless}}
    </tr>
    {{/unless}}
  </thead>
    {{#each roundgroups}}
    <tr><th colspan="{{nCols}}" id="group{{_id}}">
      <h2 class="bb-editable" data-bbedit="roundgroups/{{_id}}/title">
    {{#if editing "roundgroups" _id "title"}}
      <input type="text" id="roundgroups-{{_id}}-title"
             value="{{name}}"
             class="input-block-level" autofocus />
    {{else}}
      {{#if canEdit}}
        <i class="bb-delete-icon icon-remove pull-left"
           title="Delete this round group"></i>
        <i class="bb-edit-icon icon-pencil pull-right"
           title="Edit the name of this round group"></i>
      {{else}}
        {{link id=_id title="Chat room for round group" chat=true icon="icon-comment" class="pull-right bb-rg-chat"}}
      {{/if}}
      {{name}}
    {{/if}}
      </h2>
    {{#unless compactMode}}{{>blackboard_tags}}{{/unless}}
    {{>blackboard_link}}
  {{#if canEdit}}
  <div class="bb-roundgroup-buttons" data-bbedit="roundgroups/{{_id}}">
     <button class="btn btn-mini btn-inverse bb-add-round">
       <i class="icon-plus icon-white"></i>
       Add new round to this group
     </button>
     <button class="btn btn-mini btn-inverse bb-add-tag">
       <i class="icon-tag icon-white"></i>
       Add new tag to this group
     </button>
     <button class="btn btn-mini btn-inverse bb-move-down">
       <i class="icon-arrow-down icon-white"></i>
       Move group down
     </button>
     <button class="btn btn-mini btn-inverse bb-move-up">
       <i class="icon-arrow-up icon-white"></i>
       Move group up
     </button>
   </div>
  {{/if}}
  </th></tr>
  {{#each rounds}}
      {{> blackboard_round }}
    {{/each}}
    {{/each}}
  </table>
  </div><!-- bb-tables -->
  {{#if hideStatus}}
  <div class="bb-hide-status"><i class='icon-chevron-left'></i></div>
  {{else}}
  <div id="bb-right-sidebar" class="span2"><div>
    <div class="bb-hide-status"><i class='icon-chevron-right'></i></div>
    {{> blackboard_status_grid}}
  </div></div><!-- bb-right-sidebar -->
  {{/if}}
</div><!-- row-fluid -->
</template>

<template name="blackboard_status_grid">
  <div class="bb-status-grid">
    {{#each roundgroups}}
    <div class="bb-status-grid-row {{#if solved}}bb-status-solved{{else}}{{#if stuck this}}bb-status-stuck{{else}}bb-status-unsolved{{/if}}{{/if}}">{{link id=_id}}</div>
    {{#each rounds}}
    <div class="bb-status-grid-row">
      <div class="bb-status-grid-cell">
        <div class="{{#if round.solved}}bb-status-solved{{else}}{{#if stuck round}}bb-status-stuck{{else}}bb-status-unsolved{{/if}}{{/if}}">
          {{link id=round._id title=round.name text=rX}}:
        </div>
      </div><!--
      -->{{#each puzzles}}<!--
      --><div class="bb-status-grid-cell">
        <div class="{{#if puzzle.solved}}bb-status-solved{{else}}{{#if stuck puzzle}}bb-status-stuck{{else}}bb-status-unsolved{{/if}}{{/if}}">
          {{link id=puzzle._id title=puzzle.name text=puzzle_num}}
        </div>
      </div><!--
      -->{{/each}}
    </div>
    {{/each}}
    {{/each}}
  </div><!-- bb-status-grid -->
</template>

<template name="blackboard_round">
  {{#if showRound }}
  <tbody id="r{{round._id}}{{updateScrollSpy}}">
  <tr><th colspan="{{nCols}}">
  <h3 class="bb-editable" data-bbedit="rounds/{{round._id}}/title">
  {{#if editing "rounds" round._id "title"}}
      <input type="text" id="rounds-{{round._id}}-title"
             value="{{round.name}}"
             class="input-block-level" autofocus />
  {{else}}
    {{#if canEdit}}
      <i class="bb-delete-icon icon-remove pull-left"
         title="Delete this round"></i>
      <i class="bb-edit-icon icon-pencil pull-right"
         title="Edit the name of this round"></i>
    {{/if}}
    {{link id=round._id title=rX editing=canEdit}}
    <small>({{rX}}: {{num_solved}}/{{num_puzzles}} puzzles solved)</small>
  {{/if}}
  </h3></th></tr>
  {{#if hasPuzzles}}
    {{! META }}
    {{#if showMeta}}
    <tr class="{{#if stuck round}}bb-status-stuck{{/if}}">
      <td class="puzzle-name"><div>
        {{#unless canEdit}}
          <a href="{{spread_link round.spreadsheet}}" title="Spreadsheet for round" class="pull-right"><i class="icon-th"></i></a>
          {{link id=round._id title="Chat room for round" chat=true class="pull-right" icon="icon-comment"}}
          {{#if round.link}}<a class="pull-right" href="{{round.link}}" title="Link to hunt site"><i class="icon-share-alt"></i></a>{{/if}}
        {{/unless}}
        <b>{{link id=round._id title=rX text="ROUND/META" editing=canEdit}}</b>
        {{#if canEdit}}
        <div class="bb-puzzle-add-move" data-bbedit="rounds/{{round._id}}">
        <button class="btn btn-link bb-add-tag"
             title="Add tag to puzzle">
          <i class="icon-tags"></i>
          <i class="icon-plus"></i>
        </button>
        </div>
        {{/if}}
        {{#unless compactMode}}
        {{#with round}}{{>blackboard_puzzle_tags}}{{/with}}
        {{/unless}}
        {{#with round}}{{>blackboard_link}}{{/with}}
      </div></td>
      <td class="puzzle-answer bb-editable"
          data-bbedit="tags/{{round._id}}/answer/value">
      {{#if editing "tags" round._id "answer" "value"}}
        <input type="text" id="tags-{{round._id}}-answer-value"
               value="{{tag "answer"}}"
               class="input-block-level" autofocus />
      {{else}}
        {{#if canEdit}}
          <i class="bb-edit-icon icon-pencil pull-right"
             title="Change the meta answer for this round"></i>
          {{#if tag "answer"}}
            <i class="bb-delete-icon icon-remove pull-left"
               title="Delete the meta answer for this round"></i>
          {{/if}}
        {{/if}}
        <b>{{tag "answer"}}</b>
      {{/if}}
      </td>
    {{#unless compactMode}}
      <td class="puzzle-status bb-editable"
        data-bbedit="tags/{{round._id}}/status/value">
      {{#if editing "tags" round._id "status" "value"}}
        <input type="text" id="tags-{{round._id}}-status-value"
               value="{{tag "status"}}"
               class="input-block-level" autofocus />
      {{else}}
        {{#if canEdit}}
          <i class="bb-edit-icon icon-pencil pull-right"
             title="Change the status of this round meta"></i>
          {{#if tag "status"}}
            <i class="bb-delete-icon icon-remove pull-left"
               title="Delete the status message for this round meta"></i>
          {{/if}}
        {{/if}}
        {{tag "status"}}
      {{/if}}
      </td>
    {{#unless canEdit}}
    <td class="puzzle-working">
      <div class="{{#if lotsOfPeople whos_working.count}}bb-lots{{/if}}">
      <span class="bb-short">
      {{ whos_working.count }} people
      ({{local_working}}<i class="icon-map-marker"></i>)
      </span>
      <span class="bb-long">
      {{#each whos_working}}{{> nick_presence }} {{/each}}
      </span>
      </div>
    </td>
    <td class="puzzle-update">
      {{#if round.solved}}solved {{pretty_ts timestamp=round.solved style="brief duration"}}
      {{else}}added {{pretty_ts timestamp=round.created style="brief duration"}}
      {{/if}}
    </td>
    {{/unless}}
    {{/unless}}
    </tr>
    {{/if}}

    {{#each puzzles}}
      {{> blackboard_puzzle}}
    {{/each}}
  {{else}}
  <tr><td colspan="{{nCols}}">No puzzles in this round yet.</td></tr>
  {{/if}}
  {{#if canEdit}}
  <tr><td colspan="{{nCols}}">
  <div class="bb-round-buttons" data-bbedit="rounds/{{round._id}}">
     <button class="btn btn-mini btn-inverse bb-add-puzzle">
       <i class="icon-plus icon-white"></i>
       Add new puzzle to this round
     </button>
     <button class="btn btn-mini btn-inverse bb-move-down">
       <i class="icon-arrow-down icon-white"></i>
       Move round down
     </button>
     <button class="btn btn-mini btn-inverse bb-move-up">
       <i class="icon-arrow-up icon-white"></i>
       Move round up
     </button>
  </div>
  </td></tr>
  {{/if}}
  </tbody>
  {{/if}}
</template>

<template name="nick_presence">
<span class="nick {{#unless foreground}}background{{/unless}} {{#if nickNear nick}}near{{/if}}"
      title="{{nickOrName nick}}{{nickLocation nick}}">{{gravatar id=email image="wavatar" size=14 }}</span>
</template>

<template name="blackboard_puzzle">
  <tr class="{{#if stuck puzzle}}bb-status-stuck{{/if}}"><!-- {{id}} -->
    <td class="puzzle-name"><div>{{! div needed to establish relative pos }}
      <div class="bb-editable" data-bbedit="puzzles/{{puzzle._id}}/title">
      {{#if editing "puzzles" puzzle._id "title"}}
        <input type="text" id="puzzles-{{puzzle._id}}-title"
               value="{{puzzle.name}}"
               class="input-block-level" autofocus />
      {{else}}
        {{#if canEdit}}
          <i class="bb-delete-icon icon-remove pull-left"
             title="Delete this puzzle"></i>
          <i class="bb-edit-icon icon-pencil pull-right"
             title="Edit the name of this puzzle"></i>
        {{else}}
          <a href="{{spread_link puzzle.spreadsheet}}" title="Spreadsheet for puzzle" class="pull-right"><i class="icon-th"></i></a>
          {{link id=puzzle._id title="Chat room for puzzle" chat=true class="pull-right" icon="icon-comment"}}
          {{#if puzzle.link}}<a class="pull-right" href="{{puzzle.link}}" title="Link to hunt site"><i class="icon-share-alt"></i></a>{{/if}}
        {{/if}}
        {{link id=puzzle._id title=rXpY editing=canEdit}}
      {{/if}}
      </div>
      {{#if canEdit}}
        <div class="bb-puzzle-add-move" data-bbedit="puzzles/{{puzzle._id}}">
        <button class="btn btn-link bb-add-tag"
             title="Add tag to puzzle">
          <i class="icon-tags"></i>
          <i class="icon-plus"></i>
        </button>
        <button class="btn btn-link bb-move-down"><i class="icon-arrow-down"></i></button>
        <button class="btn btn-link bb-move-up"><i class="icon-arrow-up"></i></button>
        </div>
      {{/if}}
      {{#unless compactMode}}
      {{#with puzzle}}{{>blackboard_puzzle_tags}}{{/with}}
      {{/unless}}
      {{#with puzzle}}{{>blackboard_link}}{{/with}}
    </div></td>
    <td class="puzzle-answer bb-editable"
        data-bbedit="tags/{{puzzle._id}}/answer/value">
      {{#if editing "tags" puzzle._id "answer" "value"}}
        <input type="text" id="tags-{{puzzle._id}}-answer-value"
               value="{{tag "answer"}}"
               class="input-block-level" autofocus />
      {{else}}
        {{#if canEdit}}
          <i class="bb-edit-icon icon-pencil pull-right"
             title="Change the answer of this puzzle"></i>
        {{/if}}
        {{#if tag "answer"}}
          {{#if canEdit}}
            <i class="bb-delete-icon icon-remove pull-left"
               title="Delete the answer to this puzzle"></i>
          {{/if}}
          <span class="answer">{{tag "answer"}}</span>
        {{/if}}
      {{/if}}
    </td>
    {{#unless compactMode}}
    <td class="puzzle-status bb-editable"
        data-bbedit="tags/{{puzzle._id}}/status/value">
      {{#if editing "tags" puzzle._id "status" "value"}}
        <input type="text" id="tags-{{puzzle._id}}-status-value"
               value="{{tag "status"}}"
               class="input-block-level" autofocus />
      {{else}}
        {{#if canEdit}}
          <i class="bb-edit-icon icon-pencil pull-right"
             title="Change the status of this puzzle"></i>
          {{#if tag "status"}}
            <i class="bb-delete-icon icon-remove pull-left"
               title="Delete the status message for this puzzle"></i>
          {{/if}}
        {{/if}}
        {{tag "status"}}
      {{/if}}
    </td>
    {{#unless canEdit}}
    <td class="puzzle-working">
      <div class="{{#if lotsOfPeople whos_working.count}}bb-lots{{/if}}">
      <span class="bb-short">
      {{ whos_working.count }} people
      ({{local_working}}<i class="icon-map-marker"></i>)
      </span>
      <span class="bb-long">
      {{#each whos_working}}{{> nick_presence }} {{/each}}
      </span>
      </div>
    </td>
    <td class="puzzle-update">
      {{#if puzzle.solved}}solved {{pretty_ts timestamp=puzzle.solved style="brief duration"}}
      {{else}}added {{pretty_ts timestamp=puzzle.created style="brief duration"}}
      {{/if}}
    </td>
    {{/unless}}
    {{/unless}}
 </tr>
</template>

<template name="blackboard_tags">
  <dl class="dl-horizontal">{{#each tags _id}}
    <dt class="bb-editable"
        data-bbedit="tags/{{id}}/{{canon}}/name">
      {{#if editing "tags" id canon "name"}}
        <input type="text" id="tags-{{id}}-{{canon}}-name"
               value="{{name}}"
               class="input-block-level" autofocus />
      {{else}}
        {{#if canEdit}}
          <i class="bb-edit-icon icon-pencil pull-left"
             title="Edit the name of this tag"></i>
        {{/if}}
        {{name}}:
      {{/if}}
     </dt>
    <dd class="bb-editable"
        data-bbedit="tags/{{id}}/{{canon}}/value">
      {{#if editing "tags" id canon "value"}}
        <input type="text" id="tags-{{id}}-{{canon}}-value"
               value="{{value}}"
               class="input-block-level" autofocus />
      {{else if canEdit}}
        <i class="bb-delete-icon icon-remove pull-left"
           title="Delete this tag and value"></i>
        <i class="bb-edit-icon icon-pencil pull-right"
           title="Edit the value of this tag"></i>
        {{value}}
      {{else if value}}
        {{linkify value}}
      {{else}}
        &nbsp; {{! make sure right-hand side stays in place! }}
      {{/if}}
    </dd>
  {{/each}}</dl>
</template>

<template name="blackboard_puzzle_tags">
  <table class="bb-tag-table"><tbody>{{#each tags _id}}
        <tr>
          <td class="bb-editable"
              data-bbedit="tags/{{id}}/{{canon}}/name">
            {{#if editing "tags" id canon "name"}}
              <input type="text" id="tags-{{id}}-{{canon}}-name"
                     value="{{name}}"
                     class="input-block-level" autofocus />
            {{else}}
              {{#if canEdit}}
                <i class="bb-edit-icon icon-pencil pull-left"
                   title="Edit the name of this tag"></i>
              {{/if}}
              {{name}}:
            {{/if}}
          </td>
          <td class="bb-editable"
              data-bbedit="tags/{{id}}/{{canon}}/value">
            {{#if editing "tags" id canon "value"}}
              <input type="text" id="tags-{{id}}-{{canon}}-value"
                     value="{{value}}"
                     class="input-block-level" autofocus />
            {{else if canEdit}}
              <i class="bb-delete-icon icon-remove pull-left"
                 title="Delete this tag and value"></i>
              <i class="bb-edit-icon icon-pencil pull-right"
                 title="Change the value of this tag"></i>
              {{value}}
            {{else}}
              {{linkify value}}
            {{/if}}
          </td>
        </tr>
      {{/each}}</tbody></table>
</template>

<template name="blackboard_link">
{{#if canEdit}}
  <table class="bb-tag-table"><tbody>
        <tr>
          <td>Hunt site link:</td>
          <td class="bb-editable"
              data-bbedit="link/{{_id}}">
            {{#if editing "link" _id}}
              <input type="text" id="link-{{_id}}"
                     value="{{./link}}"
                     class="input-block-level" autofocus />
            {{else if canEdit}}
              <i class="bb-edit-icon icon-pencil pull-right"
                 title="Change the value of the hunt site link"></i>
              <a href="{{./link}}">{{./link}}</a>
            {{/if}}
          </td>
        </tr>
  </tbody></table>
{{/if}}
</template>