Add UI for action bar

This commit is contained in:
cuom1999 2022-11-16 18:48:32 -06:00
parent f9e9df6056
commit b75a52fe74
22 changed files with 543 additions and 333 deletions

View file

@ -7,39 +7,78 @@ import django.db.models.deletion
class Migration(migrations.Migration):
dependencies = [
('judge', '0136_alter_profile_timezone'),
("judge", "0136_alter_profile_timezone"),
]
operations = [
migrations.CreateModel(
name='PageVote',
name="PageVote",
fields=[
('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
('page', models.CharField(db_index=True, max_length=30, verbose_name='associated page')),
('score', models.IntegerField(default=0, verbose_name='votes')),
(
"id",
models.AutoField(
auto_created=True,
primary_key=True,
serialize=False,
verbose_name="ID",
),
),
(
"page",
models.CharField(
db_index=True, max_length=30, verbose_name="associated page"
),
),
("score", models.IntegerField(default=0, verbose_name="votes")),
],
options={
'verbose_name': 'pagevote',
'verbose_name_plural': 'pagevotes',
"verbose_name": "pagevote",
"verbose_name_plural": "pagevotes",
},
),
migrations.AlterField(
model_name='problemtranslation',
name='language',
field=models.CharField(choices=[('vi', 'Vietnamese'), ('en', 'English')], max_length=7, verbose_name='language'),
model_name="problemtranslation",
name="language",
field=models.CharField(
choices=[("vi", "Vietnamese"), ("en", "English")],
max_length=7,
verbose_name="language",
),
),
migrations.CreateModel(
name='PageVoteVoter',
name="PageVoteVoter",
fields=[
('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
('score', models.IntegerField()),
('pagevote', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='votes', to='judge.pagevote')),
('voter', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='voted_page', to='judge.profile')),
(
"id",
models.AutoField(
auto_created=True,
primary_key=True,
serialize=False,
verbose_name="ID",
),
),
("score", models.IntegerField()),
(
"pagevote",
models.ForeignKey(
on_delete=django.db.models.deletion.CASCADE,
related_name="votes",
to="judge.pagevote",
),
),
(
"voter",
models.ForeignKey(
on_delete=django.db.models.deletion.CASCADE,
related_name="voted_page",
to="judge.profile",
),
),
],
options={
'verbose_name': 'pagevote vote',
'verbose_name_plural': 'pagevote votes',
'unique_together': {('voter', 'pagevote')},
"verbose_name": "pagevote vote",
"verbose_name_plural": "pagevote votes",
"unique_together": {("voter", "pagevote")},
},
),
]

View file

@ -29,6 +29,7 @@ class PageVote(models.Model):
def __str__(self):
return f"pagevote for {self.page}"
class PageVoteVoter(models.Model):
voter = models.ForeignKey(Profile, related_name="voted_page", on_delete=CASCADE)
pagevote = models.ForeignKey(PageVote, related_name="votes", on_delete=CASCADE)

View file

@ -7,7 +7,7 @@ from django.utils.translation import ugettext as _
from django.views.generic import ListView
from judge.comments import CommentedDetailView
from judge.views.pagevote import PageVoteDetailView
from judge.views.pagevote import PageVoteDetailView, PageVoteListView
from judge.models import (
BlogPost,
Comment,
@ -93,7 +93,7 @@ class FeedView(ListView):
return context
class PostList(FeedView):
class PostList(FeedView, PageVoteListView):
model = BlogPost
paginate_by = 10
context_object_name = "posts"
@ -130,6 +130,9 @@ class PostList(FeedView):
return context
def get_comment_page(self, post):
return "b:%s" % post.id
class TicketFeed(FeedView):
model = Ticket

View file

@ -82,6 +82,8 @@ from judge.utils.views import (
generic_message,
)
from judge.widgets import HeavyPreviewPageDownWidget
from judge.views.pagevote import PageVoteDetailView
__all__ = [
"ContestList",
@ -380,7 +382,7 @@ class ContestMixin(object):
)
class ContestDetail(ContestMixin, TitleMixin, CommentedDetailView):
class ContestDetail(ContestMixin, TitleMixin, CommentedDetailView, PageVoteDetailView):
template_name = "contest/contest.html"
def get_comment_page(self):

View file

@ -13,7 +13,7 @@ from django.views.generic.base import TemplateResponseMixin
from django.views.generic.detail import SingleObjectMixin
from judge.dblock import LockModel
from django.views.generic import View
from django.views.generic import View, ListView
__all__ = [
@ -21,6 +21,7 @@ __all__ = [
"downvote_page",
]
@login_required
def vote_page(request, delta):
if abs(delta) != 1:
@ -75,7 +76,9 @@ def vote_page(request, delta):
_("You already voted."), content_type="text/plain"
)
vote.delete()
PageVote.objects.filter(id=pagevote_id).update(score=F("score") - vote.score)
PageVote.objects.filter(id=pagevote_id).update(
score=F("score") - vote.score
)
else:
PageVote.objects.filter(id=pagevote_id).update(score=F("score") + delta)
break
@ -89,6 +92,7 @@ def upvote_page(request):
def downvote_page(request):
return vote_page(request, -1)
class PageVoteDetailView(TemplateResponseMixin, SingleObjectMixin, View):
pagevote_page = None
@ -108,13 +112,21 @@ class PageVoteDetailView(TemplateResponseMixin, SingleObjectMixin, View):
def get_context_data(self, **kwargs):
context = super(PageVoteDetailView, self).get_context_data(**kwargs)
queryset = PageVote.objects.filter(page=self.get_comment_page())
if (queryset.exists() == False):
pagevote = PageVote(
page=self.get_comment_page(), score=0
)
if queryset.exists() == False:
pagevote = PageVote(page=self.get_comment_page(), score=0)
pagevote.save()
context["pagevote"] = queryset.first()
return context
class PageVoteListView(ListView):
pagevote_page = None
def get_context_data(self, **kwargs):
context = super(PageVoteListView, self).get_context_data(**kwargs)
for item in context["object_list"]:
pagevote, _ = PageVote.objects.get_or_create(
page=self.get_comment_page(item)
)
setattr(item, "pagevote", pagevote)
return context

View file

@ -86,6 +86,7 @@ from judge.utils.views import (
generic_message,
)
from judge.ml.collab_filter import CollabFilter
from judge.views.pagevote import PageVoteDetailView, PageVoteListView
def get_contest_problem(problem, profile):
@ -172,7 +173,11 @@ class SolvedProblemMixin(object):
class ProblemSolution(
SolvedProblemMixin, ProblemMixin, TitleMixin, CommentedDetailView
SolvedProblemMixin,
ProblemMixin,
TitleMixin,
CommentedDetailView,
PageVoteDetailView,
):
context_object_name = "problem"
template_name = "problem/editorial.html"
@ -237,7 +242,9 @@ class ProblemRaw(
)
class ProblemDetail(ProblemMixin, SolvedProblemMixin, CommentedDetailView):
class ProblemDetail(
ProblemMixin, SolvedProblemMixin, CommentedDetailView, PageVoteDetailView
):
context_object_name = "problem"
template_name = "problem/problem.html"
@ -806,7 +813,7 @@ class ProblemList(QueryStringSortMixin, TitleMixin, SolvedProblemMixin, ListView
return HttpResponseRedirect(request.get_full_path())
class ProblemFeed(ProblemList):
class ProblemFeed(ProblemList, PageVoteListView):
model = Problem
context_object_name = "problems"
template_name = "problem/feed.html"
@ -832,6 +839,9 @@ class ProblemFeed(ProblemList):
**kwargs
)
def get_comment_page(self, problem):
return "p:%s" % problem.code
# arr = [[], [], ..]
def merge_recommendation(self, arr):
seed = datetime.now().strftime("%d%m%Y")

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,48 @@
{% set logged_in = request.user.is_authenticated %}
{% set profile = request.profile if logged_in else None %}
{% if logged_in %}
{% if include_hr %}<hr>{% endif %}
<div class="page-vote">
<span class="actionbar-block" style="justify-content: flex-start;">
<span id="like-button-{{pagevote.id}}"
class="like-button actionbar-button {% if pagevote.vote_score(request.profile) == 1 %}voted{% endif %}"
onclick="javascript:pagevote_upvote({{ pagevote.id }})"
>
<span class="pagevote-score" id="pagevote-score-{{pagevote.id}}">{{ pagevote.score }}</span>
<i class="fa fa-thumbs-o-up" style="font-size: large;"></i>
<span class="actionbar-text">{{_("Like")}}</span>
</span>
<span id="dislike-button-{{pagevote.id}}" class="dislike-button actionbar-button {% if pagevote.vote_score(request.profile) == -1 %}voted{% endif %}" onclick="javascript:pagevote_downvote({{ pagevote.id }})">
<i class="fa fa-thumbs-o-down" style="font-size: large;"></i>
</span>
</span>
{% if not hide_actionbar_comment %}
<span class="actionbar-block">
<span class="actionbar-button">
<i class="fa fa-comment-o" style="font-size: large;"></i>
<span class="actionbar-text">{{_("Comment")}}</span>
</span>
</span>
{% endif %}
<span class="actionbar-block">
<span class="actionbar-button">
<i class="fa fa-bookmark-o" style="font-size: large;"></i>
<span class="actionbar-text">{{_("Bookmark")}}</span>
</span>
</span>
<span class="actionbar-block">
<span class="actionbar-button">
<i class="fa fa-share" style="font-size: large;"></i>
<span class="actionbar-text">{{_("Share")}}</span>
</span>
</span>
{% if actionbar_report_url %}
<span class="actionbar-block">
<a class="actionbar-button" href="{{actionbar_report_url}}" style="color: black">
<i class="fa fa-flag-o" style="font-size: large;"></i>
<span class="actionbar-text">{{_("Report")}}</span>
</a>
</span>
{% endif %}
</div>
{% endif %}

View file

@ -0,0 +1,47 @@
<style>
.actionbar-button {
cursor: pointer;
padding: 0.8em;
border: 0.2px solid lightgray;
border-radius: 5em;
font-weight: bold;
display: inherit;
}
.actionbar-block {
display: flex;
flex: 1;
justify-content: center;
}
.page-vote {
display: flex;
}
.pagevote-score {
margin-right: 0.3em;
}
.like-button {
padding-right: 0.5em;
border-radius: 5em 0 0 5em;
}
.actionbar-button:hover {
background: lightgray;
}
.dislike-button {
padding-left: 0.5em;
border-radius: 0 5em 5em 0;
border-left: 0;
}
.like-button.voted {
color: blue;
}
.dislike-button.voted {
color: red;
}
.actionbar-text {
padding-left: 0.4em;
}
@media (max-width: 799px) {
.actionbar-text {
display: none;
}
}
</style>

View file

@ -0,0 +1,74 @@
{% compress js %}
<script type="text/javascript">
$(document).ready(function () {
function ajax_vote(url, id, delta, on_success) {
return $.ajax({
url: url,
type: 'POST',
data: {
id: id
},
success: function (data, textStatus, jqXHR) {
var score = $('#pagevote-score-' + id);
score.text(parseInt(score.text()) + delta);
if (typeof on_success !== 'undefined')
on_success();
},
error: function (data, textStatus, jqXHR) {
alert('Could not vote: ' + data.responseText);
}
});
}
var get_$votes = function (id) {
var $post = $('#page-vote-' + id);
return {
upvote: $('#like-button-' + id),
downvote: $('#dislike-button-' + id),
};
};
window.pagevote_upvote = function (id) {
var $votes = get_$votes(id);
console.log($votes.upvote, $votes.downvote);
if ($votes.upvote.hasClass('voted')) {
ajax_vote('{{ url('pagevote_downvote') }}', id, -1, function () {
$votes.upvote.removeClass('voted');
});
}
else {
var delta = 1;
if ($votes.downvote.hasClass('voted')) {
delta = 2;
}
ajax_vote('{{ url('pagevote_upvote') }}', id, delta, function () {
if ($votes.downvote.hasClass('voted'))
$votes.downvote.removeClass('voted');
$votes.upvote.addClass('voted');
});
}
};
window.pagevote_downvote = function (id) {
var $votes = get_$votes(id);
if ($votes.downvote.hasClass('voted')) {
ajax_vote('{{ url('pagevote_upvote') }}', id, 1, function () {
$votes.downvote.removeClass('voted');
});
}
else {
var delta = -1;
if ($votes.upvote.hasClass('voted')) {
delta = -2;
}
ajax_vote('{{ url('pagevote_downvote') }}', id, delta, function () {
if ($votes.upvote.hasClass('voted'))
$votes.upvote.removeClass('voted');
$votes.downvote.addClass('voted');
});
}
};
});
</script>
{% endcompress %}

View file

@ -2,12 +2,12 @@
{% block js_media %}
{% include "comments/media-js.html" %}
{% include "pagevotes/media-js.html" %}
{% include "actionbar/media-js.html" %}
{% endblock %}
{% block media %}
{% include "comments/media-css.html" %}
{% include "pagevotes/media-css.html" %}
{% include "actionbar/media-css.html" %}
{% endblock %}
{% block title_row %}
@ -41,14 +41,9 @@
{{ post.content|markdown|reference|str|safe}}
{% endcache %}
</div>
{% include "actionbar/list.html" %}
</div>
<hr style="width: 60%; margin:4em auto;">
<span class="social">
{{ post_to_gplus(request, post, '<i class="fa fa-google-plus-square"></i>') }}
{{ post_to_facebook(request, post, '<i class="fa fa-facebook-official"></i>') }}
{{ post_to_twitter(request, SITE_NAME + ':', post, '<i class="fa fa-twitter"></i>') }}
</span>
{% include "pagevotes/list.html" %}
{% include "comments/list.html" %}
{% endblock %}

View file

@ -36,9 +36,15 @@
<h2 class="title">
<a href="{{ url('blog_post', post.id, post.slug) }}">{{ post.title }}</a>
</h2>
<div class="summary content-description blog-description">
<div class="blog-description">
<div class="summary content-description">
{% cache 86400 'post_summary' post.id %}
{{ post.summary|default(post.content, true)|markdown(lazy_load=True)|reference|str|safe }}
{% endcache %}
</div>
{% set pagevote = post.pagevote %}
{% set hide_actionbar_comment = True %}
{% set include_hr = True %}
{% include "actionbar/list.html" %}
</div>
</section>

View file

@ -1,6 +1,7 @@
{% extends "three-column-content.html" %}
{% block three_col_media %}
{% include "blog/media-css.html" %}
{% include "actionbar/media-css.html" %}
<style>
@media (max-width: 799px) {
.title {
@ -32,6 +33,7 @@
{% endblock %}
{% block three_col_js %}
{% include "actionbar/media-js.html" %}
<script type="text/javascript">
$(document).ready(function () {
$('.time-remaining').each(function () {

View file

@ -67,8 +67,8 @@
{% block description_end %}
<hr>
{% endblock %}
{% block post_description_end %}{% endblock %}
</div>
{% block post_description_end %}{% endblock %}
{% block comments %}{% endblock %}
</div>
</div>

View file

@ -18,10 +18,12 @@
</script>
{% include "contest/media-js.html" %}
{% include "comments/media-js.html" %}
{% include "actionbar/media-css.html" %}
{% endblock %}
{% block content_media %}
{% include "comments/media-css.html" %}
{% include "actionbar/media-css.html" %}
{% endblock %}
{% block body %}
@ -116,15 +118,10 @@
</tbody>
</table>
</div>
{% endif %}
<hr>
<span class="social">
{{ post_to_gplus(request, contest, '<i class="fa fa-google-plus-square"></i>') }}
{{ post_to_facebook(request, contest, '<i class="fa fa-facebook-official"></i>') }}
{{ post_to_twitter(request, SITE_NAME + ':', contest, '<i class="fa fa-twitter"></i>') }}
</span>
{% endif %}
{% include "actionbar/list.html" %}
<br>
{% include "comments/list.html" %}
{% endblock %}

View file

@ -1,22 +0,0 @@
{% set logged_in = request.user.is_authenticated %}
{% set profile = request.profile if logged_in else None %}
<div class="page-vote">
<div class="page-vote-full" style="margin-right: 5px;">
{% if logged_in %}
<a href="javascript:pagevote_upvote({{ pagevote.id }})"
class="upvote-link fa fa-chevron-up fa-fw{% if pagevote.vote_score(request.profile) == 1 %} voted{% endif %}"></a>
{% else %}
<a href="javascript:alert('{{ _('Please log in to vote')|escapejs }}')" title="{{ _('Please log in to vote') }}"
class="upvote-link fa fa-chevron-up fa-fw"></a>
{% endif %}
<br>
<div class="pagevote-score"> {{ pagevote.score }} </div>
{% if logged_in %}
<a href="javascript:pagevote_downvote({{ pagevote.id }})"
class="downvote-link fa fa-chevron-down fa-fw{% if pagevote.vote_score(request.profile) == -1 %} voted{% endif %}"></a>
{% else %}
<a href="javascript:alert('{{ _('Please log in to vote')|escapejs }}')" title="{{ _('Please log in to vote') }}"
class="downvote-link fa fa-chevron-down fa-fw"></a>
{% endif %}
</div>
</div>

View file

@ -1,19 +0,0 @@
<style>
.page-vote {
border: 1px solid #ccc;
display: flex;
justify-content: center;
}
.pagevote-score {
text-align: center;
font-weight: bold;
}
.upvote-link, .downvote-link {
color: black;
}
.voted {
text-shadow: 0 0 4px black, 0 0 9px blue;
}
</style>

View file

@ -1,54 +0,0 @@
<script src="{{ static('libs/featherlight/featherlight.min.js') }}" type="text/javascript"></script>
{% compress js %}
<script type="text/javascript">
$(document).ready(function () {
function ajax_vote(url, id, delta, on_success) {
return $.ajax({
url: url,
type: 'POST',
data: {
id: id
},
success: function (data, textStatus, jqXHR) {
var score = $('.page-vote-full' + ' .pagevote-score').first();
score.text(parseInt(score.text()) + delta);
if (typeof on_success !== 'undefined')
on_success();
},
error: function (data, textStatus, jqXHR) {
alert('Could not vote: ' + data.responseText);
}
});
}
var get_$votes = function () {
var $post = $('.page-vote-full');
return {
upvote: $post.find('.upvote-link').first(),
downvote: $post.find('.downvote-link').first()
};
};
window.pagevote_upvote = function (id) {
ajax_vote('{{ url('pagevote_upvote') }}', id, 1, function () {
var $votes = get_$votes();
if ($votes.downvote.hasClass('voted'))
$votes.downvote.removeClass('voted');
else
$votes.upvote.addClass('voted');
});
};
window.pagevote_downvote = function (id) {
ajax_vote('{{ url('pagevote_downvote') }}', id, -1, function () {
var $votes = get_$votes();
if ($votes.upvote.hasClass('voted'))
$votes.upvote.removeClass('voted');
else
$votes.downvote.addClass('voted');
});
};
});
</script>
{% endcompress %}

View file

@ -2,10 +2,12 @@
{% block content_js_media %}
{% include "comments/media-js.html" %}
{% include "actionbar/media-js.html" %}
{% endblock %}
{% block content_media %}
{% include "comments/media-css.html" %}
{% include "actionbar/media-css.html" %}
{% endblock %}
{% block header %}
@ -29,6 +31,8 @@
{{ solution.content|markdown|reference|str|safe }}
</div>
<hr>
{% include "actionbar/list.html" %}
<br>
{% include "comments/list.html" %}
{% endblock %}

View file

@ -52,14 +52,22 @@
{% endfor %}, *{{problem.points | int}}
</div>
{% endif %}
<div class='blog-description content-description'>
<div class="blog-description">
<div class='content-description'>
{% cache 86400 'problem_html' problem.id MATH_ENGINE LANGUAGE_CODE %}
{{ problem.description|markdown(lazy_load=True)|reference|str|safe }}
{% endcache %}
{% if problem.pdf_description %}
<embed src="{{url('problem_pdf_description', problem.code)}}" width="100%" height="500" type="application/pdf" style="margin-top: 0.5em">
{% endif %}
</div>
{% set include_hr = True %}
{% set hide_actionbar_comment = True %}
{% set pagevote = problem.pagevote %}
{% include "actionbar/list.html" %}
{% if feed_type=='volunteer' and request.user.has_perm('judge.suggest_problem_changes') %}
<br>
<a href="#" class="view-statement-src">{{ _('View source') }}</a>
<pre class="statement-src" style="display: none">{{ problem.description|str }}</pre>
<hr>

View file

@ -59,9 +59,11 @@
}
</style>
{% endif %}
{% include "actionbar/media-css.html" %}
{% endblock %}
{% block three_col_js %}
{% include "actionbar/media-js.html" %}
<script>
window.point_start = {{point_start}};
window.point_end = {{point_end}};

View file

@ -1,6 +1,7 @@
{% extends "common-content.html" %}
{% block content_media %}
{% include "comments/media-css.html" %}
{% include "actionbar/media-css.html" %}
<style>
.title-state {
font-size: 2em;
@ -79,6 +80,7 @@
{% block content_js_media %}
{% include "comments/media-js.html" %}
{% include "actionbar/media-js.html" %}
{% if request.in_contest_mode %}
<script type="text/javascript">
window.register_contest_notification("{{url('contest_clarification_ajax', request.participation.contest.key)}}");
@ -394,15 +396,17 @@
{% block post_description_end %}
{% if request.user.is_authenticated and not request.profile.mute %}
{%- if contest_problem and contest_problem.contest.use_clarifications and request.profile.current_contest.live -%}
<a href="{{ url('new_problem_ticket', problem.code) }}" class="clarify">
<i class="fa fa-flag" style="margin-right:0.5em"></i>
{%- if contest_problem and contest_problem.contest.use_clarifications and request.profile.current_contest.live -%}
{{ _('Request clarification') }}
{%- else -%}
{{ _('Report an issue') }}
{%- endif -%}
</a>
<div style="clear: both"></div>
{%- else -%}
{% set actionbar_report_url = url('new_problem_ticket', problem.code) %}
{% include "actionbar/list.html" %}
<br>
{%- endif -%}
{% endif %}
{% if not (contest_problem and contest_problem.contest.use_clarifications) %}
<div id="comment-announcement-container">