mirror
/
stratux
kopia lustrzana https://github.com/cyoung/stratux
1
0
Forkuj 0
Kod Zgłoszenia Projekty Wydania Wiki Aktywność

Angular validation on settings page.

pull/734/head^2
Eric Westphal 2017-07-29 10:40:29 -04:00
rodzic d48691bdac
commit c319d49e74
3 zmienionych plików z 138 dodań i 39 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

7
web/css/main.css
Wyświetl plik

@ -8,6 +8,7 @@
.grayout {
opacity: 0.4; /* Real browsers */
filter: alpha(opacity = 60); /* MSIE */
background-color: #ffffff;
}
.vertical-alignment-helper {
@ -179,7 +180,6 @@
color: white;
}
.paperairplane_left,
.traffic-style1,
.traffic-style10,
.traffic-style11 {
@ -194,7 +194,6 @@
background-color: skyblue;
}
.paperairplane_right,
.traffic-style2,
.traffic-style20,
.traffic-style21 {
@ -428,6 +427,10 @@ body {
font-weight: 400;
}
input.ng-invalid:not(.grayout){
background: pink;
}
/* change right sidebar behavior to always push */
@media (min-width: 992px) {

126
web/plates/js/settings.js
Wyświetl plik

@ -46,7 +46,9 @@ function SettingsCtrl($rootScope, $scope, $state, $location, $window, $http) {
$scope.WiFiSSID = settings.WiFiSSID;
$scope.WiFiPassphrase = settings.WiFiPassphrase;
$scope.WiFiSecurityEnabled = settings.WiFiSecurityEnabled;
$scope.WiFiChannel = settings.WiFiChannel.toString();
$scope.WiFiChannel = settings.WiFiChannel;
$scope.Channels = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
}
function getSettings() {
@ -274,14 +276,9 @@ function SettingsCtrl($rootScope, $scope, $state, $location, $window, $http) {
'Errors': false
};
function isValidSSID(str) { return /^[!#;].|[+\[\]/"\t\s].*$/.test(str); }
function isValidWPA(str) { return /^[\u0020-\u007e\u00a0-\u00ff]*$/.test(str); }
if (($scope.WiFiSSID === undefined) || ($scope.WiFiSSID === null) || ($scope.WiFiSSID.length === 0) ||
($scope.WiFiSSID.length > 32) || (isValidSSID($scope.WiFiSSID))) {
if (($scope.WiFiSSID === undefined) || ($scope.WiFiSSID === null) || !isValidSSID($scope.WiFiSSID)) {
$scope.WiFiErrors.WiFiSSID = "Your Network Name(\"SSID\") must be at least 1 character " +
"but not more then 32 characters." +
"It cannot start with: ! , ; , # or contain: + , [ , ] , \" , or a tab";
"but not more than 32 characters. It can only contain a-z, A-Z, 0-9, _ or -.";
$scope.WiFiErrors.Errors = true;
}
@ -292,7 +289,7 @@ function SettingsCtrl($rootScope, $scope, $state, $location, $window, $http) {
$scope.WiFiErrors.Errors = true;
}
if ($scope.WiFiPassphrase.length < 8 || $scope.WiFiPassphrase.length > 63 ) {
$scope.WiFiErrors.WiFiPassphrase = "Your WiFi Password must be at between 8 and 63 characters long.";
$scope.WiFiErrors.WiFiPassphrase = "Your WiFi Password must be between 8 and 63 characters long.";
$scope.WiFiErrors.Errors = true;
}
}
@ -313,3 +310,114 @@ function SettingsCtrl($rootScope, $scope, $state, $location, $window, $http) {
}
};
}
function isValidSSID(str) { return /^[a-zA-Z0-9()_-]{1,32}$/.test(str); }
function isValidWPA(str) { return /^[\u0020-\u007e]{8,63}$/.test(str); }
angular.module('appControllers')
.directive('hexInput', function() { // directive for ownship hex code validation
return {
require: 'ngModel',
link: function(scope, element, attr, ctrl) {
function hexValidation(value) {
var valid = /^$|^[0-9A-Fa-f]{6}$/.test(value);
ctrl.$setValidity('FAAHex', valid);
if (valid) {
return value;
} else {
return "";
}
}
ctrl.$parsers.push(hexValidation);
}
};
})
.directive('watchlistInput', function() { // directive for ICAO space-separated watch list validation
return {
require: 'ngModel',
link: function(scope, element, attr, ctrl) {
function watchListValidation(value) {
// The list of METAR locations at http://www.aviationweather.gov/docs/metar/stations.txt
// lists only 4-letter/number ICAO codes.
var valid = /^([A-Za-z0-9]{4}( [A-Za-z0-9]{4})*|)$/.test(value);
ctrl.$setValidity('ICAOWatchList', valid);
if (valid) {
return value;
} else {
return "";
}
}
ctrl.$parsers.push(watchListValidation);
}
};
})
.directive('ssidInput', function() { // directive for WiFi SSID validation
return {
require: 'ngModel',
link: function(scope, element, attr, ctrl) {
function ssidValidation(value) {
var valid = isValidSSID(value);
ctrl.$setValidity('ssid', valid);
if (valid) {
return value;
} else {
return "";
}
}
ctrl.$parsers.push(ssidValidation);
}
};
})
.directive('wpaInput', function() { // directive for WiFi WPA Passphrase validation
return {
require: 'ngModel',
link: function(scope, element, attr, ctrl) {
function wpaValidation(value) {
var valid = isValidWPA(value);
ctrl.$setValidity('wpaPassphrase', valid);
if (valid) {
return value;
} else {
return "";
}
}
ctrl.$parsers.push(wpaValidation);
}
};
})
.directive('ipListInput', function() { // directive for validation of list of IP addresses
return {
require: 'ngModel',
link: function(scope, element, attr, ctrl) {
function ipListValidation(value) {
var r = "(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)";
var valid = (new RegExp("^(" + r + "( " + r + ")*|)$")).test(value);
ctrl.$setValidity('ipList', valid);
if (valid) {
return value;
} else {
return "";
}
}
ctrl.$parsers.push(ipListValidation);
}
};
})
.directive('gLimitsInput', function() { // directive for validation of list of G Limits
return {
require: 'ngModel',
link: function(scope, element, attr, ctrl) {
function gLimitsValidation(value) {
var r = "[-+]?[0-9]*\.?[0-9]+";
var valid = (new RegExp("^(" + r + "( " + r + ")*|)$")).test(value);
ctrl.$setValidity('gLimits', valid);
if (valid) {
return value;
} else {
return "";
}
}
ctrl.$parsers.push(gLimitsValidation);
}
};
});

44
web/plates/settings.html
Wyświetl plik

@ -53,7 +53,8 @@
<form name="WiFiSettings">
<div class="form-group reset-flow">
<label class="control-label col-xs-5">WiFi SSID</label>
<input class="col-xs-7" type="string" ng-model="WiFiSSID" placeholder="WiFi Network Name" />
<input class="col-xs-7" type="text" ssid-input ng-model="WiFiSSID"
placeholder="WiFi Network Name" />
</div>
<div class="form-group reset-flow">
<label class="control-label col-xs-7">Network Security</label>
@ -63,25 +64,14 @@
</div>
<div class="form-group reset-flow">
<label class="control-label col-xs-5">WiFi Passphrase</label>
<input class="col-xs-7" type="string" ng-model="WiFiPassphrase"
<input class="col-xs-7" type="text" wpa-input ng-model="WiFiPassphrase"
ng-disabled="!WiFiSecurityEnabled" ng-class="{grayout: !WiFiSecurityEnabled}"
placeholder="WiFi Passphrase" />
ng-required="WiFiSecurityEnabled" placeholder="WiFi Passphrase" />
</div>
<div class="form-group reset-flow">
<label class="control-label col-xs-7">WiFi Channel</label>
<select class="input-small col-sm-2 form-control-sm" ng-model="WiFiChannel" id="WiFiChannel">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
</select>
<select id="WiFiChannel" class="input-small col-sm-2 form-control-sm"
ng-model="WiFiChannel" ng-options="x for x in Channels"></select>
</div>
<div class="form-group reset-flow">
<button class="btn btn-primary btn-block" ng-click="updateWiFi()">Submit WiFi Changes</button>
@ -98,25 +88,22 @@
<div class="form-group reset-flow">
<label class="control-label col-xs-5">Mode S Code (Hex)</label>
<form name="modeForm" ng-submit="updatemodes()" novalidate>
<!-- type="number" not supported except on mobile -->
<!-- RegEx for validation: ^[A-Fa-f0-9]{6}$ -->
<input class="col-xs-7" type="string" required ng-model="OwnshipModeS"
<input class="col-xs-7" type="text" hex-input ng-model="OwnshipModeS"
placeholder="FAA HEX code" ng-blur="updatemodes()" />
</form>
</div>
<div class="form-group reset-flow">
<label class="control-label col-xs-5">Watch List</label>
<form name="watchForm" ng-submit="updatewatchlist()" novalidate>
<!-- type="number" not supported except on mobile -->
<input class="col-xs-7" type="string" required ng-model="WatchList"
placeholder="space-delimited identifiers" ng-blur="updatewatchlist()" />
<input class="col-xs-7" type="text" watchlist-input ng-model="WatchList"
placeholder="space-delimited 4-letter identifiers" ng-blur="updatewatchlist()" />
</form>
</div>
<div class="form-group reset-flow">
<label class="control-label col-xs-5">PPM Correction</label>
<form name="ppmForm" ng-submit="updateppm()" novalidate>
<!-- type="number" not supported except on mobile -->
<input class="col-xs-7" type="number_format" required ng-model="PPM" placeholder="integer"
<input class="col-xs-7" type="number" ng-model="PPM" placeholder="integer"
ng-blur="updateppm()" />
</form>
</div>
@ -124,7 +111,7 @@
<label class="control-label col-xs-5">Serial Output Baudrate</label>
<form name="ppmForm" ng-submit="updateBaud()" novalidate>
<!-- type="number" not supported except on mobile -->
<input class="col-xs-7" type="number_format" required ng-model="Baud" placeholder="integer"
<input class="col-xs-7" type="number" ng-model="Baud" placeholder="integer"
ng-blur="updateBaud()" />
</form>
</div>
@ -140,7 +127,7 @@
<div class="form-group reset-flow">
<label class="control-label col-xs-5">Static IPs</label>
<form name="staticipForm" ng-submit="updatestaticips()" novalidate>
<input class="col-xs-7" type="string" required ng-model="StaticIps" ng-list=" "
<input class="col-xs-7" type="text" ip-list-input ng-model="StaticIps" ng-list=" "
ng-trim="false" placeholder="space-delimited ip's to send network data"
ng-blur="updatestaticips()" />
</form>
@ -205,8 +192,9 @@
<div class="form-group reset-flow">
<label class="control-label col-xs-3">G Limits</label>
<form name="GLimitForm" ng-submit="updateGLimits()" novalidate>
<input class="col-xs-9" type="string" required ng-model="GLimits" ng-blur="updateGLimits()"
ng-disabled="!IMU_Sensor_Enabled" ng-class="{grayout: !IMU_Sensor_Enabled}"
<input class="col-xs-9" type="text" g-limits-input ng-model="GLimits"
ng-blur="updateGLimits()" ng-disabled="!IMU_Sensor_Enabled"
ng-class="{grayout: !IMU_Sensor_Enabled}"
placeholder="Space-separated negative and positive G meter limits"/>
</form>
</div>
@ -425,7 +413,7 @@
You might have to reconnect to your new WiFi SSID. </p>
</div>
<div class="modal-footer">
<a ui-turn-off="modalSuccessWiFi" class="btn btn-default">Close</a>
<a ui-turn-off="modalSuccessWiFi" class="btn btn-primary btn-default">Close</a>
</div>
</div>
</div>