Initial commit
This commit is contained in:
parent
8e6108ebb4
commit
bf2fa10550
|
|
@ -0,0 +1,6 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="JavaScriptLibraryMappings">
|
||||||
|
<includedPredefinedLibrary name="ECMAScript 6" />
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="VcsDirectoryMappings">
|
||||||
|
<mapping directory="" vcs="Git" />
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
|
|
@ -0,0 +1,172 @@
|
||||||
|
/**
|
||||||
|
* Created by Ivan Mokrotovarov on 10.09.2018.
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
class oEditor {
|
||||||
|
|
||||||
|
constructor(obj,target,options = {}){
|
||||||
|
this.obj=obj;
|
||||||
|
this.target = target;
|
||||||
|
this.options = {};
|
||||||
|
Object.assign(this.options,options);
|
||||||
|
this.prefix = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5);
|
||||||
|
|
||||||
|
}
|
||||||
|
getFieldDescription(fieldName){
|
||||||
|
return (typeof this.options.fields !== 'undefined'?(this.options.fields[fieldName]?this.options.fields[fieldName]:fieldName):fieldName);
|
||||||
|
}
|
||||||
|
getFormHeader(){
|
||||||
|
let title="Editing";
|
||||||
|
if (typeof this.options.title !== 'undefined')
|
||||||
|
title = this.options.title;
|
||||||
|
return "<div class='panel panel-default'><div class='panel-heading'>"+title+"</div><div class='panel-body'>";
|
||||||
|
}
|
||||||
|
getSelectFieldHtml(tag){
|
||||||
|
let name = this.getFieldDescription(tag)
|
||||||
|
let value = this.obj[tag];
|
||||||
|
let html = "<div class='form-group' id='div"+this.prefix+"_"+tag+"'><label for='"+this.prefix+"_"+tag+"'>"+name+"</label><select class='form-control' id='"+this.prefix+"_"+tag+"'>";
|
||||||
|
let list= this.options.selectfields[tag];
|
||||||
|
for(let val in list){
|
||||||
|
let sel = "";
|
||||||
|
let id = "";
|
||||||
|
let text = list[val];
|
||||||
|
let d = text;
|
||||||
|
if (typeof list[val] == "object") {
|
||||||
|
d = Object.entries(list[val])[0][0];
|
||||||
|
id = " value = '" + d + "'";
|
||||||
|
text = Object.entries(list[val])[0][1];
|
||||||
|
}
|
||||||
|
html += "<option " + id + ">" + text + "</option>";
|
||||||
|
|
||||||
|
}
|
||||||
|
html+="</select></div>";
|
||||||
|
return html;
|
||||||
|
}
|
||||||
|
getFieldHtml(tag){
|
||||||
|
let name = this.getFieldDescription(tag)
|
||||||
|
let value = this.obj[tag];
|
||||||
|
return "<div class='form-group' id='div"+this.prefix+"_"+tag+"'><label for='"+this.prefix+"_"+tag+"'>"+name+"</label><input class='form-control' id='"+this.prefix+"_"+tag+"' value='"+value+"'></div>";
|
||||||
|
}
|
||||||
|
getFormFooter(){
|
||||||
|
let html="<div class='panel-footer'><div class='btn-group text-right'> ";
|
||||||
|
let click="";
|
||||||
|
// if (typeof this.options.click!=='undefined')
|
||||||
|
// click = " onclick='" + this.options.click + "'";
|
||||||
|
html+="<button type='submit' id='btn"+this.prefix+"_submit' class='btn btn-success' "+click+">"+this.getFieldDescription("submit")+"</button>";
|
||||||
|
if (this.options.showDelete){
|
||||||
|
// if (typeof this.options.onDelete!=='undefined')
|
||||||
|
// click = " onclick='" + this.options.onDelete+ "'";
|
||||||
|
html+="<button type='button' id='btn"+this.prefix+"_delete' class='btn btn-danger'>"+this.getFieldDescription("delete")+"</button>";
|
||||||
|
}
|
||||||
|
if (this.options.showCancel){
|
||||||
|
html+="<button type='reset' id='btn"+this.prefix+"_reset' class='btn btn-warning'>"+this.getFieldDescription("cancel")+"</button>";
|
||||||
|
}
|
||||||
|
html+="</div></div>";
|
||||||
|
return html;
|
||||||
|
}
|
||||||
|
|
||||||
|
errorParse(errors){
|
||||||
|
this.clearErrors();
|
||||||
|
for (let e in errors){
|
||||||
|
let inp = $("#div"+this.getFieldId(e));
|
||||||
|
inp.addClass("has-error");
|
||||||
|
inp.addClass("has-feedback");
|
||||||
|
$("#"+this.getFieldId(e)).after("<span class='help-block'>"+errors[e]+"</span>")
|
||||||
|
$("#"+this.getFieldId(e)).after("<span class='glyphicon glyphicon-warning-sign form-control-feedback'></span>")
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
clearErrors(){
|
||||||
|
$("#"+this.target+" .form-control-feedback").remove();
|
||||||
|
$("#"+this.target+" .help-block").remove();
|
||||||
|
$("#"+this.target+" .has-error").removeClass("has-error");
|
||||||
|
$("#"+this.target+" .has-feedback").removeClass("has-feedback");
|
||||||
|
}
|
||||||
|
|
||||||
|
createForm(){
|
||||||
|
let trg = $("#"+this.target);
|
||||||
|
trg.empty();
|
||||||
|
let html=this.getFormHeader();
|
||||||
|
for (let tag in this.obj){
|
||||||
|
if (typeof this.options.hidefields !== "undefined" && jQuery.inArray(tag,this.options.hidefields)>=0)
|
||||||
|
continue;
|
||||||
|
if (typeof this.options.selectfields !== "undefined" && this.options.selectfields[tag])
|
||||||
|
{
|
||||||
|
html+=this.getSelectFieldHtml(tag);
|
||||||
|
}else
|
||||||
|
html+=this.getFieldHtml(tag);
|
||||||
|
}
|
||||||
|
html+="</div>";
|
||||||
|
if (this.options.showFooter || this.options.showSubmit|| this.options.showCancel || this.options.showReset ) {
|
||||||
|
html += this.getFormFooter();
|
||||||
|
}
|
||||||
|
html+="</div>";
|
||||||
|
trg.append(html);
|
||||||
|
// change selected value
|
||||||
|
if (typeof this.options.selectfields !== "undefined"){
|
||||||
|
for (let tag in this.options.selectfields){
|
||||||
|
$("#"+this.prefix+"_"+tag).val(this.obj[tag]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (typeof this.options.events !== "undefined" ) {
|
||||||
|
for (let e in this.options.events) {
|
||||||
|
let ev = this.options.events[e];
|
||||||
|
$("#" + this.prefix + "_" + e).on(ev.type, this, ev.handler);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// assign button events
|
||||||
|
if (typeof this.options.onDelete!=='undefined'){
|
||||||
|
$("#btn"+this.prefix+"_delete").on("click",this,$.proxy(this.onDelete,this));
|
||||||
|
}
|
||||||
|
if (typeof this.options.onSubmit!=='undefined'){
|
||||||
|
$("#btn"+this.prefix+"_submit").on("click",this,$.proxy(this.onSubmit,this));
|
||||||
|
}
|
||||||
|
if (typeof this.options.onReset!=='undefined'){
|
||||||
|
$("#btn"+this.prefix+"_reset").on("click",this,$.proxy(this.onReset,this));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onReset(e){
|
||||||
|
if (this.options.onDelete){
|
||||||
|
this.options.onDelete(this);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
this.createForm();
|
||||||
|
}
|
||||||
|
|
||||||
|
onDelete(e){
|
||||||
|
if (this.options.onDelete){
|
||||||
|
this.options.onDelete(this);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onSubmit(e){
|
||||||
|
if (this.options.onSubmit){
|
||||||
|
this.options.onSubmit(this);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
getFieldId(tag){
|
||||||
|
return this.prefix + "_" + tag;
|
||||||
|
}
|
||||||
|
getChangedObject(){
|
||||||
|
let result = {};
|
||||||
|
Object.assign(result,this.obj);
|
||||||
|
for (let tag in result){
|
||||||
|
let inp = $("#"+this.prefix + "_"+tag);
|
||||||
|
if (inp.length>0)
|
||||||
|
result[tag]=inp.val();
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
hide(){
|
||||||
|
let trg = $("#"+this.target);
|
||||||
|
trg.empty();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,127 @@
|
||||||
|
/**
|
||||||
|
* Created by Ivan Mokrotovarov on 11.09.2018.
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
class oList{
|
||||||
|
constructor(list,target,options = {}){
|
||||||
|
this.list=list;
|
||||||
|
this.target = target;
|
||||||
|
this.options = {};
|
||||||
|
Object.assign(this.options,options);
|
||||||
|
}
|
||||||
|
|
||||||
|
static filter(list_id, input_id) {
|
||||||
|
let input, filter, ul, li, a, i;
|
||||||
|
input = document.getElementById(input_id);
|
||||||
|
filter = input.value.toUpperCase();
|
||||||
|
ul = document.getElementById(list_id);
|
||||||
|
li = ul.getElementsByClassName('list-group-item');
|
||||||
|
|
||||||
|
for (i = 0; i < li.length; i++) {
|
||||||
|
a = li[i];//.getElementsByTagName("a");
|
||||||
|
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
|
||||||
|
li[i].style.display = "";
|
||||||
|
} else {
|
||||||
|
li[i].style.display = "none";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
getFieldDescription(fieldName){
|
||||||
|
return (typeof this.options.fields!=='undefined'?(this.options.fields[fieldName]?this.options.fields[fieldName]:fieldName):fieldName);
|
||||||
|
}
|
||||||
|
|
||||||
|
getFormHeader(){
|
||||||
|
let title="List";
|
||||||
|
if (typeof this.options.title!=='undefined')
|
||||||
|
title = this.options.title;
|
||||||
|
let html = "<div class='panel panel-default'><div class='panel-heading'>"+title;
|
||||||
|
if (typeof this.options.titleButtons!=='undefined')
|
||||||
|
html +=this.options.titleButtons;
|
||||||
|
html +="</div><div class='panel-body'>";
|
||||||
|
return html;
|
||||||
|
|
||||||
|
}
|
||||||
|
getSearchBlock(){
|
||||||
|
let html = "<div class='input-group ' style='width:100%'>";
|
||||||
|
html += "<input id='"+this.target+"_search' type='search' onkeyup='oList.filter(\""+this.target+"_list\",\""+this.target+"_search\")' class='form-control ' placeholder="+this.getFieldDescription("search")+">";
|
||||||
|
html += '</div>';
|
||||||
|
return html;
|
||||||
|
}
|
||||||
|
getItemHtml(tag,text){
|
||||||
|
return "<a href='#' class='list-group-item pad5' data-alias='" + tag + "'>" + text + "</a>";
|
||||||
|
//"<div class='form-group'><label for='af_"+tag+"'>"+name+"</label><input class='form-control' id='af_"+tag+"' value='"+value+"'></div>";
|
||||||
|
}
|
||||||
|
getFormFooter(){
|
||||||
|
let html="<div class='panel-footer'><div class='btn-group'> ";
|
||||||
|
let click="";
|
||||||
|
if (typeof this.options.click!=='undefined')
|
||||||
|
click = " onclick='" + this.options.click + "'";
|
||||||
|
if (this.options.showSubmit) {
|
||||||
|
html += "<button type='submit' class='btn btn-success' " + click + ">" + this.getFieldDescription("submit") + "</button>";
|
||||||
|
}
|
||||||
|
if (this.options.showCancel){
|
||||||
|
html+="<button type='reset' class='btn btn-warning'>"+this.getFieldDescription("cancel")+"</button>";
|
||||||
|
}
|
||||||
|
html+="</div></div>";
|
||||||
|
return html;
|
||||||
|
}
|
||||||
|
createForm(){
|
||||||
|
let trg = $("#"+this.target);
|
||||||
|
trg.empty();
|
||||||
|
let html=this.getFormHeader();
|
||||||
|
if (this.options.showSearch)
|
||||||
|
html+=this.getSearchBlock();
|
||||||
|
html += "<div class='list-group ' id='"+this.target+"_list'>";
|
||||||
|
for (let tag in this.list){
|
||||||
|
let item = this.list[tag];
|
||||||
|
html+=this.getItemHtml(this.getId(item),this.getText(item));
|
||||||
|
}
|
||||||
|
html+="</div></div>";
|
||||||
|
if (this.options.showFooter || this.options.showSubmit || this.options.showCancel) {
|
||||||
|
html += this.getFormFooter();
|
||||||
|
}
|
||||||
|
html+="</div>";
|
||||||
|
trg.append(html);
|
||||||
|
$(('#'+this.target)).on('click',"a.list-group-item", $.proxy(this.onSelect,this));
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
onSelect(e){
|
||||||
|
var $this = $(e.target);
|
||||||
|
var $alias = $this.data('alias');
|
||||||
|
$("#"+$this.parent()[0].id+" > .active").removeClass('active');
|
||||||
|
$this.addClass('active')
|
||||||
|
if (this.options.onSelect){
|
||||||
|
this.options.onSelect($this);
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
getId(item){
|
||||||
|
if (this.options.getId){
|
||||||
|
return this.options.getId(item);
|
||||||
|
}else
|
||||||
|
{
|
||||||
|
return item.id;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
getText(item){
|
||||||
|
if (this.options.getText){
|
||||||
|
return this.options.getText(item);
|
||||||
|
}else
|
||||||
|
{
|
||||||
|
return item.name;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
onSubmit(){
|
||||||
|
if (this.options.onSubmit){
|
||||||
|
this.options.onSubmit(this);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue