diff --git a/app/inventory/forms.py b/app/inventory/forms.py index e2844037f8fd5e512adea2deb0a0f448e3c562d0..286a5199efe8e6c8e530a0afdecc29be4f30484b 100644 --- a/app/inventory/forms.py +++ b/app/inventory/forms.py @@ -53,4 +53,5 @@ class ItemForm(FlaskForm): class CommentForm(FlaskForm): - text = TextAreaField('Comment', validators=[validators.DataRequired()]) + text = TextAreaField('Enter your comment:', + validators=[validators.DataRequired()]) diff --git a/app/static/js/items.js b/app/static/js/items.js index 396f411cb53b4000db220f4700823d09ddd0a91a..7a5c373902237433aefe98ca4f3f239291a3ea8a 100644 --- a/app/static/js/items.js +++ b/app/static/js/items.js @@ -1,5 +1,21 @@ $(document).ready(function() { + var converter = new showdown.Converter({ + simplifiedAutoLink: true + }); + + // Live rendering of markdown comment to HTML + $("#text").keyup(function(event) { + var comment = $(this).val(); + $("#commentLivePreview").html(converter.makeHtml(comment)); + }); + + // render existing comments to HTML + $(".item-comment").each(function() { + var raw = $(this).html(); + $(this).html(converter.makeHtml(raw)); + }); + $("#clear").click(function() { // clear all select fields $("select").val(''); diff --git a/app/templates/inventory/comment_item.html b/app/templates/inventory/comment_item.html index 5fc82220d25a2a444677bbef92c94cd74009c7ee..56636d669c809f308306e7a0eed39bb351686f63 100644 --- a/app/templates/inventory/comment_item.html +++ b/app/templates/inventory/comment_item.html @@ -59,17 +59,26 @@ <div class="card-header"> {{ comment.user }} commented on {{ format_datetime(comment.timestamp) }} </div> - <div class="card-body"> - <p class="card-text">{{ comment.text }}</p> - </div> + <div class="card-body item-comment">{{ comment.text }}</div> </div> {% endfor %} <form id="CommentForm" method="POST"> {{ form.hidden_tag() }} <div class="form-group"> {{ form.text.label() }} - {{ form.text(class_="form-control", required=True) }} + {{ form.text(class_="form-control", rows=5, required=True) }} + <small class="form-text text-muted">Styling with Markdown is supported using + <a href="https://github.com/showdownjs/showdown/wiki/Showdown's-Markdown-syntax" target="_blank">Showdown</a>. + A preview is visible below. + </small> + </div> + <div class="card"> + <div class="card-header"> + Comment preview + </div> + <div class="card-body" id="commentLivePreview"></div> </div> + <br> <button type="submit" class="btn btn-primary">Submit</button> <a class="btn btn-danger" href="{{ url_for('inventory.view_item', ics_id=item.ics_id) }}">Cancel</a> </form> @@ -99,3 +108,7 @@ </table> {%- endblock %} + +{% block csentry_scripts %} + <script src="{{ url_for('static', filename='js/items.js') }}"></script> +{% endblock %} diff --git a/app/templates/inventory/view_item.html b/app/templates/inventory/view_item.html index 8dbf310998b9d36caa8c50a73ca1450d8686ee09..865d8d6a7d6aa570eb5207abd17d32f9d5090b47 100644 --- a/app/templates/inventory/view_item.html +++ b/app/templates/inventory/view_item.html @@ -59,9 +59,7 @@ <div class="card-header"> {{ comment.user }} commented on {{ format_datetime(comment.timestamp) }} </div> - <div class="card-body"> - <p class="card-text">{{ comment.text }}</p> - </div> + <div class="card-body item-comment">{{ comment.text }}</div> </div> {% endfor %} <a class="btn btn-primary" href="{{ url_for('inventory.comment_item', ics_id=item.ics_id) }}">Comment</a> @@ -91,3 +89,7 @@ </table> {%- endblock %} + +{% block csentry_scripts %} + <script src="{{ url_for('static', filename='js/items.js') }}"></script> +{% endblock %}