mdebray/tvl-depot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(templates): Move post editing template to Askama

Browse source
This commit is contained in:
Vincent Ambo 2018-05-22 19:31:07 +02:00 committed by Vincent Ambo
parent 69583b1236
commit 2bbcced032
3 changed files with 50 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/main.rs
View file

@ -140,7 +140,6 @@ fn start_renderer() -> Addr<Syn, Renderer> {
// location-dependent. // location-dependent.
// Drawback is that template changes require recompilation ... // Drawback is that template changes require recompilation ...
tera.add_raw_templates(vec![ tera.add_raw_templates(vec![
("post.html", include_str!("../templates/post.html")),
("search.html", include_str!("../templates/search.html")), ("search.html", include_str!("../templates/search.html")),
]).expect("Could not compile templates"); ]).expect("Could not compile templates");

27
src/render.rs
View file

@ -26,7 +26,7 @@ use errors::*;
use std::fmt; use std::fmt;
use md5; use md5;
use models::*; use models::*;
use tera::{escape_html, Tera}; use tera::Tera;
use chrono::prelude::{DateTime, Utc}; use chrono::prelude::{DateTime, Utc};
use comrak::{ComrakOptions, markdown_to_html}; use comrak::{ComrakOptions, markdown_to_html};
@ -40,7 +40,7 @@ impl Actor for Renderer {
} }
/// Represents a data formatted for human consumption /// Represents a data formatted for human consumption
#[derive(Debug, Serialize)] #[derive(Debug)]
struct FormattedDate(DateTime<Utc>); struct FormattedDate(DateTime<Utc>);
impl fmt::Display for FormattedDate { impl fmt::Display for FormattedDate {
@ -55,7 +55,7 @@ pub struct IndexPage {
} }
message!(IndexPage, Result<String>); message!(IndexPage, Result<String>);
#[derive(Debug, Serialize)] #[derive(Debug)]
struct IndexThread { struct IndexThread {
id: i32, id: i32,
title: String, title: String,
@ -104,7 +104,7 @@ pub struct ThreadPage {
message!(ThreadPage, Result<String>); message!(ThreadPage, Result<String>);
// "Renderable" structures with data transformations applied. // "Renderable" structures with data transformations applied.
#[derive(Debug, Serialize)] #[derive(Debug)]
struct RenderablePost { struct RenderablePost {
id: i32, id: i32,
body: String, body: String,
@ -163,7 +163,7 @@ impl Handler<ThreadPage> for Renderer {
/// The different types of editing modes supported by the editing /// The different types of editing modes supported by the editing
/// template: /// template:
#[derive(Debug, Serialize)] #[derive(Debug, PartialEq)]
pub enum EditingMode { pub enum EditingMode {
NewThread, NewThread,
PostReply, PostReply,
@ -174,10 +174,11 @@ impl Default for EditingMode {
fn default() -> EditingMode { EditingMode::NewThread } fn default() -> EditingMode { EditingMode::NewThread }
} }
/// This struct represents the context submitted to the template used /// This is the template used for rendering the new thread, edit post
/// for rendering the new thread, edit post and reply to thread forms. /// and reply to thread forms.
#[derive(Default, Serialize)] #[derive(Template, Default)]
pub struct FormContext { #[template(path = "post.html")]
pub struct FormTemplate {
/// Which editing mode is to be used by the template? /// Which editing mode is to be used by the template?
pub mode: EditingMode, pub mode: EditingMode,
@ -212,13 +213,13 @@ impl Handler<NewThreadPage> for Renderer {
type Result = Result<String>; type Result = Result<String>;
fn handle(&mut self, msg: NewThreadPage, _: &mut Self::Context) -> Self::Result { fn handle(&mut self, msg: NewThreadPage, _: &mut Self::Context) -> Self::Result {
let ctx = FormContext { let ctx = FormTemplate {
alerts: msg.alerts, alerts: msg.alerts,
title: msg.title, title: msg.title,
post: msg.post, post: msg.post,
..Default::default() ..Default::default()
}; };
Ok(self.tera.render("post.html", &ctx)?) ctx.render().map_err(|e| e.into())
} }
} }
@ -233,14 +234,14 @@ impl Handler<EditPostPage> for Renderer {
type Result = Result<String>; type Result = Result<String>;
fn handle(&mut self, msg: EditPostPage, _: &mut Self::Context) -> Self::Result { fn handle(&mut self, msg: EditPostPage, _: &mut Self::Context) -> Self::Result {
let ctx = FormContext { let ctx = FormTemplate {
mode: EditingMode::EditPost, mode: EditingMode::EditPost,
id: Some(msg.id), id: Some(msg.id),
post: Some(msg.post), post: Some(msg.post),
..Default::default() ..Default::default()
}; };
Ok(self.tera.render("post.html", &ctx)?) ctx.render().map_err(|e| e.into())
} }
} }

52
templates/post.html
View file

@ -1,4 +1,4 @@
<!-- {# {#
This template is shared by the new thread, reply and post-editing pages. This template is shared by the new thread, reply and post-editing pages.
The main display differences between the different editing styles are the The main display differences between the different editing styles are the
@ -8,7 +8,7 @@
Every one of these pages can have a variable length list of alerts submitted Every one of these pages can have a variable length list of alerts submitted
into the template, which will be rendered as Boostrap alert boxes above the into the template, which will be rendered as Boostrap alert boxes above the
user input form. user input form.
#} --> #}
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
@ -17,7 +17,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<title>Converse: Post</title> <title>Converse: Post</title>
<!-- TODO -->
<meta http-equiv="Content-Security-Policy" content="script-src https://code.getmdl.io 'self';"> <meta http-equiv="Content-Security-Policy" content="script-src https://code.getmdl.io 'self';">
<!-- <link rel="shortcut icon" href="images/favicon.png"> --> <!-- <link rel="shortcut icon" href="images/favicon.png"> -->
@ -31,13 +30,14 @@
<header class="mdl-layout__header mdl-layout__header--scroll mdl-color--primary-dark"> <header class="mdl-layout__header mdl-layout__header--scroll mdl-color--primary-dark">
<div class="mdl-layout__header-row"> <div class="mdl-layout__header-row">
<a href="/" class="mdl-layout-title mdl-color-text--blue-grey-50 cvs-title"> <a href="/" class="mdl-layout-title mdl-color-text--blue-grey-50 cvs-title">
{% if mode == "NewThread" %} {% match mode %}
{% when EditingMode::NewThread %}
Converse: Submit new thread Converse: Submit new thread
{% elif mode == "PostReply" %} {% when EditingMode::PostReply %}
Converse: Reply to thread Converse: Reply to thread
{% elif mode == "EditPost" %} {% when EditingMode::EditPost %}
Converse: Edit post Converse: Edit post
{% endif %} {% endmatch %}
</a> </a>
<div class="mdl-layout-spacer"></div> <div class="mdl-layout-spacer"></div>
<a href="/"> <a href="/">
@ -49,34 +49,42 @@
</header> </header>
<main class="mdl-layout__content mdl-grid"> <main class="mdl-layout__content mdl-grid">
<div class="mdl-card mdl-shadow--2dp mdl-cell--8-col"> <div class="mdl-card mdl-shadow--2dp mdl-cell--8-col">
{% if mode == "NewThread" %} {% match mode %}
{% when EditingMode::NewThread %}
<form action="/thread/submit" method="post"> <form action="/thread/submit" method="post">
{% elif mode == "PostReply" %} {% when EditingMode::PostReply %}
<form action="/thread/reply" method="post"> <form action="/thread/reply" method="post">
{% elif mode == "EditPost" %} {% when EditingMode::EditPost %}
<form action="/post/edit" method="post"> <form action="/post/edit" method="post">
{% endif %} {% endmatch %}
{% if mode == "PostReply" %} {% match mode %}
<input type="hidden" id="thread_id" name="thread_id" value="{{ id }}"> {% when EditingMode::PostReply %}
{% elif mode == "EditPost" %} <input type="hidden" id="thread_id" name="thread_id" value="{{ id.unwrap() }}">
<input type="hidden" id="thread_id" name="post_id" value="{{ id }}"> {% when EditingMode::EditPost %}
{% endif %} <input type="hidden" id="thread_id" name="post_id" value="{{ id.unwrap() }}">
{% else %}
{# no post ID when making a new thread #}
{% endmatch %}
<div class="mdl-card__supporting-text"> <div class="mdl-card__supporting-text">
{%- for alert in alerts %} {% for alert in alerts %}
<span class="mdl-chip mdl-color--red-200"> <span class="mdl-chip mdl-color--red-200">
<span class="mdl-chip__text">{{ alert }}&nbsp;</span> <span class="mdl-chip__text">{{ alert }}&nbsp;</span>
</span> </span>
{% endfor -%} {% endfor %}
{% if mode == EditingMode::NewThread %}
{% if mode == "NewThread" %}
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell--12-col"> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell--12-col">
<input class="mdl-textfield__input" type="text" id="title" name="title" aria-label="thread title" required {% if title %}value="{{ title }}"{% endif %}> <input class="mdl-textfield__input" type="text" id="title" name="title" aria-label="thread title" required {% match title %}{% when Some with (title_text) %}value="{{ title_text }}"{% else %}{# Nothing! #}{% endmatch %}>
<label class="mdl-textfield__label" for="title">Thread title</label> <label class="mdl-textfield__label" for="title">Thread title</label>
</div> </div>
{% endif %} {% endif %}
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell--12-col"> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell--12-col">
<textarea class="mdl-textfield__input" type="text" rows="25" id="post" name="post" aria-label="post content" required> <textarea class="mdl-textfield__input" type="text" rows="25" id="post" name="post" aria-label="post content" required>
{%- if post %}{{ post }}{% endif -%} {%- match post -%}
{%- when Some with (post_text) -%}
{{- post_text -}}
{%- else -%}
{# Nothing! #}
{%- endmatch -%}
</textarea> </textarea>
<label class="mdl-textfield__label" for="body">Content ...</label> <label class="mdl-textfield__label" for="body">Content ...</label>
</div> </div>