// получаем доступ к ключевым элементам
var _FORM = document.getElementById('form');
var _USERS = document.getElementById('users');
var _COUNTER = document.getElementById('counter');
// создание класса формы
var Form = function () {
// массив с работниками
let users = [
{
name: 'Fedor Petrov',
jobs: 'Google'
}
];
function Form(e) {
var _this = this;
this.formWrap = document.createElement('div');
this.formWrap.classList = 'js-form';
_FORM.append(this.formWrap);
_this.createInput(e.input);
_this.createButton(e.button);
_this.initListUsers(users);
}
// создание полей input
Form.prototype.createInput = function createInput(e) {
for (let i = 0; i < e.length; i++) {
this.input = document.createElement('input');
this.input.type = e[i].type;
this.input.classList = 'js-input';
this.input.name = e[i].name;
this.input.placeholder = 'Введите ' + e[i].content + ':';
this.input.id = e[i].id;
this.input.value = '';
this.formWrap.append(this.input);
}
}
// создание полей button
Form.prototype.createButton = function createButton(e) {
for (let i = 0; i < e.length; i++) {
this.button = document.createElement('button');
this.button.type = e[i].type;
this.button.classList = 'js-button';
this.button.name = e[i].name;
this.button.id = e[i].id;
this.button.value = '';
this.button.innerText = e[i].content;
this.formWrap.append(this.button);
this.button.addEventListener('click', this.createUser, false);
}
}
// выводим при загрузке работников из массива
Form.prototype.initListUsers = function initListUsers(user) {
for (let i = 0; i < user.length; i++) {
this.list = document.createElement('div');
this.list.classList = 'js-user';
this.names = document.createElement('span');
this.jobs = document.createElement('span');
this.names.append(user[i].name);
this.jobs.append(user[i].jobs);
this.list.append(this.names);
this.list.append(this.jobs);
_USERS.append(this.list);
}
_COUNTER.innerText = user.length;
}
// создаём работника и заносим его в массив
// и выводим его на экран
Form.prototype.createUser = function createUser() {
let valName = document.getElementById('name');
let valJobs = document.getElementById('jobs');
this.user = {
name: valName.value,
jobs: valJobs.value
}
// проверяем чтобы все поля были введены
if (this.user.name === '' || this.user.jobs === '') {
alert('Заполните все поля');
} else {
users.push(this.user);
let lastUser = users[users.length - 1];
this.list = document.createElement('div');
this.list.classList = 'js-user';
this.names = document.createElement('span');
this.jobs = document.createElement('span');
this.names.append(lastUser.name);
this.jobs.append(lastUser.jobs);
this.list.append(this.names);
this.list.append(this.jobs);
setTimeout(() => {
_USERS.insertBefore(this.list, _USERS.children[0]);
valName.value = '';
valJobs.value = '';
_COUNTER.innerText = users.length;
}, 300);
}
}
return Form;
}();
var init = function (e) {
new Form(e);
}
init({
input: [
{
name: 'name',
content: 'Имя',
type: 'text',
id: 'name'
},
{
name: 'jobs',
content: 'Должность',
type: 'text',
id: 'jobs'
}
],
button: [
{
name: 'submit',
content: 'Добавить работника',
type: 'submit',
id: 'submit'
}
],
});
users.push(this.user);
let lastUser = users[users.length - 1];class User (){
construct ()
save() {
return ajax-запрос
}
}
class List () {
this._list = []
consruct(id) {
}
addItem(user)
render () {
doucment.getElemntBy(id).innerHtml = ''
this._list.forEach(user => {
// добавление новой строки
})
}
fetcList () {
return аяк-запрос.then(users => {
this._lsit = []
users.forEachv(user => {
this.addItem(user)
})
})
}
}
new Subsriber {
action,
cb
}
class Emitter {
this._evts = []
subsctibe(action, cb) {
this.evts.push(new Subsriber (action, cb))
}
emit(action, value) {
this.evts.forEach({action} => {
if (act === action) {
cb(value)
}
})
}
}
class Form (){
consruct(id, emmiter) {
doucment.getElemntBy(id).addEventListener('sumbit', () => this.onSubmit)
}
addElement(elem) {
this.elements.push(el)
}
onSubmit () {
const user = new User()
for (let elem of this.elements) {
user[elem.name] = elem.value
}
user.save().then(добавленный юзер => {
this.emmiter.emit('submit', user)
})
}
}
render () {
doucment.getElemntBy(id).innerHtml = ''
this.elements.forEach(elem => {
doucment.getElemntBy(id).insertBefore(elem)
})
}
}
// инициализация этого говна
const list = new List(listId)
const emmiter = new Emiiter()
const form = new Form(formId, emmiter)
form.addElement(document.createElemnt('input'))
// теперь отрисовка
form.render()
list.render()
// подписываемся на события формы
emmiter.subscribt('sumbit', user => {
list.addItem(user)
if (не грузим с сервера) {
// перерисуем
list.render()
} else {
// перерисуем
list.fetchList().then(() => ist.render())
}
})
// создание полей input
Form.prototype.createInput = function createInput(e) {
for (let i = 0; i < e.length; i++) {
this.input = document.createElement('input');
this.input.type = e[i].type;
this.input.classList = 'js-input';
this.input.name = e[i].name;
this.input.placeholder = 'Введите ' + e[i].content + ':';
this.input.id = e[i].id;
this.input.value = '';
this.formWrap.append(this.input);
}
}this.input нужна более локальная let input
Средний
Простой
Простой
Простой
Простой
Средний