json to form initial implementation

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