group creation and deletion
Julian Lam
12 years ago
parent
f2b8813fb9
commit
85ac4aac94
@ -0,0 +1,70 @@
|
||||
$(document).ready(function() {
|
||||
var createEl = document.getElementById('create'),
|
||||
createModal = $('#create-modal'),
|
||||
createSubmitBtn = document.getElementById('create-modal-go'),
|
||||
createNameEl = $('#create-group-name'),
|
||||
detailsModal = $('#group-details-modal'),
|
||||
listEl = $('#groups-list');
|
||||
|
||||
createEl.addEventListener('click', function() {
|
||||
createModal.modal('show');
|
||||
setTimeout(function() {
|
||||
createNameEl.focus();
|
||||
}, 250);
|
||||
}, false);
|
||||
|
||||
createSubmitBtn.addEventListener('click', function() {
|
||||
var submitObj = {
|
||||
name: createNameEl.val(),
|
||||
description: $('#create-group-desc').val()
|
||||
},
|
||||
errorEl = $('#create-modal-error'),
|
||||
errorText;
|
||||
|
||||
socket.emit('api:groups.create', submitObj, function(err, data) {
|
||||
if (err) {
|
||||
switch(err) {
|
||||
case 'group-exists':
|
||||
errorText = '<strong>Please choose another name</strong><p>There seems to be a group with this name already.</p>';
|
||||
break;
|
||||
case 'name-too-short':
|
||||
errorText = '<strong>Please specify a grou name</strong><p>A group name is required for administrative purposes.</p>';
|
||||
break;
|
||||
default:
|
||||
errorText = '<strong>Uh-Oh</strong><p>There was a problem creating your group. Please try again later!</p>';
|
||||
break;
|
||||
}
|
||||
|
||||
errorEl.html(errorText).removeClass('hide');
|
||||
} else {
|
||||
createModal.modal('hide');
|
||||
errorEl.addClass('hide');
|
||||
createNameEl.val('');
|
||||
ajaxify.go('admin/groups');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
listEl.on('click', 'button[data-action]', function() {
|
||||
var action = this.getAttribute('data-action'),
|
||||
gid = $(this).parents('li[data-gid]').attr('data-gid');
|
||||
|
||||
switch(action) {
|
||||
case 'delete':
|
||||
bootbox.confirm('Are you sure you wish to delete this group?', function(confirm) {
|
||||
if (confirm) {
|
||||
socket.emit('api:groups.delete', gid, function(err, data) {
|
||||
if (data === 'OK') ajaxify.go('admin/groups');
|
||||
});
|
||||
}
|
||||
});
|
||||
break;
|
||||
case 'members':
|
||||
socket.emit('api:groups.get', gid, function(err, groupObj) {
|
||||
console.log(groupObj);
|
||||
detailsModal.modal('show');
|
||||
});
|
||||
break;
|
||||
}
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,100 @@
|
||||
<h1>Groups</h1>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="groups">
|
||||
<ul id="groups-list">
|
||||
<!-- BEGIN groups -->
|
||||
<li data-gid="{groups.gid}">
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<h2>{groups.name}</h2>
|
||||
<p>{groups.description}</p>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-default" data-action="members">Members</button>
|
||||
<button class="btn btn-danger" data-action="delete">Delete Group</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<ul class="pull-right members">
|
||||
<!-- BEGIN members -->
|
||||
<li title="{groups.members.username}"><img src="http://www.gravatar.com/avatar/e1565907855fffe8433c31671a49f177?size=128&default=identicon&rating=pg" /></li>
|
||||
<!-- END members -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<!-- END groups -->
|
||||
</ul>
|
||||
|
||||
<div class="text-center">
|
||||
<button class="btn btn-primary" id="create">New Group</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="{relative_path}/src/forum/admin/groups.js"></script>
|
||||
|
||||
<div class="modal fade" id="create-modal">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h4 class="modal-title">Create Group</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="alert alert-danger hide" id="create-modal-error"></div>
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label for="group-name">Group Name</label>
|
||||
<input type="text" class="form-control" id="create-group-name" placeholder="Group Name" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="group-name">Description</label>
|
||||
<input type="text" class="form-control" id="create-group-desc" placeholder="A short description about your group" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary" id="create-modal-go">Create</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="group-details-modal">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h4 class="modal-title">Manage Group</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="alert alert-danger hide" id="create-modal-error"></div>
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label for="group-name">Group Name</label>
|
||||
<input type="text" class="form-control" id="create-group-name" placeholder="Group Name" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="group-name">Description</label>
|
||||
<input type="text" class="form-control" id="create-group-desc" placeholder="A short description about your group" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Members</label>
|
||||
<ul class="members" id="group-details-members"></ul>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="add-member">Add User to Group</label>
|
||||
<input type="text" class="form-control" id="group-details-search" placeholder="Search Users" />
|
||||
<ul class="members" id="group-details-search-results">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary" id="create-modal-go">Create</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue