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