refactor(templates): Move post editing template to Askama

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

View file

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

View file

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

View file

@ -1,4 +1,4 @@
<!-- {#
{#
This template is shared by the new thread, reply and post-editing pages.
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
into the template, which will be rendered as Boostrap alert boxes above the
user input form.
#} -->
#}
<!doctype html>
<html lang="en">
@ -17,7 +17,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<title>Converse: Post</title>
<!-- TODO -->
<meta http-equiv="Content-Security-Policy" content="script-src https://code.getmdl.io 'self';">
<!-- <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">
<div class="mdl-layout__header-row">
<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
{% elif mode == "PostReply" %}
{% when EditingMode::PostReply %}
Converse: Reply to thread
{% elif mode == "EditPost" %}
{% when EditingMode::EditPost %}
Converse: Edit post
{% endif %}
{% endmatch %}
</a>
<div class="mdl-layout-spacer"></div>
<a href="/">
@ -49,34 +49,42 @@
</header>
<main class="mdl-layout__content mdl-grid">
<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">
{% elif mode == "PostReply" %}
{% when EditingMode::PostReply %}
<form action="/thread/reply" method="post">
{% elif mode == "EditPost" %}
{% when EditingMode::EditPost %}
<form action="/post/edit" method="post">
{% endif %}
{% if mode == "PostReply" %}
<input type="hidden" id="thread_id" name="thread_id" value="{{ id }}">
{% elif mode == "EditPost" %}
<input type="hidden" id="thread_id" name="post_id" value="{{ id }}">
{% endif %}
{% endmatch %}
{% match mode %}
{% when EditingMode::PostReply %}
<input type="hidden" id="thread_id" name="thread_id" value="{{ id.unwrap() }}">
{% when EditingMode::EditPost %}
<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">
{%- for alert in alerts %}
{% for alert in alerts %}
<span class="mdl-chip mdl-color--red-200">
<span class="mdl-chip__text">{{ alert }}&nbsp;</span>
</span>
{% endfor -%}
{% if mode == "NewThread" %}
{% endfor %}
{% if mode == EditingMode::NewThread %}
<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>
</div>
{% endif %}
<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>
{%- if post %}{{ post }}{% endif -%}
{%- match post -%}
{%- when Some with (post_text) -%}
{{- post_text -}}
{%- else -%}
{# Nothing! #}
{%- endmatch -%}
</textarea>
<label class="mdl-textfield__label" for="body">Content ...</label>
</div>