change camp list styling

_class/class_camp.php

@@ -169,9 +169,9 @@ class camp
      *
      * @return mixed
      */
-    public function get_camp_from()
+    public function get_camp_from($_formatted = false)
     {
-        return $this->camp_from;
+        return !$_formatted ? $this->camp_from : date('Y. m. d.', strtotime($this->camp_from));
     }
 
     public function get_camp_from_day()
@@ -213,9 +213,9 @@ class camp
      *
      * @return mixed
      */
-    public function get_camp_to()
+    public function get_camp_to($_formatted = false)
     {
-        return $this->camp_to;
+        return !$_formatted ? $this->camp_to : date('Y. m. d.', strtotime($this->camp_to));
     }
 
     /**
@@ -378,19 +378,19 @@ class camp
     {
         global $sql;
 
-        if ("" === $_name) {
+        if ('' === $_name) {
             $_name = 'null';
         }
 
-        if ("" === $_count) {
+        if ('' === $_count) {
             $_count = 'null';
         }
 
-        if ("" === $_price) {
+        if ('' === $_price) {
             $_price = 'null';
         }
 
-        if ("" === $_info) {
+        if ('' === $_info) {
             $_info = 'null';
         }
 
@@ -413,19 +413,19 @@ class camp
     {
         global $sql;
 
-        if ("" === $_name) {
+        if ('' === $_name) {
             $_name = 'null';
         }
 
-        if ("" === $_count) {
+        if ('' === $_count) {
             $_count = 'null';
         }
 
-        if ("" === $_price) {
+        if ('' === $_price) {
             $_price = 'null';
         }
 
-        if ("" === $_info) {
+        if ('' === $_info) {
             $_info = 'null';
         }
 
@@ -447,4 +447,16 @@ class camp
             ]
         );
     }
+
+    public function get_camp_accepted_applies_count()
+    {
+        global $sql;
+
+        return $sql->single_variable("
+            SELECT count(distinct capp_id) as capp_count
+            FROM camp_apply
+            WHERE capp_camp_id = {$this->get_camp_id()}
+            AND capp_status = 3
+            ");
+    }
 }

_css/camp.css

@@ -112,3 +112,72 @@ input.apply {
     font-size: 20px;
     font-weight: bold;
 }
+
+.container {
+    max-width: unset;
+}
+
+#camp-list {
+    width: 100%;
+}
+
+.camp-toggle {
+    width: 80%;
+    text-align: center;
+    padding: 5px 2px;
+    margin: 0px auto;
+    cursor: pointer;
+}
+
+.camp-toggle.no {
+    font-weight: normal;
+    border: 2px solid red;
+    background: white;
+    color: gray;
+    padding: 5px 2px;
+}
+
+.camp-toggle.yes {
+    border: 2px solid green;
+    background: lightgreen;
+    color: black;
+    font-weight: bold;
+}
+
+input.camp-toggle-input {
+    visibility: hidden;
+}
+
+.side_block {
+    float: right;
+    display: inline-block;
+    clear: right;
+    margin: 10px 0px 10px 11% !important;
+    padding: 5px;
+    font-size: 18px;
+    line-height: 1.4;
+    background-color: #e6e6e6;
+}
+
+@media (max-width: 1249px) {
+    .side_block {
+        text-align: center;
+        display: block;
+        width: 100%;
+        margin-top: -10px !important;
+        border-top: 1px solid lightgray;
+    }
+
+    .side_block:hover {
+        background-color: #e6e6e6;
+    }
+
+    .list .list_item {
+        border-left: 0;
+    }
+
+    .list .list_item:hover {
+        border-left: 0;
+        background-color: #e6e6e6;
+    }
+}

_css/diary.css

@@ -1,49 +1,47 @@
 @media (min-width: 1250px) {
+    .list {
+        width: 80%;
+    }
 
-.list  {
+    .row, .list-row {
-	width: 80%;
+        display: flex;
-}
+    }
 
-.row {
+    .list .list_item {
-	display: flex;
+        width: 54%;
-}
+        display: inline-block;
+        float: none;
+    }
 
-.list .list_item {
+    .side_block {
-	width: 54%;
+        float: right;
-	display: inline-block;
+        display: inline-block;
-	float: none;
+        width: 35%;
-}
+        clear: right;
+        margin: 10px 0px 10px 11% !important;
+        padding: 5px;
+        font-size: 18px;
+        line-height: 1.4;
+        background-color: #e6e6e6;
+    }
 
-.side_block {
+    .extra_row {
-	float: right;
+        display: none;
-	display: inline-block;
+    }
-	width: 35%;
-	clear: right;
-	margin: 10px 0px 10px 11% !important;
-	padding: 5px;
-	font-size: 18px;
-	line-height: 1.4;
-	background-color: #e6e6e6;
-}
-
-.extra_row {
-	display: none;
-}
-
-.diary_header .active_header {
-	display: inline;
-}
 
+    .diary_header .active_header {
+        display: inline;
+    }
 }
 
 @media (max-width: 1249px) {
-	.side_block {
+    .side_block {
-		display: none;
+        display: none;
-	}
+    }
 
-	.extra_row {
+    .extra_row {
-		display: block;
+        display: block;
-		margin-top: 5px;
+        margin-top: 5px;
-		line-height: 1.2;
+        line-height: 1.2;
-	}
+    }
-}
+}

index.php

@@ -36,7 +36,13 @@ ob_start();
         echo '<link rel="stylesheet" type="text/css" href="/_css/default.css">';
         ?>
          <link rel="stylesheet" type="text/css" href="/_css/nav.css">
+         <?php
+            if (!($page->is_subpage() && 'jelentkezes' == $page->get_subpage()) || !($page->is_id() && 4 == $page->get_id())) {
+         ?>
          <link rel="stylesheet" type="text/css" href="/_css/form.css">
+         <?php
+            }
+         ?>
          <link rel="stylesheet" type="text/css" href="/_css/button.css">
          <link rel="stylesheet" type="text/css" href="/_css/addbutton.css">
          <link rel="stylesheet" type="text/css" href="/_css/login_form.css">
@@ -46,7 +52,7 @@ ob_start();
         }
 
 
-        if (in_array($page->get_page(), array('view','preview')) && $page->is_subpage() && $page->get_subpage() == "diary"|| $page->get_page() == "view" && !$page->is_subpage())
+        if (in_array($page->get_page(), array('view','preview')) && $page->is_subpage() && $page->get_subpage() == "diary"|| $page->get_page() == "view" && !$page->is_subpage() || $page->get_subpage() == 'jelentkezes')
             echo '<link rel="stylesheet" type="text/css" href="/_css/diary.css">';
 
         if ($page->is_page() && ($page->get_page() == 'coach' || $page->get_page() == 'coach_preview')) {

template/templates/camp_apply.tpl

@@ -181,6 +181,7 @@
 <form method="post" id="apply_4">
     <input type="hidden" name="action" id="action" value="apply_4">
     <input type="hidden" name="camp_apply_id" id="camp_apply_id" value="{$camp_apply_id}">
+    {*
     <table>
     {foreach $camp_array as $camp}
             <td>{$camp->get_camp_city()}</td>
@@ -193,8 +194,72 @@
         </tr>
     {/foreach}
     </table>
-    <div id="accom_list"></div>
+    *}
-    <div id="shuttle_list"></div>
+<div class="container">
+    <div class="row">
+        <div class="col-xs-12">
+            <div class="list" id="camp-list">
+            {foreach $camp_array as $camp}
+                {if
+                $camp@first ||
+                (
+                $camp_array[$camp@index]->get_camp_from()|substr:5:2 != $camp_array[$camp@index-1]->get_camp_from()|substr:5:2
+                )
+
+                }
+                {if !$camp@first &&
+                $camp_array[$camp@index]->get_camp_from()|substr:5:2 != $camp_array[$camp@index-1]->get_camp_from()|substr:5:2
+                }
+                </div>
+                {/if}
+                <span onclick="block_action('block_{$camp->get_camp_from()|substr:0:4}{$camp->get_camp_from()|substr:5:2}');" class="date_separator clickable">{$camp_array[$camp@index]->get_camp_from()|substr:0:4}.
+                    {$months[$camp_array[$camp@index]->get_camp_from()|substr:5:2]}
+                    <img src="/_image/open_folder.png">
+                </span>
+                <div id="block_{$camp->get_camp_from()|substr:0:4}{$camp->get_camp_from()|substr:5:2}" class="month_block">
+                {/if}
+                <div class="list-row">
+                <div class="list_item line_height14 bigger_space">
+                    <span class="size20 bold">
+                        {$camp->get_camp_name()} ({$camp->get_camp_from(true)} - {$camp->get_camp_to(true)}) <br>
+                        Tábor típusa: {$camp->get_camp_type()->get_ct_name()} <br>
+                        Edző: {$camp->get_camp_leader()} <br>
+                    </span>
+                    {if $camp->get_camp_info()}
+                        <br>
+                        Tábor információk: {nl2br($camp->get_camp_info())}
+                    {/if}
+
+                    <div class="extra_row">
+
+                    </div>
+                </div>
+
+                <div class="side_block">
+                    Létszám: {if $camp->get_camp_count()}{$camp->get_camp_count()} / {/if}{$camp->get_camp_accepted_applies_count()}
+                    <br>
+                    <br>
+                    <span class="bold">
+                        Ár: {$camp->get_camp_price()} Ft
+                    </span>
+                    <br>
+                    <input type="radio" class="camp-toggle-input" name="camp_id" id="ck-{$camp->get_camp_id()}" value="{$camp->get_camp_id()}"{if $camp@first} checked{/if}>
+                    <div class="camp-toggle" data-checkbox-id="ck-{$camp->get_camp_id()}" style="margin-top: 15px;">
+                        teszt
+                    </div>
+                </div>
+                </div>
+
+                {if $camp@last}
+                </div>
+                {/if}
+            {/foreach}
+
+            </div>
+        </div>
+    </div>
+</div>
+
     <table class="accept_terms_box">
         <tr>
             <td>Kijelentem, hogy minden, az edzőtábor szempontjából fontos információt megadtam, a gyerek egyesületének edzőjét az edzőtáborról tájékoztattam.</td>
@@ -368,3 +433,61 @@ $("#accept_terms").change(function() {
 
 
 </script>
+
+<script>
+function open_block(block_id) {
+    $("#"+block_id).slideDown("slow");
+}
+
+function close_block(block_id) {
+    $("#"+block_id).slideUp("slow");
+}
+
+function block_action(block_id) {
+    if ($("#"+block_id).is(':hidden')) {
+        open_block(block_id);
+    }
+    else {
+        close_block(block_id);
+    }
+}
+
+$(document).ready(function () {
+    $('.camp-toggle').each(function(k,v) {
+        let ckId = $(v).data('checkbox-id');
+
+        if ($('#'+ckId).is(':checked')) {
+            $(v).addClass('yes');
+            $(v).text('Tábor bejelölve!');
+        }
+        else {
+            $(v).addClass('no');
+            $(v).text('Jelentkezés!')
+        }
+    });
+
+    $('.camp-toggle').on('click', function() {
+        let ckId = $(this).data('checkbox-id');
+
+        const clickedElement = $(this);
+        const cBox = $('#'+ckId);
+        if (!$(cBox).is(':checked')) {
+            const prevInput = $('.camp-toggle-input:checked');
+            const prevBox = $(prevInput).siblings('.camp-toggle');
+
+            $(prevBox).addClass('no');
+            $(prevBox).removeClass('yes');
+            $(prevBox).text('Jelentkezés!');
+
+            //ckecbobx check
+            //style csere
+            $(cBox).prop('checked', true);
+            $(clickedElement).removeClass('no');
+            $(clickedElement).addClass('yes');
+            $(clickedElement).text('Tábor bejelölve!');
+        }
+        else {
+        }
+    });
+});
+</script>