open-source-mirrors
/
Ombi
mirror of https://github.com/Ombi-app/Ombi
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Tidied up some of the angular code, split the UI into it's own directives for easier maintainability

Browse Source 
Also changed the spinner to white for #715
pull/733/head
Jamie.Rees 8 years ago
parent a2639375fb
commit 0185e8238d
13 changed files with 263 additions and 202 deletions
Show Stats Download Patch File Download Diff File

8
PlexRequests.Core/SecurityExtensions.cs
Unescape View File

@ -67,12 +67,20 @@ namespace PlexRequests.Core
public bool IsPlexUser(IUserIdentity user)
{
if (user == null)
{
return false;
}
var plexUser = PlexUsers.GetUserByUsername(user.UserName);
return plexUser != null;
}
public bool IsNormalUser(IUserIdentity user)
{
if (user == null)
{
return false;
}
var dbUser = UserRepository.GetUserByUsername(user.UserName);
return dbUser != null;

42
PlexRequests.UI/Content/Angular/angular-loading-spinner.js vendored
Unescape View File

@ -1,25 +1,27 @@
(function(){
(function() {
angular.module('ngLoadingSpinner', ['angularSpinner'])
.directive('usSpinner', ['$http', '$rootScope' ,function ($http, $rootScope){
return {
link: function (scope, elm, attrs)
{
$rootScope.spinnerActive = false;
scope.isLoading = function () {
return $http.pendingRequests.length > 0;
};
.directive('usSpinner',
[
'$http', '$rootScope', function($http, $rootScope) {
return {
link: function(scope, elm, attrs) {
$rootScope.spinnerActive = false;
scope.isLoading = function() {
return $http.pendingRequests.length > 0;
};
scope.$watch(scope.isLoading, function (loading)
{
$rootScope.spinnerActive = loading;
if(loading){
elm.removeClass('ng-hide');
}else{
elm.addClass('ng-hide');
scope.$watch(scope.isLoading,
function(loading) {
$rootScope.spinnerActive = loading;
if (loading) {
elm.removeClass('ng-hide');
} else {
elm.addClass('ng-hide');
}
});
}
});
}
};
};
}]);
}
]);
}).call(this);

4
PlexRequests.UI/Content/app/app.js
Unescape View File

@ -1,4 +1,8 @@
(function() {
module = angular.module('PlexRequests', ['ngLoadingSpinner']);
module.constant("moment", moment);
//module.config(['usSpinnerConfigProvider', function (usSpinnerConfigProvider) {
// usSpinnerConfigProvider.setDefaults({ color: 'white' });
//}]);
}());

37
PlexRequests.UI/Content/app/userManagement/Directives/addUser.html
Unescape View File

@ -0,0 +1,37 @@
<form name="userform" ng-submit="addUser()" novalidate>
<div class="form-group">
<input id="username" type="text" placeholder="user" ng-model="user.username" class="form-control form-control-custom" />
</div>
<div class="form-group">
<input id="password" type="password" placeholder="password" ng-model="user.password" class="form-control form-control-custom" />
</div>
<div class="form-group">
<input id="email" type="email" placeholder="email address" ng-model="user.email" class="form-control form-control-custom" />
</div>
<div class="row">
<h3>Permissions: </h3>
<div class="col-md-5">
<div class="checkbox" ng-repeat="permission in permissions">
<input id="permission_{{$id}}" class="checkbox-custom" name="permission[]"
ng-checked="permission.selected" ng-model="permission.selected" type="checkbox" value="{{permission.value}}" />
<label for="permission_{{$id}}">{{permission.name}}</label>
</div>
</div>
<h3>Features: </h3>
<div class="col-md-5">
<div class="checkbox" ng-repeat="f in features">
<input id="features_{{$id}}" class="checkbox-custom" name="f[]"
ng-checked="f.selected" ng-model="f.selected" type="checkbox" value="{{f.value}}" />
<label for="features_{{$id}}">{{f.name}}</label>
</div>
</div>
</div>
<div class="row">
<input type="submit" class="btn btn-success-outline" value="Add" />
<button type="button" ng-click="redirectToSettings()" class="btn btn-primary-outline" style="float: right; margin-right: 10px;">Settings</button>
</div>
</form>

54
PlexRequests.UI/Content/app/userManagement/Directives/sidebar.html
Unescape View File

@ -0,0 +1,54 @@
 <!--Sidebar-->
<div id="sidebar-wrapper" class="shadow">
<div style="margin-left:15px">
<br />
<br />
<img ng-show="selectedUser.plexInfo.thumb" class="col-md-pull-1 img-circle" style="position: absolute" ng-src="{{selectedUser.plexInfo.thumb}}" />
<div hidden="hidden" ng-bind="selectedUser.id"></div>
<div>
<strong>Username: </strong><span ng-bind="selectedUser.username"></span>
</div>
<div ng-show="selectedUser.emailAddress">
<strong>Email Address: </strong><span ng-bind="selectedUser.emailAddress"></span>
</div>
<div>
<strong>User Type: </strong><span ng-bind="selectedUser.type === 1 ? 'Local User' : 'Plex User'"></span>
</div>
<br />
<br />
<div ng-show="selectedUser">
<!--Edit-->
<strong>Modify Permissions:</strong>
<!--Load all permissions-->
<div class="checkbox" ng-repeat="p in selectedUser.permissions">
<input id="permissionsCheckbox_{{$id}}" class="checkbox-custom" name="permissions[]" ng-checked="p.selected" ng-model="p.selected" type="checkbox" value="{{p.value}}" />
<label for="permissionsCheckbox_{{$id}}">{{p.name}}</label>
</div>
<strong>Modify Features:</strong>
<!--Load all features-->
<div class="checkbox" ng-repeat="p in selectedUser.features">
<input id="featuresCheckbox_{{$id}}" class="checkbox-custom" name="features[]" ng-checked="p.selected" ng-model="p.selected" type="checkbox" value="{{p.value}}" />
<label for="featuresCheckbox_{{$id}}">{{p.name}}</label>
</div>
<strong>Email Address</strong>
<div class="form-group">
<input id="emailAddress" type="email" ng-model="selectedUser.emailAddress" ng-disabled="selectedUser.type === 0" class="form-control form-control-custom" />
</div>
<strong>Alias</strong>
<div class="form-group">
<input id="alias" type="text" ng-model="selectedUser.alias" class="form-control form-control-custom" />
</div>
<button ng-click="updateUser()" class="btn btn-primary-outline">Update</button>
<button ng-click="deleteUser()" class="btn btn-danger-outline">Delete</button>
<button ng-click="closeSidebarClick()" style="float: right; margin-right: 10px;" class="btn btn-danger-outline">Close</button>
</div>
</div>
</div>
<!--SideBar End-->

86
PlexRequests.UI/Content/app/userManagement/Directives/table.html
Unescape View File

@ -0,0 +1,86 @@

<!--Search-->
<form>
<div class="row">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-search"></i>
</div>
<input type="text" class="form-control" placeholder="Search" ng-model="searchTerm">
</div>
</div>
</div>
</form>
<!-- Table -->
<table class="table table-striped table-hover table-responsive table-condensed">
<thead>
<tr>
<th>
<a href="#IDoNotExist" ng-click="sortType = 'username'; sortReverse = !sortReverse">
Username
<span ng-show="sortType == 'username' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'username' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
<th>
<a href="#IDoNotExist" ng-click="sortType = 'alias'; sortReverse = !sortReverse">
Alias
<span ng-show="sortType == 'alias' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'alias' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
<th>
<a href="#IDoNotExist" ng-click="sortType = 'emailAddress'; sortReverse = !sortReverse">
Email
<span ng-show="sortType == 'emailAddress' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'emailAddress' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
<th>
Permissions
</th>
<th ng-hide="hideColumns">
<a href="#IDoNotExist" ng-click="sortType = 'type'; sortReverse = !sortReverse">
User Type
<span ng-show="sortType == 'type' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'type' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
<th ng-hide="hideColumns">
<a href="#IDoNotExist" ng-click="sortType = 'lastLoggedIn'; sortReverse = !sortReverse">
Last Logged In
<span ng-show="sortType == 'lastLoggedIn' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'lastLoggedIn' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="u in users | orderBy:sortType:sortReverse | filter:searchTerm">
<td>
{{u.username}}
</td>
<td>
{{u.alias}}
</td>
<td>
{{u.emailAddress}}
</td>
<td>
{{u.permissionsFormattedString}}
</td>
<td ng-hide="hideColumns">
{{u.type === 1 ? 'Local User' : 'Plex User'}}
</td>
<td ng-hide="hideColumns" ng-bind="u.lastLoggedIn === minDate ? 'Never' : formatDate(u.lastLoggedIn)"></td>
<td>
<a href="#IDontExist" ng-click="selectUser(u.id)" class="btn btn-sm btn-info-outline">Details/Edit</a>
</td>
</tr>
</tbody>
</table>

25
PlexRequests.UI/Content/app/userManagement/Directives/userManagementDirective.js
Unescape View File

@ -0,0 +1,25 @@
(function () {
module.directive('tableComponent',
function () {
return {
templateUrl: createBaseUrl(getBaseUrl(), 'Content/app/userManagement/Directives/table.html')
};
})
.directive('addUser',
function () {
return {
templateUrl: createBaseUrl(getBaseUrl(), 'Content/app/userManagement/Directives/addUser.html')
};
})
.directive('sidebar',
function () {
return {
templateUrl: createBaseUrl(getBaseUrl(), 'Content/app/userManagement/Directives/sidebar.html')
};
});
function getBaseUrl() {
return $('#baseUrl').text();
}
})();

2
PlexRequests.UI/Content/base.css
Unescape View File

@ -369,7 +369,7 @@ label {
margin-right: -250px;
overflow-y: auto;
background: #4e5d6c;
padding-left: 15px;
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;

2
PlexRequests.UI/Content/base.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
PlexRequests.UI/Content/base.scss
Unescape View File

@ -460,7 +460,7 @@ $border-radius: 10px;
margin-right: -250px;
overflow-y: auto;
background: #4e5d6c;
padding-left:15px;
padding-left:0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;

1
PlexRequests.UI/Helpers/BaseUrlHelper.cs
Unescape View File

@ -224,6 +224,7 @@ namespace PlexRequests.UI.Helpers
sb.Append($"<script src=\"{content}/Content/app/userManagement/userManagementController.js?v={Assembly}\" type=\"text/javascript\"></script>");
sb.Append($"<script src=\"{content}/Content/app/userManagement/userManagementService.js?v={Assembly}\" type=\"text/javascript\"></script>");
sb.Append($"<script src=\"{content}/Content/app/userManagement/Directives/userManagementDirective.js?v={Assembly}\" type=\"text/javascript\"></script>");
sb.Append($"<script src=\"{content}/Content/moment.min.js\"></script>");
sb.Append($"<script src=\"{content}/Content/spin.min.js\"></script>");
sb.Append($"<script src=\"{content}/Content/Angular/angular-spinner.min.js\"></script>");

12
PlexRequests.UI/PlexRequests.UI.csproj
Unescape View File

@ -304,6 +304,18 @@
<Content Include="Content\app\requests\requestsService.js">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</Content>
<Content Include="Content\app\userManagement\Directives\sidebar.html">
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</Content>
<Content Include="Content\app\userManagement\Directives\addUser.html">
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</Content>
<Content Include="Content\app\userManagement\Directives\table.html">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</Content>
<Content Include="Content\app\userManagement\Directives\userManagementDirective.js">
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</Content>
<Content Include="Content\awesome-bootstrap-checkbox.css">
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</Content>

190
PlexRequests.UI/Views/UserManagement/Index.cshtml
Unescape View File

@ -1,64 +1,13 @@
@using PlexRequests.UI.Helpers
@inherits PlexRequests.UI.Helpers.AngularViewBase
@inherits PlexRequests.UI.Helpers.AngularViewBase
@using PlexRequests.UI.Helpers
@Html.LoadUserManagementAssets()
<div id="wrapper" class="toggled" ng-controller="userManagementController" ng-init="init()" ng-cloak>
<span us-spinner="{radius:30, width:8, length: 16}"></span>
<b>Spinner Active: </b>
{{spinnerActive}}
<!--Sidebar-->
<div id="sidebar-wrapper" class="shadow">
<br />
<br />
<img ng-show="selectedUser.plexInfo.thumb" class="col-md-pull-1 img-circle" style="position: absolute" ng-src="{{selectedUser.plexInfo.thumb}}" />
<div hidden="hidden" ng-bind="selectedUser.id"></div>
<div>
<strong>Username: </strong><span ng-bind="selectedUser.username"></span>
</div>
<div ng-show="selectedUser.emailAddress">
<strong>Email Address: </strong><span ng-bind="selectedUser.emailAddress"></span>
</div>
<div>
<strong>User Type: </strong><span ng-bind="selectedUser.type === 1 ? 'Local User' : 'Plex User'"></span>
</div>
<br />
<br />
<div ng-show="selectedUser">
<!--Edit-->
<strong>Modify Permissions:</strong>
<!--Load all permissions-->
<div class="checkbox" ng-repeat="p in selectedUser.permissions">
<input id="permissionsCheckbox_{{$id}}" class="checkbox-custom" name="permissions[]" ng-checked="p.selected" ng-model="p.selected" type="checkbox" value="{{p.value}}" />
<label for="permissionsCheckbox_{{$id}}">{{p.name}}</label>
</div>
<strong>Modify Features:</strong>
<!--Load all features-->
<div class="checkbox" ng-repeat="p in selectedUser.features">
<input id="featuresCheckbox_{{$id}}" class="checkbox-custom" name="features[]" ng-checked="p.selected" ng-model="p.selected" type="checkbox" value="{{p.value}}" />
<label for="featuresCheckbox_{{$id}}">{{p.name}}</label>
</div>
<strong>Email Address</strong>
<div class="form-group">
<input id="emailAddress" type="email" ng-model="selectedUser.emailAddress" ng-disabled="selectedUser.type === 0" class="form-control form-control-custom" />
</div>
<strong>Alias</strong>
<div class="form-group">
<input id="alias" type="text" ng-model="selectedUser.alias" class="form-control form-control-custom" />
</div>
<div id="wrapper" class="toggled" ng-controller="userManagementController" ng-init="init()" ng-cloak>
<span us-spinner="{radius:30, width:8, length: 16, color: '#ffffff' }"></span>
<button ng-click="updateUser()" class="btn btn-primary-outline">Update</button>
<button ng-click="deleteUser()" class="btn btn-danger-outline">Delete</button>
<button ng-click="closeSidebarClick()" style="float: right; margin-right: 10px;" class="btn btn-danger-outline">Close</button>
</div>
</div>
<!--SideBar End-->
<sidebar></sidebar>
<div>
<div class="container-fluid">
@ -70,131 +19,14 @@
<br>
<br>
<div ng-show="error.error" ng-bind="error.errorMessage"></div>
<br/>
<br/>
<br/>
<form name="userform" ng-submit="addUser()" novalidate>
<div class="form-group">
<input id="username" type="text" placeholder="user" ng-model="user.username" class="form-control form-control-custom" />
</div>
<div class="form-group">
<input id="password" type="password" placeholder="password" ng-model="user.password" class="form-control form-control-custom" />
</div>
<div class="form-group">
<input id="email" type="email" placeholder="email address" ng-model="user.email" class="form-control form-control-custom" />
</div>
<div class="row">
<h3>Permissions: </h3>
<div class="col-md-5">
<div class="checkbox" ng-repeat="permission in permissions">
<input id="permission_{{$id}}" class="checkbox-custom" name="permission[]"
ng-checked="permission.selected" ng-model="permission.selected" type="checkbox" value="{{permission.value}}" />
<label for="permission_{{$id}}">{{permission.name}}</label>
</div>
</div>
<h3>Features: </h3>
<div class="col-md-5">
<div class="checkbox" ng-repeat="f in features">
<input id="features_{{$id}}" class="checkbox-custom" name="f[]"
ng-checked="f.selected" ng-model="f.selected" type="checkbox" value="{{f.value}}" />
<label for="features_{{$id}}">{{f.name}}</label>
</div>
</div>
</div>
<div class="row">
<input type="submit" class="btn btn-success-outline" value="Add" />
<button type="button" ng-click="redirectToSettings()" class="btn btn-primary-outline" style="float: right; margin-right: 10px;">Settings</button>
</div>
</form>
<form>
<div class="row">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-search"></i>
</div>
<input type="text" class="form-control" placeholder="Search" ng-model="searchTerm">
</div>
</div>
</div>
</form>
<br />
<br />
<br />
<add-User></add-User>
<table class="table table-striped table-hover table-responsive table-condensed">
<thead>
<tr>
<th>
<a href="#" ng-click="sortType = 'username'; sortReverse = !sortReverse">
Username
<span ng-show="sortType == 'username' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'username' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
<th>
<a href="#" ng-click="sortType = 'alias'; sortReverse = !sortReverse">
Alias
<span ng-show="sortType == 'alias' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'alias' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
<th>
<a href="#" ng-click="sortType = 'emailAddress'; sortReverse = !sortReverse">
Email
<span ng-show="sortType == 'emailAddress' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'emailAddress' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
<th>
Permissions
</th>
<th ng-hide="hideColumns">
<a href="#" ng-click="sortType = 'type'; sortReverse = !sortReverse">
User Type
<span ng-show="sortType == 'type' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'type' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
<th ng-hide="hideColumns">
<a href="#" ng-click="sortType = 'lastLoggedIn'; sortReverse = !sortReverse">
Last Logged In
<span ng-show="sortType == 'lastLoggedIn' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'lastLoggedIn' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="u in users | orderBy:sortType:sortReverse | filter:searchTerm">
<td>
{{u.username}}
</td>
<td>
{{u.alias}}
</td>
<td>
{{u.emailAddress}}
</td>
<td>
{{u.permissionsFormattedString}}
</td>
<td ng-hide="hideColumns">
{{u.type === 1 ? 'Local User' : 'Plex User'}}
</td>
<td ng-hide="hideColumns" ng-bind="u.lastLoggedIn === minDate ? 'Never' : formatDate(u.lastLoggedIn)"></td>
<td>
<a href="#IDontExist" ng-click="selectUser(u.id)" class="btn btn-sm btn-info-outline">Details/Edit</a>
</td>
</tr>
</tbody>
</table>
<table-Component></table-Component>
</div>
</div>
</div>

Write Preview
Loading…
Cancel
Save