Html assets

assets/cp.scripts.js

@@ -0,0 +1,126 @@
+function GetModalAlertTmpl(title, message, error) {
+	return '<div class="alert alert-' + (!error?'success':'danger') + ' alert-dismissible fade show" role="alert"><strong>' + title + '</strong> ' + message + '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>';
+}
+
+function ShowSystemMsg(title, message, error) {
+	var modal_alert_place = $('.modal.show .sys-messages');
+	if(!modal_alert_place.length) {
+		modal_alert_place = $('form.alert-here .sys-messages');
+	}
+	if(modal_alert_place.length) {
+		modal_alert_place.html(GetModalAlertTmpl(title, message, error));
+	}
+}
+
+function ShowSystemMsgSuccess(title, message) {
+	ShowSystemMsg(title, message, false);
+}
+
+function ShowSystemMsgError(title, message) {
+	ShowSystemMsg(title, message, true);
+}
+
+function AjaxDone(data) {
+	try {
+		eval(data);
+	} catch(e) {
+		if(e instanceof SyntaxError) {
+			console.log(data);
+			console.log('JavaScript Eval Error', e.message)
+		}
+	}
+}
+
+function AjaxFail() {
+	console.log('Form send fail, page will be reloaded');
+	window.location.reload(false);
+}
+
+function ActionSingOut() {
+	$.ajax({
+		type: "POST",
+		url: '/cp/',
+		data: {
+			action: 'singout',
+		}
+	}).done(function(data) {
+		AjaxDone(data)
+	}).fail(function() {
+		AjaxFail();
+	});
+}
+
+$(document).ready(function() {
+	// Ajax forms
+	$('form').each(function() {
+		$(this).submit(function(e) {
+			var form = $(this);
+			if(form.hasClass('loading')) {
+				e.preventDefault();
+				return;
+			}
+
+			// Block send button
+			form.addClass('loading').addClass('alert-here');
+			var button = $(this).find('button[type=submit]');
+			button.addClass('progress-bar-striped').addClass('progress-bar-animated');
+
+			// Another button
+			if(button.attr('data-target') != '') {
+				$('#' + button.attr('data-target')).addClass('progress-bar-striped').addClass('progress-bar-animated');
+			}
+
+			// Clear form messages
+			form.find('.sys-messages').html('');
+
+			$.ajax({
+				type: "POST",
+				url: form.attr('action'),
+				data: form.serialize()
+			}).done(function(data) {
+				AjaxDone(data)
+			}).fail(function() {
+				AjaxFail();
+			}).always(function() {
+				// Add delay for one second
+				setTimeout(function() {
+					form.removeClass('loading').removeClass('alert-here');
+					button.removeClass('progress-bar-striped').removeClass('progress-bar-animated');
+					// Another button
+					if(button.attr('data-target') != '') {
+						$('#' + button.attr('data-target')).removeClass('progress-bar-striped').removeClass('progress-bar-animated');
+					}
+				}, 100);
+			});
+
+			e.preventDefault();
+		});
+
+		// Bind to another button
+		var button = $(this).find('button[type=submit]');
+		if(button.attr('data-target') != '') {
+			$('#' + button.attr('data-target')).click(function() {
+				button.click();
+			});
+		}
+	});
+
+	// Remove alert from modal on close
+	$('.modal.fade').on('hidden.bs.modal', function() {
+		modal_alert_place = $(this).find('.sys-messages');
+		if(modal_alert_place.length) {
+			modal_alert_place.html('');
+		}
+		// Reset form at modal close
+		form = $(this).find('form');
+		if(form.length) {
+			form[0].reset();
+		}
+	}).on('show.bs.modal', function() {
+		// Reset form at modal open
+		form = $(this).find('form');
+		if(form.length) {
+			form[0].reset();
+		}
+	});
+});

assets/cp.styles.css

@@ -0,0 +1,290 @@
+/* Bootstrap scroll fix */
+body.cp {
+	padding-right: 0px !important;
+}
+
+/* Bootstrap modal CP padding fix */
+.cp .navbar {
+	padding: .5rem 1rem !important;
+}
+
+/* Bootstrap dropdown hover fix */
+.dropdown-item:focus, .dropdown-item:hover {
+	background-color: #f1f1f1;
+}
+
+.dropdown-item.active, .dropdown-item:active {
+	background-color: #007bff;
+}
+
+/* Login/MySQL form */
+body.cp-login,
+body.cp-mysql,
+body.cp-first-user {
+	height: 100%;
+	display: -ms-flexbox;
+	display: -webkit-box;
+	display: flex;
+	-ms-flex-align: center;
+	-ms-flex-pack: center;
+	-webkit-box-align: center;
+	align-items: center;
+	-webkit-box-pack: center;
+	justify-content: center;
+	padding-top: 40px;
+	padding-bottom: 40px;
+	background-color: #f5f5f5;
+}
+
+.cp-login .form-signin,
+.cp-mysql .form-signin,
+.cp-first-user .form-signin {
+	width: 100%;
+	max-width: 330px;
+	padding: 15px;
+	margin: 0 auto;
+}
+
+.cp-login .form-signin label,
+.cp-mysql .form-signin label,
+.cp-first-user .form-signin label {
+	cursor: pointer;
+}
+
+.cp-login .form-signin .form-control,
+.cp-mysql .form-signin .form-control,
+.cp-first-user .form-signin .form-control {
+	position: relative;
+	box-sizing: border-box;
+	height: auto;
+	padding: 10px;
+	font-size: 16px;
+}
+
+.cp-login .form-signin .form-control:focus,
+.cp-mysql .form-signin .form-control:focus,
+.cp-first-user .form-signin .form-control:focus {
+	z-index: 2;
+}
+
+.cp-login .form-signin input[type="email"] {
+	margin-bottom: -1px;
+	border-bottom-right-radius: 0;
+	border-bottom-left-radius: 0;
+}
+
+.cp-login .form-signin input[type="password"] {
+	margin-bottom: 10px;
+	border-top-left-radius: 0;
+	border-top-right-radius: 0;
+}
+
+.cp-login .sys-messages,
+.cp-mysql .sys-messages,
+.cp-first-user .sys-messages {
+	text-align: left;
+}
+
+/* Control panel skeleton */
+body.cp {
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+	background: initial;
+	background-color: #fff;
+	font-size: 1rem;
+	font-weight: 400;
+	line-height: 1.5;
+	color: #212529;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+}
+
+body.cp nav.main {
+	height: 56px;
+	box-shadow: 0 0 5px 4px rgba(0,0,0,0.25);
+}
+
+body.cp nav.main.bg-dark {
+	background: #205081 url(/assets/sys/bg.png) repeat 0 0!important;
+}
+
+body.cp nav.main a.navbar-brand {
+	font-weight: bold;
+}
+
+body.cp nav.main .navbar-nav .nav-item a img {
+	width: 35px;
+	height: 35px;
+	margin-right: 10px;
+	margin-top: -30px;
+	margin-bottom: -30px;
+	background-color: gray;
+}
+
+body.cp .wrap {
+	width: 100%;
+	height: 100%;
+	display: table;
+	align-items: stretch;
+}
+
+body.cp .wrap .sidebar,
+body.cp .wrap .content {
+	display: table-cell;
+	position: relative;
+	padding-top: 56px;
+	vertical-align: top;
+}
+
+body.cp .wrap .sidebar {
+	display: none;
+}
+
+body.cp.cp-sidebar-left .wrap .sidebar.sidebar-left {
+	display: table-cell;
+}
+
+body.cp.cp-sidebar-right .wrap .sidebar.sidebar-right {
+	display: table-cell;
+}
+
+body.cp .wrap .sidebar-right .padd,
+body.cp .wrap .content .padd {
+	padding: 1rem 1rem;
+}
+
+body.cp .wrap .scroll {
+	height: 100%;
+	overflow: hidden;
+	overflow-y: auto;
+}
+
+body.cp .wrap .sidebar {
+	width: 245px;
+	background: #eee;
+	box-shadow: 0 0.5em 0.5em rgba(0,0,0,.3);
+}
+
+body.cp .wrap .sidebar .dropdown-divider {
+	border-color: #d6d6d6;
+	margin: 0px;
+}
+
+body.cp .wrap .sidebar.sidebar-left ul.nav {
+	padding: 1rem 0px;
+}
+
+body.cp .wrap .sidebar.sidebar-left ul.nav li.nav-item a {
+	color: #444;
+}
+
+body.cp .wrap .sidebar.sidebar-left ul.nav li.nav-item.active {
+	background-color: #417cb9;
+}
+
+body.cp .wrap .sidebar.sidebar-left ul.nav li.nav-item.active a {
+	color: #fff;
+}
+
+body.cp .wrap .sidebar.sidebar-left ul.nav li.nav-item:hover {
+	background-color: #e7e7e7;
+}
+
+body.cp .wrap .sidebar.sidebar-left ul.nav li.nav-item.active:hover {
+	background-color: #417cb9;
+}
+
+body.cp .wrap .sidebar.sidebar-left ul.nav ul.nav {
+	background: #eee;
+	padding-top: 0px;
+}
+
+body.cp .wrap .sidebar.sidebar-left ul.nav ul.nav li.nav-item a {
+	color: #444;
+	padding-left: 2rem;
+}
+
+body.cp .wrap .sidebar.sidebar-left ul.nav ul.nav li.nav-item.active {
+	background-color: #e7e7e7;
+}
+
+body.cp .wrap .sidebar.sidebar-left ul.nav ul.nav li.nav-item.active a {
+	color: #417cb9;
+}
+
+body.cp .wrap .sidebar.sidebar-left ul.nav li.nav-item:last-child ul {
+	padding-bottom: 0px;
+}
+
+body.cp .wrap .sidebar.sidebar-left ul.nav li.nav-item svg.sicon {
+	fill: currentColor;
+	margin-right: 5px;
+}
+
+body.cp .wrap .sidebar .btn-sidebar {
+	width: 100%;
+}
+
+/* Admin table */
+.data-table.table-hover tbody tr:hover {
+	background-color: #fffbdf;
+}
+
+.data-table a svg {
+	fill: currentColor;
+	color: #007bff;
+}
+
+.data-table a:hover svg {
+	color: #0056b3;
+}
+
+.data-table td.col_action a.ico {
+	display: inline-block;
+	width: 16px;
+	height: 16px;
+	margin-right: 10px;
+}
+
+.data-table td.col_action a.ico:last-child {
+	margin-right: 0px;
+}
+
+.data-table thead tr {
+	background-color: #e9ecef;
+}
+
+.data-table.table-bordered td,
+.data-table.table-bordered th {
+	border: none;
+	border-top: 1px solid #dee2e6;
+}
+
+/* Admin table: table_users */
+.data-table.table_users .col_action {
+	width: 100px;
+	text-align: right;
+}
+
+/* Admin data form */
+.data-form .hidden {
+	display: none;
+}
+
+.data-form label {
+	font-weight: bold;
+	margin-top: .45rem;
+	margin-bottom: .45rem;
+}
+
+.data-form small {
+	color: #aeb8bc;
+}
+
+.data-form > div:nth-last-child(2) {
+	margin-bottom: 0px;
+}
+
+.data-form textarea {
+	min-height: 5.4rem;
+}

assets/sys.bg.png.go

@@ -0,0 +1,3 @@
+package assets
+
+var SysBgPng = []byte{137, 80, 78, 71, 13, 10, 26, 10, 0, 0, 0, 13, 73, 72, 68, 82, 0, 0, 0, 30, 0, 0, 0, 30, 1, 3, 0, 0, 0, 1, 254, 60, 225, 0, 0, 0, 6, 80, 76, 84, 69, 255, 255, 255, 255, 255, 255, 85, 124, 245, 108, 0, 0, 0, 2, 116, 82, 78, 83, 13, 36, 255, 62, 87, 164, 0, 0, 0, 48, 73, 68, 65, 84, 8, 215, 99, 104, 80, 224, 96, 96, 112, 16, 96, 97, 96, 80, 224, 96, 98, 96, 16, 96, 97, 100, 96, 0, 50, 26, 24, 128, 12, 7, 6, 32, 67, 129, 1, 200, 16, 96, 128, 43, 164, 135, 14, 0, 115, 128, 11, 236, 193, 23, 245, 239, 0, 0, 0, 0, 73, 69, 78, 68, 174, 66, 96, 130}

assets/sys.logo.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45" style="enable-background:new 0 0 45 45;" xml:space="preserve" version="1.1" id="svg2"><metadata id="metadata8"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/></cc:Work></rdf:RDF></metadata><defs id="defs6"><clipPath id="clipPath16" clipPathUnits="userSpaceOnUse"><path id="path18" d="M 0,36 36,36 36,0 0,0 0,36 Z"/></clipPath></defs><g transform="matrix(1.25,0,0,-1.25,0,45)" id="g10"><g id="g12"><g clip-path="url(#clipPath16)" id="g14"><g transform="translate(35.8848,24.1665)" id="g20"><path id="path22" style="fill:#FFF;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c 0,5.45 -4.418,9.868 -9.867,9.868 -3.308,0 -6.227,-1.633 -8.018,-4.129 -1.79,2.496 -4.71,4.129 -8.017,4.129 -5.45,0 -9.868,-4.418 -9.868,-9.868 0,-0.772 0.098,-1.52 0.266,-2.241 1.371,-8.512 10.835,-17.494 17.619,-19.96 6.783,2.466 16.249,11.448 17.617,19.96 C -0.098,-1.52 0,-0.772 0,0"/></g></g></g></g></svg>

assets/sys.logo.svg.go

@@ -0,0 +1,3 @@
+package assets
+
+var SysLogoSvg = []byte(`<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45" style="enable-background:new 0 0 45 45;" xml:space="preserve" version="1.1" id="svg2"><metadata id="metadata8"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/></cc:Work></rdf:RDF></metadata><defs id="defs6"><clipPath id="clipPath16" clipPathUnits="userSpaceOnUse"><path id="path18" d="M 0,36 36,36 36,0 0,0 0,36 Z"/></clipPath></defs><g transform="matrix(1.25,0,0,-1.25,0,45)" id="g10"><g id="g12"><g clip-path="url(#clipPath16)" id="g14"><g transform="translate(35.8848,24.1665)" id="g20"><path id="path22" style="fill:#FFF;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c 0,5.45 -4.418,9.868 -9.867,9.868 -3.308,0 -6.227,-1.633 -8.018,-4.129 -1.79,2.496 -4.71,4.129 -8.017,4.129 -5.45,0 -9.868,-4.418 -9.868,-9.868 0,-0.772 0.098,-1.52 0.266,-2.241 1.371,-8.512 10.835,-17.494 17.619,-19.96 6.783,2.466 16.249,11.448 17.617,19.96 C -0.098,-1.52 0,-0.772 0,0"/></g></g></g></g></svg>`)

assets/sys.svg.icon.go

@@ -0,0 +1,9 @@
+package assets
+
+var SysSvgIconPage = `<svg viewBox="0 0 16 16" width="16" height="16" class="sicon" version="1.1"><path fill-rule="evenodd" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"></path></svg>`
+var SysSvgIconList = `<svg viewBox="0 0 16 16" width="16" height="16" class="sicon" version="1.1"><path fill-rule="evenodd" d="M2 13c0 .59 0 1-.59 1H.59C0 14 0 13.59 0 13c0-.59 0-1 .59-1h.81c.59 0 .59.41.59 1H2zm2.59-9h6.81c.59 0 .59-.41.59-1 0-.59 0-1-.59-1H4.59C4 2 4 2.41 4 3c0 .59 0 1 .59 1zM1.41 7H.59C0 7 0 7.41 0 8c0 .59 0 1 .59 1h.81c.59 0 .59-.41.59-1 0-.59 0-1-.59-1h.01zm0-5H.59C0 2 0 2.41 0 3c0 .59 0 1 .59 1h.81c.59 0 .59-.41.59-1 0-.59 0-1-.59-1h.01zm10 5H4.59C4 7 4 7.41 4 8c0 .59 0 1 .59 1h6.81c.59 0 .59-.41.59-1 0-.59 0-1-.59-1h.01zm0 5H4.59C4 12 4 12.41 4 13c0 .59 0 1 .59 1h6.81c.59 0 .59-.41.59-1 0-.59 0-1-.59-1h.01z"></path></svg>`
+var SysSvgIconPlus = `<svg viewBox="0 0 16 16" width="16" height="16" class="sicon" version="1.1"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path></svg>`
+var SysSvgIconGear = `<svg viewBox="0 0 16 16" width="16" height="16" class="sicon" version="1.1"><path fill-rule="evenodd" d="M14 8.77v-1.6l-1.94-.64-.45-1.09.88-1.84-1.13-1.13-1.81.91-1.09-.45-.69-1.92h-1.6l-.63 1.94-1.11.45-1.84-.88-1.13 1.13.91 1.81-.45 1.09L0 7.23v1.59l1.94.64.45 1.09-.88 1.84 1.13 1.13 1.81-.91 1.09.45.69 1.92h1.59l.63-1.94 1.11-.45 1.84.88 1.13-1.13-.92-1.81.47-1.09L14 8.75v.02zM7 11c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"></path></svg>`
+var SysSvgIconUser = `<svg viewBox="0 0 16 16" width="16" height="16" class="sicon" version="1.1"><path fill-rule="evenodd" d="M12 14.002a.998.998 0 0 1-.998.998H1.001A1 1 0 0 1 0 13.999V13c0-2.633 4-4 4-4s.229-.409 0-1c-.841-.62-.944-1.59-1-4 .173-2.413 1.867-3 3-3s2.827.586 3 3c-.056 2.41-.159 3.38-1 4-.229.59 0 1 0 1s4 1.367 4 4v1.002z"></path></svg>`
+var SysSvgIconEdit = `<svg viewBox="0 0 16 16" width="16" height="16" class="sicon" version="1.1"><path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"></path></svg>`
+var SysSvgIconRemove = `<svg viewBox="0 0 16 16" width="16" height="16" class="sicon" version="1.1"><path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"></path></svg>`

main.go

@@ -51,6 +51,12 @@ func main() {
 	}
 
 	res := resource.New()
+	res.Add("assets/cp/scripts.js", "application/javascript; charset=utf-8", assets.CpScriptsJs)
+	res.Add("assets/cp/styles.css", "text/css", assets.CpStylesCss)
+	res.Add("assets/sys/bg.png", "image/png", assets.SysBgPng)
+	res.Add("assets/sys/fave.ico", "image/x-icon", assets.SysFaveIco)
+	res.Add("assets/sys/logo.png", "image/png", assets.SysLogoPng)
+	res.Add("assets/sys/logo.svg", "image/svg+xml", assets.SysLogoSvg)
 	res.Add("assets/sys/styles.css", "text/css", assets.SysStylesCss)
 
 	bootstrap.Start("127.0.0.1:8080", 30, "assets", func(w http.ResponseWriter, r *http.Request) {