[13860] | 1 | @using HeuristicLab.Clients.Hive.WebJobManager.ViewModels;
|
---|
| 2 | @model QueryVM
|
---|
| 3 | <div id="userId" style="display:none">@ViewBag.SessionId</div>
|
---|
| 4 | <script src="~/js/hubs/queryhubber.js"></script>
|
---|
| 5 | <div ng-app="wjmquery" ng-controller="queryCtrl" data-ng-init="init()" class="animated fadeIn">
|
---|
| 6 |
|
---|
| 7 | <!--Templates for drag and drop, Do not move down (initalization)-->
|
---|
| 8 | <!--LIST-->
|
---|
| 9 | <script type="text/ng-template" id="list.html">
|
---|
| 10 | <ul dnd-list="list" style="min-height:200px">
|
---|
| 11 | <li ng-repeat="item in list"
|
---|
| 12 | style="border-radius:25px;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
---|
| 13 | text-shadow:2px 2px black;color:white; margin-top:3px;"
|
---|
| 14 | dnd-draggable="item"
|
---|
| 15 | dnd-effect-allowed="move"
|
---|
| 16 | dnd-moved="list.splice($index, 1)"
|
---|
| 17 | dnd-selected="models.selected = item"
|
---|
| 18 | ng-class="{selected: models.selected === item}"
|
---|
| 19 | ng-include="item.type + '.html'"
|
---|
| 20 | ng-style="{'background-color': item.color}">
|
---|
| 21 | </li>
|
---|
| 22 | </ul>
|
---|
| 23 | </script>
|
---|
| 24 | <!--CONTAINER (And/Or)-->
|
---|
| 25 | <script type="text/ng-template" id="container.html">
|
---|
| 26 | <div class="container-element box box-blue ">
|
---|
| 27 | <h3>{{item.name}}</h3>
|
---|
| 28 | <div class="column" ng-repeat="list in item.columns" ng-include="'list.html'"></div>
|
---|
| 29 | <div class="clearfix"></div>
|
---|
| 30 | </div>
|
---|
| 31 | </script>
|
---|
| 32 |
|
---|
| 33 | <!--ITEMS (parameters)-->
|
---|
| 34 | <script type="text/ng-template" id="item.html">
|
---|
| 35 | <div class="item row animated fadeIn"
|
---|
| 36 | style="color:black;text-shadow:none; border-radius:25px">
|
---|
| 37 | <p class="col-md-5"
|
---|
| 38 | style="word-break:break-word">
|
---|
| 39 | {{item.Label}}
|
---|
| 40 | </p>
|
---|
[13871] | 41 | <span ng-if="item.CompareType != 'HeuristicLab.Clients.OKB.Query.EqualityComparison'" style="margin-left:10px">
|
---|
[13860] | 42 | <select class="col-md-2"
|
---|
| 43 | name="comparisonSelect"
|
---|
| 44 | id="comparisonSelect"
|
---|
| 45 | style="margin-right:10px;"
|
---|
| 46 | ng-model="item.Comparison">
|
---|
| 47 | <option ng-repeat="comp in item.ComparisonValues"
|
---|
| 48 | value="{{comp.value}}">
|
---|
| 49 | {{comp.text}}
|
---|
| 50 | </option>
|
---|
| 51 | </select>
|
---|
[13871] | 52 | <select class="col-md-4 col-sm-10" ng-if="item.AvailableValues != undefined" name="Values" ng-model="item.Value" style="margin-left:10px">
|
---|
[13860] | 53 | <option ng-repeat="val in item.AvailableValues" value="{{val}}">{{val}}</option>
|
---|
| 54 | </select>
|
---|
| 55 | <input class="col-md-4" ng-if="item.AvailableValues ===undefined" ng-model="item.Value" type="text" />
|
---|
| 56 | </span>
|
---|
| 57 | </div>
|
---|
| 58 | </script>
|
---|
| 59 |
|
---|
| 60 |
|
---|
| 61 | @Html.Partial("Navbar", new NavbarViewModel("Query", Model.User))
|
---|
| 62 |
|
---|
| 63 | @Html.Partial("_ErrorMessage", Model.message)
|
---|
| 64 |
|
---|
| 65 | <div class="row" style="margin-top:20px; margin-left:20px">
|
---|
| 66 |
|
---|
| 67 |
|
---|
| 68 | <div class="col-sm-8">
|
---|
| 69 | <div class="trashcan box box-grey box-padding pull-right ">
|
---|
| 70 | <!-- If you use [] as referenced list, the dropped elements will be lost -->
|
---|
| 71 | <ul dnd-list="[]"
|
---|
| 72 | style="border:dashed 2px darkred;padding:20px; padding-left:40px;padding-right:40px">
|
---|
| 73 | <li><i class="fa fa-trash fa-4x"></i></li>
|
---|
| 74 | </ul>
|
---|
| 75 | </div>
|
---|
| 76 | <h2>
|
---|
| 77 | OKB Query builder <span ng-repeat="item in models.templates"
|
---|
| 78 | dnd-draggable="item"
|
---|
| 79 | dnd-effect-allowed="copy"
|
---|
| 80 | dnd-copied="item.id = item.id + 1">
|
---|
| 81 | <a class="btn btn-default btn-lg"
|
---|
| 82 | ng-style="{'background-color': item.color}"
|
---|
| 83 | style="color:white;text-shadow:none">
|
---|
| 84 | {{item.name}}
|
---|
| 85 | </a>
|
---|
| 86 | </span>
|
---|
| 87 | </h2>
|
---|
| 88 |
|
---|
| 89 | <div ng-if="filters === undefined"
|
---|
| 90 | class="animated jello infinite"
|
---|
| 91 | style="margin-top:200px; text-align:center">
|
---|
| 92 | <i class="fa fa-4x fa-hourglass-half fa-spin"></i>
|
---|
| 93 | </div>
|
---|
| 94 | <div ng-if="filters != undefined"
|
---|
| 95 | class="animated"
|
---|
| 96 | ng-class="{ fadeIn: filters }"
|
---|
| 97 | ng-repeat="(zone, list) in models.dropzones">
|
---|
| 98 | <div class="dropzone box box-yellow">
|
---|
| 99 | <!-- The dropzone also uses the list template -->
|
---|
| 100 | <h3>{{zone}}</h3>
|
---|
| 101 | <div ng-include="'list.html'"></div>
|
---|
| 102 | </div>
|
---|
| 103 | </div>
|
---|
| 104 | </div>
|
---|
| 105 | <div ng-if="filters != undefined"
|
---|
| 106 | class="col-sm-4 animated"
|
---|
| 107 | ng-class="{ fadeIn: filters }">
|
---|
| 108 | <label class="pull-right">Search: <input ng-init="searchText = ''" ng-model="searchText"></label>
|
---|
| 109 | <div class="btn-group-vertical pull-right" role="group"
|
---|
| 110 | style="overflow-y:scroll;overflow-x:hidden;height:600px;word-break:break-word">
|
---|
| 111 |
|
---|
| 112 | <a ng-repeat="item in filters |filter:{Label:searchText} track by $index"
|
---|
| 113 | draggable="true"
|
---|
| 114 | dnd-draggable="item"
|
---|
| 115 | dnd-effect-allowed="copy"
|
---|
| 116 | dnd-copied="fil.type = 'item'"
|
---|
| 117 | class="btn btn-default"
|
---|
| 118 | ng-class="{'active': item.Label == selectedfilter.Label}"
|
---|
| 119 | style="text-shadow:none;box-shadow:none; white-space:normal">{{item.Label}}</a>
|
---|
| 120 |
|
---|
| 121 | <!---->
|
---|
| 122 | </div>
|
---|
| 123 | </div>
|
---|
| 124 | </div>
|
---|
| 125 | <div class="row animated"
|
---|
| 126 | style="text-align:center;margin:20px;"
|
---|
| 127 | ng-class="{ fadeInUp: filters }"
|
---|
| 128 | ng-if="filters != undefined">
|
---|
| 129 | <div class="btn btn-success btn-lg btn-block row"
|
---|
| 130 | style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
---|
| 131 | text-shadow:2px 2px black;"
|
---|
| 132 | ng-class="{disabled: sendingQuery}"
|
---|
| 133 | ng-click="sendQuery()">
|
---|
| 134 | <i class="fa fa-send" ng-class="{'fa-spin': sendingQuery}"></i>
|
---|
| 135 | <span ng-if="!sendingQuery && !results">Send query</span><span ng-if="sendingQuery">Querying server</span>
|
---|
| 136 | <span ng-if="results != undefined ">Resend query</span>
|
---|
| 137 | </div>
|
---|
| 138 | <div style="text-align:center" ng-if="senderQuery">
|
---|
| 139 | <i class="fa fa-hourglass-2 fa-5x fa-spin"></i>
|
---|
| 140 | </div>
|
---|
| 141 | </div>
|
---|
| 142 | <div class="row"
|
---|
| 143 | ng-if="results != undefined && results.length != 0"
|
---|
| 144 | style="margin:20px"
|
---|
| 145 | id="allresults">
|
---|
| 146 | <div class="col-sm-4" style="margin-bottom:200px">
|
---|
| 147 | <div class="btn-group btn-group-justified btn-block"
|
---|
| 148 | role="group" style="margin-bottom:-4px">
|
---|
| 149 |
|
---|
| 150 | <a class="btn btn-info btn-lg disabled"
|
---|
| 151 | style="width:6%;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
---|
| 152 | text-shadow:2px 2px black;">
|
---|
| 153 | <i class="fa fa-list-ol"></i> Results
|
---|
| 154 | </a>
|
---|
| 155 | </div>
|
---|
| 156 | <div class="btn-group-vertical btn-block">
|
---|
| 157 | <a class="btn btn-default"
|
---|
| 158 | style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);"
|
---|
| 159 | ng-repeat="r in results track by $index"
|
---|
| 160 | ng-click="fetchResult($index)">
|
---|
| 161 | Run {{r.Id}}
|
---|
| 162 | </a>
|
---|
| 163 |
|
---|
| 164 | </div>
|
---|
| 165 | </div>
|
---|
| 166 | <p ng-if="loadingResult"
|
---|
| 167 | class="text-center">
|
---|
| 168 | <br /><br /><br /><br /><br /><br /><br />
|
---|
| 169 | <i class="fa fa-hourglass-half fa-spin fa-3x">
|
---|
| 170 | </i>
|
---|
| 171 | </p>
|
---|
| 172 | <div class="col-sm-8" ng-if="loadingResult != undefined && !loadingResult && activeResult"
|
---|
| 173 | id="result"
|
---|
| 174 | style="padding:5px; padding-left:10px;">
|
---|
| 175 | <div class="panel panel-default"
|
---|
| 176 | style="border-width:2px!important;padding:0;
|
---|
| 177 | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
|
---|
| 178 |
|
---|
| 179 | <div class="panel-heading">
|
---|
| 180 | <h3>Run {{activeResult.Id}} - {{activeResult.CreatedDate | date:'hh:mm dd/MM/yyyy'}}</h3>
|
---|
| 181 |
|
---|
| 182 | </div>
|
---|
| 183 | <div class="panel-body">
|
---|
| 184 | <h4>Results</h4>
|
---|
| 185 | <table class="table ">
|
---|
| 186 | <thead>
|
---|
| 187 | <tr>
|
---|
| 188 | <th>Result name</th>
|
---|
| 189 | <th>Value</th>
|
---|
| 190 | </tr>
|
---|
| 191 | </thead>
|
---|
| 192 | <tr ng-repeat="res in activeResult.ResultValues">
|
---|
| 193 | <td>
|
---|
| 194 | {{res.Name}}
|
---|
| 195 | </td>
|
---|
| 196 | <td style="word-break:break-word">
|
---|
| 197 | {{res.Value | limitTo : 20 }}
|
---|
| 198 | </td>
|
---|
| 199 | </tr>
|
---|
| 200 | </table>
|
---|
| 201 | <h4>Parameters</h4>
|
---|
| 202 | <table class="table ">
|
---|
| 203 | <thead>
|
---|
| 204 | <tr>
|
---|
| 205 | <th>Parameter name</th>
|
---|
| 206 | <th>Value</th>
|
---|
| 207 | </tr>
|
---|
| 208 | </thead>
|
---|
| 209 | <tr ng-repeat="res in activeResult.ParameterValues">
|
---|
| 210 | <td>
|
---|
| 211 | {{res.Name}}
|
---|
| 212 | </td>
|
---|
| 213 | <td style="word-break:break-word">
|
---|
| 214 | {{res.Value | limitTo : 40 }}
|
---|
| 215 | </td>
|
---|
| 216 |
|
---|
| 217 | </tr>
|
---|
| 218 |
|
---|
| 219 | </table>
|
---|
| 220 | </div>
|
---|
| 221 | </div>
|
---|
| 222 | </div>
|
---|
| 223 |
|
---|
| 224 | </div>
|
---|
| 225 | <div class="row"
|
---|
| 226 | ng-if="results != undefined && results.length === 0"
|
---|
| 227 | style="margin:20px"
|
---|
| 228 | id="allresults">
|
---|
| 229 | <h2 style="text-align:center"><i class="fa fa-frown-o"></i> No results found</h2>
|
---|
| 230 | </div>
|
---|
| 231 | </div>
|
---|
| 232 |
|
---|
| 233 |
|
---|