Several Changes

Added Team Self-Management pages (Site must not be 'voting' mode)
Process screenshots on upload, create thumbnail
Change inline screenshots to thumbnails (screenshots can get big)

templates/admin-editteam.html

@@ -20,9 +20,9 @@
     <hr />
   </div>
 
-  <form class="pure-form pure-form-aligned" action="/admin/games/{{ $uuid }}/save" method="POST">
-    <fieldset>
-      <div class="left big-space">
+  <div class="left big-space">
+    <form class="pure-form pure-form-aligned" action="/admin/games/{{ $uuid }}/save" method="POST">
+      <fieldset>
         <a name="game" />
         <h3>Team Game</h3>
         <div class="pure-control-group">
@@ -33,30 +33,30 @@
           <label class="control-label" for="gamedesc">Description</label>
           <textarea id="gamedesc" name="gamedesc" placeholder="Description...">{{ .TemplateData.Game.Description }}</textarea>
         </div>
-        <div class="pure-control-group">
-          <label class="control-label">Screenshots</label>
-          <div class="center-all horizontal-scroll thumbnail-container" id="thumbnail-container">
-          {{ if not .TemplateData.Game.Screenshots }}
-            <a style="margin-top:40px;" class="center-all pure-button pure-button-primary" href="javascript:toggleUploadSSForm();">Upload Screenshot</a>
-          {{ else }}
-            {{ range $i, $v := .TemplateData.Game.Screenshots }}
-            <img data-teamid="{{ $uuid }}" data-ssid="{{ $v.UUID }}" class="thumbnail" alt="{{ $v.Description }}" src="data:image/{{$v.Filetype}};base64,{{ $v.Thumbnail }}" />
-            {{ end }}
-          {{ end }}
-          </div>
-          {{ if .TemplateData.Game.Screenshots }}
-          <div class="right">
-            <a id="toggleUploadSSFormBtn" class="pure-button pure-button-primary" href="javascript:toggleUploadSSForm();">Upload Screenshot</a>
-          </div>
-          {{ end }}
+        <div class="pure-control-group reset-pull">
+          <a href="/admin/teams/{{ $uuid }}" class="pull-left space pure-button pure-button-plain">Cancel</a>
+          <button type="submit" class="pull-right space pure-button pure-button-primary">Update Game</button>
         </div>
+      </fieldset>
+    </form>
+    <div class="pure-control-group">
+      <label class="control-label">Screenshots</label>
+      <div class="center-all horizontal-scroll thumbnail-container" id="thumbnail-container">
+      {{ if not .TemplateData.Game.Screenshots }}
+        <a style="margin-top:40px;" class="center-all pure-button pure-button-primary" href="javascript:toggleUploadSSForm();">Upload Screenshot</a>
+      {{ else }}
+        {{ range $i, $v := .TemplateData.Game.Screenshots }}
+        <img data-teamid="{{ $uuid }}" data-ssid="{{ $v.UUID }}" class="thumbnail" alt="{{ $v.Description }}" src="data:image/{{$v.Filetype}};base64,{{ $v.Thumbnail }}" />
+        {{ end }}
+      {{ end }}
       </div>
-      <div class="pure-control-group reset-pull">
-        <a href="/admin/teams/{{ $uuid }}" class="pull-left space pure-button pure-button-plain">Cancel</a>
-        <button type="submit" class="pull-right space pure-button pure-button-primary">Update Game</button>
+      {{ if .TemplateData.Game.Screenshots }}
+      <div class="right">
+        <a id="toggleUploadSSFormBtn" class="pure-button pure-button-primary" href="javascript:toggleUploadSSForm();">Upload Screenshot</a>
       </div>
-    </fieldset>
-  </form>
+      {{ end }}
+    </div>
+  </div>
 
   <hr />
   <div class="left">
@@ -68,7 +68,6 @@
           <th>Slack ID</th>
           <th>Twitter</th>
           <th>Email</th>
-          <th>Edit</th>
           <th>Remove</th>
         </tr>
       </thead>
@@ -79,9 +78,6 @@
           <td>{{ $v.SlackId }}</td>
           <td>{{ $v.Twitter }}</td>
           <td>{{ $v.Email }}</td>
-          <td>
-            <a href="/admin/teams/{{ $v.UUID }}/edit" class="pure-button pure-button-plain"><i class="fa fa-pencil"></i></a>
-          </td>
           <td>
             <form action="/admin/teams/{{ $uuid }}/deletemember" method="POST">
               <input type="hidden" name="memberid" value="{{ $v.UUID }}"/>

templates/admin-teams.html

@@ -8,7 +8,7 @@
   <thead>
       <tr>
           <th>Name</th>
-          <th>Key</th>
+          <th>Management Link</th>
           <th>Members</th>
           <th>Game</th>
           <th></th>
@@ -18,7 +18,7 @@
       {{ range $i, $v := .TemplateData.Teams }} 
       <tr>
           <td>{{ $v.Name }}</td>
-          <td>{{ $v.UUID }}</td>
+          <td><a href="/team/{{ $v.UUID }}">{{ $v.UUID }}</a></td>
           <td>{{ len $v.Members }}</td>
           <td>{{ $v.Game.Name }}</td>
           <td>

templates/public-teammgmt.html

@@ -0,0 +1,159 @@
+{{ $uuid := .TemplateData.UUID }}
+<div class="center">
+  <div class="left">
+    <h3>{{.TemplateData.Name}}</h3>
+    <hr />
+  </div>
+
+  <div class="left big-space">
+    <form class="pure-form pure-form-aligned" action="/team/{{ $uuid }}/savegame" method="POST">
+      <fieldset>
+        <a name="game" />
+        <h3>Team Game</h3>
+        <div class="pure-control-group">
+          <label class="control-label" for="gamename">Game Name</label>
+          <input id="gamename" name="gamename" value="{{ .TemplateData.Game.Name }}" placeholder="Game Name">
+        </div>
+        <div class="pure-control-group">
+          <label class="control-label" for="gamedesc">Description</label>
+          <textarea id="gamedesc" name="gamedesc" placeholder="Description...">{{ .TemplateData.Game.Description }}</textarea>
+        </div>
+        <div class="pure-control-group reset-pull">
+          <a href="/team/{{ $uuid }}" class="pull-left space pure-button pure-button-plain">Cancel</a>
+          <button type="submit" class="pull-right space pure-button pure-button-primary">Update Game</button>
+        </div>
+      </fieldset>
+    </form>
+    <div class="pure-control-group">
+      <label class="control-label">Screenshots</label>
+      <div class="center-all horizontal-scroll thumbnail-container" id="thumbnail-container">
+      {{ if not .TemplateData.Game.Screenshots }}
+        <a style="margin-top:40px;" class="center-all pure-button pure-button-primary" href="javascript:toggleUploadSSForm();">Upload Screenshot</a>
+      {{ else }}
+        {{ range $i, $v := .TemplateData.Game.Screenshots }}
+        <img data-teamid="{{ $uuid }}" data-ssid="{{ $v.UUID }}" class="thumbnail" alt="{{ $v.Description }}" src="data:image/{{$v.Filetype}};base64,{{ $v.Thumbnail }}" />
+        {{ end }}
+      {{ end }}
+      </div>
+      {{ if .TemplateData.Game.Screenshots }}
+      <div class="right">
+        <a id="toggleUploadSSFormBtn" class="pure-button pure-button-primary" href="javascript:toggleUploadSSForm();">Upload Screenshot</a>
+      </div>
+      {{ end }}
+    </div>
+  </div>
+
+  <hr />
+  <div class="left">
+    <h3>Team Members</h3>
+    <table class="center padding hide">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Slack ID</th>
+          <th>Twitter</th>
+          <th>Email</th>
+          <th>Remove</th>
+        </tr>
+      </thead>
+      <tbody>
+        {{ range $i, $v := .TemplateData.Members }}
+        <tr>
+          <td>{{ $v.Name }}</td>
+          <td>{{ $v.SlackId }}</td>
+          <td>{{ $v.Twitter }}</td>
+          <td>{{ $v.Email }}</td>
+          <td>
+            <form action="/team/{{ $uuid }}/deletemember" method="POST">
+              <input type="hidden" name="memberid" value="{{ $v.UUID }}"/>
+              <button type="submit" class="pure-button pure-button-error"><i class="fa fa-trash"></i></button>
+            </form>
+          </td>
+        </tr>
+        {{ end }}
+        <tr>
+          <td colspan="6">Add a new member</td>
+        </tr>
+        <tr>
+          <td colspan="6" class="padding">
+            <form class="pure-form" action="/team/{{ $uuid }}/savemember" method="POST">
+              <div class="pure-control-group">
+                <input id="newmembername" name="newmembername" value="" placeholder="Member Name" autofocus />
+                <input id="newmemberslackid" name="newmemberslackid" value="" placeholder="@SlackID" />
+                <input id="newmembertwitter" name="newmembertwitter" value="" placeholder="@Twitter" />
+                <input id="newmemberemail" name="newmemberemail" value="" placeholder="user@email.com" />
+                <button type="submit" class="pull-right space-sides pure-button pure-button-primary">Add</button>
+              </div>
+            </form>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div class="pure-control-group reset-pull">
+    <a href="/team/{{ $uuid }}" class="pull-left space pure-button pure-button-plain">Cancel</a>
+  </div>
+</div>
+<div id="uploadscreenshotform" style="display:none;">
+  <h3>Upload Screenshot</h3>
+  <form class="pure-form pure-form-aligned" action="/team/{{ $uuid }}/screenshotupload" method="POST" enctype="multipart/form-data">
+    <div class="pure-control-group" style="margin-bottom:50px;">
+      <input class="file" type="file" name="newssfile" multiple>
+    </div>
+    <a href="javascript:hideModal();" class="pull-left space-sides pure-button">Cancel</a>
+    <button type="submit" class="pull-right space-sides pure-button pure-button-primary">Add</button>
+  </form>
+</div>
+<div id="editscreenshotform" style="display:none;">
+  <div id="editss-container" class="pure-control-group" style="margin-bottom:50px;">
+  </div>
+</div>
+<script>
+  snack.listener(
+    {
+      node:document.getElementById('thumbnail-container'),
+      event:'click',
+      delegate: function(node) {
+        return node.getElementsByTagName('img');
+      }
+    },
+    function() {
+      showEditScreenShotModal(snack.wrap(this)[0]);
+    }
+  );
+
+  function showEditScreenShotModal(img) {
+    var newImg = img.cloneNode();
+    var editSSForm = document.getElementById('editscreenshotform');
+    var cont = document.getElementById('editss-container');
+    while(cont.hasChildNodes()) {
+      cont.removeChild(cont.lastChild);
+    }
+    cont.appendChild(newImg);
+    showModal({
+      title: 'Edit Screenshot',
+      bodyNode: editSSForm,
+      buttons: [
+        { title: 'Delete', class: 'pure-button-error', position: 'right',
+          click: function() {
+            window.location = "/team/{{ $uuid }}/screenshotdelete/"+img.dataset.ssid;
+          }
+        },
+        { title: 'Cancel', class: 'pure-button', position: 'right', click: hideModal }
+      ]
+    });
+    editSSForm.style.display="block";
+    editSSForm.style.height="200px";
+  }
+
+  function toggleUploadSSForm() {
+    var uploadForm = document.getElementById('uploadscreenshotform');
+    showModal({
+      title: 'Upload Screenshot',
+      subtitle: '({{ .TemplateData.Name }})',
+      bodyNode: uploadForm
+    });
+    uploadForm.style.display="block";
+    document.getElementById('modal-body').style.height='165px';
+  }
+</script>

templates/public-voting.html

@@ -104,15 +104,16 @@ function embiggenScreenshot(img) {
     return;
   }
   var container = document.getElementById('embiggenedScreenShot');
-  var clone = ss.cloneNode(true);
-  clone.classList.remove('thumbnail');
   while(container.hasChildNodes()) {
     container.removeChild(container.firstChild);
   }
   var clickToCloseMsg = document.createElement('div');
   clickToCloseMsg.innerText = "Click Image to Close";
+  var oImg = document.createElement("img");
+  oImg.setAttribute('src', '/image/'+ss.dataset.teamid+'/'+ss.dataset.ssid);
+  oImg.setAttribute('alt', ss.getAttribute('alt'));
   container.appendChild(clickToCloseMsg);
-  container.appendChild(clone);
+  container.appendChild(oImg);
   container.classList.remove('hidden');
 }