Initial commit

components/NuxtLogo.vue

+<template>
+  <svg class="nuxt-logo" viewBox="0 0 45 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M24.7203 29.704H41.1008C41.6211 29.7041 42.1322 29.5669 42.5828 29.3061C43.0334 29.0454 43.4075 28.6704 43.6675 28.2188C43.9275 27.7672 44.0643 27.2549 44.0641 26.7335C44.0639 26.2121 43.9266 25.6999 43.6662 25.2485L32.6655 6.15312C32.4055 5.70162 32.0315 5.32667 31.581 5.06598C31.1305 4.8053 30.6195 4.66805 30.0994 4.66805C29.5792 4.66805 29.0682 4.8053 28.6177 5.06598C28.1672 5.32667 27.7932 5.70162 27.5332 6.15312L24.7203 11.039L19.2208 1.48485C18.9606 1.03338 18.5864 0.658493 18.1358 0.397853C17.6852 0.137213 17.1741 0 16.6538 0C16.1336 0 15.6225 0.137213 15.1719 0.397853C14.7213 0.658493 14.3471 1.03338 14.0868 1.48485L0.397874 25.2485C0.137452 25.6999 0.000226653 26.2121 2.8053e-07 26.7335C-0.000226092 27.2549 0.136554 27.7672 0.396584 28.2188C0.656614 28.6704 1.03072 29.0454 1.48129 29.3061C1.93185 29.5669 2.44298 29.7041 2.96326 29.704H13.2456C17.3195 29.704 20.3239 27.9106 22.3912 24.4118L27.4102 15.7008L30.0986 11.039L38.1667 25.0422H27.4102L24.7203 29.704ZM13.0779 25.0374L5.9022 25.0358L16.6586 6.36589L22.0257 15.7008L18.4322 21.9401C17.0593 24.2103 15.4996 25.0374 13.0779 25.0374Z" fill="#00DC82" />
+  </svg>
+</template>
+
+<style>
+.nuxt-logo {
+  height: 180px;
+}
+</style>

components/PartyComment.vue

+<template>
+  <div>
+    <!-- {{ exists }} -->
+    <div v-for="(sel, index) in selected" :key="index">
+      {{ sel.comments[qid] }}
+      <!-- {{ sel.comments[qid] }} -->
+      <!-- <div v-if="exists[index][qid]">
+        Komentář&nbsp;&nbsp;<strong> {{ sel.abbreviation }}</strong>
+      </div> -->
+      <!-- <div v-if="exist(sel, qid)" class="accordion" id="accordion">
+        Komentář&nbsp;&nbsp;<strong> {{ sel.abbreviation }}</strong>
+        <div class="accordion-item">
+          <h2 class="accordion-header">
+            <button class="accordion-button" type="button" data-bs-toggle="collapse" :data-bs-target="'#' + collapseTarget(sel.id, qid)" aria-expanded="true" aria-controls="collapseOne">
+              Komentář&nbsp;&nbsp;<strong> {{ sel.abbreviation }}</strong>:
+             </button>
+          </h2>
+          <div :id="collapseTarget(sel.id, qid)" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordion">
+            <div class="accordion-body">
+               {{ sel.comments[qid]}}
+            </div>
+          </div>
+        </div>
+      </div> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['selected', 'qid'],
+  computed: {
+    // exists: function() {
+    //   let $this = this
+    //   console.log('exists called')
+    //   let exists = []
+    //   for (let ksel in $this.selected) {
+    //     console.log('ksel', ksel)
+    //     console.log('$this.selected[ksel]',$this.selected[ksel])
+    //     let item = {}
+    //     for (let kc in $this.selected[ksel]['comments']) {
+    //       console.log('kc', kc)
+    //       let c = $this.selected[ksel]['comments'][kc]
+    //       let ex = true
+    //       if (typeof(c) == 'undefined') {
+    //         ex = false
+    //       }
+    //       if (c == '') {
+    //         ex = false
+    //       }
+    //       item[kc] = ex
+    //     }
+    //     exists.push(item)
+    //   }
+    //   return exists
+    // }
+  },
+  methods: {
+    // exist: function(sel, qid) {
+    //   console.log('sel, qid', sel, qid)
+    //   if (typeof(sel.comments[qid]) == 'undefined') {
+    //     console.log('exist', 'undefined')
+    //     return false
+    //   }
+    //   if (sel.comments[qid] == '') {
+    //     return false
+    //   }
+    //   console.log('exist', 'true')
+    //   return true
+    // },
+    // collapseTarget: function(s, key) {
+    //   return "collapse-" + s + '-' + key
+    // },
+  }
+}
+ 
+</script>

components/ResultsTable.vue

+<template>
+  <div>
+    <div class="container">
+      <h4 class="p-2">Moje shoda:</h4>
+
+      <ul class="list-group" v-for="(result, index) in results" :key="index">
+        <!-- <li class="list-group-item d-flex" @click="showCandidate(result.info.id)"> -->
+        <li class="list-group-item list-group-item-action d-flex" @click="comparison(result.info.id)">
+          <div>
+            <img :src="createImageLink(result.info.familyName)" class="picture mr-2" />
+          </div>
+          <div class="ms-2 me-auto">
+            <h3 class="fw-bold">
+              {{ result.info.familyName }}
+            </h3>
+            {{ result.info.name }}
+          </div>
+          <div class="text-primary fw-bold">
+            <h2>{{ result.result_percent}}&nbsp;%</h2>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: [
+    'results'
+  ],
+
+  methods: {
+    comparison: function(id) {
+      // console.log("clicked", id)
+      this.$router.push({ 
+        name: 'comparison',
+        params: {
+          candidateId: id
+        } 
+      })
+    },
+
+    createImageLink: function (name) {
+      // https://www.psp.cz/eknih/cdrom/2017ps/eknih/2017ps/poslanci/i6254.jpg
+      // return "https://www.psp.cz/eknih/cdrom/2013ps/eknih/2013ps/poslanci/i" + name + ".jpg"
+      // return "/cs/volby-2021-2050/logos/" + name + ".webp"
+      // return '~/assets/images/' + name +'.webp'
+      return '/pirati-d9450fcc-e848-4adc-99f8-c4105c142df4/images/' + name +'.webp'
+      // CDN
+      // return "https://michalskop-gitlab-io.azureedge.net/sinventura-2017-2021.volebnikalkulacka.cz/photos/" + name + ".webp"
+    }
+  }
+}
+</script>
+<style scoped>
+  .picture {
+    height: 64px;
+    border-radius: 50%;
+    border: 1px solid #aaa;
+   }
+   .list-group {
+     cursor: pointer;
+   }
+</style>
\ No newline at end of file

components/StoredCalcs.vue

+<template>
+  <div>
+    <div v-if="noCalc" class="alert alert-warning">
+      Není uložena žádná vyplnění volební kalkulačka.
+      <br/>
+      <NuxtLink to="/question/1/"><strong>Spustit Volební kalkulačku</strong></NuxtLink>
+    </div>
+    <div v-for="(calc, index) in calcs" :key="index" class="list-group">
+      <div class="list-group-item list-group-item-action flex-column align-items-start active mt-4">
+        <small>
+          <button type="button" class="btn-close bg-danger" aria-label="Close" @click="removeCalc(index)"></button>
+          <span class="text-muted">Smazat</span>
+        </small>
+        <div class="text-white calc-inner" @click="loadCalc(index)">
+          <div class="d-flex w-100 justify-content-between">
+            <h5 class="mb-1">{{ calc.name }}</h5>          
+          </div>
+          <p class="mb-1">
+            {{ localDate(calc.date)[0] }} 
+            <small>{{ localDate(calc.date)[1] }}</small>  
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data: function() {
+    let thisCalc = 'cz_psp_2021_2050'
+    let calcs = []
+    if (process.browser) {
+      if (typeof(window.localStorage.calcs) != 'undefined') {
+        calcs = JSON.parse(window.localStorage.calcs).filter((element) => { 
+          console.log('element.calc', element.calc)
+          return (element.calc == thisCalc)
+         } )
+      }
+    }
+    return {
+      calcs
+    }
+  },
+
+  computed: {
+    noCalc: function() {
+      let noCalc = false
+      if (this.calcs.length == 0) {
+        noCalc = true
+      }
+      return noCalc
+    }
+  },
+
+  methods: {
+    removeCalc: function(i) {
+      this.calcs.splice(i, 1)
+      this.saveLocalStorage(this.calcs)
+    },
+    loadCalc: function(i) {
+      this.$store.commit('storeAnswers', this.calcs[i].answers)
+      this.$store.commit('storeWeights', this.calcs[i].weights)
+      this.$router.push({ path: '/results' })
+    },
+    saveLocalStorage: function() {
+      if (process.browser) {
+        window.localStorage.calcs = JSON.stringify(this.calcs)
+      }
+    },
+    localDate: function(s) {
+      const d = Date.parse(s)
+      const date = new Date(s)
+      return [date.toLocaleDateString('cs-CZ'), date.toLocaleTimeString('cs-CZ')]
+    },
+    scrollToTop() {
+      window.scrollTo(0,0)
+    }
+  },
+  mounted: function() {
+    this.scrollToTop()
+  }
+
+}
+</script>
+
+<style scoped>
+  .page {
+    /* size depends on sizes of header */
+    min-height: calc(100vh - 40px - 18px);
+    max-width: 666px;
+  }
+  .calc-inner {
+    cursor: pointer;
+  }
+</style>
\ No newline at end of file

content/questions_futurist.json

+[{"id": 65, "name": "Kolonizace Marsu", "question": "ČR by se měla více zapojit do snah o kolonizaci Marsu.", "description": "Dnes jsou na Marsu 3 robotická průzkumná vozidla: 2 vyslala americká NASA a 1 Čína. 8 družic krouží kolem Marsu, včetně 2 evropských. Americká firma Space X plánuje let lidí na Mats již v tomto desetiletí, programy na podobné lety mají také např. Spojené arabské emiráty nebo Čína. Fyzik Stephen Hawking v roce 2017 předpokládal, že lidstvo musí během staletí najít domov také mimo Zemi kvůli rizikům, jako je klimatická změna, znečištění prostředí, možná pandemie z důvodu nového viru, neuhlídání umělé inteligence nebo růst populace.", "order": 1.0, "slug": 1}, {"id": 116, "name": "Stop automatickým systémům kontroly", "question": "Mělo by se zastavit používání automatických systémů měření rychlosti a následného vybírání pokut od řidičů.", "description": "Např. v Praze jsou ročně pokutovány za překročení povolené rychlosti statisíce lidí pomocí takového de facto automatického systému. Radar s kamerou změří rychlost, umělá inteligence rozpozná z fotografie registrační značku auta, systém pak zašle pokutu. Lidský dohled nad celým procesem je spíše formální. Systém nerozlišuje společenskou nebezpečnost, např. překročení rychlosti v okolí školy nebo naopak mimo obydlenou část obce. Soudy argumentují tím, že nestačí naplnit literu zákona, ale též jeho smysl. Například malým překročením rychlosti u značky obce není naplněna společenská škodlivost.", "order": 2.0, "slug": 2}, {"id": 117, "name": "Zákaz autonomních zbraní", "question": "ČR by měla usilovat o mezinárodní zákaz autonomních zbraní.", "description": "Autonomní (samořídící se) zbraň je například ozbrojený dron vybavený umělou inteligencí, který dokáže samostatně vyhledávat a zabíjet lidi dle předem definovaných kritérií. Česká armáda vlastní malé průzkumné drony, které použivají umělou inteligenci k provedení letu, v nejbližších letech plánuje nákup větších dronů pro přenos zbraní. Zastánci poukazují na přesnost a účinnost zbraně a malé ztráty na životech. Podle kritiků vede strojové zabíjení k dehumanizaci bojů.", "order": 3.0, "slug": 3}, {"id": 118, "name": "Zákaz automatického rozpoznávání obličeje", "question": "Používání systémů automatického rozpoznávání obličeje na veřejných místech by mělo být zakázáno.", "description": "Systémy rozpoznávání obličeje pomocí umělé inteligence dokáží mj. sledovat jednotlivé lidi na veřejnosti prostřednictvím kamer. Dnes má takové systémy v ČR zakoupené policie, která usiluje o jejich nasazení.", "order": 4.0, "slug": 4}, {"id": 115, "name": "Legislativa pro samořiditelná auta", "question": "V ČR by měla v následujícím volební období vzniknout legislativa umožňující používání samořiditelných aut v běžném provozu.", "description": "Samořiditelná (autonomní) auta řídí software, nikoliv člověk. Aktuálně jsou např. testovány samořiditelné autobusy městské dopravy ve Vídni nebo v Berlíně, zatím pod dohledem člověka.", "order": 5.0, "slug": 5}, {"id": 13, "name": "Dálnice - vyvlastnění pozemků", "question": "Stavět dálnice a hlavní silnice má být možné i za cenu vyvlastnění majitelů daných pozemků.", "description": "Dnes je v ČR možné vyvlastnit pozemky pro stavbu dálnic nebo hlavních silnic i přes nesouhlas majitelů, kteří poté za pozemek dostanou zaplaceno (dle tzv. Liniového zákona).", "order": 6.0, "slug": 6}, {"id": 14, "name": "Rychlovlaky priorita", "question": "Výstavba infrastruktury pro rychlovlaky má být upřednostňována oproti výstavbě další dopravní infrastuktury.", "description": "", "order": 7.0, "slug": 7}, {"id": 16, "name": "Nové přehrady", "question": "ČR by měla stavět více nových přehrad.", "description": "Vláda loni sestavila seznam více než 100 lokalit v ČR, kde by v budoucnu mohly vzniknout přehrady pro zadržování dešťové vody. Hladina a objemy podzemních vod setrvale klesají, nerovnoměrné srážky a málo sněhu v mírných zimách je nestačí doplnit. Odpůrci namítají, že vysychají i mnohé stávající přehrady a že jejich výstavba je součástí problémů se suchem. Obří stavby pak podle nich nahrávají velkým stavebním firmám a tzv. betonářské lobby.", "order": 8.0, "slug": 8}, {"id": 17, "name": "Zachování biosložek do paliv", "question": "Povinné přidávání biosložek do paliv by mělo být i nadále zachováno.", "description": "Dodavatelé pohonných hmot musejí nyní přimíchávat povinně alespoň 4,1 procenta biosložky do benzinu a šest procent do nafty. Cílem je snížit emise skleníkových plynů v dopravě, kritici však poukazují na to, že biosložky první generace v palivu ke snižování emisí nevedou, naopak je zvyšují. Zrušení této povinnosti by zasáhlo firmy vyrábějící biopaliva a navazující zpracovatele vedlejších produktů. V ČR je nejvějším dodavatelem biosložek první generace koncern Agrofert.", "order": 9.0, "slug": 9}, {"id": 18, "name": "Fit for 55", "question": "ČR by měla podporovat program snížení emisí skleníkových plynů \"Fit for 55\".", "description": "Fit for 55 je návrh snížit v zemích EU do roku 2030 emise skleníkových plynů o 55 % oproti roku 1990. Návrh počítá mj. s tím, že pravděpodobně dojde ke zdražení emisních povolenek, zisk by měl jít naopak ve velké míře do fondu na kompenzace případných zvýšených nákladů pro sociálně slabší občany.", "order": 10.0, "slug": 10}, {"id": 20, "name": "Podpora pouze ekologického zemědělství", "question": "ČR by měla v budoucnu podporovat pouze ekologické zemědělství.", "description": "", "order": 11.0, "slug": 11}, {"id": 31, "name": "Konec těžby a spalování uhlí před 2038", "question": "Česká republika by měla ukončit těžbu a spalování uhlí v hnědouhelných elektrárnách dříve než v roce 2038.", "description": "Uhelná komise vlády letos doporučila ukončit těžbu a spalování hnědého uhlí pro energetické účely v roce 2038, což vedlo mj. k odchodu několika členů této komise, kteří preferovali alternativní návrh roku 2033. Z okolních zemí Německo stanovilo termín na rok 2038, Slovensko na rok 2023, Rakousko již skončilo v roce 2020 a Polsko o něm naopak ani nejedná.", "order": 12.0, "slug": 12}, {"id": 32, "name": "Státní podpora Dukovan", "question": "Stát by měl finančně podpořit výstavbu a provoz nového jaderného reaktoru v Dukovanech.", "description": "Podle plánu vlády bude stát financovat dostavbu elektrárny Dukovany půjčkou přes 100 miliard Kč. Zbytek financí by měl dodat majitel, tj. firma ČEZ s většinovou státní účastí. Vládní odhad ceny je kolem 150 miliard, kritici ale odhadují, že se dostavba mnohonásobně prodraží stejně jako u jiných nejnovějších atomových elektráren v Evropě.", "order": 13.0, "slug": 13}, {"id": 33, "name": "Podpora obnovitelných zdrojů", "question": "ČR má finančně podporovat rozvoj obnovitelných zdrojů energie.", "description": "", "order": 14.0, "slug": 14}, {"id": 34, "name": "Zákon o uhlíkové neutralitě do 2050", "question": "ČR by měla uzákonit dosažení uhlíkové neutrality do roku 2050.", "description": "Uhlíková neutralita znamená dosažení rovnováhy mezi emisemi uhlíku (ze skleníkových plynů) a jejich pohlcováním z atmosféry. Závazek dosažení uhlíkové neutrality do roku 2050 vláda ČR přijala v roce 2019 v rámci Zelené dohody pro Evropu. Švédsko, Dánsko, Francie, Německo a Maďarsko již mají tento závazek i ve formě zákona.", "order": 15.0, "slug": 15}, {"id": 23, "name": "Daň z digitálních služeb", "question": "Google nebo Facebook by měly platit speciální daň ze všech příjmů v ČR.", "description": "Aktuálně je v parlamentu návrh zákona o dani z digitálních služeb, který pro velké internetové firmy zavádí novou daň ze všech přijmů v ČR. Je možné, že se do konce volebního období zákon nestihne finálně projednat a nová sněmovna tak bude muset příp. začít jej projednávat znovu. Zastánci argumentují nízkými až nulovými daněmi, které tyto velké firmy v ČR platí. Např. v Rakouskou, Velké Británii a Turecku, které zavedly obdobnou daň, Google odpovídajícím způsobem zvedl ceny objednavatelům reklamy. ", "order": 16.0, "slug": 16}, {"id": 24, "name": "Vláda - ceny za mobilní internet", "question": "Vláda by měla zařídit, aby veřejnost neměla horší ceny za mobilní internet než státní instituce.", "description": "Dnes je běžné, že zaměstnanci velkých státních institucí jako jsou ministerstva mají výrazně levnější telefonní tarify (i pro soukromé účely) než jaké jsou k dispozi veřejnosti. Např. zaměstnanci Ministerstva financí ČR mají neomezené volání za 54 Kč a neomezená data za 182 Kč měsíčně. Obdobný tarif pro veřejnost od stejné firmy stojí více jak 1100 Kč měsíčně.", "order": 17.0, "slug": 17}, {"id": 43, "name": "Omezení přístupu na sociální sítě", "question": "Velké sociální sítě jako Facebook, Youtube, Instagram nebo Twitter mají mít právo omezit své používání komukoliv dle své vůle.", "description": "Velké sociální sítě dnes mohou zamezit komukoliv ve svém používání. Např. Twitter (doživotně) a Facebook (na 2 roky) omeziliy přístup na svoje sociální sítě bývalému prezidentu USA Donaldu Trumpovi v lednu 2021 po útoku jeho příznivců na Capitol, sídlo amerického parlamentu.", "order": 18.0, "slug": 18}, {"id": 44, "name": "Zodpovědnost sociálních sítí", "question": "Sociální sítě mají být zodpovědné za obsah, který zpřístupňují.", "description": "Velké sociální sítě jako Facebook nebo Youtube jsou dnes pojímány spíše jako nástěnka: zodpovědnost (i trestní) za zveřejněný obsah je primárně na tom, kdo obsah na danou síť nahrál. Naopak např. média mají zodpovědnost za jakýkoliv obsah, který zveřejní.", "order": 19.0, "slug": 19}, {"id": 45, "name": "Fake News – povinnost odstraňovat", "question": "Provozovatelé velkých internetových stránek a aplikací jako Facebook nebo Youtube mají být povinni vymazat „falešné zprávy“ (fake news), na které byli upozorněni.", "description": "Jako fake news je obvykle označováno šíření nepravdivých a manipulativních informací plnících roli dezinformace. V Německu existuje několik let zákon, který velkým sociálním sítím takovou povinnost ukládá, v ČR žádný takový speciální zákon není.", "order": 20.0, "slug": 20}, {"id": 66, "name": "Volby online", "question": "Měla by být zavedena možnost volit online po internetu.", "description": "", "order": 21.0, "slug": 21}, {"id": 68, "name": "Nediferenciace žáků na ZŠ", "question": "Všechny děti by se měly bez ohledu na talent nebo schopnosti vzdělávat společně až do konce povinné školní docházky (do 15 let, základní škola).", "description": "V dnešní době jde zhruba 10 % žáků po 5. třídě na víceletá gymnázia. Dalších zhruba 10 % žáků chodí na výběrové základní školy. Časná diferenciace žáků byla obnovena po roce 1989. Znovuzavedení víceletých gymnázií bylo vnímáno jako reakce na poptávku po kvalitním vzdělání pro nadané žáky a také jako naplnění principu svobodné volby školy pro rodiče a žáky. Dle kritiků to vede ke zvýšení nerovnosti ve vzdělání a k celkovému poklesu vzdělání v ČR.", "order": 22.0, "slug": 22}, {"id": 70, "name": "Inkluzivní vzdělávácí systém", "question": "Vzdělávací systém má být co nejvíce inkluzivní, má pomáhat slabším žákům zapojit se do kolektivu a motivovat je k učení.", "description": "Odpůrci inkluze se obávají, že by méně nadaní žáci brzdili ty nadané. Zastánci inkluze poukazují na to, že výzkumy nic takového nepotvrzují, a zmiňují prospěch z nulové selekce žáků pro celou společnost.", "order": 23.0, "slug": 23}, {"id": 15, "name": "Zvýšení věku odchodu do důchodu", "question": "Věk odchodu do důchodu by se měl nadále zvyšovat.", "description": "V současnosti je v ČR standardní věk odchodu do důchodu více než 64 let a postupně se zvyšuje na cílových 65 let.", "order": 24.0, "slug": 24}, {"id": 72, "name": "Výstup z EU", "question": "ČR by měla vystoupit z Evropské unie.", "description": "Evropská unie (EU) je svazkem 27 evropských zemí. Jejími členy jsou i všechny 4 sousední země.", "order": 25.0, "slug": 25}, {"id": 73, "name": "Zavedení eura", "question": "ČR by měla usilovat o zavedení společné evropské měny (euro).", "description": "Eurem se platí z okolních zemí v Německu, Rakousku a na Slovensku. V Polsku se platí zlotým. Přijetí eura by přeneslo absenci vlastní centrální banky, která má možnost ovlivňovat ekonomiku své země pomocí fiskální politiky, měnit finanční zásobu dané ekonomiky, podporovat růst nebo jej omezovat. Naopak přijetí eura by snížilo transakční náklady na konvertování koruny a eura, pomohlo by zjednodušit zahraniční obchod, což by s sebou neslo růst HDP.", "order": 26.0, "slug": 26}, {"id": 74, "name": "Výstup z NATO", "question": "ČR by měla vystoupit z NATO.", "description": "Severoatlantická aliance (NATO) je mezinárodní vojenský pakt 30 zemí z Evropy a severní Ameriky. Ze sousedních zemí je v NATO také Německo, Polsko a Slovensko. Rakousko se po 2. světové válce zavázalo k neutralitě a nyní si tradici neutrality drží.", "order": 27.0, "slug": 27}, {"id": 75, "name": "ČR v jádru EU", "question": "Místo ČR je v jádru EU.", "description": "Jako jádro EU e obvykle označují země, které patří a chtějí i v budoucnu patřit do projektů větší integrace EU (dnes např. měna euro nebo Schengenský prostor bez hraničních prostor, do budoucna např. společná armáda).", "order": 28.0, "slug": 28}, {"id": 76, "name": "Podpora zahraniční spolupráce a pomoci", "question": "ČR by měla více finančně podporovat zahraniční rozvojovou spolupráci a humanitární pomoc.", "description": "ČR dala v roce 2019 na rozvojovou spolupráci a humanitární pomoc v zahraničí zhruba 7 miliard Kč. V poměru k HDP to byla jedna z nejnižších částek ze zemí OECD.", "order": 29.0, "slug": 29}, {"id": 77, "name": "Ohled na rozvojové země", "question": "ČR by měla při přijímání zákonů brát ohled i na rozvojové země (např. v oblasti změn klimatu).", "description": "Některé zákony přijímané v ČR mají nepřímý dopad i na další země. Např. globální zvyšování hladiny moří dnes probíhá rychlostí asi 1 cm za 3 roky. Zároveň zhruba 1/4 miliardy lidí žije na místech ve výšce méně jak 2 metry nad mořem, kde je riziko, že se budou muset přestěhovat/migrovat.", "order": 30.0, "slug": 30}, {"id": 79, "name": "ČR v Schengenu", "question": "ČR by měla zůstat v Schengenském prostoru s volným pohybem občanů EU.", "description": "", "order": 31.0, "slug": 31}, {"id": 83, "name": "Paliativní a hospicová péče", "question": "Financování paliativní a hospicové péče by měl finančně z většiny zajišťovat stát.", "description": "Paliativní péče o umírající pacienty nenabízí léčbu, ale zmírnění bolesti, zachování lidské důstojnosti a poskytnutí podpory blízkým. Hospice poskytují takovouto péči mimo nemocnici (doma, ve vlastním zařízení). Dnes většinu příjmů hospiců tvoří jednorázové dotace, dary a příspěvky od rodin umírajících.", "order": 32.0, "slug": 32}, {"id": 84, "name": "Zahraniční lékaři a sestry", "question": "ČR má aktivně zvát lékaře a sestry ze zahraničí, zvlášť do zdravotnických oborů, kde jich je v ČR nedostatek.", "description": "", "order": 33.0, "slug": 33}, {"id": 81, "name": "Genetické modifikace embryí", "question": "V ČR by měla být povolena genetická modifikace embryí.", "description": "ČR podepsala tzv. Oviedskou smlouvu o lidských právech a biomedicíně. Tato mezinárodní smlouva mj. zakazuje úpravu lidské genetické informace mimo preventivní, diagnostické a terapeutické důvody. V žádném případě nesmí být cílem modifikace genetické informace potomků. Za genetickou modifikaci embryí, ze kterých se v roce 2018 narodila dvojčata, byl v Číně v roce 2020 odsouzen do vězení lékař, jehož cílem byla resistence narozených proti viru HIV.", "order": 34.0, "slug": 34}, {"id": 82, "name": "Volba pohlaví dítěte", "question": "Rodiče v ČR by při umělém oplodnění měli mít možnost si vybrat pohlaví dítěte.", "description": "ČR podepsala tzv. Oviedskou smlouvu o lidských právech a biomedicíně. Tato mezinárodní smlouva mj. zakazuje výběr pohlaví dítěte při umělém oplodnění (s výjimkou některých prokazatelných dědičných poruch). Výběr pohlaví dítěte je nelegální ve většině světa, výjimkou jsou např. USA.", "order": 35.0, "slug": 35}]
\ No newline at end of file

jsconfig.json

+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./*"],
+      "@/*": ["./*"],
+      "~~/*": ["./*"],
+      "@@/*": ["./*"]
+    }
+  },
+  "exclude": ["node_modules", ".nuxt", "dist"]
+}

layouts/default.vue

+<template>
+  <div>
+    <div id="on-screen">
+      <Header />
+      <Nuxt />
+      <br/>
+    </div>
+    <div id="off-screen">
+      <Footer />
+      <Analytics />
+    </div>
+  </div>
+</template>
+
+<script>
+import Header from "~/components/Header.vue"
+import Footer from "~/components/Footer.vue"
+import Analytics from "~/components/Analytics.vue"
+
+export default {
+  components: {
+    Header,
+    Footer,
+    Analytics
+  }
+};
+</script>
+
+<style>
+  #on-screen {
+    min-height: 100vh;
+  }
+  /* CSS styly pro mobilní zobrazení */
+
+@media screen and (max-width: 490px) {
+
+.navbar-brand {
+    width: 70%;
+    font-size: 1rem;
+    line-height: 1rem;
+}
+
+.container {
+    padding: 0;
+}
+
+.h2, h2 {
+    font-size: 1.1rem;
+}
+
+.card-text {
+    font-size: 0.8rem;
+}
+
+.col-4 {
+    width: 30%;
+    }
+}
+</style>
\ No newline at end of file

nuxt.config.js

+import questions from './content/questions.json'
+
+export default {
+  // Target: https://go.nuxtjs.dev/config-target
+  target: 'static',
+
+  // Global page headers: https://go.nuxtjs.dev/config-head
+  head: {
+    title: 'Kalkulačka.1 - Piráti 2023',
+    meta: [
+      { charset: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      { hid: 'description', name: 'description', content: 'Kalkulačka.1 - Piráti 2023' },
+      { hid: 'format-detection', name: 'format-detection', content: 'telephone=no' },
+      { hid: 'author', name: 'author', content: 'Michal Škop, KohoVolit.eu' },
+      { hid: "og:description", property:"og:description", content:"Kalkulačka.1 - Piráti 2023"},
+      { hid: "og:title", property: "og:title", content:'Kalkulačka.1 - Piráti 2023'},
+      { hid: "og:site_name", property:"og:site_name", content:'Kalkulačka.1 - Piráti 2023'},
+      { hid: "fb:app_id", property:"fb:app_id", content:"200785490055088" },
+      { hid: "og:image", property:'og:image', content: "https://volebnikalkulacka.azureedge.net/senat-2016/image/bg.jpg" },
+      { hid: "og:type", property:"og:type", content:"website" },
+      { hid: "og:url", property:"og:url", content:"https://www.kalkulacka.one/" },
+      { hid: "apple-mobile-web-app-title", name: "apple-mobile-web-app-title", property:"apple-mobile-web-app-title", content:"Kalkulačka.1" }
+      
+    ],
+    link: [
+      { rel: 'icon', type: 'image/x-icon', href: '/cs/volby-2021-2050/favicon.ico' }
+    ]
+  },
+
+  // Global CSS: https://go.nuxtjs.dev/config-css
+  css: [
+    // https://stackoverflow.com/questions/47968256/what-is-best-way-for-including-bootstrap-css-to-nuxt-project
+    "~/node_modules/bootswatch/dist/lumen/bootstrap.min.css"
+  ],
+
+  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
+  plugins: [
+    { src: "~/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js", mode: "client" }
+  ],
+
+  // Auto import components: https://go.nuxtjs.dev/config-components
+  components: true,
+
+  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
+  buildModules: [
+    // https://google-analytics.nuxtjs.org/setup/
+    // '@nuxtjs/google-analytics'
+  ],
+
+  // Modules: https://go.nuxtjs.dev/config-modules
+  modules: [
+    // https://go.nuxtjs.dev/axios
+    '@nuxtjs/axios',
+    // https://go.nuxtjs.dev/pwa
+    '@nuxtjs/pwa',
+    // https://content.nuxtjs.org/
+    '@nuxt/content',
+    // https://www.npmjs.com/package/cookie-universal-nuxt?activeTab=readme
+    'cookie-universal-nuxt',
+    // https://github.com/pimlie/nuxt-matomo
+    // ['nuxt-matomo', { matomoUrl: '//piwik.kohovolit.eu/', siteId: 1 }],
+  ],
+
+  // Axios module configuration: https://go.nuxtjs.dev/config-axios
+  axios: {},
+
+  // PWA module configuration: https://go.nuxtjs.dev/pwa
+  pwa: {
+    manifest: {
+      lang: 'cs'
+    }
+  },
+
+  // Build Configuration: https://go.nuxtjs.dev/config-build
+  build: {
+    // https://stackoverflow.com/questions/68728903/how-to-setup-sass-scss-sass-loader-in-nuxt
+    // loaders: {
+    //   sass: {
+    //     implementation: require('sass'),
+    //   },
+    //   scss: {
+    //     implementation: require('sass'),
+    //   },
+    // }
+  },
+  router: {
+    base: '/pirati-d9450fcc-e848-4adc-99f8-c4105c142df4/'
+  },
+  generate: {
+    routes() {
+      let arr = [...Array(questions.length + 1).keys()]
+      arr.shift()
+      const arr1 = arr.map(x => '/question/' + x)
+      return arr1
+    }
+  },
+  // https://google-analytics.nuxtjs.org/setup/
+  // googleAnalytics: {
+  //   id: 'UA-8592359-7'
+  // }
+}

package.json

+{
+  "name": "volebni-kalkulacka-2021",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start",
+    "generate": "nuxt generate"
+  },
+  "dependencies": {
+    "@nuxt/content": "^1.14.0",
+    "@nuxtjs/axios": "^5.13.6",
+    "@nuxtjs/pwa": "^3.3.5",
+    "@popperjs/core": "^2.9.3",
+    "axios": "^0.21.4",
+    "bootstrap": "^5.1.0",
+    "bootswatch": "^5.1.0",
+    "cookie-universal-nuxt": "^2.1.5",
+    "core-js": "^3.15.1",
+    "nuxt": "^2.15.7",
+    "nuxt-matomo": "^1.2.4",
+    "openssl": "^2.0.0"
+  },
+  "devDependencies": {
+    "@nuxtjs/google-analytics": "^2.4.0"
+  }
+}

pages/compare.vue

+<template>
+  <div class="page">
+    <div class="container">
+      <h4 class="p-2">
+        Vyberte strany, s kterými se chcete porovnat:<br/>
+        <small>(svůj výběr můžete později změnit)</small>
+      </h4>
+
+      <div class="row">
+        <div class="col-md-2"></div>
+        <div class="col-12 col-md-8 list-group-item list-group-item-action m-1">
+          <label class="checkbox inline">
+           <input v-model="radio" type="radio" class="form-check-input" name="options" id="1" autocomplete="off" value="1" checked>
+             Devět největších stran dle <a href="https://mandaty.cz/" target="_blank">Mandáty.cz</a>
+          </label>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col-md-2"></div>
+        <div class="list-group-item list-group-item-action m-1">
+          <label class="checkbox inline">
+           <input v-model="radio" type="radio" class="form-check-input" name="options" id="1" autocomplete="off" value="2">
+             Všechny kandidující strany
+          </label>
+        </div>
+      </div>
+
+      <hr>
+
+      <div class="row">
+        <div class="col-md-2"></div>
+        <div class="col-12 col-md-8 d-grid">
+          <button @click="next" class="btn btn-lg btn-primary" >>> Dále >></button>
+        </div>
+      </div>
+
+    </div>
+    <Analytics />
+  </div>
+</template>
+
+<script>
+import Analytics from "~/components/Analytics.vue"
+
+export default {
+  async asyncData ({ $content }) {
+    const answers = await $content('answers').only(['id']).fetch()
+    return { answers }
+  },
+
+  data: function() {
+    return {
+      radio: 1
+    }
+  },
+
+  head: function() {
+    return {
+      title: '🏴‍☠️ Piráti EP 2023 - výběr kandidátů',
+      meta: [
+        {
+          hid: 'compare',
+          name: 'Výběr stran',
+          description: '🏴‍☠️ Piráti EP 2023 - výběr kandidátů'
+        }
+      ]
+    }
+  },
+  methods: {
+    next: function () {
+      let payload = false
+      // fake selection
+      // if (parseInt(this.radio) == 1) {
+      //   this.answers.forEach(item => {
+      //     if(parseInt(item.id) < 5000) {
+      //       payload.push(item.id)
+      //     }
+      //   })
+      // } else {
+      //   this.answers.forEach(item => {
+      //     payload.push(item.id)
+      //   })
+      // }
+      if (parseInt(this.radio) == 2) {
+        payload = true
+      }
+      this.$store.commit('storeComparableSwitch', payload)
+      this.$router.push({ path: '/results/' })
+    }
+  },
+  components: {
+    Analytics
+  }
+}
+</script>
+
+<style scoped>
+  .page {
+    /* size depends on sizes of header */
+    min-height: calc(100vh - 40px - 18px);
+  }
+</style>
\ No newline at end of file

pages/comparison.vue

+<template>
+  <div class="page container">
+    <h2 class="p-2">
+        Porovnat <small>(max. 3 strany)</small>
+    </h2>
+
+    <div class="row">
+      <div class="col-12 col-md-8">
+        <select v-model="added" @change="addId" class="form-select form-select-lg mb-3" aria-label="select candidates">
+          <option v-for="candidate in alphabetically" :key="candidate.id" v-bind:value="{id: candidate.id}">
+            {{ candidate.name }}
+            <!-- ({{ candidate.name }}) -->
+          </option>
+        </select>
+      </div>
+
+      <div class="col-12 col-sm-4">
+        <input v-model="me" class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
+        <label class="form-check-label" for="flexCheckDefault">
+          Moje odpovědi
+        </label>
+      </div>
+
+    </div>
+
+    <hr/>
+
+    <nav class="navbar sticky-top navbar-light bg-light">
+      <div class="container-fluid">
+        <div class="container">
+          <div class="row">
+            <div class="col-4" v-for="(sel, index) in selected" :key="index">
+              <div class="text-center">
+                <button type="button" class="btn-close bg-warning" aria-label="Close" @click="removeId(index)"></button>
+                <br/>
+                {{ sel.name }}
+                <!-- <small>{{ sel.name }}</small> -->
+                <br/>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </nav> 
+
+
+    <div v-for="question in questions" :key="question.id">
+      <div class="card" :class="{' border-success': weights[question.id]}">
+        <div class="card-body">
+
+          <h5 class="card-title">{{ question.name }}</h5>
+          <h6 class="card-subtitle mt-2">{{ question.question }}</h6>
+          <div class="text-muted">
+            <small>
+              <span class="text-muted" type="button" data-bs-toggle="collapse" :data-bs-target="'#q-' + collapseTarget(question.id)" aria-expanded="false" aria-controls="collapseExample">
+                {{ shortDescription(question.description) }}
+              </span>
+              <div class="collapse" :id="'q-' + collapseTarget(question.id)">
+                <div class="card card-body">
+                  {{ question.description }}
+                </div>
+              </div>
+
+            </small>
+            <br/>
+          </div>
+          <div class="row">
+            <div class="col-4" v-for="(sel, index) in selected" :key="index">
+              <div class="text-center">
+                <h5>
+                <svg height="50" width="50"><circle cx="25" cy="25" r="20" stroke="grey" stroke-width="1" :fill="showVote(sel.votes[question.id])" /></svg><br/>
+                <small>{{ showTextVote(sel.votes[question.id]) }}</small>
+                </h5>
+              </div>
+            </div>
+          </div>
+
+          <div v-for="(sel, index) in selected" :key="index">
+            <div v-if="commentExist(sel, question.id)" class="alert alert-secondary">
+              <strong> {{ sel.name }}</strong>:
+              {{ sel['comments'][question.id] }}
+            </div>
+          </div>
+
+        </div>
+      </div>  
+    </div>
+
+    <hr/>
+    <!-- <div class="">
+      <a class="btn btn-info" href="https://docs.google.com/spreadsheets/d/e/2PACX-1vSEeatMK1UN_7JZiOSF7DeHxiEns-y1FDaGp28OUGe0hCcQDepfxzK2xouO20dfIIz6Sutyx0MidWM9/pubhtml" target="_blank">Tabulka všech otázek a odpovědí</a>
+    </div> -->
+    
+    <Analytics />
+  </div>
+</template>
+<script>
+import Analytics from "~/components/Analytics.vue"
+
+import candidates from "../content/answers.json";
+import questions from "../content/questions.json";
+
+
+export default {
+
+  data: function() {
+    return {
+      selectedCandidateIds: [],
+      me: true,
+      added: false,
+      // selected: [],
+      candidates,
+      questions
+    }
+  },
+  
+  head: function() {
+    return {
+      title: '🏴‍☠️ Piráti EP 2023 - Kalkulačka.1 - porovnání',
+      meta: [
+        {
+          hid: 'comparison',
+          name: 'Porovnání',
+          description: '🏴‍☠️ Piráti EP 2023 - Kalkulačka.1 - porovnání'
+        }
+      ]
+    }
+  },
+
+  computed: {
+    selected: function() {
+      let selected = []
+      let s = 0
+      if (this.me) {
+        const item = {
+          id: 0,
+          name: 'Moje odpovědi',
+          votes: this.$store.getters.getAnswers,
+          comments: {}
+        }
+        selected.push(item)
+        s = 1
+      }
+      if ((this.selectedCandidateIds.length + s) > 3) {
+        this.selectedCandidateIds.pop()
+      }
+      let filteredCandidates = this.candidates.filter(candidate => (this.selectedCandidateIds.indexOf(candidate.id) != -1 ))
+      selected = selected.concat(filteredCandidates)
+      return selected
+    },
+
+    alphabetically: function() {
+      let s = this.candidates.sort((a, b) => {
+        return a.name.toLocaleLowerCase('cs').localeCompare(b.name.toLocaleLowerCase('cs'), 'cs')
+      })
+      return s
+    },
+
+    weights: function() {
+      return this.$store.getters.getWeights
+    },
+
+  },
+  mounted: function() {
+    if (typeof(this.$route.params.candidateId) != 'undefined') {
+      this.selectedCandidateIds.push(this.$route.params.candidateId)
+    }
+
+
+    this.scrollToTop()
+  },
+
+  methods: {
+    addId: function() {
+      // console.log('adding', this.added.id)
+      if (this.selectedCandidateIds.indexOf(this.added.id) == -1) {
+        if ((this.selectedCandidateIds.length >= 2 & this.me) | (this.selectedCandidateIds.length >= 3 & !this.me)) {
+          this.selectedCandidateIds.pop()
+        }
+        this.selectedCandidateIds.push(this.added.id)
+      }
+    },
+
+    removeId: function(i) {
+      // console.log('removing', i)
+      if (this.me & (i == 0)) {
+        this.me = !this.me
+      } else {
+        const id = this.selected[i].id
+        const index = this.selectedCandidateIds.indexOf(id)
+        this.selectedCandidateIds.splice(index, 1)
+      }
+    },
+
+    showVote: function(value) {
+      switch (value) {
+        case 1:
+          return  'green' //'🟢'
+        case -1: 
+          return 'red' //'🔴'
+        case 0:
+          return 'grey' //'⚪'
+        default:
+          return 'white'
+      } 
+    },
+
+    showTextVote: function(value) {
+      switch (value) {
+        case 1:
+          return  'Pro' //'🟢'
+        case -1: 
+          return 'Proti' //'🔴'
+        case 0:
+          return 'Neutrální' //'⚪'
+        default:
+          return 'Žádná odpověď'
+      } 
+    },
+
+    voting: function(id) {
+      return "https://www.psp.cz/sqw/hlasy.sqw?G=" + id
+    },
+
+    collapseTarget: function(key) {
+      return "collapseTarget-" + key
+    },
+
+    shortDescription: function(s) {
+      if (typeof(s) == 'undefined') {
+        return ''
+      }
+      if (s.length > 0) {
+        if (s.length > 42) {
+          return s.slice(0, 42) + " ..."
+        } else {
+          return s
+        }
+      }
+      return s
+    },
+    longDescription: function(s, i) {
+      if (typeof(s[i]) == 'undefined') {
+        return ''
+      }
+      return s[i]
+    },
+
+    commentExist: function(sel, qid) {
+      // console.log('sel, qid', sel, qid)
+      if (typeof(sel.comments[qid]) == 'undefined') {
+        // console.log('exist', 'undefined')
+        return false
+      }
+      if (sel.comments[qid] == '') {
+        return false
+      }
+      // console.log('exist', 'true')
+      return true
+    },
+
+    scrollToTop() {
+      window.scrollTo(0,0)
+    }
+  },
+  components: {
+    Analytics
+  }
+  
+}
+</script>
+
+<style scoped>
+  .page {
+    /* size depends on sizes of header */
+    min-height: calc(100vh - 40px - 18px);
+    max-width: 666px;
+  }
+</style>
\ No newline at end of file

pages/extra.vue

+<template>
+  <div class="page">
+    <div class="container">
+      <h4 class="p-2">
+        Vyberte otázky, které jsou pro vás zásadní:
+      </h4>
+
+      <div v-if="!zeroAnswers">
+        <div class="d-grid p-2">
+          <NuxtLink to="/results/" class="btn btn-secondary" @click.native="next" >>> Přeskočit >></NuxtLink>
+        </div>
+        <div class="list-group" v-for="question in questions" v-bind:key="question.id">
+          <div v-if="answered[question.id]" class="list-group-item list-group-item-action m-1">
+          <!-- <div class="list-group-item list-group-item-action m-1"> -->
+            <label class="checkbox inline">
+              <input type="checkbox" class="custom-control-input" v-model="weights[question.id]">
+                {{ question.question }} <small>({{ answer(question.id) }})</small>
+            </label>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="zeroAnswers">
+        <div class="alert alert-warning" role="alert">
+          Nejsou odpovězené žádné otázky:<br/>
+          <NuxtLink to="/question/1/">Spustit Kalkulačku od začátku</NuxtLink>
+        </div>
+      </div>
+
+      <div class="d-grid p-2">
+        <NuxtLink to="/results/" class="btn btn-primary" @click.native="next" >>> Dále >></NuxtLink>
+      </div>
+    </div>
+
+    <Analytics />
+  </div>
+</template>
+
+<script>
+import Analytics from "~/components/Analytics.vue"
+
+export default {
+  async asyncData ({ $content }) {
+    const questions = await $content('questions').fetch()
+    return { questions }
+  },
+
+  head: function() {
+    return {
+      title: '🏴‍☠️ Piráti EP 2023 - důležité otázky',
+      meta: [
+        {
+          hid: 'extra',
+          name: 'Důležité otázky',
+          description: '🏴‍☠️ Piráti EP 2023 - důležité otázky'
+        }
+      ]
+    }
+  },
+
+  computed: {
+    answered: function() {
+      let $this = this
+      let out = {}
+      this.questions.forEach(question => {
+        let a = $this.$store.getters.getAnswer(question.id)
+        if (Math.abs(a) == 1) {
+          out[question.id] = true
+        } else {
+          out[question.id] = false
+        }
+      })
+      return out
+    },
+    weights: function() {
+      return this.$store.getters.getWeights
+    },
+    zeroAnswers: function () {
+      if (Object.keys(this.$store.getters.getAnswers) == 0) {
+        return true
+      } else {
+        return false
+      }
+    }
+  },
+
+  methods: {
+    answer: function(id) {
+      let a = this.$store.getters.getAnswer(id)
+      if (a == 1) {
+        return 'Ano'
+      }
+      if (a == -1) {
+        return 'Ne'
+      }
+      return ''
+    },
+    next: function() {
+      this.$store.commit('storeWeights', this.weights)
+    }
+  },
+
+  components: {
+    Analytics
+  }
+}
+</script>
+
+<style scoped>
+  .page {
+    /* size depends on sizes of header */
+    min-height: calc(100vh - 40px - 18px);
+  }
+</style>

pages/heroes.vue

+<template>
+  <div class="container page">
+    <h2 class="pt-2">Děkujeme za podporu!</h2>
+    <h4>Bez vás by to nešlo.</h4>
+    <h5>Všichni přispěvatelé a přispěvatelky mají čestné místo na nástěnce</h5>
+    
+
+    <div v-if="loading" class="alert alert-info">
+      Načítám na nástěnku všechny, co přispěli na Volební kalkulačku. Je jich hodně!
+    </div>
+    <span v-for="(supporter, index) in supporters" :key="index"> 
+      <span v-if="(supporter.date > '2020-10-10') & (supporter.amount > 0)" class="badge m-4 greater" :class="color(supporter.amount)">
+        {{ supporter.given_name }} {{ supporter.family_name }}
+      </span>
+    </span>
+
+    <hr/>
+
+    <Darujme />
+    <Analytics />
+  </div>
+</template>
+
+<script>
+import Darujme from "~/components/Darujme.vue"
+import Analytics from "~/components/Analytics.vue"
+
+export default {
+  data: function() {
+    return {
+      supporters: [],
+      loading: true,
+    }
+  },
+
+  mounted: function() {
+    let $this = this
+    fetch ("https://projects.kohovolit.eu/api/?projectId=1200653")
+    .then(function (response) {
+      return response.json()
+    })
+    .then(function (response) {
+      $this.$data.supporters = response.reverse().filter( function (item) {
+        $this.loading = false
+        return item.last
+      })
+    })
+  },
+
+  methods: {
+    color: function(v) {
+      if (v > 95000) {
+        return "bg-success"
+      } else {
+        if (v > 9500) {
+          return "bg-info"
+        } else {
+          return "bg-secondary"
+        }
+      }
+    }
+  },
+
+  components: {
+    Darujme, 
+    Analytics
+  }
+
+}
+</script>
+
+<style scoped>
+  .greater {
+    font-size: 1.5em;
+  }
+</style>
\ No newline at end of file

pages/index.vue

+<template>
+  <div class="container page">
+    <h2 class="pt-4">
+      🏴‍☠️ Piráti - Volební kalkulačka k primárkám do voleb EP 2024
+    </h2>
+    <!-- <div class="card border-info mb-3 p-4">
+    </div> -->
+    <div class="card mb-3 p-4">
+      <p>Vážení členové Celostátního fóra a příznivci České pirátské strany,</p>
+      <p>představujeme Vám první Pirátskou volební kalkulačku.</p>
+      <p>Pirátská Kalkulačka neslouží ke komunikaci k voličům navenek, ale k pomoci členské základně informovaně rozhodnout koho volit.</p>
+      <p>Pirátská kalkulačka funguje obdobným způsobem jako běžná volební kalkulačka, po otevření kalkulačky budete dotázáni na 31 otázek, na každou budete moci odpovědět Ano, Ne nebo Neutrální. Na konci kalkulačky budete moci označit libovolný počet otázek jako zásadní, ty budou mít vyšší váhu ve srovnání. Odpověď Neutrální funguje jako Přeskočit.</p>
+      <p>U každé otázky naleznete doplňující poznámku, někdy i s odkazem na externí zdroj. Zde jsou doplněny další podrobnosti a informace, klíčové je ale vždy samotné znění otázky, veškeré další informace jsou jen doprovodné. Otázky byly vybrány na základě vstupů od členů a následného výběru, doplnění a úprav od týmu.</p>
+      <p>Na konci kalkulačky se Vám zobrazí názorová shoda se 16 kandidáty na lídra a čelo, kteří nám poskytnuli své odpovědi. Každého kandidáta si zde můžete rozkliknout, přečíst si detailně jeho odpovědi včetně komentáře nebo si i porovnat více kandidátů najednou. Kandidáti na lídra jsou označeni žlutým kolečkem. V průběhu září přidáme i ostatní kandidáty.</p>
+      <p>Pod výsledky naleznete také odkaz na poskytnutí vaší zpětné vazby ke kalkulačce.</p>
+      <p>Věříme, že si kalkulačku oblíbíte a pomůže Vám splnit demokratické minimum při volbě.</p>
+      <p>za tým tvůrců kalkulačky</p>
+      <p>Vojtěch Pikal, Linda Kašpárková, Tomáš Válek, Tomáš Adamec a Michal Škop</p>
+    </div>
+    <hr/>
+    <div class="d-grid gap-2">
+      <NuxtLink to="/question/1/" class="btn btn-dark btn-lg">🏴‍☠️ SPUSTIT KALKULAČKU - PRIMÁRKY PIRÁTI EP 2024 🏴‍☠️</NuxtLink>
+    </div>
+    <hr/>
+    <!-- <h3>Uložené vyplněné kalkulačky</h3>
+    <StoredCalcs /> -->
+    <hr/>
+    <!-- <Darujme /> -->
+    <!-- <Analytics /> -->
+  </div>
+</template>
+
+<script>
+// import Darujme from "~/components/Darujme.vue"
+// import Analytics from "~/components/Analytics.vue"
+
+export default {
+  head: function() {
+    return {
+      title: '🏴‍☠️ Piráti - Volební kalkulačka k primárkám do voleb EP 2024',
+      meta: [
+        {
+          hid: 'index',
+          name: '🏴‍☠️ Piráti - Volební kalkulačka k primárkám do voleb EP 2024',
+          description: '🏴‍☠️ Piráti - Volební kalkulačka k primárkám do voleb EP 2024'
+        }
+      ]
+    }
+  },
+
+  mounted: function () {
+    // this.$store.dispatch('beep')
+  },
+
+  components: {
+    // Darujme, 
+    // Analytics
+  }
+}
+</script>
+
+<style scoped>
+  .page {
+    /* size depends on sizes of header */
+    min-height: calc(100vh - 40px - 18px);
+    max-width: 666px;
+  }
+</style>
\ No newline at end of file

pages/me.vue

+<template>
+  <div class="container page">
+    <h2 class="pt-2">
+      <span>Moje uložené vyplněné kalkulačky</span>
+      <small><small>
+        <sup class="badge rounded-pill bg-secondary">Experimentální</sup>
+      </small></small>
+    </h2>
+    <p class="alert alert-info">
+      ⓘ Info: Tyto výsledky kalkulaček jsou uložené pouze v prohlížeči, nikam se neposílají.
+    </p>
+    <StoredCalcs/>
+    <Analytics />
+  </div>
+</template>
+<script>
+import Analytics from "~/components/Analytics.vue"
+
+export default {
+  head: function() {
+    return {
+      title: '🏴‍☠️ Piráti EP 2024 - moje vyplněné volební kalkulačky',
+      meta: [
+        {
+          hid: 'me',
+          name: 'Moje vyplněné volební kalkulačky',
+          description: '🏴‍☠️ Piráti EP 2024 - moje vyplněné volební kalkulačky'
+        }
+      ]
+    }
+  },
+
+  components: {
+    Analytics
+  }
+}
+</script>
+<style scoped>
+  .page {
+    /* size depends on sizes of header */
+    min-height: calc(100vh - 40px - 18px);
+    max-width: 666px;
+  }
+</style>
\ No newline at end of file

pages/question/_slug.vue

+<template>
+  <div class="">
+
+    <div class="progress">
+      <div class="progress-bar bg-danger" role="progressbar" :style="progressStyle" :aria-valuenow="progress" aria-valuemin="0" aria-valuemax="100"></div>
+    </div>
+
+    <div class="container page card border-light pt-3">
+      <div class="card-header">{{ question.slug }} / {{ nquestions }}  {{ question.name }}</div>
+      <div class="card-body">
+        <h2 class="card-title">{{ question.question }}</h2>
+        <p class="card-text">{{ question.description }}</p>
+        <p>
+          <template v-for="(url, index) in question.links">
+            <div>
+              <a :href="url" target="_blank">
+                <!-- hotfix -->
+                {{ index === 0 ? 'Zdroj' : 'Aktuální kritika' }}  
+              </a>
+            </div>
+          </template>
+        </p>
+      </div>
+    </div>
+
+
+    <div class="">
+      <div class="row container position-absolute bottom-0 start-50 translate-middle-x">
+        <div class="col-4 d-grid">
+          <button @click="next(1)" class="btn btn-lg" :class="{'btn-primary': isActive[1], 'btn-outline-primary': !isActive[1]}" >ANO</button>
+        </div>
+        <div class="col-4 d-grid">
+          <button @click="next(-1)" class="btn btn-lg" :class="{'btn-primary': isActive[-1], 'btn-outline-primary': !isActive[-1]}">NE</button>
+        </div>
+        <div class="col-4 d-grid gap-1">
+          <button @click="next(0)" class="btn btn-lg text-muted" :class="{'btn-dark': isActive[0], 'btn-outline-secondary': !isActive[0]}" ><small>Neutrální</small></button>
+        </div>
+        <div class="row pt-2">
+          <div class="col-6 d-grid d-flex justify-content-start">
+            <button v-if="notFirst" @click="back(null)" class="btn btn-link text-muted">&lt; Zpět</button>
+          </div>
+          <div class="col-6 d-grid d-flex justify-content-end">
+            <button @click="next(null)" class="btn btn-link text-muted" :class="{'btn-dark': isActive[null], '': !isActive[null]}">Přeskočit ></button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<script>
+
+export default {
+  // load jsou using content
+  async asyncData ({ $content, params }) {
+    const question = await $content('questions', params.slug).fetch()
+    const questions = await $content('questions').fetch()
+    return { question, questions }
+  },
+  data: function() {
+    return {
+      isActive: {
+        1: false,
+        '-1': false,
+        0: false
+      }
+    }
+  },
+
+  head: function() {
+    return {
+      title: 'Kalkulačka.1 - 🏴‍☠️ Piráti EP 2023 - ' + this.question.name,
+      meta: [
+        {
+          hid: 'question ' + this.question.slug,
+          name: this.question.name,
+          description: this.question.question
+        }
+      ]
+    }
+  },
+
+  mounted: function() {
+    // active buttons
+    let currentAnswer = this.$store.getters.getAnswer(this.question.id)
+    if (typeof(currentAnswer) != 'undefined') {
+      this.isActive[currentAnswer] = true
+    }
+  },
+
+  computed: {
+    nquestions: function() {
+      return this.questions.length
+    },
+    progress: function() {
+      return parseInt(this.$route.params.slug) / this.nquestions * 100
+    },
+    progressStyle: function() {
+      return "width: " + this.progress + "%"
+    },
+    nextTo: function() {
+      if (parseInt(this.$route.params.slug) == this.questions.length) {
+        return "/extra/"
+      } else {
+        return "/question/" + (parseInt(this.$route.params.slug) + 1) + "/"
+      }
+    },
+    backTo: function() {
+      return "/question/" + (parseInt(this.$route.params.slug) - 1) + "/"
+    },
+    notFirst: function() {
+      let notFirst = true
+      if (parseInt(this.$route.params.slug) == 1) {
+        notFirst = false
+      }
+      return notFirst
+    }
+  },
+
+  methods: {
+    next: function(answer) {
+      if (answer != null) {
+        var payload = {'key': this.question['id'], 'value': answer}
+        this.$store.commit('addAnswer', payload)
+      }
+      this.$router.push({ path: this.nextTo })
+    },
+    back: function(answer) {
+      this.$router.push({ path: this.backTo })
+    }
+  },
+
+  transition(to, from) {
+    // console.log('from', from)
+    if (!from) {
+      return 'show'
+    }
+    if (from['name'] == null) {
+      // console.log('from name null')
+      return 'show'
+    }
+    return +to.params.slug < +from.params.slug ? {name:'page-right', mode: ''} : {name: 'page', mode: ''}
+  }
+}
+</script>
+
+<style scoped>
+  @media (min-width: 768px) {
+    .card {
+      margin-top: 66px;
+    }
+    .card-text {
+      font-size: 1.25em;
+    }
+  }
+
+  .page {
+    /* size depends on sizes of header */
+    min-height: calc(100vh - 40px - 18px);
+    max-width: 999px;
+  }
+
+  .container {
+    background-color: #fff;
+  }
+
+  body {
+    overflow-x: hidden;
+  }
+
+  .row {
+    padding: 2px;
+    --bs-gutter-x: 0.25rem;
+  }
+
+  /* transition during entering and leaving : */
+  .page-enter-active, .page-leave-active, .page-right-enter-active, .page-right-leave-active {
+    transition: transform 0.2s ease 0.25s, opacity 0.2s ease 0.25s;
+  }
+  .show-enter-active, .show-leave-active { 
+    transition: opacity .1s;
+  }
+  .show-enter, .show-leave-active { 
+    opacity: 0;
+  }
+  .page-enter {
+    transform: translate(100%, -100%);
+    opacity: 0.25
+  }
+  .page-enter-to {
+    transform: translate(0, -100%);
+    opacity: 1
+  }
+  .page-leave-to {
+    transform: translate(-100%, 0);
+    opacity: 0;
+  }
+  .page-right-enter {
+    transform: translate(-100%, -100%);
+    opacity: 0.25 
+  }
+  .page-right-enter-to {
+    transform: translate(0, -100%);
+    opacity: 1
+  }
+  .page-right-leave-to {
+    transform: translate(100%, 0);
+    opacity: 0;
+  }
+</style>
\ No newline at end of file