rophako/rophako/modules/blog/templates/blog/update.html

{% extends "layout.html" %}
{% block title %}Update Blog{% endblock %}
{% block content %}

{% if preview %}
	<h1>Preview: {{ subject }}</h1>

	{{ rendered_body|safe }}

	<hr>
{% endif %}

<h1>Update Blog</h1>

<form name="editor" action="{{ url_for('blog.update') }}" method="POST">
	<input type="hidden" name="id" value="{{ post_id }}">
	<input type="hidden" name="author" value="{{ author }}">
	<input type="hidden" name="token" value="{{ csrf_token() }}">

	<strong>Subject:</strong><br>
	<input type="text" class="form-control" size="80" name="subject" value="{{ subject }}"><p>

	<strong>Friendly ID:</strong><br>
	You can leave this blank if this is a new post. It defaults to be based
	on the subject.<br>
	<input type="text" class="form-control" size="80" name="fid" value="{{ fid }}"><p>

	<strong>Body:</strong><br>
	<label>
		<input type="radio" name="format" value="markdown"{% if format == "markdown" %} checked{% endif %}> Markdown
	</label>
	<label>
		<input type="radio" name="format" value="html"{% if format == "html" %} checked{% endif %}> HTML
	</label><br>
	<textarea class="form-control input-lg" cols="80" rows="12" name="body">{{ body }}</textarea><br>
	<a href="/markdown" target="_blank">Markdown cheatsheet</a> /
	<a href="{{ url_for('emoticons.index') }}" target="_blank">Emoticon reference</a> (opens in new window)<br>
	Optional: separate your summary from the rest of the post by typing <code>&lt;snip&gt;</code>
	where you want the division to appear.<p>

	<strong>Avatar:</strong><br>
	<span id="avatar-preview"></span>
	<select name="avatar" id="avatar" class="form-control">
		<option value=""{% if avatar == "" %} selected{% endif %}>Use my profile picture</option>
		{% for pic in avatars %}
		<option value="{{ pic }}"{% if avatar == pic %} selected{% endif %}>{{ pic }}</option>
		{% endfor %}
	</select><p>

	<strong>Categories:</strong><br>
	<small>Comma-separated list, e.g. General, HTML, Perl, Web Design</small><br>
	<input type="text" class="form-control" size="40" name="categories" value="{{ categories }}"><p>

	<strong>Privacy:</strong><br>
	<select name="privacy" class="form-control">
		<option value="public"{% if privacy == "public" %} selected{% endif %}>
			Public: everybody can see this blog entry
		</option>
		<option value="draft"{% if privacy == "draft" %} selected{% endif %}>
			Draft: don't show this on the blog anywhere
		</option>
		<option value="private"{% if privacy == "private" %} selected{% endif %}>
			Private: only site admins can see this blog entry
		</option>
	</select><p>

	<strong>Options:</strong><br>
	<label>
		<input type="checkbox" name="sticky" value="true"{% if sticky %} checked{% endif %}>
		Make this post sticky (always on top)
	</label><br>
	<label>
		<input type="checkbox" name="emoticons" value="true"{% if emoticons %} checked{% endif %}>
		Enable graphical emoticons
	</label><br>
	<label>
		<input type="checkbox" name="comments" value="true"{% if comments %} checked{% endif %}>
		Enable comments on this entry
	</label><p>

	<input type="hidden" name="time" value="{{ time }}">
	{% if post_id != "" %}
	<strong>Reset Time Stamp:</strong><br>
	<label>
		<input type="checkbox" name="reset-time" value="yes"{% if post_id == "" %} checked{% endif %}>
		Reset the post's time stamp to the current time.
	</label><p>
	{% endif %}

	<button type="submit" class="btn btn-default" name="action" value="preview">Preview</button>
	<button type="submit" class="btn btn-primary" name="action" value="publish">Publish Entry</button>
</form>

{% endblock %}

{% block scripts %}
<script>
	var userPic = "{% if userpic %}{{ app['photo_url'] }}/{{ userpic }}{% else %}/static/avatars/default.png{% endif %}";

	$(document).ready(function() {
		// Preview their selected avatar.
		updateAvatar();
		$("#avatar").on("change", updateAvatar);

		// Start ticking the timestamp updater.
		setInterval(timestamps, 500)
	});

	function updateAvatar() {
		var chosen = $("#avatar").val();

		var picture = ""; // which pic to show
		if (chosen === "") {
			picture = userPic;
		}
		else {
			picture = "/static/avatars/" + chosen;
		}

		// Show the pic
		if (picture.length) {
			$("#avatar-preview").html("<img src=\"" + picture + "\" alt=\"Preview\"><br>");
		}
		else {
			$("#avatar-preview").html("");
		}
	}

	function timestamps() {
		function padout(num) {
			if (num < 10) {
				return '0' + num;
			}
			return num;
		}

		if ($("#autoup").is(":checked")) {
			var d = new Date();
			var mon	 = d.getMonth();	// 0..11
			var day	 = d.getDate();		// 1..31
			var year = d.getFullYear(); // 2014
			var hour = d.getHours();	// 0..23
			var min	 = d.getMinutes();	// 0..59
			var sec	 = d.getSeconds();	// 0..59

			// Adjust the dates.
			mon++;
			mon = padout(mon);
			day = padout(day);
			hour = padout(hour);
			min = padout(min);
			sec = padout(sec);

			// Update the fields.
			$("#month").val(mon);
			$("#day").val(day);
			$("#year").val(year);
			$("#hour").val(hour);
			$("#min").val(min);
			$("#sec").val(sec);
		}
	}
</script>
{% endblock %}