reworked the connection view

- use bootstrap styling
- connections will save the date
- connection duplicates will be removed on a new connection
- saved connections can be toggled between 5 items and all
This commit is contained in:
alexfriesen
2016-06-02 15:40:54 +02:00
parent b6558c68e8
commit 7697c6baac
2 changed files with 85 additions and 43 deletions
+31 -37
View File
@@ -1,57 +1,51 @@
<div ng-controller="ConnectionController" class="row">
<div class="col-md-offset-4 col-md-6 panel" style="margin-top: 128px">
<div class="col-md-offset-4 col-md-6 panel jumbotron" style="margin-top: 128px">
<h2>Connect</h2>
<div class="alert alert-danger" ng-show="LastErrorMessage != null">{{LastErrorMessage}}</div>
<div class="alert alert-danger" ng-show="LastErrorMessage != null">{{LastErrorMessage}}</div>
<p>Enter the address (including rcon port) and the rcon password below to connect.</p>
<p>Enter the address (including rcon port) and the rcon password below to connect.</p>
<form ng-submit="Connect()">
<div class="md-inline-form">
<div class="md-block" flex-gt-xs>
<label>Address</label>
<input required minlength=5 ng-model="Address" name="Address" class="form-control">
</div>
<div class="md-block" flex-gt-xs>
<label>Password</label>
<input required minlength=2 type="password" ng-model="Password" name="Password" class="form-control">
</div>
<div class="right">
<input type="checkbox" ng-model="SaveConnection">
Save Connection
</div>
<br /> <br />
<div class="center">
<button class="btn btn-primary" ng-click="Connect()">Connect</button>
</div>
<br />
<form ng-submit="Connect()">
<div class="md-inline-form">
<div class="md-block form-group" flex-gt-xs>
<label for="conncetion-adress">Address</label>
<input required minlength=5 ng-model="Address" name="Address" class="form-control" placeholder="xxx.xxx.xxx.xxx:28016" id="conncetion-adress">
</div>
</form>
</div>
<div class="md-block form-group" flex-gt-xs>
<label for="conncetion-password">Password</label>
<input required minlength=2 type="password" ng-model="Password" name="Password" class="form-control" id="conncetion-password">
</div>
<div class="col-md-offset-4 col-md-6 panel" style="margin-top: 64px">
<div class="checkbox right">
<label>
<input type="checkbox" ng-model="SaveConnection"> Save Connection
</label>
</div>
<button type="submit" class="btn btn-primary btn-block" ng-click="Connect()">Connect</button>
</div>
</form>
</div>
<div class="col-md-offset-4 col-md-6 panel jumbotron">
<div ng-show="PreviousConnects.length > 0">
<h2>Saved Connections</h2>
<ul ng-repeat="c in PreviousConnects">
<li><a ng-click="ConnectTo( c )" href="#">{{c.Address}}</a></li>
<ul ng-repeat="c in PreviousConnects | orderBy:array:true | limitTo:connectionsLimit">
<li><a ng-click="ConnectTo( c )" href="#/{{c.Address}}/info">{{c.Address}}</a> - {{c.date | date:'short'}}</li>
</ul>
<div ng-show="PreviousConnects.length > connectionsLimit || connectionsLimit === undefined">
<button type="submit" class="btn btn-primary btn-block" ng-click="toggleConnectionsLimit()">Show {{(connectionsLimit === undefined) ? 'less' : 'more'}}</button>
</div>
</div>
</div>
</div>
</div>