Get the contacts field partially working
This commit is contained in:
Joseph Schorr
parent
32c0a14d96
commit
825455ea6c
5 changed files with 176 additions and 42 deletions
|
|
@ -4923,4 +4923,8 @@ i.slack-icon {
|
|||
border: 1px solid #eee;
|
||||
vertical-align: middle;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.config-contact-field .form-control {
|
||||
width: 350px;
|
||||
}
|
||||
44
static/directives/config/config-contact-field.html
Normal file
44
static/directives/config/config-contact-field.html
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<div class="config-contact-field-element">
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
|
||||
<span ng-switch="kind">
|
||||
<span ng-switch-when="mailto"><i class="fa fa-envelope"></i></span>
|
||||
<span ng-switch-when="irc"><i class="fa fa-comment"></i></span>
|
||||
<span ng-switch-when="tel"><i class="fa fa-phone"></i></span>
|
||||
<span ng-switch-default><i class="fa fa-ticket"></i></span>
|
||||
</span>
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li role="presentation">
|
||||
<a role="menuitem" tabindex="-1" href="javascript:void(0)" ng-click="kind = 'mailto'">
|
||||
<i class="fa fa-envelope"></i> E-mail
|
||||
</a>
|
||||
</li>
|
||||
<li role="presentation">
|
||||
<a role="menuitem" tabindex="-1" href="javascript:void(0)" ng-click="kind = 'irc'">
|
||||
<i class="fa fa-comment"></i> IRC
|
||||
</a>
|
||||
</li>
|
||||
<li role="presentation">
|
||||
<a role="menuitem" tabindex="-1" href="javascript:void(0)" ng-click="kind = 'tel'">
|
||||
<i class="fa fa-phone"></i> Telephone
|
||||
</a>
|
||||
</li>
|
||||
<li role="presentation">
|
||||
<a role="menuitem" tabindex="-1" href="javascript:void(0)" ng-click="kind = 'http'">
|
||||
<i class="fa fa-ticket"></i> URL
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<input class="form-control" placeholder="{{ getPlaceholder(kind) }}" ng-model="value">
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
4
static/directives/config/config-contacts-field.html
Normal file
4
static/directives/config/config-contacts-field.html
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<div class="config-contacts-field-element">
|
||||
<div class="config-contact-field" binding="item.value" ng-repeat="item in items">
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -24,22 +24,11 @@
|
|||
<tr>
|
||||
<td class="non-input">Contact Information:</td>
|
||||
<td colspan="2">
|
||||
<span class="config-list-field" binding="config.CONTACT_INFO" item-title="Contact URL"
|
||||
placeholder="Add contact information"></span>
|
||||
<span class="config-contacts-field" binding="config.CONTACT_INFO"></span>
|
||||
<div class="help-text" style="margin-top: 10px;">
|
||||
Information to show in the Contact Page. If none specified, CoreOS contact information
|
||||
is displayed.
|
||||
</div>
|
||||
|
||||
<div class="help-text">
|
||||
<table class="inner-table">
|
||||
<tr><td><i class="fa fa-envelope"></i> E-mail</td><td>mailto:some@email.com</td></tr>
|
||||
<tr><td><i class="fa fa-comment"></i> IRC</td><td>irc://server:port/channel</td></tr>
|
||||
<tr><td><i class="fa fa-phone"></i> Telephone</td><td>tel:number</td></tr>
|
||||
<tr><td><i class="fa fa-twitter"></i> Twitter</td><td>https://twitter.com/twitterhandle</td></tr>
|
||||
<tr><td><i class="fa fa-ticket"></i> URL</td><td>http(s)://*</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
|
|||
|
|
@ -13,35 +13,6 @@ angular.module("core-config-setup", ['angularFileUpload'])
|
|||
$scope.config = null;
|
||||
$scope.mapped = {};
|
||||
|
||||
$scope.parseDbUri = function(value) {
|
||||
if (!value) { return null; }
|
||||
|
||||
// Format: mysql+pymysql://<username>:<url escaped password>@<hostname>/<database_name>
|
||||
var uri = URI(value);
|
||||
return {
|
||||
'kind': uri.protocol(),
|
||||
'username': uri.username(),
|
||||
'password': uri.password(),
|
||||
'server': uri.hostname(),
|
||||
'port': uri.port(),
|
||||
'database': uri.path() ? uri.path().substr(1) : ''
|
||||
};
|
||||
};
|
||||
|
||||
$scope.serializeDbUri = function(fields) {
|
||||
if (!fields['server']) { return '' };
|
||||
|
||||
var uri = URI();
|
||||
uri = uri && uri.hostname(fields['server']);
|
||||
uri = uri && uri.protocol(fields['kind']);
|
||||
uri = uri && uri.username(fields['username']);
|
||||
uri = uri && uri.password(fields['password']);
|
||||
uri = uri && uri.port(fields['port']);
|
||||
uri = uri && uri.path('/' + (fields['database'] || ''));
|
||||
uri = uri && uri.toString();
|
||||
return uri;
|
||||
};
|
||||
|
||||
var githubSelector = function(key) {
|
||||
return function(value) {
|
||||
if (!value || !$scope.config) { return; }
|
||||
|
|
@ -116,7 +87,6 @@ angular.module("core-config-setup", ['angularFileUpload'])
|
|||
$scope.$watch('mapped.redis.password', redisSetter('password'));
|
||||
|
||||
$scope.$watch('config', function(value) {
|
||||
window.console.log(value);
|
||||
}, true);
|
||||
|
||||
$scope.$watch('isActive', function(value) {
|
||||
|
|
@ -394,6 +364,129 @@ angular.module("core-config-setup", ['angularFileUpload'])
|
|||
return directiveDefinitionObject;
|
||||
})
|
||||
|
||||
.directive('configContactsField', function () {
|
||||
var directiveDefinitionObject = {
|
||||
priority: 0,
|
||||
templateUrl: '/static/directives/config/config-contacts-field.html',
|
||||
priority: 1,
|
||||
replace: false,
|
||||
transclude: false,
|
||||
restrict: 'C',
|
||||
scope: {
|
||||
'binding': '=binding'
|
||||
},
|
||||
controller: function($scope, $element) {
|
||||
$scope.$watch('items', function(items) {
|
||||
if (!items) { return; }
|
||||
|
||||
// Remove the last item if both it and the second to last items are empty.
|
||||
if (items.length > 1 && !items[items.length - 2].value && !items[items.length - 1].value) {
|
||||
items.splice(items.length - 1, 1);
|
||||
return;
|
||||
}
|
||||
|
||||
// If the last item is non-empty, add a new item.
|
||||
if (items[items.length - 1].value) {
|
||||
items.push({'value': ''});
|
||||
}
|
||||
}, true);
|
||||
|
||||
$scope.$watch('binding', function(binding) {
|
||||
$scope.items = [];
|
||||
$scope.items.push({'value': ''});
|
||||
});
|
||||
}
|
||||
};
|
||||
return directiveDefinitionObject;
|
||||
})
|
||||
|
||||
.directive('configContactField', function () {
|
||||
var directiveDefinitionObject = {
|
||||
priority: 0,
|
||||
templateUrl: '/static/directives/config/config-contact-field.html',
|
||||
priority: 1,
|
||||
replace: false,
|
||||
transclude: true,
|
||||
restrict: 'C',
|
||||
scope: {
|
||||
'binding': '=binding'
|
||||
},
|
||||
controller: function($scope, $element) {
|
||||
$scope.kind = null;
|
||||
$scope.value = null;
|
||||
|
||||
var updateBinding = function() {
|
||||
var value = $scope.value || '';
|
||||
|
||||
switch ($scope.kind) {
|
||||
case 'mailto':
|
||||
$scope.binding = 'mailto:' + value;
|
||||
return;
|
||||
|
||||
case 'tel':
|
||||
$scope.binding = 'tel:' + value;
|
||||
return;
|
||||
|
||||
case 'irc':
|
||||
$scope.binding = 'irc://' + value;
|
||||
return;
|
||||
|
||||
default:
|
||||
$scope.binding = value;
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
$scope.$watch('kind', updateBinding);
|
||||
$scope.$watch('value', updateBinding);
|
||||
|
||||
$scope.$watch('binding', function(value) {
|
||||
if (!value) {
|
||||
$scope.kind = null;
|
||||
$scope.value = null;
|
||||
return;
|
||||
}
|
||||
|
||||
var uri = URI(value);
|
||||
$scope.kind = uri.scheme();
|
||||
|
||||
switch ($scope.kind) {
|
||||
case 'mailto':
|
||||
case 'tel':
|
||||
$scope.value = uri.path();
|
||||
break;
|
||||
|
||||
case 'irc':
|
||||
$scope.value = value.substr('irc://'.length);
|
||||
break;
|
||||
|
||||
default:
|
||||
$scope.kind = 'http';
|
||||
$scope.value = value;
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
$scope.getPlaceholder = function(kind) {
|
||||
switch (kind) {
|
||||
case 'mailto':
|
||||
return 'some@example.com';
|
||||
|
||||
case 'tel':
|
||||
return '555-555-5555';
|
||||
|
||||
case 'irc':
|
||||
return 'myserver:port/somechannel';
|
||||
|
||||
default:
|
||||
return 'http://some/url';
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
return directiveDefinitionObject;
|
||||
})
|
||||
|
||||
.directive('configStringField', function () {
|
||||
var directiveDefinitionObject = {
|
||||
priority: 0,
|
||||
|
|
|
|||
Reference in a new issue