fixes #17: Markdown syntax support for notes

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
 

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",

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>

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>