From 2f2997812bedecaf6a7398e33447fb6de164dd2f Mon Sep 17 00:00:00 2001
From: Davide Alberani <da@erlug.linux.it>
Date: Sat, 28 Jan 2017 09:25:07 +0100
Subject: [PATCH] fixes #17: Markdown syntax support for notes

---
 README.md     | 7 +++++--
 package.json  | 1 +
 src/App.vue   | 7 +++----
 src/Group.vue | 6 ++++--
 4 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 8b792a0..09b261c 100644
--- a/README.md
+++ b/README.md
@@ -5,12 +5,14 @@
 Basic workflow:
 - if you want (not mandatory), login with your user; to create a new user, simply choose a username and a password. Benefit of logging in: only you or admins can edit/delete your entries.
 - pick a date
-- choose the name of a new group
-- write your name
+- choose the group you want to join or the name of a new group
+- write your name and, optionally, a note
 - rinse and repeat
 
 It's recommended to login with username **admin** and password **ibt2**, go to your personal page and change the password, if you've just installed ibt2. The *admin* user can grant super cow powers to any other user.
 
+For the notes, you can use the [Markdown](https://daringfireball.net/projects/markdown/) syntax.
+
 # Demo
 
 See [https://ibt2.ismito.it:3002/](https://ibt2.ismito.it:3002/)
@@ -78,6 +80,7 @@ Technological stack
 - [VueJS](https://vuejs.org/) for the webApp
 - [Vue Material](https://vuematerial.github.io/) for the UI components
 - [Vue Datepicker](https://github.com/charliekassel/vuejs-datepicker) for the datepicker
+- [Vue Markdown](https://www.npmjs.com/package/vue-markdown) for parsing the Markdown syntax
 - [Tornado web](http://www.tornadoweb.org/) as web server
 - [MongoDB](https://www.mongodb.org/) to store the data
 
diff --git a/package.json b/package.json
index c3ae6d7..926029b 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "roboto-fontface": "^0.6.0",
     "vue": "^2.1.8",
     "vue-loader": "^10.0.2",
+    "vue-markdown": "^2.1.3",
     "vue-material": "^0.6.3",
     "vue-resource": "^1.0.3",
     "vue-router": "^2.1.1",
diff --git a/src/App.vue b/src/App.vue
index 37633e9..3d00af8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -23,7 +23,7 @@
                         </md-layout>
                     </md-card-header>
                     <md-card-content>
-                        <div id="day-notes">{{ day.notes }}</div>
+                        <div id="day-notes"><vue-markdown :source="day.notes"></vue-markdown></div>
                     </md-card-content>
                 </md-card>
             </md-layout>
@@ -51,6 +51,7 @@
 import Datepicker from 'vuejs-datepicker';
 import Group from './Group';
 import IbtDialog from './IbtDialog.vue';
+import VueMarkdown from 'vue-markdown';
 
 export default {
     data() {
@@ -183,9 +184,7 @@ export default {
         }
     },
 
-    components: {
-        Datepicker, Group, IbtDialog
-    }
+    components: { Datepicker, Group, IbtDialog, VueMarkdown }
 }
 
 </script>
diff --git a/src/Group.vue b/src/Group.vue
index d2c85e8..f52ffd4 100644
--- a/src/Group.vue
+++ b/src/Group.vue
@@ -21,7 +21,7 @@
                 </md-layout>
                 <md-layout v-if="group.notes" md-row>
                     <md-tooltip md-direction="top">click to expande/collapse notes</md-tooltip>
-                    <div ref="groupNotes" class="group-notes" @click="toggleNotes()">{{ group.notes }}</div>
+                    <div ref="groupNotes" class="group-notes" @click="toggleNotes()"><vue-markdown :source="group.notes" :break="false"></vue-markdown></div>
                 </md-layout>
             </md-card-header>
             <md-card-content class="group-card">
@@ -96,6 +96,7 @@
 
 import Attendee from './Attendee';
 import IbtDialog from './IbtDialog.vue';
+import VueMarkdown from 'vue-markdown';
 
 export default {
     props: {group: {}, day: {}, addNewGroup: {default: false}},
@@ -179,6 +180,7 @@ export default {
             }, (response) => {
                 this.$refs.dialogObj.show({text: 'unable to edit group notes'});
             }).then((json) => {
+                this.group.notes = json.notes;
                 this.reset();
                 this.$emit('updated');
             });
@@ -197,7 +199,7 @@ export default {
         }
     },
 
-    components: { Attendee, IbtDialog }
+    components: { Attendee, IbtDialog, VueMarkdown }
 };
 
 </script>