add result

result/App.vue

@@ -0,0 +1,25 @@
+<template>
+  <jsonview/>  
+</template>
+
+<script>
+import jsonview from './components/jsonview.vue'
+
+export default {
+  name: 'App',
+  components: {
+    jsonview
+  }
+}
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>

result/jsondata.json

@@ -0,0 +1,15 @@
+[
+    {
+        "title":"Nadpis1",
+        "content": "Obsah1",
+        "date": "1. 3. 2022",
+        "img": "image_01.jpg"
+    },
+    {
+        "title":"Nadpis2",
+        "content": "Obsah2",
+        "date":"2. 3. 2022",
+        "img": "image_02.jpg"
+    }
+
+]

result/jsonview.vue

@@ -0,0 +1,120 @@
+ <template>
+<div>
+  <!-- jsonhead -> hlavička pro navigaci a změnu datumu      -->
+  <div id="jsonhead">
+    <h1>JSON</h1>
+    <p>Použi navigační tlačítka pro změnu datumu</p>
+    <button class="navigace" @click="increment()">+</button>
+    <button class="navigace" @click="resetdate()">RESET</button>    
+    <button class="navigace" @click="decrement()">-</button>
+  </div>
+<!-- jsonmain -> div pro zobrazeni hlavní části-->
+<div id="jsonmain">  
+  <div v-for="data1 in selectDatum(selectDate(date,numberino))" :key="data1.date">
+    <b>{{data1.title}}</b> - {{data1.content}} - <i>{{data1.date}}</i> <br>
+    <img :src="getImgUrl(data1.img)" v-bind:alt="data1.img">  
+</div>
+</div>
+
+  <!-- DEBUG SEKCE -->
+  <button @click="showdebug()"> DEBUG</button>
+<div id="jsondebug" style="display:none"> 
+
+    <!-- Test Proměných -->
+    <p> {{ selectDate(date,numberino) }} </p>
+    <p> {{ date }} </p>
+    <p> {{ numberino }} </p>
+
+    <!-- Toto je výpis celé JSON "Databáze" -->
+    <ul>
+      <li v-for="jsondata in jsondata" :key="jsondata.date">
+        <b>{{jsondata.title}}</b> - {{jsondata.content}} - <i>{{jsondata.date}}</i> 
+      </li>
+    </ul>
+
+    <!-- Vypisování JSON dat na dnešní datum -->
+    <!-- h3 -> vypisování neformátovaného JSON -->
+    <h3>{{ todayData() }}</h3>
+    <!-- h2 -> vypisování formátovaného JSON pro zpracovávání -->
+    <h2 v-for="data in todayData()" :key="data.date">
+      <b>{{data.title}}</b> - {{data.content}} - <i>{{data.date}}</i>
+      
+    </h2>
+
+    <!-- Vypisování neformátovaných JSON dat na dynamicky měněný datum -->
+    <h3>{{ selectDatum(selectDate(date,numberino) ) }}</h3>
+
+  </div>
+
+</div>
+</template>
+
+<script>
+
+import jsondata from '../assets/jsondata.json'
+
+export default {
+  name: 'jsonView',
+   data: () => ({
+          date: '',
+          numberino: 0,
+          jsondata: jsondata
+        }),
+  methods: {
+    printDate: function () {
+             return new Date();
+            //return new Date().toLocaleDateString();
+          },
+    selectDate: function(date, days){
+      var result = new Date(date);
+      result.setDate(result.getDate() + days);
+      return result.toLocaleDateString();
+    },
+
+    todayData: function () {
+        return this.jsondata.filter(
+          jsondata => jsondata.date == (new Date().toLocaleDateString()));
+      },    
+      selectDatum: function (datum) {
+        return this.jsondata.filter(
+          jsondata => jsondata.date == datum);
+      },
+       getImgUrl(pic) {
+        return require('../assets/img/'+pic);
+        },
+
+      
+    increment(){
+    this.numberino += 1;
+    },
+    decrement(){
+      this.numberino -= 1;
+    },
+    resetdate(){
+      this.numberino = 0;
+    },
+    showdebug(){
+      var x = document.getElementById("jsondebug");
+      if (x.style.display === "none") {
+        x.style.display = "block";
+      } else {
+        x.style.display = "none";
+      } 
+    }
+  },
+  mounted: function () {
+          this.date = this.printDate();
+        },
+  computed: {
+      selectedDate: function () {
+        return this.selectDate();
+      }
+    }
+}
+</script>
+
+<style scoped>
+h4{
+    color: blue;
+}
+</style>