update comments

vue-json/src/components/jsonview.vue

@@ -1,31 +1,50 @@
  <template>
 <div>
-  <div>
+  <!-- jsonhead -> hlavička pro navigaci a změnu datumu      -->
+  <div id="jsonhead">
     <h2>JSON</h2>
-    <p> {{ date }} </p>
-    <p> {{ selectDate(date,numberino)}}</p>
-    <p>{{numberino}}</p>
+    <p>Použi navigační tlačítka pro změnu datumu</p>
     <button @click="increment()">+</button>
+    <button @click="resetdate()">RESET</button>    
     <button @click="decrement()">-</button>
-    
   </div>
-
-<div>
-  <!-- <ul>
-    <li v-for="jsondata in jsondata" :key="jsondata.date">
-        <b>{{jsondata.title}}</b> - {{jsondata.content}} - <i>{{jsondata.date}}</i> 
-    </li>
-  </ul> -->
-  <!-- <h3>{{ todayData() }}</h3>
-  <h2 v-for="data in todayData()" :key="data.date">
-    <b>{{data.title}}</b> - {{data.content}} - <i>{{data.date}}</i>
-  </h2> -->
-  <h3>{{ selectDatum(selectDate(date,numberino) ) }}</h3>
+<!-- jsonmain -> div pro zobrazeni hlavní části-->
+<div id="jsonmain">  
   <h4 v-for="data1 in selectDatum(selectDate(date,numberino))" :key="data1.date">
     <b>{{data1.title}}</b> - {{data1.content}} - <i>{{data1.date}}</i>
   </h4>
+</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>
+
+</div>
 </template>
 
 <script>
@@ -52,28 +71,38 @@ export default {
 
     todayData: function () {
         return this.jsondata.filter(
-          jsondata => jsondata.date == (new Date().toLocaleDateString()))
+          jsondata => jsondata.date == (new Date().toLocaleDateString()));
       },    
       selectDatum: function (datum) {
         return this.jsondata.filter(
-          jsondata => jsondata.date == datum)
+          jsondata => jsondata.date == datum);
       },
 
       
     increment(){
     this.numberino += 1;
     },
-
     decrement(){
-    this.numberino -= 1;
+      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()
+        return this.selectDate();
       }
     }
 }