11<template >
22 <div class =" wrapper" >
3-
43 <div v-if =" $store.state.recipe" class =' header' :class =" { 'responsive': $store.state.recipe.image }" >
54 <div class =' image' v-if =" $store.state.recipe.image" >
65 <RecipeImages />
1413 <ul v-if =" keywords.length" >
1514 <RecipeKeyword v-for =" (keyword,idx) in keywords" :key =" 'keyw'+idx" :keyword =" keyword" v-on:keyword-clicked =" keywordClicked(keyword)" />
1615 </ul >
16+ </p >
17+ <p class =" dates" >
18+ <span v-if =" showCreatedDate" class =" date" :title =" t('cookbook', 'Date created')" >
19+ <span class =" icon-calendar-dark date-icon" />
20+ <span class =" date-text" >{{ dateCreated }}</span >
21+ </span >
22+ <span v-if =" showModifiedDate" class =" date" :title =" t('cookbook', 'Last modified')" >
23+ <span class =" icon-rename date-icon" />
24+ <span class =" date-text" >{{ dateModified }}</span >
25+ </span >
1726 </p >
1827 <p class =" description" >{{ $store.state.recipe.description }}</p >
1928 <p v-if =" $store.state.recipe.url" >
5968
6069<script >
6170
71+ import moment from ' @nextcloud/moment'
72+
6273import RecipeImages from ' ./RecipeImages'
6374import RecipeIngredient from ' ./RecipeIngredient'
6475import RecipeInstruction from ' ./RecipeInstruction'
@@ -86,17 +97,50 @@ export default {
8697 timerPrep: null ,
8798 timerTotal: null ,
8899 tools: [],
100+ dateCreated: null ,
101+ dateModified: null ,
89102 }
90103 },
104+ computed: {
105+ showModifiedDate : function () {
106+ if (! this .dateModified ) {
107+ return false
108+ }
109+ else if ( this .$store .state .recipe .dateCreated
110+ && this .$store .state .recipe .dateModified
111+ && this .$store .state .recipe .dateCreated === this .$store .state .recipe .dateModified ) {
112+ // don't show modified date if create and modified timestamp are the same
113+ return false
114+ }
115+ return true
116+ },
117+ showCreatedDate : function () {
118+ if (! this .dateCreated ) {
119+ return false
120+ }
121+ return true
122+ },
123+ },
91124 methods: {
92125 /**
93126 * Callback for click on keyword
94127 */
95128 keywordClicked : function (keyword ) {
96129 if (keyword) {
97- this .$router .push (' /tags/' + keyword);
130+ this .$router .push (' /tags/' + keyword)
98131 }
99132 },
133+ /* The schema.org standard requires the dates formatted as Date (https://schema.org/Date)
134+ * or DateTime (https://schema.org/DateTime). This follows the ISO 8601 standard.
135+ */
136+ parseDateTime : function (dt ) {
137+ if (! dt) return null
138+ var date = moment (dt, moment .ISO_8601 )
139+ if (! date .isValid ()) {
140+ return null
141+ }
142+ return date
143+ },
100144 setup : function () {
101145 // Make the control row show that a recipe is loading
102146 if (! this .$store .state .recipe ) {
@@ -133,7 +177,7 @@ export default {
133177 }
134178
135179 if ($this .$store .state .recipe .keywords ) {
136- $this .keywords = String ($this .$store .state .recipe .keywords ).split (' ,' );
180+ $this .keywords = String ($this .$store .state .recipe .keywords ).split (' ,' )
137181 }
138182
139183 if ($this .$store .state .recipe .cookTime ) {
@@ -155,6 +199,16 @@ export default {
155199 $this .tools = $this .$store .state .recipe .tool
156200 }
157201
202+ if ($this .$store .state .recipe .dateCreated ) {
203+ let date = $this .parseDateTime ($this .$store .state .recipe .dateCreated )
204+ $this .dateCreated = (date != null ? date .format (' L, LT' ).toString () : null )
205+ }
206+
207+ if ($this .$store .state .recipe .dateModified ) {
208+ let date = $this .parseDateTime ($this .$store .state .recipe .dateModified )
209+ $this .dateModified = (date != null ? date .format (' L, LT' ).toString () : null )
210+ }
211+
158212 // Always set the active page last!
159213 $this .$store .dispatch (' setPage' , { page: ' recipe' })
160214
@@ -205,6 +259,7 @@ export default {
205259
206260<style scoped>
207261
262+
208263.wrapper {
209264 width : 100% ;
210265}
@@ -243,6 +298,22 @@ aside {
243298 width : 100% ;
244299 } }
245300
301+ .dates {
302+ font-size : .9em ;
303+ }
304+ .date {
305+ margin-right : 1.5em ;
306+ }
307+ .date-icon {
308+ display : inline-block ;
309+ background-size : 1em ;
310+ margin-right : .2em ;
311+ vertical-align : middle ;
312+ margin-bottom : .2em ;
313+ }
314+ .date-text {
315+ vertical-align : middle ;
316+ }
246317 .description {
247318 font-style : italic ;
248319 white-space : pre-line ;
0 commit comments