From 04db47913e89ae36af6384fa53ccee6a04566371 Mon Sep 17 00:00:00 2001
From: david <david@socialnerds.org>
Date: Fri, 9 Dec 2016 23:06:07 +0100
Subject: [PATCH] reworked ui

---
 factoriocp.py                |   5 +-
 static/css/sticky-footer.css |   6 ++
 views/default.tpl            |  55 +++++++++++++-
 views/footer.tpl             |   2 +-
 views/login.tpl              |  12 ++-
 views/server.tpl             | 141 ++++++++++++++++++++---------------
 6 files changed, 151 insertions(+), 70 deletions(-)

diff --git a/factoriocp.py b/factoriocp.py
index d23950a..d46c66a 100644
--- a/factoriocp.py
+++ b/factoriocp.py
@@ -43,8 +43,9 @@ def get_servers():
     pass
     return [{ "name": "Creative fun", "desc": "A creative vanilla server for tests.", "version": "0.14.20", "status": "online", "port": "34197" },
             { "name": "Vanilla on the rocks", "desc": "Vanilla map with some mods.", "version": "0.14.19", "status": "offline", "port": "34198" },
-            { "name": "Mad enemies", "desc": "Hazardous map. A lot of enemies.", "version": "0.14.19", "status": "online", "port": "34199" },
-            { "name": "Mad enemies2", "desc": "Just a copy of Mad enemies.", "version": "0.14.20", "status": "offline", "port": "34200" }]
+            { "name": "Mad enemies", "desc": "Hazardous map. A lot of enemies.", "version": "0.14.19", "status": "offline", "port": "34199" },
+            { "name": "Online Map", "desc": "A modded map for friends.", "version": "0.14.19", "status": "online", "port": "34200" },
+            { "name": "Mad enemies2", "desc": "Just a copy of Mad enemies.", "version": "0.14.20", "status": "offline", "port": "34201" }]
 
 
 # routing
diff --git a/static/css/sticky-footer.css b/static/css/sticky-footer.css
index 46578d1..61f1fad 100644
--- a/static/css/sticky-footer.css
+++ b/static/css/sticky-footer.css
@@ -8,6 +8,12 @@ body {
   /* Margin bottom by footer height */
   margin-bottom: 60px;
 }
+
+a.nounderline {
+  text-decoration: none;
+  color: dimgrey;
+}
+
 .footer {
   position: absolute;
   bottom: 0;
diff --git a/views/default.tpl b/views/default.tpl
index 56305e1..82127d1 100644
--- a/views/default.tpl
+++ b/views/default.tpl
@@ -3,7 +3,7 @@
 <div class="container">
   <div class="row">
     <div class="col-sm-8">
-    <h1>Servers</h1>
+    <h1>Server overview</h1>
     </div>
     <div class="col-sm-4 text-xs-right">
       <div class="btn-group">
@@ -12,9 +12,8 @@
         </button>
         <div class="dropdown-menu">
           <a class="dropdown-item" href="/">Server overview</a>
-          <div class="dropdown-divider"></div>
           <a class="dropdown-item" href="#">Create server</a>
-          <a class="dropdown-item" href="#">Create server from .zip</a>
+          <a class="dropdown-item" href="#">About</a>
           <div class="dropdown-divider"></div>
           <a class="dropdown-item" href="/logout">Logout</a>
         </div>
@@ -23,7 +22,7 @@
   </div>
   <p class="lead">Control your <a href="http://factorio.com">Factorio</a> game servers from here.</p>
 
-  <table class="table table-hover">
+<!--  <table class="table table-hover">
     <thead>
       <tr>
         <th>Name</th>
@@ -62,5 +61,53 @@
       %end
     </tbody>
   </table>
+-->
+
+<div id="accordion" role="tablist" aria-multiselectable="true">
+
+  %for server in servers:
+    <div class="card">
+      <a class="collapsed nounderline" data-toggle="collapse" data-parent="#accordion" href="#collapse{{server['port']}}" aria-expanded="false" aria-controls="collapse{{server['port']}}">
+      <div class="card-header" role="tab" id="heading{{server['port']}}">
+        <h5 class="mb-0">
+          <div class="row">
+              <div class="col-sm-6">
+              {{ server['name'] }}
+          </div>
+            <div class="col-sm-6 text-xs-right">
+            %if server['status'] == "online":
+              <span class="tag tag-success">{{server['status']}}</span>
+            %else:
+              <span class="tag tag-danger">{{server['status']}}</span>
+            %end
+            </div>
+          </h5>
+        </div>
+      </a>
+
+    <div id="collapse{{server['port']}}" class="collapse" role="tabpanel" aria-labelledby="heading{{server['port']}}">
+      <div class="card-block">
+     <h4 class="card-title">{{ server['desc'] }}</h4>
+    <table class="table">
+      <tr><th>Address</th><td>factorio.bla.com:{{ server['port'] }}</td></tr>
+      <tr><th>Version</th><td>{{ server['version'] }}</td></tr>
+      <tr><th>Admins</th><td><span class="tag tag-default">0bsidian0rder</span></td></tr>
+    </table>
+    <div class="row">
+      <div class="col-sm-4">
+      </div>
+      <div class="col-sm-8 text-xs-right">
+        <a href="#" class="btn btn-outline-success">Start</a>
+        <a href="#" class="btn btn-outline-danger">Stop</a>
+        <a href="/server/{{server['port']}}" class="btn btn-outline-primary">Edit</a>
+      </div>
+    </div>
+      </div>
+    </div>
+  </div>
+  %end
+</div>
+
+
 </div> <!-- Page content -->
 %include('footer.tpl', username=username)
diff --git a/views/footer.tpl b/views/footer.tpl
index b9f15f9..4689694 100644
--- a/views/footer.tpl
+++ b/views/footer.tpl
@@ -1,7 +1,7 @@
   <footer class="footer">
     <div class="container">
       <div class="text-muted">
-        factoriocp v0.1
+        <a href="https://socialg.it/david/factoriocp">{{ app_name }}</a> v0.1
       </div>
     </div>
   </footer>
diff --git a/views/login.tpl b/views/login.tpl
index 3cea904..d8c4394 100644
--- a/views/login.tpl
+++ b/views/login.tpl
@@ -19,7 +19,17 @@
   </head>
 
   <body>
-
+    <!-- Begin alert message -->
+    <div class="container">
+      <p>
+        %if message:
+          <div class="alert alert-{{ message['alert'] }} alert-dismissible" role="alert">
+            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+            {{ message['message'] }}.
+          </div>
+        %end
+      </p>
+    </div> <!-- alert message -->
     <!-- Begin page content -->
     <div class="container">
       <form class="form-signin" action="/login" method="post">
diff --git a/views/server.tpl b/views/server.tpl
index 0874a98..a86fce6 100644
--- a/views/server.tpl
+++ b/views/server.tpl
@@ -2,87 +2,104 @@
 <!-- Begin page content -->
 <div class="container">
   <div class="row">
-    <div class="col-sm-9">
-      %if server['status'] == "online":
-        <h1>{{ server['name'] }}<sup><span class="tag tag-success tag-sm">Online</span></sup></h1>
-      %else:
-        <h1>{{ server['name'] }}<sup><span class="tag tag-danger tag-sm">Offline</span></sup></h1>
-      %end
+    <div class="col-sm-8">
+      <h1>Edit Server</h1>
     </div>
-    <div class="col-sm-3 text-xs-right">
+    <div class="col-sm-4 text-xs-right">
       <div class="btn-group">
         <button type="button" class="btn btn-outline-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
           {{ username }}
         </button>
         <div class="dropdown-menu">
           <a class="dropdown-item" href="/">Server overview</a>
-          <div class="dropdown-divider"></div>
           <a class="dropdown-item" href="#">Create server</a>
-          <a class="dropdown-item" href="#">Create server from .zip</a>
+          <a class="dropdown-item" href="#">About</a>
           <div class="dropdown-divider"></div>
           <a class="dropdown-item" href="/logout">Logout</a>
         </div>
       </div>
     </div>
   </div>
-  <p class="lead">{{ server['desc'] }}</p>
+  <p class="lead">Control your <a href="http://factorio.com">Factorio</a> game server from here.</p>
 
-  <table class="table">
-      <tr>
-        <th>Address</th>
-        <th>Version</th>
-        <th class="text-xs-right">Actions</th>
-      </tr>
-      %if server['status'] == "online":
-        <tr>
-        <td><code>{{ fqdn }}:{{ server['port'] }}</code></td>
-          <td><code>{{ server['version'] }}</code></td>
-          <td class="text-xs-right">
-            <a href="/stop/{{ server['port'] }}" type="button" class="btn btn-outline-danger btn-sm">Stop</a>
-          </td>
-        </tr>
-      %else:
-        <tr>
-          <td><code>{{ fqdn }}:{{ server['port'] }}</code></td>
-          <td><code>{{ server['version'] }}</code></td>
-          <td class="text-xs-right">
-            <a href="/start/{{ server['port'] }}" type="button" class="btn btn-outline-success btn-sm">Start</a>
-            <a href="/delete/{{ server['port'] }}" type="button" class="btn btn-outline-danger btn-sm">Delete</a>
-          </td>
-        </tr>
-      %end
-  </table>
+<div id="accordion" role="tablist" aria-multiselectable="true">
+  <div class="card">
+      <a class="collapsed nounderline" data-toggle="collapse" data-parent="#accordion" href="#collapseOverview" aria-expanded="false" aria-controls="collapseOverview">
+      <div class="card-header" role="tab" id="headingOverview">
+        <h5 class="mb-0">
+          <div class="row">
+              <div class="col-sm-6">
+              {{ server['name'] }}
+          </div>
+            <div class="col-sm-6 text-xs-right">
+            %if server['status'] == "online":
+              <span class="tag tag-success">{{server['status']}}</span>
+            %else:
+              <span class="tag tag-danger">{{server['status']}}</span>
+            %end
+            </div>
+          </h5>
+        </div>
+      </a>
 
-  <p>
-    <h4>Settings</h4>
-    <hr>
-    blabla
-  </p>
+    <div id="collapseOverview" class="collapse in" role="tabpanel" aria-labelledby="headingOverview">
+      <div class="card-block">
+     <h4 class="card-title">{{ server['desc'] }}</h4>
+    <table class="table">
+      <tr><th>Address</th><td>{{ fqdn }}:{{ server['port'] }}</td></tr>
+      <tr><th>Version</th><td>{{ server['version'] }}</td></tr>
+      <tr><th>Status</th><td><span class="tag tag-success">{{ server['status']  }}</span></td></tr>
+    </table>
+    <div class="row">
+      <div class="col-sm-8">
+      </div>
+      <div class="col-sm-4 text-xs-right">
+        <a href="#" class="btn btn-outline-success">Start</a> <a href="#" class="btn btn-outline-danger">Stop</a>
+      </div>
+    </div>
+      </div>
+    </div>
+  </div>
+  <div class="card">
+    <a class="collapsed nounderline" data-toggle="collapse" data-parent="#accordion" href="#collapseSettings" aria-expanded="false" aria-controls="collapseSettings">
+    <div class="card-header" role="tab" id="headingSettings">
+      <h5 class="mb-0">Settings</h5>
+    </div>
+    </a>
+    <div id="collapseSettings" class="collapse" role="tabpanel" aria-labelledby="headingSettings">
+      <div class="card-block">
+        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
 
-  <p>
-    <h4>Backups</h4>
-    <hr>
-    blabla
-  </p>
+      </div>
+    </div>
+  </div>
+  <div class="card">
+    <a class="collapsed nounderline" data-toggle="collapse" data-parent="#accordion" href="#collapseMods" aria-expanded="false" aria-controls="collapseMods">
+    <div class="card-header" role="tab" id="headingMods">
+      <h5 class="mb-0">Mods</h5>
+    </div>
+    </a>
+    <div id="collapseMods" class="collapse" role="tabpanel" aria-labelledby="headingMods">
+      <div class="card-block">
+        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
 
-  <p>
-    <h4>Mods</h4>
-    <hr>
-    blabla
-  </p>
-
-  <p>
-    <h4>Screenshots</h4>
-    <hr>
-    blabla
-  </p>
-
-  <p>
-    <h4>Console</h4>
-    <hr>
-    blabla
-  </p>
+      </div>
+    </div>
+  </div>
 
+  <div class="card">
+    <a class="collapsed nounderline" data-toggle="collapse" data-parent="#accordion" href="#collapseBackups" aria-expanded="false" aria-controls="collapseBackups">
+    <div class="card-header" role="tab" id="headingBackups">
+      <h5 class="mb-0">Backups</h5>
+    </div>
+    </a>
+    <div id="collapseBackups" class="collapse" role="tabpanel" aria-labelledby="headingBackups">
+      <div class="card-block">
+        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+      </div>
+    </div>
+  </div>
+</div>
 
 </div> <!-- Page content -->
 %include('footer.tpl', username=username)