diff options
Diffstat (limited to 'public/app/views/welcome.php')
| -rw-r--r-- | public/app/views/welcome.php | 481 |
1 files changed, 433 insertions, 48 deletions
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 |