Startseite Erkunden Hilfe
Anmelden
fgm
/
php__memcache_ui
1
0
Fork 0
Dateien Issues 0 Pull-Requests 0
Quellcode durchsuchen

Added design docs

- inventory: list of individual features in memcache.php
- navigation: list of screens and their tasks
- app_map: various takes on the application map (navigation)
- sample*: UI tests for Google charts.
Frederic G. MARAND vor 14 Jahren
Ursprung
c2657e27aa
Commit
91469579d5
8 geänderte Dateien mit 260 neuen und 0 gelöschten Zeilen
Geteilte Ansicht Diff-Statistik anzeigen
  1. BIN
      doc/app_map-Gliffy.odg
  2. BIN
      doc/app_map-LO_Draw.odg
  3. BIN
      doc/app_map.png
  4. 0 0
      doc/inventory.txt
  5. 14 0
      doc/navigation.txt
  6. 46 0
      doc/sample.css
  7. 85 0
      doc/sample_gauge.html
  8. 115 0
      doc/sample_main.html

BIN
doc/app_map-Gliffy.odg
Datei anzeigen


BIN
doc/app_map-LO_Draw.odg
Datei anzeigen


BIN
doc/app_map.png
Datei anzeigen


+ 0 - 0
doc/Inventory.txt → doc/inventory.txt
Datei anzeigen


+ 14 - 0
doc/navigation.txt
Datei anzeigen 

@@ -0,0 +1,14 @@
 
+Identification/authentification
 
+	UI
 
+		affichage formulaire
 
+		soumission formulaire
 
+		notification d'échec
 
+		notification de succès
 
+	Code
 
+		lecture config (memcache_ui.local.php)
 
+		contrôle d'id/auth
 
+
 
+Tableau de bord
 
+	Instantané
 
+	Historique
 
+

+ 46 - 0
doc/sample.css
Datei anzeigen 

@@ -0,0 +1,46 @@
 
+@CHARSET "UTF-8";
 
+
 
+body {
 
+  margin: 0;
 
+}
 
+
 
+* {
 
+  font-family: Helv, Helvetica, sans-serif;
 
+}
 
+
 
+#header {
 
+  background-color: silver;
 
+  box-shadow: 0 0.1em 0.5em gray50;
 
+  color: white;
 
+  padding: 0.2em 0.5em;
 
+  text-decoration: none;
 
+  text-shadow: 0 0 0.2em orange;  
+}
 
+
 
+#header a {
 
+  background-color: transparent;
 
+  color: inherit;
 
+  text-decoration: none;
 
+}
 
+
 
+#mainServers {
 
+  box-shadow: 0 0.2em 0.5em gray50;
 
+  margin: 0.5em auto;
 
+  /* width: 100% */
 
+}
 
+
 
+#mainServers td,
 
+#mainServers th {
 
+  padding: 0.1em 0.5em;
 
+  margin: 0 auto;
 
+  text-align: center;
 
+}
 
+
 
+#mainServers tr.serverRow {
 
+  height: 100px;
 
+}
 
+
 
+#mainServers col#mainHit,
 
+#mainServers col#mainUse {
 
+  width: 100px;
 
+}

+ 85 - 0
doc/sample_gauge.html
Datei anzeigen 

@@ -0,0 +1,85 @@
 
+<html>
 
+  <head>
 
+    <style type="text/css">
 
+      #chart_div1 {
 
+        background-color: #e0e0a0;
 
+      }
 
+      #chart_div2 {
 
+        background-color: #c0c0a0;
 
+      }
 
+      </style>
 
+    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
 
+    <script type='text/javascript'>
 
+      google.load('visualization', '1', {packages:['gauge']});
 
+      google.setOnLoadCallback(drawCharts);
 
+      function drawChart1() {
 
+        var data = new google.visualization.DataTable();
 
+        data.addRows(4);
 
+
 
+        data.addColumn('number', 'Label');
 
+        data.setValue(0, 0,  0);
 
+        data.setValue(1, 0,  5);
 
+        data.setValue(2, 0, 10);
 
+        data.setValue(3, 0, 15);
 
+
 
+        data.addColumn('number', 'Delta');
 
+        data.setValue(0, 1, 40);
 
+        data.setValue(1, 1, 45);
 
+        data.setValue(2, 1, 50);
 
+        data.setValue(3, 1, 55);
 
+
 
+        data.addColumn('number', 'Second');
 
+        data.setValue(0, 2,  85);
 
+        data.setValue(1, 2,  90);
 
+        data.setValue(2, 2,  95);
 
+        data.setValue(3, 2, 100);
 
+
 
+        var chart1 = new google.visualization.Gauge(document.getElementById('chart_div1'));
 
+        var options = {
 
+          width: 600, height: 450, 
+          greenFrom: 0, greenTo: 30, 
+          redFrom: 90, redTo: 100, 
+          yellowFrom:70, yellowTo: 90, 
+          minorTicks: 5};
 
+        chart1.draw(data, options);
 
+      }
 
+
 
+      function drawChart2() {
 
+        var data = new google.visualization.DataTable();
 
+        data.addRows(1);
 
+
 
+        data.addColumn('number', '11211');
 
+        data.setValue(0, 0,  0);
 
+        data.addColumn('number', '11212');
 
+        data.setValue(0, 1,  20);
 
+        data.addColumn('number', '11213');
 
+        data.setValue(0, 2,  40);
 
+        data.addColumn('number', '11214');
 
+        data.setValue(0, 3,  60);
 
+        data.addColumn('number', '11215');
 
+        data.setValue(0, 4,  80);
 
+        data.addColumn('number', '11216');
 
+        data.setValue(0, 5, 100);
 
+
 
+        var chart2 = new google.visualization.Gauge(document.getElementById('chart_div2'));
 
+        var options = {
 
+          
+          width: 600, height: 400, 
+          greenFrom: 0, greenTo: 30, // greenColor: '#206020',
 
+          redFrom: 90, redTo: 100, // redColor: '#ff4040',
 
+          yellowFrom:30, yellowTo: 90, // yellowColor: '#e0e000',
 
+          minorTicks: 5}
 
+        chart2.draw(data, options);
 
+      }
 
+    function drawCharts() {
 
+      drawChart1();
 
+      drawChart2();
 
+    }
 
+    </script>
 
+  </head>
 
+
 
+  <body>
 
+    <div id='chart_div1'></div>
 
+    <div id='chart_div2'></div>
 
+  </body>
 
+</html>

+ 115 - 0
doc/sample_main.html
Datei anzeigen 

@@ -0,0 +1,115 @@
 
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
+<html>
 
+  <head>
 
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
+    <title>Insert title here</title>
 
+    <link rel="stylesheet" href="sample.css" />
 
+    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
 
+    <script type='text/javascript'>
 
+      google.load('visualization', '1', {packages:['gauge']});
 
+      google.setOnLoadCallback(drawAllCharts);
 
+      var hitOptions = {
 
+          width: 150, height: 150, 
+          greenFrom: 80, greenTo: 100, 
+          yellowFrom: 50, yellowTo: 80, 
+          redFrom: 0, redTo: 20,
 
+          majorTicks: ['00', 20, 40, 60, 80, 100],
 
+          minorTicks: 4};
 
+      
+      var useOptions = {
 
+          width: 150, height: 150, 
+          greenFrom: 50, greenTo: 80, 
+          yellowFrom: 80, yellowTo: 95, 
+          redFrom: 95, redTo: 100, 
+          majorTicks: ['00', 20, 40, 60, 80, 100],
 
+          minorTicks: 4};
 
+
 
+      function randomInt() {
 
+        x = Math.random() * 101.0 - 0.5; // Give equal likelihood to 0 and 100
 
+        return Math.round(x);
 
+      }
 
+      
+      function drawChart(index, col) {
 
+        var data = new google.visualization.DataTable();
 
+        data.addRows(1);
 
+        data.addColumn('number', col +'%');
 
+        data.setValue(0, 0,  randomInt());
 
+        id = 'main-server' + index + '-' + col;
 
+        var chart = new google.visualization.Gauge(document.getElementById(id));
 
+        optionsName = col + 'Options';
 
+        chart.draw(data, window[optionsName]);
 
+      }
 
+      
+      function drawAllCharts() {
 
+        for (i = 1 ; i <= 4 ; i++) {
 
+          drawChart(i, 'use');
 
+          drawChart(i, 'hit');
 
+        }
 
+      }
 
+      </script>
 
+    </head>
 
+
 
+  <body>
 
+   <div id="header">
 
+     <h1><a href="http://php.net/memcached">Memcache</a></h1>
 
+     </div>
 
+    <table id="mainServers" border="5px"'>
 
+      <thead>
 
+        <col align="center" />
 
+        <col align="center" />
 
+        <col />
 
+        <col align="right" />
 
+        <col id="mainUse" />
 
+        <col id="mainHit" />
 
+        <col />
 
+        </thead>
 
+      <tbody>
 
+        <tr class="headerRow">
 
+          <th>Host</th>
 
+          <th>Version</th>
 
+          <th>Start/Uptime</th>
 
+          <th>Size</th>
 
+          <th>Use%</th>
 
+          <th>Hit%</th>
 
+          <th>Operations</th>
 
+          </tr>
 
+        <tr class="serverRow">
 
+          <td>127.0.0.1:11211</td>
 
+          <td>1.4.5</td>
 
+          <td>2011-10-05 14:58:00<br />1 hour and 5 minutes</td>
 
+          <td>64 MiB</td>
 
+          <td><div id="main-server1-use" class="server-use"></div></td>
 
+          <td><div id="main-server1-hit"></div></td>
 
+          <td><a href="flush">Flush</a></td>
 
+          </tr>
 
+        <tr class="serverRow">
 
+          <td>127.0.0.1:11212</td>
 
+          <td>1.4.5</td>
 
+          <td>2011-10-05 14:58:00<br />1 hour and 5 minutes</td>
 
+          <td>64 MiB</td>
 
+          <td><div id="main-server2-use" class="server-use"></div></td>
 
+          <td><div id="main-server2-hit"></div></td>
 
+          <td><a href="flush">Flush</a></td>
 
+          </tr>
 
+        <tr class="serverRow">
 
+          <td>127.0.0.1:11213</td>
 
+          <td>1.4.5</td>
 
+          <td>2011-10-05 14:58:00<br />1 hour and 5 minutes</td>
 
+          <td>1 GiB</td>
 
+          <td><div id="main-server3-use" class="server-use"></div></td>
 
+          <td><div id="main-server3-hit"></div></td>
 
+          <td><a href="flush">Flush</a></td>
 
+          </tr>
 
+        <tr class="serverRow">
 
+          <td>127.0.0.1:11214</td>
 
+          <td>1.4.5</td>
 
+          <td>2011-10-05 14:58:00<br />1 hour and 5 minutes</td>
 
+          <td>256 MiB</td>
 
+          <td><div id="main-server4-use" class="server-use"></div></td>
 
+          <td><div id="main-server4-hit"></div></td>
 
+          <td><a href="flush">Flush</a></td>
 
+          </tr>
 
+        </tbody>
 
+      </table>
 
+    </body>
 
+  </html>