diff options
| -rw-r--r-- | public/app/controllers/JsonToForm.php | 413 | ||||
| -rw-r--r-- | public/app/routes/frontend.php | 8 | ||||
| -rw-r--r-- | public/app/views/welcome.php | 481 |
3 files changed, 644 insertions, 258 deletions
diff --git a/public/app/controllers/JsonToForm.php b/public/app/controllers/JsonToForm.php index 9e305ce..fe08d5c 100644 --- a/public/app/controllers/JsonToForm.php +++ b/public/app/controllers/JsonToForm.php @@ -63,263 +63,270 @@ class JsonToForm } } - // if not escaped already, then name return same - return array('label' => $fkey, 'multi' => false, 'value' => $inp ); - } + // if not escaped already, then name return same + return array('label' => $fkey, 'multi' => false, 'value' => $inp ); + } - // Parse anythig from ccode - public static function parse_ccode($ckey) { - $ccARRAY = json_decode(CODEJSON); + // Parse anythig from ccode + public static function parse_ccode($ckey) { + $ccARRAY = json_decode(CODEJSON); - foreach ($ccARRAY as $key => $val) { - // find the field - if ($val->id == $ckey) { - // return everything in an array - return $val; - } + foreach ($ccARRAY as $key => $val) { + // find the field + if ($val->id == $ckey) { + // return everything in an array + return $val; } } + } - // Get totals of alla categories ///////////////////////////////////////////// - // RETURN array of items (value) per category (array key) - // --------------------------------------------------------------------------- - public static function get_totals() { - $result = array(); - $sum = 0; - - $dbc = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_DBMS); - if ($dbc->connect_errno) { - echo "Database connection failed; Please try in a few minutes. "; - if (TESTING) echo $dbc->connect_error; - $dbc->close(); die(); + // Get totals of alla categories ///////////////////////////////////////////// + // RETURN array of items (value) per category (array key) + // --------------------------------------------------------------------------- + public static function get_totals() { + $result = array(); + $sum = 0; + + $dbc = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_DBMS); + if ($dbc->connect_errno) { + echo "Database connection failed; Please try in a few minutes. "; + if (TESTING) echo $dbc->connect_error; + $dbc->close(); die(); + } + $dbc->set_charset("utf8"); + + // prepare statemet + $stm = $dbc->prepare("SELECT ccode, count(id) total FROM `items` GROUP BY ccode"); + $stm->execute(); // execute query + $stm->store_result(); // store result + $stm->bind_result($c, $tot); + while ($stm->fetch()) { + // using md5() you can have any unicode string as key ;) + // credit: https://stackoverflow.com/questions/10696067/characters-allowed-in-php-array-keys -> Rob's answer + // but newer versions of php (v7+) seem to handle unicide keys nicely + $result[$c] = $tot; + $sum += $tot; } - $dbc->set_charset("utf8"); - - // prepare statemet - $stm = $dbc->prepare("SELECT ccode, count(id) total FROM `items` GROUP BY ccode"); - $stm->execute(); // execute query - $stm->store_result(); // store result - $stm->bind_result($c, $tot); - while ($stm->fetch()) { - // using md5() you can have any unicode string as key ;) - // credit: https://stackoverflow.com/questions/10696067/characters-allowed-in-php-array-keys -> Rob's answer - // but newer versions of php (v7+) seem to handle unicide keys nicely - $result[$c] = $tot; - $sum += $tot; - } - $result['all'] = $sum; + $result['all'] = $sum; - return $result; - } + return $result; + } - // Preview Local Datetime //////////////////////////////////////////////////// - // (in Greek format and names ) - // --------------------------------------------------------------------------- - public static function local_dt($t) { - $day = array("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"); - $dayL = array("Κυρ", "Δευ", "Τρι", "Τετ", "Πεμ", "Παρ", "Σαβ"); - $mon = array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"); - $monL = array("Ιαν", "Φεβ", "Μαρ", "Απρ", "Μαϊ", "Ιουν", "Ιουλ", "Αυγ", "Σεπ", "Οκτ", "Νοε", "Δεκ"); - $tm = array("am", "pm"); - $tmL = array("πμ", "μμ"); - $r = date("D. j M. Y, h:i:sa", $t); - $r = str_replace($day, $dayL, $r); - $r = str_replace($mon, $monL, $r); - $r = str_replace($tm, $tmL, $r); - return $r; - } + // Preview Local Datetime //////////////////////////////////////////////////// + // (in Greek format and names ) + // --------------------------------------------------------------------------- + public static function local_dt($t) { + $day = array("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"); + $dayL = array("Κυρ", "Δευ", "Τρι", "Τετ", "Πεμ", "Παρ", "Σαβ"); + $mon = array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"); + $monL = array("Ιαν", "Φεβ", "Μαρ", "Απρ", "Μαϊ", "Ιουν", "Ιουλ", "Αυγ", "Σεπ", "Οκτ", "Νοε", "Δεκ"); + $tm = array("am", "pm"); + $tmL = array("πμ", "μμ"); + $r = date("D. j M. Y, h:i:sa", $t); + $r = str_replace($day, $dayL, $r); + $r = str_replace($mon, $monL, $r); + $r = str_replace($tm, $tmL, $r); + return $r; + } - // Part of string - // UTF-8 SAFE - public static function str_part($str, $len) { - return (mb_strlen($str) > $len) ? mb_substr($str, 0, $len-1) ."…" : $str; - } + // Part of string + // UTF-8 SAFE + public static function str_part($str, $len) { + return (mb_strlen($str) > $len) ? mb_substr($str, 0, $len-1) ."…" : $str; + } - public static function make_a_form() + public static function make_a_form($formJson) { - // Script Workflow: - // --------------------------------------------------------------------------- - // 1. read fields options - // 2. generate HTML - // 3. generate JS needed - - // the UI - // --------------------------------------------------------------------------- - // Fields are grouped in sections - // These sections presented in tabs (or accordion if mobile device) - // Two (2) sections incduded to inform the user of empty fields or errors - - // Libraries and FrameWorks used - // --------------------------------------------------------------------------- - // Bootstrap 4.3 is used for easy responsive HTML code - // JQuery 3.3 is used to handle user interation - // Select2 is used to make select-boxes (single or multiple) easier to use + // Script Workflow: + // --------------------------------------------------------------------------- + // 1. read fields options + // 2. generate HTML + // 3. generate JS needed - // read fields options (json format) ///////////////////////////////////////// - // --------------------------------------------------------------------------- - $formJSON = file_get_contents('config/kallassa.json'); - $formARRAY = json_decode($formJSON); + // the UI + // --------------------------------------------------------------------------- + // Fields are grouped in sections + // These sections presented in tabs (or accordion if mobile device) + // Two (2) sections incduded to inform the user of empty fields or errors + // Libraries and FrameWorks used + // --------------------------------------------------------------------------- + // Bootstrap 4.3 is used for easy responsive HTML code + // JQuery 3.3 is used to handle user interation + // Select2 is used to make select-boxes (single or multiple) easier to use - // Init strigns for JS generator (needed to handle everything) /////////////// - // --------------------------------------------------------------------------- - $checkFilledJS = ""; // JS for checking empty fields - $ref2Select2JS = ""; // references to Select2-controls Javascript - $initSelectsJS = ""; // js to initialize select fields (single or multiple) + // read fields options (json format) ///////////////////////////////////////// + // --------------------------------------------------------------------------- + // Init strigns for JS generator (needed to handle everything) /////////////// + // --------------------------------------------------------------------------- + $checkFilledJS = ""; // JS for checking empty fields + $ref2Select2JS = ""; // references to Select2-controls Javascript + $initSelectsJS = ""; // js to initialize select fields (single or multiple) - $html = ' - <div class="pi-container"> - <h2>Εισαγωγή Εγγραφής</h2>'; - $i = 1; - foreach ($formARRAY as $key => $section) { // only one section + $html = ' + <div class="pi-container"> + <h2>Εισαγωγή Εγγραφής</h2>'; - $html = '<hr />'; + foreach ($formJson as $key => $field) { - foreach ($section->childs as $kk => $field) { + // get attributes - // get attributes + if (isset($field->atr)) { + $atrs = explode('|', $field->atr); // attributes array + } else { + $atrs = []; + } + $appendKey = in_array('append-key', $atrs) ? true : false; // append key (for selects) + $required = in_array('required', $atrs) ? 'required' : ''; // required + $asterisk = in_array('required', $atrs) ? '*' : ''; // asterisk in label if required + $class = (isset($field->len)) ? ' col-md-'.$field->len : 'col-md-12'; // column class (for width) + $name = $field->nam; + $label = $field->lab; + + + $html .= " + <div class='form-group {$class}'> + <label for='{$name}'>{$label} {$asterisk}</label> + "; + + switch ($field->typ) { - $atrs = explode('|', $field->attr); // attributes array - $appendKey = in_array('append-key', $atrs) ? true : false; // append key (for selects) - $required = in_array('required', $atrs) ? 'required' : ''; // required - $asterisn = in_array('required', $atrs) ? '*' : ''; // asterisk in label if required - $class = (isset($field->len)) ? ' col-md-'.$field->len : 'col-md-12'; // column class (for width) - $name = $field->name; - $label = $field->label; + case 'select': + if (in_array('multiple', $atrs)) { // if select is multiple - $html .= " - <div class='form-group {$class}'> - <label for='{$name}'>{$label} {$asterisk}</label> - "; - - switch ($field->typ) { + $html .=" + <select id='{$name}$' class='select-field' name='{$name}[]' multiple='multiple' style='width:100%'>"; - case 'select': + // prepare initialization of select2 (multiple) + $initSelectsJS .= " + var {$name} = $('#{$name}'); + {$name}.select2({ width: '100%' });"; - if (in_array('multiple', $atrs)) { // if select is multiple + // prepare check if empty field + $checkFilledJS .= " + if (getValues({$name}) =='') { empty += '{$label} {$asterisk}<br />'; } + values.{$name} = getValues($name);"; - $html .=" - <select id='{$name}$' class='select-field' name='{$name}[]' multiple='multiple' style='width:100%'>"; - - // prepare initialization of select2 (multiple) - $initSelectsJS .= " - var {$name} = $('#{$name}'); - {$name}.select2({ width: '100%' });"; - - // prepare check if empty field - $checkFilledJS .= " - if (getValues({$name}) =='') { empty += '{$label} {$asterisk}<br />'; } - values.{$name} = getValues($name);"; + } else { // select is single; draw select + add empty option - } else { // select is single; draw select + add empty option + $html .=" + <select id='{$name}$' class='select-field' name='{$name}' style='width:100%'> + <option></option>"; - $html .=" - <select id='{$name}$' class='select-field' name='{$name}' style='width:100%'> - <option></option>"; + // prepare initialization of select2 (single) + $initSelectsJS .= " + var {$name} = $('#{$name}'); + {$name}.select2({ allowClear: true });"; - // prepare initialization of select2 (single) - $initSelectsJS .= " - var {$name} = $('#{$name}'); - {$name}.select2({ allowClear: true });"; + // prepare check if empty field + $checkFilledJS .= " + if (getValues({$name}) =='') { empty += '{$label} {$asterisk}<br />'; } + values.{$name} = getValues($name);"; + + } - // prepare check if empty field - $checkFilledJS .= " - if (getValues({$name}) =='') { empty += '{$label} {$asterisk}<br />'; } - values.{$name} = getValues($name);"; - - } + // inject options + foreach ($field->opt as $key => $val) { + $html .= " + <option value='{$val->id}'>{$val->tag}</option>"; + } - // inject options - foreach ($field->options as $key => $val) { - $html .= " - <option value='{$val->id}'>{$val->tag}</option>"; - } + // close select + $html .= "</select>"; - // close select - $html .= "</select>"; + break; - break; + case 'text': - case 'text': + $html .= " + <input type='text' class='form-control' name='{$name}' {$required}>"; - $html .= " - <input type='text' class='form-control' name='{$name}' {$required}>"; + $checkFilledJS = " + if ($('input[name={$name}]').val() =='') { empty += '{$label} {$asterisk}<br />'; } + values.{$name} = $('input[name={$name}]').val();"; - $checkFilledJS = " - if ($('input[name={$name}]').val() =='') { empty += '{$label} {$asterisk}'<br />'; } - values.{$name} = $('input[name={$name}]').val();"; + break; - break; + + case 'integer': - - case 'integer': + $html .= " + <input type='number' class='form-control' name='{$name}' min='0' step='1' {$required}>"; - $html .= " - <input type='number' class='form-control' name='{$name}' min='0' step='1' {$required}>"; + $checkFilledJS .= " + if ($('input[name={$name}]').val() =='') { empty += '{$label} {$asterisk}<br />'; } + values.{$name} = $('input[name={$name}]').val();"; - $checkFilledJS .= " - if ($('input[name={$name}]').val() =='') { empty += '{$label} {$asterisk}'<br />'; } - values.{$name} = $('input[name={$name}]').val();"; + break; - break; + case 'textarea': - case 'textarea': + $html .= " + <textarea class='form-control' name='{$name}' {$required}></textarea>"; - $html .= " - <textarea class='form-control' name='{$name}' {$required}></textarea>"; + $checkFilledJS .= " + if ($('textarea[name={$name}]').val() =='') { empty += '{$label} {$asterisk}<br />'; } + values.{$name} = $('textarea[name={$name}]').val();"; - $checkFilledJS .= " - if ($('textarea[name={$name}]').val() =='') { empty += '{$label} {$asterisk}'<br />'; } - values.{$name} = $('textarea[name={$name}]').val();"; + break; + - case 'date': + case 'date': - $html .= " - <input type='date' class='form-control' name='{$name}' {$required}>"; + $html .= " + <input type='date' class='form-control' name='{$name}' {$required}>"; - $checkFilledJS .= " - if ($('input[name={$name}]').val() =='') { empty += '{$label} {$asterisk}'<br />'; } - values.{$name} = $('input[name={$name}]').val();"; + $checkFilledJS .= " + if ($('input[name={$name}]').val() =='') { empty += '{$label} {$asterisk}<br />'; } + values.{$name} = $('input[name={$name}]').val();"; - break; + break; - case 'email': + case 'email': - $html .= " - <input type='email' class='form-control' name='{$name}' {$required}>"; + $html .= " + <input type='email' class='form-control' name='{$name}' {$required}>"; - $checkFilledJS .= " - if ($('input[name={$name}]').val() =='') { empty += '{$label} {$asterisk}'<br />'; } - values.{$name} = $('input[name={$name}]').val();"; + $checkFilledJS .= " + if ($('input[name={$name}]').val() =='') { empty += '{$label} {$asterisk}<br />'; } + values.{$name} = $('input[name={$name}]').val();"; - break; + break; - default: // label, acts as common text + default: // label, acts as common text - $html .= "<label>{$label}</label"; - + $html .= "<label>{$label}</label"; + - } } + + $html .= '</div>'; } + + return [ + 'html' => $html, + 'init_js' => $initSelectsJS, + 'values_js' => $checkFilledJS + ]; + } } @@ -523,31 +530,31 @@ class JsonToForm * // and tab mode (tabs|acordeon) * // --------------------------------------------------------------------------- * function set_tabsContainer_height() { - * var ch_; // content height - * var tc_base; // tabs-container base height + * var ch_; // content height + * var tc_base; // tabs-container base height * tc_base = ($(window).width() > 650) ? 100 : 400; - * if ($('#content1').is(':visible')) ch_ = $('#content1').height(); - * if ($('#content2').is(':visible')) ch_ = $('#content2').height(); - * if ($('#content3').is(':visible')) ch_ = $('#content3').height(); - * if ($('#content4').is(':visible')) ch_ = $('#content4').height(); - * if ($('#content5').is(':visible')) ch_ = $('#content5').height(); - * if ($('#content6').is(':visible')) ch_ = $('#content6').height(); + * if ($('#content1').is(':visible')) ch_ = $('#content1').height(); + * if ($('#content2').is(':visible')) ch_ = $('#content2').height(); + * if ($('#content3').is(':visible')) ch_ = $('#content3').height(); + * if ($('#content4').is(':visible')) ch_ = $('#content4').height(); + * if ($('#content5').is(':visible')) ch_ = $('#content5').height(); + * if ($('#content6').is(':visible')) ch_ = $('#content6').height(); * * $('#tabsContainer').height(ch_ + tc_base); * * } - * set_tabsContainer_height(); // init (run for 1st time) + * set_tabsContainer_height(); // init (run for 1st time) * * // on tab selection * // calculate tabsContainer height * $('input:radio[name="tabs"]').change( function(){ - * set_tabsContainer_height() + * set_tabsContainer_height() * }); * * // on window change * // set tabsContainer height * $( window ).resize(function() { - * set_tabsContainer_height(); + * set_tabsContainer_height(); * }); * * @@ -564,19 +571,19 @@ class JsonToForm * // return: value(s) comma-separated * // --------------------------------------------------------------------------- * function getValues(srcElm) { - * var res; - * var obj = srcElm.select2('data'); // get delected data array + * var res; + * var obj = srcElm.select2('data'); // get delected data array * - * if (obj.length === 0) return ''; // if empty list then nothig is selected + * if (obj.length === 0) return ''; // if empty list then nothig is selected * else { * var i = 0; - * obj.forEach(function(elm){ // loop through object elements array + * obj.forEach(function(elm){ // loop through object elements array * - * if (i) res += ',' + elm.id; // if not first item, prepend ',' befor value(id) - * else res = elm.id; // else set (first) checked value + * if (i) res += ',' + elm.id; // if not first item, prepend ',' befor value(id) + * else res = elm.id; // else set (first) checked value * * i++; - * }); + * }); * } * return res; * } diff --git a/public/app/routes/frontend.php b/public/app/routes/frontend.php index 96e9786..2112537 100644 --- a/public/app/routes/frontend.php +++ b/public/app/routes/frontend.php @@ -9,13 +9,7 @@ use app\extends\Cache_service; // Home/Welcome //////////////////////////////////////////////////////////////////////////////// -Route::add('/', function() { - Render::view('welcome', [ - 'categories' => Cache_service::courses_struct()['tree'], - 'entity' => Cache_service::pages_list() - ]); - // need redirect?... header('Location: /some/default/url', true, 302); -}); +Route::add('/', function() { Render::view('welcome'); }); // Error pages diff --git a/public/app/views/welcome.php b/public/app/views/welcome.php index c5552a8..ae260c6 100644 --- a/public/app/views/welcome.php +++ b/public/app/views/welcome.php @@ -2,70 +2,455 @@ <html lang="en"> <head> <meta charset="utf-8"> - <title><?=SITE_TITLE?> - Welcome!</title> + <title>Welcome!</title> - <?php // header includes - //////////////////////////////////////////////////////////////////////// - Render::view('components/header_includes'); - ?> + <!-- Latest compiled and minified CSS --> + <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"> + + <!-- jQuery library --> + <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script> + + <!-- select2 --> + <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /> + <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script> </head> <body class='classroom'> + <div class="container"> - <?php // top-bar - //////////////////////////////////////////////////////////////////////// - Render::view('components/top_bar'); - ?> + <?php + $formJsonText = '[ + { + "nam" : "summary", + "lab" : "My date", + "typ" : "date", + "len" : 4 + }, + { + "nam" : "material", + "lab" : "Υλικό", + "typ" : "select", + "atr" : "multiple", + "len" : 12, + "opt" : [ + { "id" : "SILV", "tag" : "Άργυλος" }, + { "id" : "COTTO", "tag" : "Βαμβάκι" }, + { "id" : "GRASS", "tag" : "Γυαλί" }, + { "id" : "STUCC", "tag" : "Γύψος (Στούκο)" }, + { "id" : "LEATH", "tag" : "Δέρμα" }, + { "id" : "IVORY", "tag" : "Ελεφαντόδοντο" }, + { "id" : "SPSTN", "tag" : "Ημιπολύτιμος Λίθος" }, + { "id" : "FIBER", "tag" : "Ίνες δέντρου" }, + { "id" : "CANE", "tag" : "Καλάμι" }, + { "id" : "HORN", "tag" : "Κέρατα Ζώων" }, + { "id" : "BRANC", "tag" : "Κλαδί δένδρου" }, + { "id" : "BONE", "tag" : "Κόκκαλο Ζώου" }, + { "id" : "CORAL", "tag" : "Κοράλι" }, + { "id" : "SHELL", "tag" : "Κοχύλι" }, + { "id" : "WOOL", "tag" : "Μαλλί" }, + { "id" : "METAL", "tag" : "Μέταλλο" }, + { "id" : "SILK", "tag" : "Μετάξι" }, + { "id" : "WOOD", "tag" : "Ξύλο" }, + { "id" : "STONE", "tag" : "Πέτρα" }, + { "id" : "PLAST", "tag" : "Πλαστικό" }, + { "id" : "CLSTN", "tag" : "Πολίτιμος Λίθος" }, + { "id" : "FEATH", "tag" : "Πούπουλα - Φτερά ζώου" }, + { "id" : "zzz", "tag" : "Άλλο" } + ] + }, + { + "nam" : "technique", + "lab" : "Τεχνική κατασκευής", + "typ" : "select", + "len" : 6, + "opt" : [ + { "id" : "HND", "tag" : "Χειροποίητο" }, + { "id" : "MCH", "tag" : "Μηχανοποίητο" }, + { "id" : "zzz", "tag" : "Άλλο" } + ] + }, + { + "nam" : "color", + "lab" : "Χρωματισμός", + "typ" : "select", + "atr" : "multiple", + "len" : 6, + "opt" : [ + { "id" : "SLV", "tag" : "Ασημί" }, + { "id" : "SEA", "tag" : "Γαλάζιο" }, + { "id" : "GRY", "tag" : "Γκρι" }, + { "id" : "BRW", "tag" : "Καφέ" }, + { "id" : "YEL", "tag" : "Κίτρινο" }, + { "id" : "RED", "tag" : "Κόκκινο" }, + { "id" : "CRM", "tag" : "Κρεμ" }, + { "id" : "WHI", "tag" : "Λευκό" }, + { "id" : "LOO", "tag" : "Λουλακί (Μπλε - Μωβ)" }, + { "id" : "BLK", "tag" : "Μαύρο" }, + { "id" : "BEZ", "tag" : "Μπεζ" }, + { "id" : "BLU", "tag" : "Μπλε" }, + { "id" : "VIO", "tag" : "Μωβ (Βιολετί)" }, + { "id" : "ORN", "tag" : "Πορτοκαλί" }, + { "id" : "GRN", "tag" : "Πράσινο" }, + { "id" : "PNK", "tag" : "Ροζ" }, + { "id" : "BRZ", "tag" : "Χάλκινο" }, + { "id" : "zzz", "tag" : "Άλλο" } + ] + }, + { + "nam" : "decoration", + "lab" : "Διακόσμηση", + "typ" : "select", + "atr" : "multiple", + "len" : 6, + "opt" : [ + { "id" : "NATR", "tag" : "Με διακόσμηση" }, + { "id" : "GEOM", "tag" : "Χωρίς διακόσμηση" }, + { "id" : "zzz", "tag" : "Άλλο" } + ] + }, + { + "nam" : "condition", + "lab" : "Κατάσταση", + "typ" : "select", + "atr" : "multiple", + "len" : 6, + "opt" : [ + { "id" : "REP", "tag" : "Επιδιορθωμένο" }, + { "id" : "NEW", "tag" : "Καινούργιο" }, + { "id" : "DMG", "tag" : "Κατεστραμμένο" }, + { "id" : "FUL", "tag" : "Πλήρες" }, + { "id" : "PRT", "tag" : "Τμήμα - Μέρος αντικειμένου" }, + { "id" : "WRN", "tag" : "Φθαρμένο" }, + { "id" : "USE", "tag" : "Χρησιμοποιημένο" }, + { "id" : "zzz", "tag" : "Άλλο" } + ] + }, + { + "nam" : "birthplace", + "lab" : "Τόπος κατασκευής", + "typ" : "select", + "atr" : "multiple", + "len" : 12, + "opt" : [ + { "id" : "KLS", "tag" : "Καλλασσικές Κοιλάδες" }, + { "id" : "CTY", "tag" : "Αστικά Κέντρα" }, + { "id" : "zzz", "tag" : "Άλλο" } + ] + }, + { + "nam" : "maker", + "lab" : "Κατασκευαστής", + "typ" : "select", + "atr" : "multiple", + "len" : 12, + "opt" : [ + { "id" : "PRIV", "tag" : "Ιδιώτης" }, + { "id" : "ARTI", "tag" : "Βιοτεχνία" }, + { "id" : "zzz", "tag" : "Άλλο" } + ] + }, + { + "nam" : "decade", + "lab" : "Δεκαετία", + "typ" : "select", + "len" : 6, + "opt" : [ + { "id": "190", "tag": "1900-1909" }, + { "id": "191", "tag": "1910-1919" }, + { "id": "192", "tag": "1920-1929" }, + { "id": "193", "tag": "1930-1939" }, + { "id": "194", "tag": "1940-1949" }, + { "id": "195", "tag": "1950-1959" }, + { "id": "196", "tag": "1960-1969" }, + { "id": "197", "tag": "1970-1979" }, + { "id": "198", "tag": "1980-1989" }, + { "id": "199", "tag": "1990-1999" }, + { "id": "200", "tag": "2000-2009" }, + { "id": "201", "tag": "2010-2019" }, + { "id": "202", "tag": "2020-2029" } + ] + }, + { + "nam" : "birthyear", + "lab" : "Έτος Κατασκευής", + "typ" : "integer", + "len" : 3 + }, + { + "nam" : "days2make", + "lab" : "Χρόνος κατασκευής (μέρες)", + "typ" : "integer", + "len" : 3 + }, + { + "nam" : "scope", + "lab" : "Σκοπός", + "typ" : "select", + "atr" : "multiple", + "opt" : [ + { "id" : "APO", "tag" : "Αποτροπαϊκός" }, + { "id" : "DEC", "tag" : "Διακοσμητικός" }, + { "id" : "CLB", "tag" : "Εορταστικός" }, + { "id" : "SMB", "tag" : "Συμβολικός" }, + { "id" : "RIT", "tag" : "Ιεροτελεστικός" }, + { "id" : "CER", "tag" : "Τελετουργικός" }, + { "id" : "TOU", "tag" : "Τουριστικός" }, + { "id" : "USE", "tag" : "Χρηστικός" }, + { "id" : "zzz", "tag" : "Άλλος" } + ] + }, + { + "nam" : "moreaboutStory", + "lab" : "Κατασκευαστικές Παρατηρήσεις", + "typ" : "textarea" + } + ]'; + $formJson = json_decode($formJsonText); - <div class="main-content container"> - <div class="row"> + $form = JsonToForm::make_a_form($formJson); + + ?> - <div class="col col-md-5 col-lg-4 d-sm-none d-md-block side-bar"> + <?=$form['html']?> + </div> - <?php // tree of courses - //////////////////////////////////////////////////////////////////////// - Render::view('components/courses_menu', [ - 'categories' => $categories, - 'open_path' => [] - ]); - ?> - </div> - <div class="col col-sm-12 col-md-7 col-lg-8"> - the content goes here - </div> + +<script> +// NOW RUN EVERYTHING AFTER JQUERY (AND DOM ready) +// ----------------------------------------------------------------------------- +//////////////////////////////////////////////////////////////////////////////// - </div> - </div> +// 00. FLAGS and NEEDED FUNCTIONS +// --------------------------------------------------------------------------- +////////////////////////////////////////////////////////////////////////////// +var waitingResponse = false; // flag for an ajax request that was sent and still waiting response - <!-- TESTING STRINGS (while developing only) --> - <?php /* --- print_r($_SESSION); ?> - <?php print_r($_COOKIE); ?> - <?php - if (isset($_SESSION)) echo '; session seted ; '; - ?> - <?= - isset($_SESSION[UserTokenInterface::DEFAULT_PREFIX_KEY]) - ? var_dump($_SESSION[UserTokenInterface::DEFAULT_PREFIX_KEY]) - : 'none!' - --- */ ?> - +// pure JS ajax GET request +// return data as JSON +// no fancy things like UTF8; if needed use base64 --------------------------- +function ajax_get(url, callback) { + var xmlhttp = new XMLHttpRequest(); + xmlhttp.onreadystatechange = function() { + if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { - <footer> - <div class="container"> + try { + var data = JSON.parse(xmlhttp.responseText); + } catch(err) { + console.log(err.message + ' in ' + xmlhttp.responseText); + return; + } + callback(data); + } + }; + + xmlhttp.open("GET", url, true); + xmlhttp.send(); +} + + +// 01. MENU MANAGEMENT +// --------------------------------------------------------------------------- +////////////////////////////////////////////////////////////////////////////// + +// menu management +// --------------------------------------------------------------------------- +$('.dropdown-item').on('click', function(e){ + e.preventDefault(); + + if (!waitingResponse) { + waitingResponse = true; + + var r = confirm('Δεν έχετε αποθηκεύσει το τρέχον αντικείμενο!\nΕίστε σίγουροι ότι θέλετε να εγκαταλείψετε τη σελίδα;'); + if (r == true) { + + // all data-goto have the format: 'method,uri_address' + // uri_address is the url to call + // method options: + // * url : means goto url (redirect) + // * ajax : means call url via ajax; if 'success = true' then goto '/' after that + // ----------------------------------------------------------------------- + var opt = $(this).data('goto').split(','); // split data-goto + + if (opt[0] == 'url') { // if method = url + window.location.href = opt[1]; + } + else { // else, method = ajax + ajax_get(opt[1], function(response) { + if (response.success) { + window.location.href = '/'; + } + }); + } + + } + else { + // user did not confirmed the selection; do nothing + } + + waitingResponse = false; + } + +}); + +// 02. USER INTERFACE +// --------------------------------------------------------------------------- +////////////////////////////////////////////////////////////////////////////// + +// tabs to accorderon -------------------------------------------------------- +////////////////////////////////////////////////////////////////////////////// + +// FUNCTION: Set tabsContainer height +// acording to which tab is visible +// and tab mode (tabs|acordeon) +// --------------------------------------------------------------------------- +function set_tabsContainer_height() { + var ch_; // content height + var tc_base; // tabs-container base height + tc_base = ($(window).width() > 650) ? 100 : 400; + if ($('#content1').is(':visible')) ch_ = $('#content1').height(); + if ($('#content2').is(':visible')) ch_ = $('#content2').height(); + if ($('#content3').is(':visible')) ch_ = $('#content3').height(); + if ($('#content4').is(':visible')) ch_ = $('#content4').height(); + if ($('#content5').is(':visible')) ch_ = $('#content5').height(); + if ($('#content6').is(':visible')) ch_ = $('#content6').height(); + + $('#tabsContainer').height(ch_ + tc_base); + +} +set_tabsContainer_height(); // init (run for 1st time) + +// on tab selection +// calculate tabsContainer height +$('input:radio[name="tabs"]').change( function(){ + set_tabsContainer_height() +}); + +// on window change +// set tabsContainer height +$( window ).resize(function() { + set_tabsContainer_height(); +}); + + + +// 03. FORM-CONTROLS +// --------------------------------------------------------------------------- +////////////////////////////////////////////////////////////////////////////// + +// Select2 controls +////////////////////////////////////////////////////////////////////////////// + +// FUNCTION: Get selected value(s) of Select2 control +// pass arg: source-element +// return: value(s) comma-separated +// --------------------------------------------------------------------------- +function getValues(srcElm) { + var res; + var obj = srcElm.select2('data'); // get delected data array + + if (obj.length === 0) return ''; // if empty list then nothig is selected + else { + var i = 0; + obj.forEach(function(elm){ // loop through object elements array + + if (i) res += ',' + elm.id; // if not first item, prepend ',' befor value(id) + else res = elm.id; // else set (first) checked value + + i++; + }); + } + return res; +} + +// patch select2-multiple widths +// --------------------------------------------------------------------------- +$('.select-field').select2({ width: '100%' }); + +// init select2 fields +// (embed from php) +// --------------------------------------------------------------------------- +<?=$form['init_js']?> + + +// 04. FORM-LOGIC +// --------------------------------------------------------------------------- +////////////////////////////////////////////////////////////////////////////// + +// FUNCTION: Report empty fields +// --------------------------------------------------------------------------- +function reportEmpty() { + var empty = ''; + var needit = []; + var values = {}; + + // embed if-conditions from php + <?=$form['values_js']?> + + $("#empty-fields").html(empty); // render empty fields + + // console.log(JSON.stringify(values)); + + return { need : needit, data: values }; // return all fields +} +reportEmpty(); + +$('form').on('keyup change paste', 'input, select, textarea', function(){ + console.log('Form changed!'); + reportEmpty(); +}); + +// validation? +// check: https://www.sitepoint.com/instant-validation/ + + +$('#post-form').on('submit', function(e){ + e.preventDefault(); + if (!waitingResponse) { + waitingResponse = true; + var resp = reportEmpty(); + + if (resp.need.length > 0) alert("Tα πεδία:\n\n" + resp.need.join(',\n') + "\n\nείναι υποχρεωτικά!"); + else { + // alert('sending: '+JSON.stringify(resp.data)); + var postUrl = "/ajax.php?do=additem"; // url to post form + var data2send = resp.data; // parse data to send + + $.ajax({ + type: 'POST', + url: postUrl, // make sure you respect the same origin policy with this url + data: data2send, + dataType: "text", + + success: function(data) { // server replies + var json = $.parseJSON(data); + if (json.success == true) { // good! post accepted + // alert(json.id) + window.location.href = '/ui-show-item.php?id='+ json.id; + } + else { + alert("Post not accepted.\nPlease check the data you submit."); + // $('#oc-company-form')[0].reset(); + } + }, + + error: function() { + alert('Some ajax error! :('); + } + }); + } + + waitingResponse = false; + } + +}); + +</script> - <?php // render footer - //////////////////////////////////////////////////////////////// - Render::view('components/footer', [ 'entity' => $entity ]); - ?> - </div> - </footer> - - <script src="/assets/js/classroom.js"></script> -</body> + </body> </html>
\ No newline at end of file |