Commits

jonnatanael committed cf4d8b2 Merge

Merge pull request #33 from kknavs/master

Improved tables.

  • Participants
  • Parent commits 9d369fa, e7ad3f7

Comments (0)

Files changed (7)

db/main_db.db

Binary file modified.

pgbench/static/css/main.css

 /* content */
 .content {
     padding-top: 20px;
-    padding-bottom: 50px;
+    padding-bottom: 80px;
 }
 
 /* submit page */
     font-size: 14px;
 }
 
+.ng-invalid {
+    border: 1px solid red;
+}
+
+/* datatable */
+
+th{
+  -webkit-box-shadow: 0 5px 10px #777 inset;
+  -moz-box-shadow: 0 5px 10px #777 inset;
+  box-shadow: 0 5px 10px #777 inset;
+}
+
+th:hover{
+    cursor: pointer;
+    text-decoration: underline;
+}
+
+.error {
+    color: red;
+}
+
+.ui-helper-hidden {
+    display: none;
+}
+
+/*.even {
+    background-color: #151515;
+}*/
+
+.sorting_1{
+    background-color: #151515;
+}
+
+.dataTables_length {
+    width: 40%;
+    float: right;
+}
+
+.paging_full_numbers {
+    padding: 2px 6px;
+    margin: 0;
+    cursor: pointer;
+    * cursor: hand;
+    color:  #FFF;
+    	width: 400px;
+	height: 22px;
+}
+
+.paging_full_numbers a:hover {
+	text-decoration: underline;
+}
+
+.paging_full_numbers a.paginate_button,
+ 	.paging_full_numbers a.paginate_active {
+    padding: 2px 6px;
+    margin: 0;
+    cursor: pointer;
+    * cursor: hand;
+    color:  #FFF;
+}
+
+.paging_full_numbers a.paginate_button:hover {
+	text-decoration: underline;
+}
+
+.paging_full_numbers a.paginate_active {
+	background-color: #151515;
+}
+
+
 
 
 

pgbench/static/javascript/app.js

-angular.module('pgbench', ['pgbenchServices']).filter('datefix', function(){
+var dialogApp = angular.module('pgbench', ['pgbenchServices']).filter('datefix', function(){
    return function(datetime){
        //začasna rešitev, ne vem zakaj v db datumu manjka offset
  	   return datetime.split(".")[0]+".000+0200";
    };
 });
 
+    dialogApp.directive('myTable', function() {
+        return function(scope, element, attrs) {
+
+            // apply DataTable options, use defaults if none specified by user
+            var options = {};
+            if (attrs.myTable.length > 0) {
+                options = scope.$eval(attrs.myTable);
+            } else {
+                options = {
+                    "bStateSave": true,
+                    "iCookieDuration": 2419200, /* 1 month */
+                    "bJQueryUI": true,
+                    "bPaginate": false,
+                    "bLengthChange": false,
+                    "bFilter": false,
+                    "bInfo": false,
+                    "bDestroy": true,
+                    "bProcessing": true
+                };
+            }
+
+            // Tell the dataTables plugin what columns to use
+            // We can either derive them from the dom, or use setup from the controller
+            var explicitColumns = [];
+            element.find('th').each(function(index, elem) {
+                explicitColumns.push($(elem).text());
+            });
+            if (explicitColumns.length > 0) {
+                options["aoColumns"] = explicitColumns;
+            } else if (attrs.aoColumns) {
+                options["aoColumns"] = scope.$eval(attrs.aoColumns);
+            }
+
+            // aoColumnDefs is dataTables way of providing fine control over column config
+            if (attrs.aoColumnDefs) {
+                options["aoColumnDefs"] = scope.$eval(attrs.aoColumnDefs);
+            }
+
+            if (attrs.fnRowCallback) {
+                options["fnRowCallback"] = scope.$eval(attrs.fnRowCallback);
+            }
+
+            // apply the plugin
+            var dataTable = element.dataTable(options);
+
+
+
+            // watch for any changes to our data, rebuild the DataTable
+            scope.$watch(attrs.aaData, function(value) {
+                var val = value || null;
+                if (val) {
+                    dataTable.fnClearTable();
+                    dataTable.fnAddData(scope.$eval(attrs.aaData));
+                }
+            });
+        };
+    });
+
 //preverjanje, če jquery selektor obstaja
 $.fn.exists = function () {
     return this.length !== 0;

pgbench/static/javascript/controllers.js

 function pgbenchCtrl($scope, Measures) {
     $scope.measures = Measures.query();
+          $scope.message = '';
+
+
+        $scope.columnDefs = [
+            { "mDataProp": "id", "aTargets":[0]},
+            { "mDataProp": "title", "aTargets":[1] },
+            { "mDataProp": "user", "aTargets":[2] },
+            { "mDataProp": 'date', "aTargets":[3]},
+            { "mDataProp": "transactionType", "aTargets":[4] },
+            { "mDataProp": "scalingFactor", "aTargets":[5] },
+            { "mDataProp": "threads", "aTargets":[6]},
+            { "mDataProp": "clients", "aTargets":[7] },
+            { "mDataProp": "transactionsPerClient", "aTargets":[8] },
+            { "mDataProp": "transactions", "aTargets":[9]},
+            { "mDataProp": "TPS", "aTargets":[10] },
+            { "mDataProp": "TPSConnEstablish", "aTargets":[11] },
+            { "mDataProp": "fields", "aTargets":[12] }
+        ];
+
+        $scope.overrideOptions = {
+            "bStateSave": true,
+            "iCookieDuration": 2419200, /* 1 month */
+            "bJQueryUI": false,
+            "bPaginate":true,
+            "bLengthChange": true,
+            "bFilter": false,
+            "bInfo": true,
+            "bDestroy": true,
+            "bSortClasses": true,
+            "sPaginationType": "full_numbers",
+            "oLanguage": {
+            "sSearch": "Search all columns:"
+        }, "sDom": '<"top"i>rt<"bottom"plf><"clear">'
+        };
 }
 
 function pgbenchCtrlS($scope, SearchM) {
+      $scope.message = '';
+
+        $scope.myCallback = function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
+            $('td:eq(2)', nRow).bind('click', function() {
+                $scope.$apply(function() {
+                    $scope.someClickHandler(aData);
+                });
+            });
+            return nRow;
+        };
+
+        $scope.someClickHandler = function(info) {
+            $scope.message = 'clicked: '+ info.price;
+        };
+
+
+        $scope.columnDefs = [
+            { "mDataProp": "id", "aTargets":[0]},
+            { "mDataProp": "title", "aTargets":[1] },
+            { "mDataProp": "user", "aTargets":[2] },
+            { "mDataProp": 'date', "aTargets":[3]},
+            { "mDataProp": "transactionType", "aTargets":[4] },
+            { "mDataProp": "scalingFactor", "aTargets":[5] },
+            { "mDataProp": "threads", "aTargets":[6]},
+            { "mDataProp": "clients", "aTargets":[7] },
+            { "mDataProp": "transactionsPerClient", "aTargets":[8] },
+            { "mDataProp": "transactions", "aTargets":[9]},
+            { "mDataProp": "TPS", "aTargets":[10] },
+            { "mDataProp": "TPSConnEstablish", "aTargets":[11] },
+            { "mDataProp": "fields", "aTargets":[12] }
+        ];
+
+        $scope.overrideOptions = {
+            "bStateSave": true,
+            "iCookieDuration": 2419200, /* 1 month */
+            "bJQueryUI": false,
+            "bPaginate":true,
+            "bLengthChange": true,
+            "bFilter": false,
+            "bInfo": true,
+            "bDestroy": true,
+            "bSortClasses": true,
+            "sPaginationType": "full_numbers",
+            "oLanguage": {
+            "sSearch": "Search all columns:"
+        }, "sDom": '<"top"i>rt<"bottom"plf><"clear">'
+        //"asStripeClasses":['even','odd']  za barvanje sode-lihe vrstice
+        };
+
+
     $scope.searchM = SearchM.query();
 
     $scope.find = function(q){

pgbench/templates/analyze.html

 
     {% if not user.is_authenticated %}
         You have to login first.
-    {% endif %}
+    {% else %}
 
     <div id="graph">
         <div id="placeholder"></div>
 
     <br>
 
-    <table class="table">
-        <tr>
+       <table class="table" my-table="overrideOptions"
+            aa-data="measures.objects"
+            ao-column-defs="columnDefs"
+            fn-row-callback="myCallback"
+            >
+            <thead>
+            <tr>
             <th>Id</th>
             <th>Title</th>
             <th>User</th>
             <th>TPS</th>
             <th>TPS (including establishing connections)</th>
             <th>Special fields</th>
-        </tr>
-        {% verbatim %}
-        <tr ng-repeat="m in measures.objects">
-            <td>{{ m.id }}</td>
-            <td>{{ m.title }}</td>
-            <td>{{ m.user }}</td>
-            <td>{{ m.date | datefix | date:"d/M/yyyy HH:mm" }}</td>
-            <td>{{ m.transactionType }}</td>
-            <td>{{ m.scalingFactor }}</td>
-            <td>{{ m.threads }}</td>
-            <td>{{ m.clients }}</td>
-            <td>{{ m.transactionsPerClient }}</td>
-            <td>{{ m.transactions }}</td>
-            <td>{{ m.TPS }}</td>
-            <td>{{ m.TPSConnEstablish }}</td>
-            <td><span ng-repeat="f in m.fields">{{f}}</span></td>
-        </tr>
-        {% endverbatim %}
-    </table>
 
+            </tr>
+            </thead>
+        </table>
+   {% endif %}
     <br/><br/>
 
 

pgbench/templates/search.html

         You have to login first.
     {% else %}
 
-        <table class="table">
-        <tr>
+             <table class="table" my-table="overrideOptions"
+            aa-data="searchM.objects"
+            ao-column-defs="columnDefs"
+            fn-row-callback="myCallback"
+            >
+            <thead >
+            <tr>
             <th>Id</th>
             <th>Title</th>
             <th>User</th>
             <th>TPS (including establishing connections)</th>
             <th>Special fields</th>
 
-        </tr>
-        {% verbatim %}
-        <tr ng-repeat="m in searchM.objects">
-            <td>{{ m.id }}</td>
-            <td>{{ m.title }}</td>
-            <td>{{ m.user }}</td>
-            <td>{{ m.date | datefix | date:"d/M/yyyy HH:mm" }}</td>
-            <td>{{ m.transactionType }}</td>
-            <td>{{ m.scalingFactor }}</td>
-            <td>{{ m.threads }}</td>
-            <td>{{ m.clients }}</td>
-            <td>{{ m.transactionsPerClient }}</td>
-            <td>{{ m.transactions }}</td>
-            <td>{{ m.TPS }}</td>
-            <td>{{ m.TPSConnEstablish }}</td>
-            <td><span ng-repeat="f in m.fields">{{f}}</span></td>
-        </tr>
-        {% endverbatim %}
-    </table>
+            </tr>
+            </thead>
+        </table>
+        {{message}}
 
         {% endif %}
 

submitted_measurement/resources.py

         l = list(Fields.objects.filter(measure=bundle.data['id']))
         if l:
             bundle.data['fields'] = l
+        else:
+            bundle.data['fields'] = ""
+        bundle.data['date'] = unicode(bundle.data['date']).split('+')[0]
         return bundle
 
     def prepend_urls(self):