Archived
1
0

Several improvements to the admin panel

This commit is contained in:
Marcel 2019-01-04 19:47:29 +01:00
parent 83f0b2a596
commit e79cc9b4ff
6 changed files with 195 additions and 91 deletions

View File

@ -89,11 +89,19 @@ defined('BASEPATH') OR exit('No direct script access allowed');
.tags .bootstrap-tagsinput {
width: 100%;
max-width: 100%;
font-size: 14px;
}
.tags .bootstrap-tagsinput > input {
margin: 5px 0;
}
.tags .tag {
display: inline-block;
width: unset;
background: #2272ff;
color: #fff !important;
border-radius: 25px;
}
.tags .tag::after {
@ -162,7 +170,8 @@ defined('BASEPATH') OR exit('No direct script access allowed');
</div>
<h1 class="post-title"><span id="postTitle" class="noEnter"></span></h1>
<h2 class="post-subtitle"><span id="postDescription"></span></h2>
<div id="postContent"></div>
<!-- <div id="postContent"></div>-->
<textarea id="postContent"></textarea>
</div>
<!--/.blog-item-->
</div>
@ -183,6 +192,7 @@ defined('BASEPATH') OR exit('No direct script access allowed');
<div class="tags">
<input type="text" data-role="tagsinput" id="postTags">
</div>
<!-- <input type="text" id="postTags">-->
</div>
<div class="row">
@ -207,11 +217,20 @@ defined('BASEPATH') OR exit('No direct script access allowed');
</label>
</div>
<div class="row">
<button class="btn btn-default btn-sm" id="blogPreview">
<i class="fa fa-eye"></i>
Vorschau
</button>
</div>
<div class="row">
<button class="btn btn-default btn-sm" id="blogPostSave">
<i class="fa fa-save"></i>
Speichern
</button>
<button class="btn btn-primary btn-sm" id="blogSubmit" data-loading-text="Lädt...">
<i class="fa fa-cloud"></i>
Veröffentlichen
</button>
</div>

View File

@ -10,8 +10,8 @@ defined('BASEPATH') OR exit('No direct script access allowed');
<div class="clearfix"></div>
</div>
<div class="x_content">
<iframe src="https://stats.kingofdog.eu/"
style="height:100vh;width:100%" frameborder="0" async></iframe>
<!-- <iframe src="https://stats.kingofdog.eu/"-->
<!-- style="height:100vh;width:100%" frameborder="0" async></iframe>-->
</div>
</div>
</div>

View File

@ -14,17 +14,16 @@ defined('BASEPATH') OR exit('No direct script access allowed');
<script src="/assets/js/lib/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="/assets/js/lib/tinymce5/tinymce.min.js"></script>
<?php
$scripts = [
'lib/jquery.min.js',
'lib/bootstrap-3.3.7.min.js',
'lib/typeahead.bundle.min.js',
'lib/datatables.js',
'lib/jquery.tagsinput.min.js',
'lib/moment.min.js',
'lib/bootstrap-datetimepicker.min.js',
'lib/bootstrap-tagsinput.min.js',
'fullcalendar/fullcalendar.min.js',
'fullcalendar/lang/de.js',
'lib/jquery.mCustomScrollbar.min.js',
@ -41,7 +40,5 @@ defined('BASEPATH') OR exit('No direct script access allowed');
<script src="<?= $scriptName ?>"></script>
</body>
</html>

View File

@ -19,7 +19,7 @@
'lib/jquery.mCustomScrollbar.min.css',
'lib/prism.min.css',
'lib/datatables.min.css',
'lib/bootstrap-tagsinput.min.css',
'lib/fullcalendar.min.css',
'lib/flag-icon.min.css'
];
@ -228,7 +228,7 @@
<ul class="nav navbar-nav navbar-right">
<li class="">
<a href="javascript:;" class="user-profile dropdown-toggle" data-toggle="dropdown"
<a href="javascript:" class="user-profile dropdown-toggle" data-toggle="dropdown"
aria-expanded="false">
<img src="<?= $_SESSION['user']['profilePic'] ?>"
alt=""><?= $_SESSION['user']['displayname'] ?>
@ -257,7 +257,7 @@
</li>
<li role="presentation" class="dropdown">
<a href="javascript:;" class="dropdown-toggle info-number" data-toggle="dropdown"
<a href="javascript:" class="dropdown-toggle info-number" data-toggle="dropdown"
aria-expanded="false">
<i class="far fa-envelope"></i>
<span class="badge bg-blue" id="notificationCount"></span>

View File

@ -3,6 +3,7 @@
?>
<div class="right_col" role="main">
<div class="row">
<form class="form" method="POST">
<div class="col-md-6 col-sm-8 col-xs-8">
<div class="x_panel">
<div class="x_title">
@ -10,7 +11,6 @@
<div class="clearfix"></div>
</div>
<div class="x_content">
<form class="form" method="POST">
<div class="form-group" aria-describedby="#rank-help">
<b>Rang</b>
<br>
@ -73,7 +73,6 @@
Unbeschränkter Zugriff auf alle Funktionen.
</span>
<input type="submit" class="btn btn-primary" value="Speichern">
</form>
</div>
</div>
</div>
@ -85,8 +84,9 @@
<div class="clearfix"></div>
</div>
<div class="x_content">
<form method="POST" class="form">
<div class="permissions">
<?php foreach ($availablePermissions as $group => $perms): ?>
<div class="permission-group">
<h4>
<?= $group ?>
@ -98,15 +98,17 @@
$name = $group . '.' . $perm; ?>
<li>
<label data-toggle="tooltip" title="blablabla" for="<?= $group . $perm ?>"><?= $name ?></label>
<input type="checkbox" value="true" name="permissions[<?= $group . $perm ?>]" id="<?= $group . $perm ?>" <?= in_array($name, $permissions) ? 'checked' : '' ?>>
<input type="checkbox" value="true" class="perm-box" name="permissions[<?= $group . $perm ?>]" id="<?= $group . $perm ?>" <?= in_array($name, $permissions) ? 'checked' : '' ?>>
</li>
<?php endforeach; ?>
</ul>
</div>
<?php endforeach; ?>
</div>
<input type="submit" class="btn btn-primary" value="Speichern">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>

View File

@ -15,26 +15,36 @@ const toolbarOptions = [
['clean']
];
const quill = new Quill('#postContent', {
theme: 'snow',
bounds: '#postContent .ql-editor',
modules: {
syntax: true,
toolbar: toolbarOptions
}
// const quill = new Quill('#postContent', {
// theme: 'snow',
// bounds: '#postContent .ql-editor',
// modules: {
// syntax: true,
// toolbar: toolbarOptions
// }
// });
const editor = tinymce.init({
selector: '#postContent',
plugins: [
'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker',
'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
'save table contextmenu directionality emoticons template paste textcolor'
],
templates: '/admin/blog/getTemplates',
toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons'
});
let changeUrl = true;
// var edits = ["#title", "#description", "#content"];
// Prevent the backspace key from navigating back.
// $(document).on("keydown", function (e) {
// if (e.which === 8 && !$(e.target||e.srcElement).is("span, [contenteditable=true]")) {
// e.preventDefault();
// return false;
// }
// });
$(document).on("keydown", function (e) {
if (e.which === 8 && !$(e.target || e.srcElement).is("span, [contenteditable=true], input")) {
e.preventDefault();
return false;
}
});
// var autolist = new AutoList();
// var editor = new MediumEditor('#content', {
@ -101,43 +111,38 @@ function prepareString(input) {
return input;
}
/*$('#content').bind('click', function () {
$(this).attr('contentEditable', true);
}).blur(
function () {
$(this).attr('contentEditable', false);
});*/
var shift = false;
$('span').keydown(function (e) {
var key = e.keyCode;
console.log(key);
const edits = ["#postTitle", "#postDescription", ".ql-editor"];
$(edits.toString()).keydown(function (e) {
const key = e.key;
// Shift Control
if (key === 16) {
if (key === 'Shift') {
shift = true;
}
// Ctrl + Return Control
if (key === 13 && (e.ctrlKey || e.metaKey)) {
console.log('test');
if (key === 'Enter' && (e.ctrlKey || e.metaKey)) {
e.preventDefault();
$(this).attr('contentEditable', false);
}
// Tab Control
if (key === 9) {
if (key === 'Tab') {
e.preventDefault();
$(this).attr('contentEditable', false);
var pos = edits.indexOf("#" + $(this).attr('id'));
console.log(pos);
let pos = edits.findIndex(edit => edit === '#' + $(this).attr('id') || $(this).hasClass(edit.substr(1)));
if (shift) {
$(edits[pos - 1]).attr('contentEditable', true);
pos--;
if (pos < 0)
pos = edits.length - 1;
} else {
$(edits[pos + 1]).attr('contentEditable', true);
pos++;
if (pos >= edits.length)
pos = 0;
}
$(edits[pos]).attr('contenteditable', true).focus();
}
@ -163,6 +168,37 @@ $('span').keyup(function (e) {
}
});
const existingTags = new Bloodhound({
// datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
// queryTokenizer: Bloodhound.tokenizers.whitespace,
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
// prefetch: {
// url: '/admin/blog/tagsList',
// filter: function (list) {
// return $.map(list, function (cityname) {
// return {name: cityname};
// });
// }
// }
prefetch: {
url: '/admin/blog/tagsList',
cache: true
}
// local: ['Hallo Welt', 'Hund', 'Test', 'Geht doch']
});
existingTags.initialize();
// $('#postTags').typeahead({
// hint: true,
// highlight: true,
// minLength: 1
// }, {
// name: 'existingTags',
// source: existingTags,
// });
let tagsList = [];
$(function () {
$.ajax({
@ -176,12 +212,16 @@ $(function () {
}
});
$('#postTags').tagsinput();
// $('#postTags').tagsinput();
//
$('#postTags').tagsinput({
// itemText: 'display_name',
typeaheadjs: {
name: 'blogposttags',
source: substringMatcher(tagsList)
source: ['Test', 'Value'],
name: 'existingTags',
// displayKey: 'display_name',
// source: existingTags.ttAdapter()
// source: substringMatcher(['Hallo', 'test', 'Hund'])
}
});
@ -219,9 +259,9 @@ $(function () {
});
});
Number.prototype.pad = function(size) {
Number.prototype.pad = function (size) {
let s = String(this);
while(s.length < (size || 2)) s = "0" + s;
while (s.length < (size || 2)) s = "0" + s;
return s;
};
@ -455,16 +495,61 @@ function publishPost() {
})
}
$('#blogPostSave').on('click', () => {
$('#blogPostSave').click(() => {
$(this).button('loading');
sendPost();
});
$('#blogSubmit').on('click', function () {
$('#blogSubmit').click(() => {
$(this).button('loading');
sendPost(publishPost);
});
$('#blogPreview').click(() => openPreview());
let timeoutPreview;
$('body').keyup(() => {
if (timeoutPreview)
clearTimeout(timeoutPreview);
timeoutPreview = setTimeout(() => {
if (previewWindow)
openPreview();
}, 1000);
});
let previewID;
let previewWindow;
function openPreview() {
const data = {
postTitle: $('#postTitle').text(),
postDesc: $('#postDescription').text(),
// postContent: $('.ql-editor').html(),
postContent: tinymce.get('postContent').getContent(),
};
if (previewID)
data.previewID = previewID;
$.ajax({
url: '/admin/blog/updatePreview',
data: data,
method: 'POST',
success: (data) => {
if (data.success) {
previewID = data.previewID;
console.log(data.session);
if (!previewWindow) {
previewWindow = window.open('http://192.168.178.39/admin/blog/preview?id=' + previewID, '_BLANK');
} else {
previewWindow.location.reload();
previewWindow.opener.focus();
}
}
}
});
}
// Upload Header Image
$('.upload-btn').on('change', '.upload-image', function () {
$('.upload-btn').fadeOut();
@ -512,9 +597,9 @@ $('.upload-btn').on('change', '.upload-image', function () {
reader.readAsDataURL(file);
});
var substringMatcher = function (strs) {
function substringMatcher(strs) {
return function findMatches(q, cb) {
var matches, substringRegex;
let matches, substrRegex;
// an array that will be populated with substring matches
matches = [];
@ -522,16 +607,17 @@ var substringMatcher = function (strs) {
// regex used to determine if a string contains the substring `q`
substrRegex = new RegExp(q, 'i');
console.log('ich bin auc hdavbei #.');
// iterate through the pool of strings and for any string that
// contains the substring `q`, add it to the `matches` array
$.each(strs, function (i, str) {
if (substrRegex.test(str)) {
console.log(str);
matches.push(str);
}
});
cb(matches);
};
};
}