script.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. let date = new Date();
  2. function dataToDataTimeLocal(date) {
  3. let timeStamp = date.getTime();
  4. let timeZoneoffset = - date.getTimezoneOffset() * 60 * 1000;
  5. let localTime = timeStamp + timeZoneoffset;
  6. return new Date(localTime).toISOString().slice(0, -1);
  7. }
  8. console.log(dataToDataTimeLocal(date));
  9. /***********************************************/
  10. function Form(el, data, okCallback, cancelCallback){
  11. let formBody = document.createElement('div')
  12. let okButton = document.createElement('button')
  13. okButton.innerHTML = 'OK'
  14. let cancelButton = document.createElement('button')
  15. cancelButton.innerHTML = 'Cancel'
  16. let inputCreators = {
  17. String(key, value, oninput){
  18. let input = document.createElement('input')
  19. input.type = 'text'
  20. input.placeholder = key
  21. input.value = value
  22. input.oninput = () => oninput(input.value)
  23. return input
  24. },
  25. Boolean(key, value, oninput){
  26. let input = document.createElement('input')
  27. input.type = 'checkbox'
  28. input.placeholder = key
  29. input.checked = value
  30. input.oninput = () => oninput(input.checked)
  31. return input
  32. },
  33. Date(key, value, oninput){
  34. let input = document.createElement('input')
  35. input.type = 'datetime-local'
  36. input.placeholder = key
  37. input.value = dataToDataTimeLocal(value)
  38. input.onchange = () => oninput(new Date(input.value))
  39. return input
  40. },
  41. }
  42. for (let [key, value] of Object.entries(data)){
  43. let input = inputCreators[value.constructor.name](key, value, newValue => {
  44. if (typeof this.validators === 'function'){
  45. this.validators[key]();
  46. }
  47. data[key] = newValue
  48. });
  49. let errorSpan = document.createElement('span');
  50. errorSpan.innerText = 'Error'
  51. input.placeholder = key;
  52. formBody.append(input);
  53. formBody.append(errorSpan);
  54. }
  55. if (typeof okCallback === 'function'){
  56. formBody.appendChild(okButton);
  57. okButton.onclick = (e) => {
  58. console.log(this)
  59. this.okCallback(e)
  60. }
  61. }
  62. if (typeof cancelCallback === 'function'){
  63. formBody.appendChild(cancelButton);
  64. cancelButton.onclick = cancelCallback
  65. }
  66. el.appendChild(formBody)
  67. this.okCallback = okCallback
  68. this.cancelCallback = cancelCallback
  69. this.data = data
  70. this.validators = {}
  71. }
  72. let form = new Form(formContainer, {
  73. name: 'Anakin',
  74. surname: 'Skywalker',
  75. married: true,
  76. birthday: new Date((new Date).getTime() - 86400000 * 30*365)
  77. }, () => console.log('ok'),() => console.log('cancel') )
  78. form.okCallback = () => console.log('ok2')
  79. form.validators.surname = (value, key, data, input) => value.length > 2 &&
  80. value[0].toUpperCase() == value[0] &&
  81. !value.includes(' ') ? true : 'Wrong name'
  82. console.log(form)