Startsida Utforska Hjälp
Logga in
computer_glamour
/
tcgui-mirror
spegling av https://github.com/tum-lkn/tcgui
1
0
Fork 0
Filer Ärenden 0 Wiki
Bläddra i källkod

Added style to the page. (#9)

* added pure-css

* Simple css design done.

* Finish css design.

* Iamge with demo of activated rule.

* change image with limit.
NMC 6 år sedan
förälder
be2fa96916
incheckning
72c72d24bc
4 ändrade filer med 91 tillägg och 43 borttagningar
Unifierad Vy Visa Diff Statistik
  1. 1 0
      main.py
  2. 10 0
      static/pure-min.css
  3. BIN
      tcgui.png
  4. 80 43
      templates/main.html

+ 1 - 0
main.py
Visa fil 

@@ -26,6 +26,7 @@ app = Flask(__name__)
 
 pattern = None
 
 pattern = None
 
 dev_list = None
 
 dev_list = None
 
 
 
+app.static_folder = "static"
 
 
 
 def parse_arguments():
 
 def parse_arguments():
 
     parser = argparse.ArgumentParser(description="TC web GUI")
 
     parser = argparse.ArgumentParser(description="TC web GUI")

Filskillnaden har hållts tillbaka eftersom den är för stor
+ 10 - 0
static/pure-min.css


BIN
tcgui.png
Visa fil


+ 80 - 43
templates/main.html
Visa fil 

@@ -1,28 +1,39 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
 <head>
 
 <head>
 
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <title>tcgui</title>
 
     <title>tcgui</title>
 
+    <link rel="stylesheet" href="{{ url_for('static', filename='pure-min.css') }}">
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
-<h4>Available Interfaces</h4>
 
-<ul>
 
+
 
+<div style="padding:2em;">
 
+    <h1>TCGUI - {{ rules|length }} Available Interfaces</h1>
 
+    <ul>
 
+        {% for rule in rules %}
 
+            <li><a href="#{{ rule['name'] }}">{{ rule['name'] }}</a></li>
 
+        {% endfor %}
 
+    </ul>
 
     {% for rule in rules %}
 
     {% for rule in rules %}
 
-        <li>
 
-            {{ rule['name'] }}
 
+        <div>
 
+            <h2 id="{{ rule['name'] }}">{{ rule['name'] }}</h2>
 
             <form method="POST" action="{{ url_for('new_rule', interface=rule['name']) }}">
 
             <form method="POST" action="{{ url_for('new_rule', interface=rule['name']) }}">
 
-                <table border="1">
 
+                <table class="pure-table">
 
+                    <thead>
 
+                        <tr>
 
+                            <th>Name</th>
 
+                            <th>Current Value</th>
 
+                            <th>New Value</th>
 
+                            <th>Variance / Correlation</th>
 
+                            <th>New Value</th>
 
+                        </tr>
 
+                    </thead>
 
+                    <tbody>
 
                     <tr>
 
                     <tr>
 
-                        <th>Name</th>
 
-                        <th>Current Value</th>
 
-                        <th>New Value</th>
 
-                        <th>Variance / Correlation</th>
 
-                        <th>New Value</th>
 
-                    </tr>
 
-                    <tr>
 
-                        <td>Rate:</td>
 
-			<td>{{ rule['rate'] }}</td>
 
-                        <td>
 
+                        <td>Rate</td>
 
+			            <td class="tcgui-value-cell">{{ rule['rate'] }}</td>
 
+                        <td class="tcgui-input-cell">
 
                             <input type="number" name="Rate" size="5">
 
                             <input type="number" name="Rate" size="5">
 
                             <select name="rate_unit">
 
                             <select name="rate_unit">
 
                                 {% for unit in units %}
 
                                 {% for unit in units %}
 
@@ -32,53 +43,79 @@
 
                         </td>
 
                         </td>
 
                     </tr>
 
                     </tr>
 
                     <tr>
 
                     <tr>
 
-                        <td>Delay:</td>
 
-                        <td>{{ rule['delay'] }}</td>
 
-                        <td><input type="number" name="Delay" size="5"> ms</td>
 
-                        <td>±{{ rule['delayVariance'] }}</td>
 
-                        <td>±<input type="number" name="DelayVariance" size="5"> ms</td>
 
+                        <td>Delay</td>
 
+                        <td class="tcgui-value-cell">{{ rule['delay'] }}</td>
 
+                        <td class="tcgui-input-cell"><input type="number" name="Delay" size="5"> ms</td>
 
+                        <td class="tcgui-value-cell">±{{ rule['delayVariance'] }}</td>
 
+                        <td class="tcgui-input-cell">±<input type="number" name="DelayVariance" size="5"> ms</td>
 
                     </tr>
 
                     </tr>
 
                     <tr>
 
                     <tr>
 
-                        <td>Loss:</td>
 
-                        <td>{{ rule['loss'] }}</td>
 
-                        <td><input type="number" name="Loss" size="5"> %</td>
 
-                        <td>{{ rule['lossCorrelation'] }}</td>
 
-                        <td><input type="number" name="LossCorrelation" size="5"> %</td>
 
+                        <td>Loss</td>
 
+                        <td class="tcgui-value-cell">{{ rule['loss'] }}</td>
 
+                        <td class="tcgui-input-cell"><input type="number" name="Loss" size="5"> %</td>
 
+                        <td class="tcgui-value-cell">{{ rule['lossCorrelation'] }}</td>
 
+                        <td class="tcgui-input-cell"> <input type="number" name="LossCorrelation" size="5"> %</td>
 
                     </tr>
 
                     </tr>
 
                     <tr>
 
                     <tr>
 
-                        <td>Duplicate:</td>
 
-                        <td>{{ rule['duplicate'] }}</td>
 
-                        <td><input type="number" name="Duplicate" size="5"> %</td>
 
+                        <td>Duplicate</td>
 
+                        <td class="tcgui-value-cell">{{ rule['duplicate'] }}</td>
 
+                        <td class="tcgui-input-cell"><input type="number" name="Duplicate" size="5"> %</td>
 
                     </tr>
 
                     </tr>
 
                     <tr>
 
                     <tr>
 
-                        <td>Reorder:</td>
 
-                        <td>{{ rule['reorder'] }}</td>
 
-                        <td><input type="number" name="Reorder" size="5"> %</td>
 
-                        <td>{{ rule['reorderCorrelation'] }}</td>
 
-                        <td><input type="number" name="ReorderCorrelation" size="5"> %</td>
 
+                        <td>Reorder</td>
 
+                        <td class="tcgui-value-cell">{{ rule['reorder'] }}</td>
 
+                        <td class="tcgui-input-cell"><input type="number" name="Reorder" size="5"> %</td>
 
+                        <td class="tcgui-value-cell">{{ rule['reorderCorrelation'] }}</td>
 
+                        <td class="tcgui-input-cell"> <input type="number" name="ReorderCorrelation" size="5"> %</td>
 
                     </tr>
 
                     </tr>
 
                     <tr>
 
                     <tr>
 
                         <td>Corrupt</td>
 
                         <td>Corrupt</td>
 
-                        <td>{{ rule['corrupt'] }}</td>
 
-                        <td><input type="number" name="Corrupt" size="5"> %</td>
 
+                        <td class="tcgui-value-cell">{{ rule['corrupt'] }}</td>
 
+                        <td class="tcgui-input-cell"><input type="number" name="Corrupt" size="5"> %</td>
 
                     </tr>
 
                     </tr>
 
                     <tr>
 
                     <tr>
 
                         <td>Limit</td>
 
                         <td>Limit</td>
 
-                        <td>{{ rule['limit'] }}</td>
 
-                        <td><input type="number" name="Limit" size="5"></td>
 
+                        <td class="tcgui-value-cell">{{ rule['limit'] }}</td>
 
+                        <td class="tcgui-input-cell"><input type="number" name="Limit" size="5"></td>
 
                     </tr>
 
                     </tr>
 
+                </tbody>
 
                 </table>
 
                 </table>
 
-                <input type="submit" value="Apply Rules">
 
+                <input class="pure-button pure-button-primary" type="submit" value="Apply {{ rule['name'] }} Rules">
 
             </form>
 
             </form>
 
             <form method="POST" action="{{ url_for('remove_rule', interface= rule['name']) }}">
 
             <form method="POST" action="{{ url_for('remove_rule', interface= rule['name']) }}">
 
-                <input type="submit" value="Remove Rules">
 
+                <input class="button-remove pure-button" type="submit" value="Remove {{ rule['name'] }} Rules">
 
             </form>
 
             </form>
 
-        </li>
 
+        </div>
 
     {% endfor %}
 
     {% endfor %}
 
-</ul>
 
+</div>
 
+<script type="text/javascript">
 
+
 
+    var x = document.getElementsByClassName("tcgui-value-cell");
 
+    var i;
 
+    for (i = 0; i < x.length; i++) {
 
+        if(x[i].innerHTML.indexOf("None") === -1 ){
 
+            x[i].style.backgroundColor = "rgb(121, 168, 255)";
 
+        }
 
+        
+    } 
+</script>
 
 <style>
 
 <style>
 
-    th,td {
 
-        text-align: center;
 
+    th,td { 
+        text-align: center; 
+
 
+    }
 
+
 
+    .tcgui-input-cell {
 
+        text-align: left;
 
+    }
 
+
 
+    .button-remove {
 
+        color: white;
 
+        background: rgb(202, 60, 60);
 
+    }
 
+
 
+    .pure-button {
 
+        margin-top: .5em;
 
     }
 
     }
 
 </style>
 
 </style>
 
 </body>
 
 </body>

Vissa filer visades inte eftersom för många filer har ändrats