web render

This commit is contained in:
Daniel Tsvetkov 2020-02-12 15:39:09 +01:00
parent d150f610ec
commit 9a0f756beb
8 changed files with 170 additions and 29 deletions

View File

@ -60,7 +60,7 @@ def get_default_locale():
return country_code, lang_code, encoding, default_locale return country_code, lang_code, encoding, default_locale
def resolve_locale(locale_s): def resolve_locale(locale_s=None):
country_code, lang_code, encoding, default_locale = get_default_locale() country_code, lang_code, encoding, default_locale = get_default_locale()
rv = dict( rv = dict(
query=locale_s, query=locale_s,

18
src/tww/templates/dt.html Normal file
View File

@ -0,0 +1,18 @@
<input type="text" class="datetime" name="datetime" disabled
value="{{ dt.iso8601_full }}" style="width: 320px;"/>
</br></br>
<input type="text" class="datetime__date_txt" name="datetime__date_txt" disabled
value="{{ dt.iso8601_date }}"/>
<input type="text" class="datetime__time_txt" name="datetime__time_txt" disabled
value="{{ dt.iso8601_time }}"/>
<input type="text" class="datetime__tz_offset" name="datetime__tz_offset" disabled
value="{{ dt.tz_offset }}" size="8"/>
<select class="datetime__tz_name" name="datetime__tz">
<option disabled selected value> -- select timezone --</option>
{% for tz in all_tz %}
<option value="{{ tz }}">{{ tz }}</option>
{% endfor %}
</select>
<script>
drawClock("{{dt.iso8601_time}}");
</script>

View File

@ -0,0 +1,18 @@
<input type="text" class="datetime" name="datetime" disabled
value="{{ dst_dt.iso8601_full }}" style="width: 320px;"/>
</br></br>
<input type="text" class="datetime__date_txt" name="datetime__date_txt" disabled
value="{{ dst_dt.iso8601_date }}"/>
<input type="text" class="datetime__time_txt" name="datetime__time_txt" disabled
value="{{ dst_dt.iso8601_time }}"/>
<input type="text" class="datetime__tz_offset" name="datetime__tz_offset" disabled
value="{{ dst_dt.tz_offset }}" size="8"/>
<select class="datetime__tz_name" name="datetime__tz">
<option disabled selected value> -- select timezone --</option>
{% for tz in all_tz %}
<option value="{{ tz }}">{{ tz }}</option>
{% endfor %}
</select>
<script>
drawClock("{{dst_dt.iso8601_time}}");
</script>

View File

@ -29,35 +29,115 @@
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='select2.css') }}"> <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='select2.css') }}">
</head> </head>
<body> <body>
<h1 style="text-align: center;">Time When and Where</h1>
<main> <main>
<form> <form>
<input type="text" class="main-input datetime__txt" name="datetime__txt" <input type="text" class="main-input datetime__txt" name="datetime__txt" autofocus
value="" autocomplete="off"/> value="" autocomplete="off"/>
</br> </br>
<span class="datetime__error"></span> <span class="datetime__error"></span>
</br> </br>
<input type="text" class="datetime" name="datetime" value="" style="width: 320px;"/> <div id="solutions"></div>
</br></br>
<input type="text" class="datetime__date_txt" name="datetime__date_txt"
value=""/>
<input type="text" class="datetime__time_txt" name="datetime__time_txt"
value=""/>
<input type="text" class="datetime__tz_offset" name="datetime__tz_offset"
value="" size="8"/>
<select class="datetime__tz_name" name="datetime__tz">
<option disabled selected value> -- select timezone --</option>
{% for tz in all_tz %}
<option value="{{ tz }}">{{ tz }}</option>
{% endfor %}
</select>
</form> </form>
{% for to_tz in to_tzs %} <canvas id="canvas" width="200" height="200" style="background-color:#eee"></canvas>
{% endfor %}
</main> </main>
<script src="{{ url_for('static', filename='jquery.js') }}"></script> <script src="{{ url_for('static', filename='jquery.js') }}"></script>
<script src="{{ url_for('static', filename='jquery.debounce.js') }}"></script> <script src="{{ url_for('static', filename='jquery.debounce.js') }}"></script>
<script src="{{ url_for('static', filename='select2.js') }}"></script> <script src="{{ url_for('static', filename='select2.js') }}"></script>
<script src="{{ url_for('static', filename='main.js') }}"></script> <script src="{{ url_for('static', filename='main.js') }}"></script>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90;
function drawClock(time) {
var time = time.split(':');
drawFace(ctx, radius, time);
drawNumbers(ctx, radius);
drawTime(ctx, radius, time);
}
function drawFace(ctx, radius, time) {
var hour = parseInt(time[0]);
if (hour < 6 || hour > 18) {
var fg = "#333";
var bg = "white";
} else {
var fg = "white";
var bg = "#333";
}
var grad;
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
ctx.fillStyle = fg;
ctx.fill();
grad = ctx.createRadialGradient(0, 0, radius * 0.95, 0, 0, radius * 1.05);
grad.addColorStop(0, bg);
grad.addColorStop(0.5, fg);
grad.addColorStop(1, bg);
ctx.strokeStyle = grad;
ctx.lineWidth = radius * 0.1;
ctx.stroke();
ctx.beginPath();
ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);
ctx.fillStyle = bg;
ctx.fill();
}
function drawNumbers(ctx, radius) {
var ang;
var num;
ctx.font = radius * 0.15 + "px arial";
ctx.textBaseline = "middle";
ctx.textAlign = "center";
for (num = 1; num < 13; num++) {
ang = num * Math.PI / 6;
ctx.rotate(ang);
ctx.translate(0, -radius * 0.85);
ctx.rotate(-ang);
ctx.fillText(num.toString(), 0, 0);
ctx.rotate(ang);
ctx.translate(0, radius * 0.85);
ctx.rotate(-ang);
}
}
function drawTime(ctx, radius, time) {
var hour = parseInt(time[0]);
var minute = parseInt(time[1]);
var second = parseInt(time[2]);
//hour
hour = hour % 12;
hour = (hour * Math.PI / 6) +
(minute * Math.PI / (6 * 60)) +
(second * Math.PI / (360 * 60));
drawHand(ctx, hour, radius * 0.5, radius * 0.07);
//minute
minute = (minute * Math.PI / 30) + (second * Math.PI / (30 * 60));
drawHand(ctx, minute, radius * 0.8, radius * 0.07);
// second
second = (second * Math.PI / 30);
drawHand(ctx, second, radius * 0.9, radius * 0.02);
}
function drawHand(ctx, pos, length, width) {
ctx.beginPath();
ctx.lineWidth = width;
ctx.lineCap = "round";
ctx.moveTo(0, 0);
ctx.rotate(pos);
ctx.lineTo(0, -length);
ctx.stroke();
ctx.rotate(-pos);
}
</script>
<script> <script>
$(document).ready(function () { $(document).ready(function () {
@ -66,21 +146,20 @@
$('.datetime__txt').keyup($.debounce(function (e) { $('.datetime__txt').keyup($.debounce(function (e) {
$el = $(this); $el = $(this);
$.ajax({ $.ajax({
"url": "{{ url_for("api_datetime") }}", "url": '{{ url_for("api_datetime") }}',
"data": {"q": this.value} "data": {"q": this.value}
}).done(function (r) { }).done(function (r) {
if (r.error !== "") if (r.error !== "")
$el.next(".datetime__error").addClass("flash").addClass("error").html(r.error); $el.next(".datetime__error").addClass("flash").addClass("error").html(r.error);
else else
$el.next(".datetime__error").removeClass("flash").removeClass("error").html(""); $el.next(".datetime__error").removeClass("flash").removeClass("error").html("");
$el.siblings(".datetime").val(r.to_dt_resolve.iso); $('#solutions').html(r.rendered_solutions);
$el.siblings(".datetime__date_txt").val(r.to_dt_resolve.date); // TODO:
$el.siblings(".datetime__time_txt").val(r.to_dt_resolve.time); // $el.siblings(".datetime__tz_name").val(r.to_tz_resolve.tz_name).trigger('change');
$el.siblings(".datetime__tz_offset").val(r.to_dt_resolve.tz_offset); // var time = r.to_dt_resolve.time.split(':');
$el.siblings(".datetime__tz_name").val(r.to_tz_resolve.tz_name).trigger('change'); // drawClock(time);
}); });
}, 500)); }, 500));
}); });
</script> </script>

View File

@ -0,0 +1 @@
<p><strong>Timedelta:</strong> {{ timedelta.diff.duration_iso8601 }}

View File

@ -0,0 +1 @@
<p><strong>Timezone:</strong> {{ tz.tz_offset }}

View File

@ -2,7 +2,6 @@ import argparse
import json import json
import locale import locale
import re import re
import sys
from datetime import datetime from datetime import datetime
from pygments import highlight, lexers, formatters from pygments import highlight, lexers, formatters
@ -13,7 +12,7 @@ from tww import ISO_FORMAT, time_to_emoji, time_ago, workday_diff, workhours_dif
from tww import resolve_timezone, dateparser_parse_dt, get_utcnow, get_s_since_epoch, get_ms_since_epoch, \ from tww import resolve_timezone, dateparser_parse_dt, get_utcnow, get_s_since_epoch, get_ms_since_epoch, \
dt_tz_translation, get_local_now, query_to_format_result dt_tz_translation, get_local_now, query_to_format_result
custom_locale = None custom_locale = resolve_locale()
r_generic = re.compile('(.*)', flags=re.IGNORECASE) r_generic = re.compile('(.*)', flags=re.IGNORECASE)
r_time_in_epoch_s_now = re.compile('(?:time since epoch|seconds since epoch)', flags=re.IGNORECASE) r_time_in_epoch_s_now = re.compile('(?:time since epoch|seconds since epoch)', flags=re.IGNORECASE)

View File

@ -1,6 +1,8 @@
import pytz import pytz
from flask import Flask, render_template, jsonify, request from flask import Flask, render_template, jsonify, request
from tokenizer import resolve_query, QUERY_TYPE_DT, QUERY_TYPE_DT_TR, QUERY_TYPE_TZ, QUERY_TYPE_TD
app = Flask(__name__) app = Flask(__name__)
import dateparser import dateparser
@ -89,14 +91,37 @@ def home():
ctx = dict(all_tz=pytz.all_timezones) ctx = dict(all_tz=pytz.all_timezones)
q = request.args.get('q') q = request.args.get('q')
if q: if q:
ctx["q_resp"] = jsonify(parse_query(q)) ctx["q_resp"] = jsonify(resolve_query(q))
return render_template("home.html", all_tz=pytz.all_timezones) return render_template("home.html", all_tz=pytz.all_timezones)
def render_solution(solution):
query_type = solution["query_type"]
if query_type == QUERY_TYPE_DT:
return render_template("dt.html", **solution)
elif query_type == QUERY_TYPE_DT_TR:
return render_template("dt_tr.html", **solution)
elif query_type == QUERY_TYPE_TZ:
return render_template("tz.html", **solution)
elif query_type == QUERY_TYPE_TD:
return render_template("td.html", **solution)
def render_solutions(results):
rv = []
for solution in results['solutions']:
rv.append(render_solution(solution))
return rv
@app.route("/api/datetime") @app.route("/api/datetime")
def api_datetime(): def api_datetime():
q = request.args.get('q') q = request.args.get('q')
return jsonify(parse_query(q)) results = resolve_query(q)
rendered_solutions = render_solutions(results)
results['rendered_solutions'] = rendered_solutions
return jsonify(results)
if __name__ == "__main__": if __name__ == "__main__":