Feat/age dependent links

frontend/components/FindAppropriateSchool.vue

@@ -73,9 +73,29 @@
       </button>
     </div>
 
-    <Button :disabled="appropriateSchool === null" @click="showSchool()">
+    <Button v-if="showSchoolBtnVisible" @click="showSchool()">
       {{ $t("components.FindAppropriateSchool.search_button") }}
     </Button>
+
+    <Button v-if="openHightSchoolsBtnVisible" @click="openHighSchools()">
+      {{ $t("components.FindAppropriateSchool.show_high_school_button") }}
+    </Button>
+
+    <span v-if="openHightSchoolsBtnVisible && openUniversitiesBtnVisible" class="info">
+      {{ $t("components.FindAppropriateSchool.high_school_university_info") }}
+    </span>
+
+    <Button v-if="openUniversitiesBtnVisible" @click="openUniversities()">
+      {{ $t("components.FindAppropriateSchool.show_university_button") }}
+    </Button>
+
+    <span v-if="openKindergartensBtnVisible && showSchoolBtnVisible" class="info">
+      {{ $t("components.FindAppropriateSchool.kindergarten_info") }}
+    </span>
+
+    <Button v-if="openKindergartensBtnVisible" @click="openKindergartens()">
+      {{ $t("components.FindAppropriateSchool.show_kindergarten_button") }}
+    </Button>
   </div>
 </template>
 
@@ -106,6 +126,18 @@ export default {
     studentAge() {
       return CURRENT_YEAR - this.selectedYear - this.isNextYear;
     },
+    showSchoolBtnVisible() {
+      return (this.appropriateSchool !== null && this.studentAge >= 2 && this.studentAge < 15);
+    },
+    openHightSchoolsBtnVisible() {
+      return this.selectedYear && this.studentAge >= 15;
+    },
+    openUniversitiesBtnVisible() {
+      return this.selectedYear && this.studentAge >= 17;
+    },
+    openKindergartensBtnVisible() {
+      return this.selectedYear && this.studentAge < 3;
+    },
     appropriateSchool() {
       const messages = this.$t('components.FindAppropriateSchool.appropriate_school_for_age_message');
 
@@ -123,11 +155,25 @@ export default {
   methods: {
     ...mapMutations({
       mapSetAge: 'map/setAge',
+      mapSetAppropriateSchool: 'map/setAppropriateSchool',
     }),
     showSchool() {
       this.mapSetAge(this.studentAge);
+      this.mapSetAppropriateSchool(this.appropriateSchool);
       this.$store.dispatch('map/show');
     },
+    openHighSchools() {
+      this.openLink('https://www.uradprace.cz/hledani-skol-a-oboru');
+    },
+    openUniversities() {
+      this.openLink('https://www.studyin.cz/ukraine/');
+    },
+    openKindergartens() {
+      this.openLink('http://www.dsmpsv.cz/cs/najdete-si-svou-ds');
+    },
+    openLink(url) {
+      window.open(url, '_blank').focus();
+    },
   },
 };
 </script>

frontend/components/Map.vue

@@ -7,18 +7,110 @@
       frameborder="0"
       :src="mapUrl.toString()"
     />
+    <div v-if="filterTooltipVisible && appropriateSchool != null" class="filter-popover">
+      <div class="flex flex-col">
+        <span>
+          {{ $t('components.Map.filter_tooltip') }}
+        </span>
+        <span class="font-body-bold">
+          {{ appropriateSchool }}
+        </span>
+      </div>
+      <span class="close" @click="setFilterTooltipVisible(false)" />
+    </div>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
 
 export default {
+  data() {
+    return {
+      filterTooltipVisible: true,
+    };
+  },
   computed: {
     // mix the getters into computed with object spread operator
     ...mapGetters({
       mapUrl: 'map/url',
+      appropriateSchool: 'map/appropriateSchool',
     }),
   },
+  watch: {
+    appropriateSchool() {
+      this.filterTooltipVisible = true;
+    },
+  },
+  methods: {
+    setFilterTooltipVisible(visible) {
+      this.filterTooltipVisible = visible;
+    },
+  },
 };
 </script>
+<style scoped>
+.filter-popover {
+  position: absolute;
+  bottom: 85px;
+  right: 60px;
+  z-index: 100;
+  background-color: white;
+  @apply p-s rounded-outer font-body-small text-body-small flex flex-row items-start;
+}
+
+/*down arrow*/
+.filter-popover::after {
+  content: '';
+  position: absolute;
+  right: 5%;
+  top: 100%;
+  width: 0;
+  height: 0;
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-top: 10px solid white;
+  clear: both;
+}
+
+/* At width 1380px umapa changes position of filters */
+@media(max-width: 1380px) {
+  .filter-popover {
+    bottom: 120px;
+    right: 65px;
+  }
+  /*right arrow*/
+  .filter-popover::after {
+    right: -20px;
+    top: 40%;
+    border-top: 10px solid transparent;
+    border-bottom: 10px solid transparent;
+    border-left: 10px solid white;
+  }
+}
+
+.close {
+  position: relative;
+  width: 12px;
+  height: 12px;
+  margin-left: 12px;
+  opacity: 0.5;
+}
+.close:hover {
+  opacity: 1;
+}
+.close:before, .close:after {
+  position: absolute;
+  left: 6px;
+  content: ' ';
+  height: 12px;
+  width: 2px;
+  background-color: #333;
+}
+.close:before {
+  transform: rotate(45deg);
+}
+.close:after {
+  transform: rotate(-45deg);
+}
+</style>

frontend/locales/cz.json

@@ -10,6 +10,11 @@
       "faq_tooltip": "Vzdělávací systém v ČR funguje trochu jinak, než ukrajinský. Jednoduše řečeno, děti by měly chodit do školy se stejně starými dětmi. Díky tomuto údaji vám rovnou ukážeme školy, které mají kapacitu přijmout takto staré dítě.",
       "age_corresponds": "Věk odpovídá",
       "information": "Informace",
+      "show_high_school_button": "Otevřít seznam středních škol",
+      "show_university_button": "Otevřít seznam univerzit",
+      "show_kindergarten_button": "Otevřít seznam mateřských škol",
+      "high_school_university_info":"Dítě ve věku 17-19 let může studovat střední nebo vysokou školu",
+      "kindergarten_info":"Dítě může jít do mateřské školy z 3 let",
       "appropriate_school_for_age_message": {
         "0": "Dětská skupina (od 6 měsíců věku)",
         "1": "Dětská skupina",
@@ -55,6 +60,9 @@
       "how_the_Czech_education_system_works": "Jak funguje český vzdělávací systém",
       "how_to_enroll_a_child_in_school": "Jak přihlásit dítě do školy",
       "more_information": "Další informace"
+    },
+    "Map": {
+      "filter_tooltip" : "Zafiltrovali jsme školy, které přijímají do"
     }
   },
   "pages": {

frontend/locales/ua.json

@@ -10,6 +10,11 @@
       "faq_tooltip": "Система освіти в Чехії дещо інакша, ніж в Україні. Простіше кажучи, діти б мали ходити до школи з дітьми того ж віку. Завдяки цій інформації вам відразу покажемо школи, які мають можливість прийняти дитину цього віку.",
       "age_corresponds": "Вік відповідає",
       "information": "Інформація",
+      "show_high_school_button": "Відкрити список средніх шкіл",
+      "show_university_button": "Відкрити список університетів",
+      "show_kindergarten_button": "Відкрити список дитячих садків",
+      "high_school_university_info":"Дитина 17-19 років може навчатися в середній школі чи університеті",
+      "kindergarten_info":"Дитина може ходити в дитячий садок з 3 років",
       "appropriate_school_for_age_message": {
         "0": "Дитяча група (з 6-місячного віку)",
         "1": "Дитяча група",
@@ -55,6 +60,9 @@
       "how_the_Czech_education_system_works": "Як працює чеська система освіти",
       "how_to_enroll_a_child_in_school": "Як записати дитину до школи",
       "more_information": "Більше інформації"
+    },
+    "Map": {
+      "filter_tooltip" : "Ми відфільтрували школи, які приймають"
     }
   },
   "pages": {

frontend/store/map.js

@@ -41,6 +41,7 @@ export const state = () => ({
   defaultSearchParams: [],
   fullTextSearch: null,
   age: null,
+  appropriateSchool: null,
   locale: 'uk',
   show: false,
 });
@@ -58,11 +59,13 @@ export const mutations = {
   setAge(state, newAge) {
     state.age = newAge;
   },
+  setAppropriateSchool(state, newAppropriateSchool) {
+    state.appropriateSchool = newAppropriateSchool;
+  },
   setLocale(state, newLocale) {
     state.locale = newLocale;
   },
   setShow(state, show) {
-    console.log('setShow', show);
     state.show = show;
   },
 };
@@ -72,6 +75,10 @@ export const getters = {
     return state.age;
   },
 
+  appropriateSchool(state) {
+    return state.appropriateSchool;
+  },
+
   // convert current state to URL
   url(state) {
     const url = new URL(state.baseUrl);