logos-co/open-law
1
0
Fork 0
mirror of https://github.com/logos-co/open-law.git synced 2025-02-23 20:18:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'develop' into svyat/feat/tags

Browse Source
This commit is contained in:
SvyatoslavArtymovych 2023-05-23 15:48:31 +03:00
commit 2ddac7c631
49 changed files with 1750 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/__init__.py
View File

@ -68,10 +68,15 @@ def create_app(environment="development"):
login_manager.anonymous_user = AnonymousUser
# Jinja globals
from app.controllers.jinja_globals import form_hidden_tag, display_tags
from app.controllers.jinja_globals import (
form_hidden_tag,
display_tags,
build_qa_url_using_interpretation,
)
app.jinja_env.globals["form_hidden_tag"] = form_hidden_tag
app.jinja_env.globals["display_tags"] = display_tags
app.jinja_env.globals["build_qa_url"] = build_qa_url_using_interpretation
# Error handlers.
@app.errorhandler(HTTPException)

23
app/controllers/build_qa_url_using_interpretation.py Normal file
View File

@ -0,0 +1,23 @@
from flask import url_for
from app import models as m
def build_qa_url_using_interpretation(interpretation: m.Interpretation):
section: m.Section = interpretation.section
collection: m.Collection = section.collection
sub_collection = None
if collection.is_leaf and collection.parent.is_root:
collection: m.Collection = collection.parent
sub_collection: m.Collection = collection
book: m.Book = section.version.book
url = url_for(
"book.qa_view",
book_id=book.id,
collection_id=collection.id,
sub_collection_id=sub_collection.id if sub_collection else None,
section_id=section.id,
interpretation_id=interpretation.id,
)
return url

24
app/controllers/jinja_globals.py
View File

@ -2,6 +2,9 @@ import re
from flask import current_app
from flask_wtf import FlaskForm
from flask import url_for
from app import models as m
TAG_REGEX = re.compile(r"\[.*?\]")
@ -26,3 +29,24 @@ def display_tags(text: str):
)
return text
# Using: {{ build_qa_url(interpretation) }}
def build_qa_url_using_interpretation(interpretation: m.Interpretation):
section: m.Section = interpretation.section
collection: m.Collection = section.collection
sub_collection = None
if collection.parent and not collection.parent.is_root:
sub_collection: m.Collection = collection
collection: m.Collection = collection.parent
book: m.Book = section.version.book
url = url_for(
"book.qa_view",
book_id=book.id,
collection_id=collection.id,
sub_collection_id=sub_collection.id if sub_collection else None,
section_id=section.id,
interpretation_id=interpretation.id,
)
return url

5
app/forms/section.py
View File

@ -13,11 +13,16 @@ class BaseSectionForm(FlaskForm):
class CreateSectionForm(BaseSectionForm):
collection_id = StringField("Collection ID", [DataRequired()])
sub_collection_id = StringField("Sub collection ID")
submit = SubmitField("Create")
def validate_collection_id(self, field):
collection_id = field.data
collection: m.Collection = db.session.get(m.Collection, collection_id)
if self.sub_collection_id.data and self.sub_collection_id.data != "_":
collection: m.Collection = db.session.get(
m.Collection, self.sub_collection_id.data
)
if not collection or collection.sub_collections:
log(log.WARNING, "Collection [%s] it not leaf", collection)

6
app/models/book_version.py
View File

@ -20,8 +20,10 @@ class BookVersion(BaseModel):
# Relationships
book = db.relationship("Book", viewonly=True)
derivative = db.relationship("BookVersion", remote_side=[id])
sections = db.relationship("Section", viewonly=True)
collections = db.relationship("Collection", viewonly=True)
sections = db.relationship("Section", viewonly=True, order_by="desc(Section.id)")
collections = db.relationship(
"Collection", viewonly=True, order_by="desc(Collection.id)"
)
def __repr__(self):
return f"<{self.id}: {self.semver}>"

5
app/models/collection.py
View File

@ -19,7 +19,10 @@ class Collection(BaseModel):
# Relationships
version = db.relationship("BookVersion")
children = db.relationship(
"Collection", backref=db.backref("parent", remote_side=[id]), viewonly=True
"Collection",
backref=db.backref("parent", remote_side=[id]),
viewonly=True,
order_by="asc(Collection.id)",
)
sections = db.relationship("Section")

8
app/models/section.py
View File

@ -84,7 +84,7 @@ class Section(BaseModel):
@property
def approved_interpretation(self):
interpretation = Interpretation.query.filter_by(
approved=True, section_id=self.id
approved=True, section_id=self.id, is_deleted=False
).first()
if interpretation:
@ -96,7 +96,9 @@ class Section(BaseModel):
Interpretation, func.count(Interpretation.votes).label("total_votes")
)
.join(InterpretationVote)
.filter(Interpretation.section_id == self.id)
.filter(
Interpretation.section_id == self.id, Interpretation.is_deleted is False
)
.group_by(Interpretation.id)
.order_by(text("total_votes DESC"))
).first()
@ -105,7 +107,7 @@ class Section(BaseModel):
# oldest
interpretation = (
Interpretation.query.filter_by(section_id=self.id)
Interpretation.query.filter_by(section_id=self.id, is_deleted=False)
.order_by(Interpretation.created_at)
.first()
)

13
app/models/user.py
View File

@ -8,7 +8,7 @@ from werkzeug.security import generate_password_hash, check_password_hash
from app import db
from app.models.utils import BaseModel
from app.logger import log
from app import schema as s
from app import schema as s, models as m
def gen_uniq_id() -> str:
@ -54,6 +54,17 @@ class User(BaseModel, UserMixin):
u = s.User.from_orm(self)
return u.json()
@property
def contributions(self):
contributions = m.Interpretation.query.filter_by(user_id=self.id).all()
comments = m.Comment.query.filter_by(user_id=self.id).all()
for comment in comments:
if comment.parent:
contributions.append(comment.parent.interpretation)
else:
contributions.append(comment.interpretation)
return contributions
class AnonymousUser(AnonymousUserMixin):
pass

2
app/static/css/styles.css
View File

File diff suppressed because one or more lines are too long

2
app/static/js/main.js
View File

File diff suppressed because one or more lines are too long

2
app/templates/base.html
View File

@ -86,7 +86,7 @@
<!-- prettier-ignore -->
<script src="{{ url_for('static', filename='js/main.js') }}" type="text/javascript" defer></script>
<div class="p-0 mt-36 h-auto">
<div class="p-0 mt-135 h-auto">
<!-- Main Content -->
{% block content %}{% endblock %}
</div>

30
app/templates/book/add_book_modal.html
View File

@ -14,27 +14,15 @@
</div>
<!-- Modal body -->
<div class="p-6 space-y-6">
<div class="col-span-6 sm:col-span-3">
<label for="label" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" >Label</label >
<input type="text" name="label" id="label" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Name" required />
</div>
<div class="col-span-6 sm:col-span-3">
<label for="about" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" >About</label >
<textarea type="text" name="about" id="about" maxlength="640" class="max-h-40 shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="About"></textarea>
</div>
<div class="multiple-input-block mb-6">
<label for="tags-input" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
Tags
</label>
<input type="text" name="tags" class="hidden tags-to-submit">
<input
type="text"
id="tags-input"
class="multiple-input mb-3 shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="e.g. Law (press 'Enter' or Comma to add tag. Click on tag to edit it)"
data-save-results-to="tags-to-submit"
>
<div class="multiple-input-items gap-1 flex flex-wrap"></div>
<div>
<div class="col-span-6 sm:col-span-3 mb-2">
<label for="label" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" >Label</label >
<input type="text" name="label" id="label" maxlength="256" minlength="6" maxlength="256" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Name" required />
</div>
<div class="col-span-6 sm:col-span-3">
<label for="about" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" >About</label >
<textarea type="text" name="about" id="about" maxlength="640" class="max-h-40 shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="About"></textarea>
</div>
</div>
</div>
<!-- Modal footer -->

8
app/templates/book/add_collection_modal.html
View File

@ -4,16 +4,12 @@
<div class="relative w-full max-w-2xl max-h-full">
<!-- Modal content -->
<form
{% if collection %}
action="{{ url_for('book.collection_create', book_id=book.id, collection_id=collection.id) }}"
{% else %}
action="{{ url_for('book.collection_create', book_id=book.id) }}"
{% endif %}
action="{{ url_for('book.collection_create', book_id=book.id) }}"
method="post" class="relative bg-white rounded-lg shadow dark:bg-gray-700">
{{ form_hidden_tag() }}
<!-- Modal header -->
<div class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white"> Add {% if collection %}Sub {% endif %}Collection </h3>
<h3 class="text-xl font-semibold text-gray-900 dark:text-white"> Add Collection </h3>
<button id="modalAddCloseButton" data-modal-hide="add-collection-modal" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"> <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg> </button>
</div>
<!-- Modal body -->

16
app/templates/book/add_section_modal.html
View File

@ -3,21 +3,15 @@
<div id="add-section-modal" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-[150] hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
<div class="relative w-full max-w-2xl max-h-full">
<!-- Modal content -->
<form
{% if sub_collection %}
action="{{ url_for('book.section_create', book_id=book.id, collection_id=collection.id, sub_collection_id=sub_collection.id) }}"
{% else %}
action="{{ url_for('book.section_create', book_id=book.id, collection_id=collection.id) }}"
{% endif %}
method="post"
class="prevent-submit-on-enter relative bg-white rounded-lg shadow dark:bg-gray-700"
>
<form id="add_section_modal_form" action="{{ url_for('book.section_create', book_id=book.id, collection_id=0, sub_collection_id=0) }}" method="post" class="relative bg-white rounded-lg shadow dark:bg-gray-700">
{{ form_hidden_tag() }}
<input type="hidden" name="collection_id" id="collection_id" value="{{sub_collection.id if sub_collection else collection.id}}" />
<input type="hidden" name="collection_id" id="add_section_modal_collection_id" value="" />
<input type="hidden" name="sub_collection_id" id="add_section_modal_sub_collection_id" value="" />
<input type="hidden" name="about" id="new-section-input" />
<!-- Modal header -->
<div class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white"> Add Section </h3>
<button id="modalAddCloseButton" data-modal-hide="add-section-modal" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"> <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg> </button>
<button id="modalSectionCloseButton" data-modal-hide="add-section-modal" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"> <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg> </button>
</div>
<!-- Modal body -->
<div class="p-6 space-y-6">

40
app/templates/book/add_sub_collection_modal.html Normal file
View File

@ -0,0 +1,40 @@
<!-- Add collection modal -->
<!-- prettier-ignore-->
<div id="add-sub-collection-modal" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
<div class="relative w-full max-w-2xl max-h-full">
<!-- Modal content -->
<form
id="add_sub_collection_modal_form"
action="{{ url_for('book.collection_create', book_id=book.id, collection_id=None) }}"
method="post" class="relative bg-white rounded-lg shadow dark:bg-gray-700">
{{ form_hidden_tag() }}
<input type="hidden" name="collection_id" id="add_sub_collection_modal_collection_id" value="" />
<!-- Modal header -->
<div class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white"> Add Sub Collection </h3>
<button id="modalSubCollectionCloseButton" data-modal-hide="add-sub-collection-modal" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"> <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg> </button>
</div>
<!-- Modal body -->
<div class="p-6 space-y-6">
<div class="grid gap-6">
<div class="col-span-6 sm:col-span-3">
<label for="label" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" >Label</label >
<input type="text" name="label" id="label" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Collection label" required />
</div>
</div>
</div>
<div class="p-6 pt-0 space-y-6">
<div class="grid gap-6">
<div class="col-span-6 sm:col-span-3">
<label for="about-collection" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" >About</label >
<textarea name="about" id="about-collection" rows="4" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="About collection..."></textarea>
</div>
</div>
</div>
<!-- Modal footer -->
<div class="flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
<button name="submit" type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Create</button>
</div>
</form>
</div>
</div>

27
app/templates/book/approve_interpretation_modal.html Normal file
View File

@ -0,0 +1,27 @@
<!-- prettier-ignore-->
<div id="approve_interpretation_modal" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-[150] hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
<div class="relative w-full max-w-2xl max-h-full">
<!-- Modal content -->
<form
id="approve-interpretation-form"
class="relative bg-white rounded-lg shadow dark:bg-gray-700"
>
{{ form_hidden_tag() }}
<!-- Modal header -->
<div class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">Important Note</h3>
<button id="modalAddCloseButton" data-modal-hide="approve_interpretation_modal" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"> <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg> </button>
</div>
<!-- Modal body -->
<div class="flex dark:text-white items-center p-6 space-x-2 dark:border-gray-600">
There's already an approved interpretation for this section. Do you want to proceed to replace it?
</div>
<!-- Modal footer -->
<div class="flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
<button name="submit" type="submit" class="text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800">Confirm</button>
</div>
</form>
</div>
</div>

420
app/templates/book/collection_view.html
View File

@ -1,80 +1,374 @@
<!-- prettier-ignore -->
{% extends 'base.html' %}
{% block right_sidebar %}
{% endblock %}
{% if book.owner.id == current_user.id %}
<!-- show create collection btn on rightside bar -->
{% set show_create_collection = True %}
<!-- prettier-ignore -->
{% if current_user.is_authenticated %}
{% include 'book/add_collection_modal.html' %}
{% include 'book/delete_collection_modal.html' %}
{% include 'book/add_sub_collection_modal.html' %}
{% include 'book/delete_sub_collection_modal.html' %}
{% include 'book/add_section_modal.html' %}
{% include 'book/delete_section_modal.html' %}
{% endif %}
{% block right_sidebar %}
{% include 'book/right_sidebar.html' %}
{% endblock %}
{% block content %}
<div class="overflow-x-auto shadow-md sm:rounded-lg md:mr-64">
<!-- prettier-ignore -->
<div class="fixed z-40 w-full bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
<!-- prettier-ignore -->
<h1 class="font-extrabold text-lg dark:text-white ml-4"> {{book.label}} </h1>
<!-- prettier-ignore -->
<div class="mb-1">
<ul class="flex flex-wrap -mb-px text-sm font-medium text-center" id="myTab" data-tabs-toggle="#myTabContent" role="tablist">
<li class="mr-2" role="presentation">
<button class="flex items-center space-x-2 p-4 border-b-2 rounded-t-lg" id="files-tab" data-tabs-target="#files" type="button" role="tab" aria-controls="files" aria-selected="false">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m5.231 13.481L15 17.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v16.5c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9zm3.75 11.625a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" /> </svg>
<span>Files</span>
</button>
</li>
<li class="mr-2" role="presentation">
<button class="flex items-center space-x-2 p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300" id="about-tab" data-tabs-target="#about" type="button" role="tab" aria-controls="about" aria-selected="false">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z" /> </svg>
<span>About</span>
</button>
</li>
</ul>
</div>
</div>
<div id="myTabContent" class="overflow-y-auto mt-24">
<!-- prettier-ignore -->
<div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="files" role="tabpanel" aria-labelledby="files-tab">
<dl class="w-md md:w-full text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700">
<div class="flex overflow-hidden">
<div
id="accordion-collapse"
data-accordion="open"
class="p-3 w-2/6 border-t border-r border-gray-200 dark:border-gray-700 overflow-y-scroll h-box">
<div class="flex justify-between">
<div class="flex dark:text-white">
<svg id="tabGoBackButton" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 cursor-pointer"> <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" /> </svg>
<h1 class="text-l font-extrabold dark:text-white ml-4 mb-3">
Table of contents
</h1>
</div>
<div class="flex text-white">
<!-- prettier-ignore -->
{% for collection in book.versions[-1].children_collections if not collection.is_root and not collection.is_deleted %}
<a href="{{ url_for("book.settings", book_id=book.id) }}" type="button" class="ml-2" >
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /> </svg>
</a>
</div>
</div>
<!-- prettier-ignore -->
{% for collection in book.versions[-1].children_collections if not collection.is_root and not collection.is_deleted %}
<div>
<div class="flex items-center justify-start w-full font-medium text-left text-gray-500 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:text-gray-400">
<button class="bg-inherit" type="button" data-accordion-target="#accordion-collapse-body-{{loop.index}}" aria-expanded="true" aria-controls="accordion-collapse-body-{{loop.index}}">
<!-- prettier-ignore -->
<a href="{{url_for('book.sub_collection_view',book_id=book.id,collection_id=collection.id)}}" >
<dl class="bg-white dark:bg-gray-900 max-w-full p-3 text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700 m-3 border-2 border-gray-200 border-solid rounded-lg dark:border-gray-700">
<div class="flex flex-col pb-3 p-3 w-full">
<!-- prettier-ignore -->
<dt class="flex w-full truncate mb-1 text-gray-500 md:text-lg dark:text-gray-400 flex-col">
<p>{{ collection.label }}</p>
<div class="flex ml-auto align-center justify-center space-x-3">
<span class="space-x-0.5 flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 22 22" stroke-width="1" stroke="currentColor" class="w-4 h-4 inline-flex mr-1"> <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" /></svg>
<p>55</p>
</span>
<span class="space-x-0.5 flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 22 22" stroke-width="1" stroke="currentColor" class="w-4 h-4 inline-flex mr-1"> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" /></svg>
<p>55</p>
</span>
</div>
</dt>
<svg data-accordion-icon class="w-6 h-6 rotate-180 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg>
</button>
<a id="accordion-collapse-heading-{{loop.index}}" class=" text-black dark:text-white ">
<form id="rename-collection-label-form-{{loop.index}}" data-book-id='{{book.id}}' data-collection-id="{{collection.id}}" method="post" class="mb-0">
{{ form_hidden_tag() }}
<input class=" bg-inherit border-none " value="{{collection.label}}" type="text" name="label" id="edit-collection-label-{{loop.index}}" placeholder="Collection label" required readonly/>
<button name="submit" type="submit"></button>
</form>
</a>
</div>
<svg id="dropdownCollectionContextButton{{loop.index}}" data-dropdown-toggle="dropdown" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 0 0" stroke-width="1.5" stroke="none" class="w-0 h-0"></svg>
</div>
<div data="collection-context-menu-{{loop.index}}" id="dropdown" class="z-10 hidden bg-white divide-y divide-gray-800 border border-gray-800 dark:border-none dark:divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
{% if current_user.is_authenticated %}
<ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
<li>
<button type="button" data-modal-target="add-collection-modal" data-modal-toggle="add-collection-modal" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">New Collection</button>
</li>
{% if not collection.is_leaf %}
<li>
<button type="button" id="callAddSubCollectionModal" data-modal-target="add-sub-collection-modal" data-modal-toggle="add-sub-collection-modal" data-collection-id="{{collection.id}}" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">New Subcollection</button>
</li>
{% endif %}
{% if collection.children|length ==0 or collection.children|length ==0 and collection.is_leaf %}
<li>
<button type="button" id="callAddSectionModal" data-modal-target="add-section-modal" data-modal-toggle="add-section-modal" data-collection-id="{{collection.id}}" data-sub-collection-id="_" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">New Section</button>
</li>
{% endif %}
</ul>
<ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
<li>
<button type="button" id="rename-collection-button-{{loop.index}}" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Rename Collection</button>
</li>
<li>
<button type="button" id="callDeleteCollectionModal" data-modal-target="delete-collection-modal" data-modal-toggle="delete-collection-modal" data-collection-id="{{collection.id}}" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Delete Collection</button>
</li>
</ul>
<ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
<li>
<button type="button" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Export Collection</button>
</li>
</ul>
{% else %}
<ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
<li>
<button type="button" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Connect you wallet to do this</button>
</li>
</ul>
{% endif %}
</div>
<!-- prettier-ignore -->
<div id="accordion-collapse-body-{{loop.index}}" class="hidden" aria-labelledby="accordion-collapse-heading-{{loop.index}}">
<div class="ml-6">
{% if not collection.is_leaf %}
<!-- if collection has sub_collection make for loop for it -->
<!-- Nested accordion -->
{% for sub_collection in collection.children if not sub_collection.is_deleted%}
<div id="accordion-nested-collapse" data-accordion="open">
<div class="flex items-center justify-start w-full font-medium text-left text-gray-500 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:text-gray-400">
<button
class="bg-inherit"
type="button"
data-accordion-target="#accordion-nested-collapse-body-{{loop.index}}"
aria-expanded="true"
aria-controls="accordion-nested-collapse-body-{{loop.index}}">
<!-- prettier-ignore -->
<svg data-accordion-icon class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg>
</button>
<a id="accordion-nested-collapse-heading-{{loop.index}}" class=" text-black dark:text-white ">
<form id="rename-sub-collection-label-form-{{loop.index}}" data-book-id='{{book.id}}' data-collection-id="{{collection.id}}" data-sub-collection-id="{{sub_collection.id}}" method="post" class="mb-0">
{{ form_hidden_tag() }}
<input class=" bg-inherit border-none " value="{{sub_collection.label}}" type="text" name="label" id="edit-sub-collection-label-{{loop.index}}" placeholder="Sub collection label" required readonly/>
<button name="submit" type="submit"></button>
</form>
</a>
</div>
<svg id="dropdownSubCollectionContextButton{{loop.index}}" data-dropdown-toggle="dropdown" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 0 0" stroke-width="1.5" stroke="none" class="w-0 h-0"></svg>
<div data="sub-collection-context-menu-{{loop.index}}" id="dropdown" class="z-10 hidden bg-white divide-y divide-gray-800 border border-gray-800 dark:border-none dark:divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
{% if current_user.is_authenticated %}
<ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
<li>
<button type="button" id="callAddSectionModal" data-modal-target="add-section-modal" data-modal-toggle="add-section-modal" data-collection-id="{{collection.id}}" data-sub-collection-id="{{sub_collection.id}}" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">New Section</button>
</li>
</ul>
<ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
<li>
<button type="button" id="rename-sub-collection-button-{{loop.index}}" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Rename Sub Collection</button>
</li>
<li>
<button type="button" id="callDeleteSubCollectionModal" data-modal-target="delete-sub-collection-modal" data-modal-toggle="delete-sub-collection-modal" data-collection-id="{{collection.id}}" data-sub-collection-id="{{sub_collection.id}}" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Delete Sub Collection</button>
</li>
</ul>
<ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
<li>
<button type="button" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Export Sub Collection</button>
</li>
</ul>
{% else %}
<ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
<li>
<button type="button" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Connect your wallet to do this</button>
</li>
</ul>
{% endif %}
</div>
<!-- prettier-ignore -->
<div id="accordion-nested-collapse-body-{{loop.index}}" class="hidden" aria-labelledby="accordion-nested-collapse-heading-{{loop.index}}">
<div class="ml-6">
<!-- here comes for loop for all section in this sub_collection-->
{% for section in sub_collection.active_sections %}
<div class="">
<button type="button" href="#section-{{section.label}}" id="section-heading-{{loop.index}}" class="text-gray-500 dark:text-gray-400">
<form id="rename-section-label-form-{{loop.index}}" data-book-id='{{book.id}}' data-collection-id="{{collection.id}}" data-sub-collection-id="{{sub_collection.id}}" data-section-id="{{section.id}}" method="post">
{{ form_hidden_tag() }}
<input class=" bg-inherit border-none underline" value="{{section.label}}" type="text" name="label" id="edit-section-label-{{loop.index}}" placeholder="Section label" required readonly/>
<button name="submit" type="submit"></button>
</form>
</button>
<svg id="dropdownSectionContextButton{{loop.index}}" data-dropdown-toggle="dropdown" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 0 0" stroke-width="1.5" stroke="none" class="w-0 h-0"></svg>
<div data="section-context-menu-{{loop.index}}" id="dropdown" class="z-10 hidden bg-white divide-y divide-gray-800 border border-gray-800 dark:border-none dark:divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
{% if current_user.is_authenticated %}
<ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
<li>
<button type="button" id="rename-section-button-{{loop.index}}" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Rename Section</button>
</li>
<li>
<button type="button" data-modal-target="delete-section-modal" data-modal-toggle="delete-section-modal" id="callDeleteSectionModal" data-collection-id="{{collection.id}}" data-sub-collection-id="{{sub_collection.id}}" data-section-id="{{section.id}}" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Delete Section</button>
</li>
</ul>
<ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
<li>
<button type="button" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Export Section</button>
</li>
</ul>
{% else %}
<ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
<li>
<button type="button" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Connect your wallet to do this</button>
</li>
</ul>
{% endif %}
</div>
</dl>
</a >
</div>
{% endfor %}
</div>
</div>
</div>
{% endfor %}
</dl>
</div>
<!-- prettier-ignore -->
<div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="about" role="tabpanel" aria-labelledby="about-tab">
<p class="text-sm text-gray-500 dark:text-gray-400"> This is about {{book.label}} </p>
<!-- End: Nested accordion -->
{% else %}
<!-- if collection doesn't have sub_collection -->
<div class="ml-6">
<!-- here comes for loop for all section in this collection-->
{% for section in collection.active_sections %}
<button type="button" href="#section-{{section.label}}" id="section-heading-{{loop.index}}" class="text-gray-500 dark:text-gray-400">
<form id="rename-section-label-form-{{loop.index}}" data-book-id='{{book.id}}' data-collection-id="{{collection.id}}" data-sub-collection-id="_" data-section-id="{{section.id}}" method="post">
{{ form_hidden_tag() }}
<input class=" bg-inherit border-none underline" value="{{section.label}}" type="text" name="label" id="edit-section-label-{{loop.index}}" placeholder="Section label" required readonly/>
<button name="submit" type="submit"></button>
</form>
</button>
<svg id="dropdownSectionContextButton{{loop.index}}" data-dropdown-toggle="dropdown" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 0 0" stroke-width="1.5" stroke="none" class="w-0 h-0"></svg>
<div data="section-context-menu-{{loop.index}}" id="dropdown" class="z-10 hidden bg-white divide-y divide-gray-800 border border-gray-800 dark:border-none dark:divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
{% if current_user.is_authenticated %}
<ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
<li>
<button type="button" id="rename-section-button-{{loop.index}}" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Rename Section</button>
</li>
<li>
<button type="button" data-modal-target="delete-collection-modal" data-modal-toggle="delete-collection-modal" id="callDeleteSectionModal" data-collection-id="{{collection.id}}" data-sub-collection-id="_" data-section-id="{{section.id}}" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Delete Section</button>
</li>
</ul>
<ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
<li>
<button type="button" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Export Section</button>
</li>
</ul>
{% else %}
<ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
<li>
<button type="button" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Connect your wallet to do this</button>
</li>
</ul>
{% endif %}
</div>
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% endfor %}
</div>
<div class="p-3 px-6 w-4/6 dark:text-white overflow-y-scroll h-box ">
<p class="text-xs mb-3">Created by <a href="{{url_for('user.profile',user_id=book.owner.id)}}" class=" text-blue-500 {% if book.owner.is_deleted %}line-through{% endif %}">{{book.owner.username}}</a> on {{book.created_at.strftime('%B %d, %Y')}}. Last updated on {{book.created_at.strftime('%B %d, %Y')}}</p>
<div class="flex justify-between item-center">
<h1 class="hidden md:inline font-extrabold text-lg dark:text-white">{{book.label}}</h1>
<div class="ml-auto flex">
<div class="space-x-0.5 mr-3">
<a href={{ url_for('book.statistic_view', book_id=book.id ) }} class="flex items-center">
<svg class="w-4 h-4 inline-flex mr-1 {% if book.current_user_has_star %}fill-yellow-300{% endif %}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 22 22" stroke-width="1" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" /> </svg>
{{ book.stars|length }}</a>
</div>
<div class="space-x-0.5 mr-3">
<a href={{ url_for('book.statistic_view', book_id=book.id,active_tab='contributors' ) }} class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 22 22" stroke-width="1" stroke="currentColor" class="w-4 h-4 mr-1"> <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" /> </svg>
{{ book.contributors|length }}</a>
</div>
<div class="space-x-0.5 mr-3">
<a href={{ url_for('book.statistic_view', book_id=book.id,active_tab='forks' ) }} class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 22 22" stroke-width="1" stroke="currentColor" class="w-4 h-4 mr-1"> <path stroke-linecap="round" stroke-linejoin="round" d="M7.217 10.907a2.25 2.25 0 100 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186l9.566-5.314m-9.566 7.5l9.566 5.314m0 0a2.25 2.25 0 103.935 2.186 2.25 2.25 0 00-3.935-2.186zm0-12.814a2.25 2.25 0 103.933-2.185 2.25 2.25 0 00-3.933 2.185z" /> </svg>
{{ book.versions|length }}</a>
</div>
</div>
</div>
<p class=" text-sm mb-3">{% if book.about==None %}About text{% else %}{{book.about}}{% endif %}</p>
{% for collection in book.versions[-1].children_collections if not collection.is_root and not collection.is_deleted %}
<p class="my-3 underline">#{{collection.label}}</p>
{% if not collection.is_leaf and not collection.children %}
<p class="ml-3 my-3 italic text-sm">Collection is empty</p>
{% endif %}
{% if not collection.is_leaf %}
<!-- if collection has sub_collection make for loop for it -->
{% for sub_collection in collection.children if not sub_collection.is_deleted%}
<p class="my-3">##{{sub_collection.label}}</p>
{% if not sub_collection.active_sections %}
<p class="ml-3 my-3 italic text-sm">This sub collection is empty</p>
{% endif %}
{% for section in sub_collection.active_sections %}
<div class="bg-inherit max-w-full text-gray-900 dark:text-white mt-1">
<div class="flex flex-col pb-3 w-full">
<div class="flex w-full mb-1 dark:text-gray-100 flex-col">
<!-- prettier-ignore -->
<a href="{{url_for('book.interpretation_view',book_id=book.id,collection_id=collection.id,sub_collection_id=sub_collection.id,section_id=section.id)}}">
<p id="section-{{section.label}}" class="truncate my-3">{{ section.label }}</p></a>
{% if not section.active_interpretations %}
<p class="ml-3 my-3 italic text-sm">This section is empty</p>
{% else %}
<div class="ql-snow truncate md:max-w-xl">
<div class="dark:text-white h-30 ql-editor-readonly !px-0">
<p>{{ section.approved_interpretation.text|safe }}</p>
</div>
</div>
<div class="flex w-full ml-auto align-center justify-between space-x-3 border-t py-3">
<span class="text-sm">Interpretation by <a href="{{url_for('user.profile',user_id=section.approved_interpretation.user.id)}}" class=" text-blue-500 {% if section.approved_interpretation.user.is_deleted %}line-through{% endif %}">{{section.approved_interpretation.user.username}}</a> on {{section.approved_interpretation.created_at.strftime('%B %d, %Y')}}</span>
<button data-tooltip-target="tooltip-click" data-tooltip-trigger="click" id="copyLinkButton" type="button" class="hover:text-white focus:ring-2 rounded-full font-medium text-sm p-2.5 text-center inline-flex items-center dark:hover:text-white" data-link="{{ build_qa_url(section.approved_interpretation) }}"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 8.25H7.5a2.25 2.25 0 00-2.25 2.25v9a2.25 2.25 0 002.25 2.25h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25H15m0-3l-3-3m0 0l-3 3m3-3V15" /> </svg> </button>
<div id="tooltip-click" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"> Link copied! <div class="tooltip-arrow" data-popper-arrow></div> </div>
</div>
<!--Comments-->
{% if not section.approved_comments %}
<p>No comments for current section</p>
{% else %}
<div id="accordion-comments-collapse-{{loop.index}}" data-accordion="collapse">
<h2 id="accordion-comments-collapse-{{loop.index}}-heading-{{loop.index}}">
<button type="button" class="flex items-center bg-inherit justify-start w-full p-5 font-medium text-left" data-accordion-target="#accordion-comments-collapse-{{loop.index}}-body-{{loop.index}}" aria-expanded="false" aria-controls="accordion-collapse-body-1">
<svg data-accordion-icon class="w-6 h-6 rotate-180 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
<span><i>Comments:</i></span>
</button>
</h2>
<div id="accordion-comments-collapse-{{loop.index}}-body-{{loop.index}}" class="hidden" aria-labelledby="accordion-collapse-heading-{{loop.index}}">
{% for comment in section.approved_comments %}
<div class="p-5 ml-6">
<p class="text-sm mb-3">{{comment.text}}</p>
<div class="flex w-full ml-auto align-center justify-between space-x-3 border-t py-3">
<span class="text-sm">Created by <a href="{{url_for('user.profile',user_id=comment.user.id)}}" class=" text-blue-500 {% if comment.user.is_deleted %}line-through{% endif %}">{{comment.user.username}}</a> on {{comment.created_at.strftime('%B %d, %Y')}}</span>
<button data-tooltip-target="tooltip-click" data-tooltip-trigger="click" id="copyLinkButton" type="button" class="hover:text-white focus:ring-2 rounded-full font-medium text-sm p-2.5 text-center inline-flex items-center dark:hover:text-white" data-link="{{ build_qa_url(section.approved_interpretation) }}">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 8.25H7.5a2.25 2.25 0 00-2.25 2.25v9a2.25 2.25 0 002.25 2.25h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25H15m0-3l-3-3m0 0l-3 3m3-3V15" /> </svg>
</button>
<div id="tooltip-click" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"> Link copied! <div class="tooltip-arrow" data-popper-arrow></div> </div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
{% endif %}
{% endif %}
</div>
</div>
{% endfor %}
{% endfor %}
{% else %}
{% for section in collection.active_sections %}
<a href="{{url_for('book.interpretation_view',book_id=book.id,collection_id=collection.id,section_id=section.id)}}">
<p id="section-{{section.label}}" class="truncate my-3">{{ section.label }}</p></a>
{% if not section.active_interpretations %}
<p class="ml-3 my-3 italic text-sm">This section is empty</p>
{% else %}
<div class="ql-snow truncate md:max-w-xl mb-3">
<div class="dark:text-white h-30 ql-editor-readonly !px-0">
<p>{{ section.approved_interpretation.text|safe }}</p>
</div>
</div>
<div class="flex w-full ml-auto align-center justify-between space-x-3 border-t py-3">
<span class="text-sm">Interpretation by <a href="{{url_for('user.profile',user_id=section.approved_interpretation.user.id)}}" class=" text-blue-500 {% if section.approved_interpretation.user.is_deleted %}line-through{% endif %}">{{section.approved_interpretation.user.username}}</a> on {{section.approved_interpretation.created_at.strftime('%B %d, %Y')}}</span>
<button data-tooltip-target="tooltip-click" data-tooltip-trigger="click" id="copyLinkButton" type="button" class="hover:text-white focus:ring-2 rounded-full font-medium text-sm p-2.5 text-center inline-flex items-center dark:hover:text-white" data-link="{{ build_qa_url(section.approved_interpretation) }}"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 8.25H7.5a2.25 2.25 0 00-2.25 2.25v9a2.25 2.25 0 002.25 2.25h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25H15m0-3l-3-3m0 0l-3 3m3-3V15" /> </svg> </button>
<div id="tooltip-click" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"> Link copied! <div class="tooltip-arrow" data-popper-arrow></div> </div>
</div>
<!--Comments-->
{% if not section.approved_comments %}
<div class="mb-3">
<p>No comments for current section</p>
</div>
{% else %}
<div id="accordion-comments-collapse-nest{{loop.inde}}" data-accordion="collapse" class="mb-3">
<h2 id="accordion-comments-collapse-nest{{loop.inde}}-heading-{{loop.index}}">
<button type="button" class="flex items-center bg-inherit justify-start w-full p-5 font-medium text-left" data-accordion-target="#accordion-comments-collapse-nest{{loop.inde}}-body-{{loop.index}}" aria-expanded="false" aria-controls="accordion-collapse-body-1">
<svg data-accordion-icon class="w-6 h-6 rotate-180 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
<span><i>Comments:</i></span>
</button>
</h2>
<div id="accordion-comments-collapse-nest{{loop.inde}}-body-{{loop.index}}" class="hidden" aria-labelledby="accordion-collapse-heading-1">
{% for comment in section.approved_comments %}
<div class="p-5 ml-6">
<p class="text-sm mb-3">{{comment.text}}</p>
<div class="flex w-full ml-auto align-center justify-between space-x-3 border-t py-3">
<span class="text-sm">Created by <a href="{{url_for('user.profile',user_id=comment.user.id)}}" class=" text-blue-500 {% if comment.user.is_deleted %}line-through{% endif %}">{{comment.user.username}}</a> on {{comment.created_at.strftime('%B %d, %Y')}}</span>
<button data-tooltip-target="tooltip-click" data-tooltip-trigger="click" id="copyLinkButton" type="button" class="hover:text-white focus:ring-2 rounded-full font-medium text-sm p-2.5 text-center inline-flex items-center dark:hover:text-white" data-link="{{ build_qa_url(section.approved_interpretation) }}">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 8.25H7.5a2.25 2.25 0 00-2.25 2.25v9a2.25 2.25 0 002.25 2.25h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25H15m0-3l-3-3m0 0l-3 3m3-3V15" /> </svg>
</button>
<div id="tooltip-click" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"> Link copied! <div class="tooltip-arrow" data-popper-arrow></div> </div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endif %}
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
</div>
<!-- prettier-ignore -->
{% endblock %}

10
app/templates/book/delete_collection_modal.html
View File

@ -4,17 +4,15 @@
<div class="relative w-full max-w-2xl max-h-full">
<!-- Modal content -->
<form
{% if sub_collection %}
action="{{ url_for('book.collection_delete', book_id=book.id, collection_id=collection.id, sub_collection_id=sub_collection.id) }}"
{% else %}
action="{{ url_for('book.collection_delete', book_id=book.id, collection_id=collection.id) }}"
{% endif %}
id="delete_collection_modal_form"
action="{{ url_for('book.collection_delete', book_id=book.id, collection_id=0) }}"
method="post" class="relative bg-white rounded-lg shadow dark:bg-gray-700">
{{ form_hidden_tag() }}
<input type="hidden" name="collection_id" id="delete_collection_modal_collection_id" value="" />
<!-- Modal header -->
<div class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white"> Delete Collection </h3>
<button id="modalAddCloseButton" data-modal-hide="delete-collection-modal" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"> <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg> </button>
<button id="modalDeleteCollectionCloseButton" data-modal-hide="delete-collection-modal" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"> <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg> </button>
</div>
<!-- Modal body -->

15
app/templates/book/delete_section_modal.html
View File

@ -1,19 +1,20 @@
<!-- prettier-ignore-->
<div id="delete-collection-modal" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-[150] hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
<div id="delete-section-modal" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
<div class="relative w-full max-w-2xl max-h-full">
<!-- Modal content -->
<form
{% if sub_collection %}
action="{{ url_for('book.section_delete', book_id=book.id, collection_id=collection.id, sub_collection_id=sub_collection.id, section_id=section.id) }}"
{% else %}
action="{{ url_for('book.section_delete', book_id=book.id, collection_id=collection.id, section_id=section.id) }}"
{% endif %}
id="delete_section_modal_form"
action="{{ url_for('book.section_delete', book_id=book.id, collection_id=0, sub_collection_id=0, section_id=0) }}"
method="post" class="relative bg-white rounded-lg shadow dark:bg-gray-700">
{{ form_hidden_tag() }}
<input type="hidden" name="collection_id" id="delete_section_modal_collection_id" value="" />
<input type="hidden" name="sub_collection_id" id="delete_section_modal_sub_collection_id" value="" />
<input type="hidden" name="section_id" id="delete_section_modal_section_id" value="" />
<!-- Modal header -->
<div class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white"> Delete Section </h3>
<button id="modalAddCloseButton" data-modal-hide="delete-collection-modal" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"> <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg> </button>
<button id="modalDeleteSectionCloseButton" data-modal-hide="delete-section-modal" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"> <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg> </button>
</div>
<!-- Modal body -->

27
app/templates/book/delete_sub_collection_modal.html Normal file
View File

@ -0,0 +1,27 @@
<!-- Edit Collection modal -->
<!-- prettier-ignore-->
<div id="delete-sub-collection-modal" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
<div class="relative w-full max-w-2xl max-h-full">
<!-- Modal content -->
<form
id="delete_sub_collection_modal_form"
action="{{ url_for('book.collection_delete', book_id=book.id, collection_id=0, sub_collection_id=0) }}"
method="post" class="relative bg-white rounded-lg shadow dark:bg-gray-700">
{{ form_hidden_tag() }}
<input type="hidden" name="collection_id" id="delete_sub_collection_modal_collection_id" value="" />
<input type="hidden" name="sub_collection_id" id="delete_sub_collection_modal_sub_collection_id" value="" />
<!-- Modal header -->
<div class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white"> Delete Collection </h3>
<button id="modalDeleteSubCollectionCloseButton" data-modal-hide="delete-sub-collection-modal" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"> <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg> </button>
</div>
<!-- Modal body -->
<!-- Modal footer -->
<div class="flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
<button name="submit" type="submit" class="text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800">Confirm Deletion</button>
</div>
</form>
</div>
</div>

109
app/templates/book/favorite_books.html Normal file
View File

@ -0,0 +1,109 @@
<!-- prettier-ignore -->
{% extends 'base.html' %}
{% set selected_tab='favorite_books' %}
{% block content %}
<div
class="md:mr-64 relative overflow-x-auto shadow-md sm:rounded-lg mt-1 h-box w-box flex">
{% if not current_user.is_authenticated %}
<!-- prettier-ignore -->
<div class="mx-auto my-auto h-full w-full p-2">
<button type="button" id="connectWalletBtn" class="w-full h-full text-black dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-100 font-medium rounded-lg text-sm px-4 py-2.5 justify-center text-center inline-flex items-center border border-gray-200 dark:border-gray-700"><div class="my-auto"></div> Connect you wallet to see your favorite books! </div></button></div>
<!-- prettier-ignore -->
{% endif %}
{% if current_user.is_authenticated and not books %}
<!-- prettier-ignore -->
<div class="mx-auto my-auto h-full w-full p-2">
<button type="button" data-modal-target="add-book-modal" data-modal-toggle="add-book-modal" class="w-full h-full text-black dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-100 font-medium rounded-lg text-sm px-4 py-2.5 justify-center text-center inline-flex items-center border border-gray-200 dark:border-gray-700"><div class="my-auto"></div><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /> </svg> You don't have favorite books start to create your own! </div></button></div>
<!-- prettier-ignore -->
{% endif %}
<!-- prettier-ignore -->
<div class="flex flex-col w-4/5">
<h1 class=" text-lg font-extrabold dark:text-white ml-4">Fav books</h1>
{% for book in books %}
<!-- prettier-ignore -->
<dl class="bg-white dark:bg-gray-900 h-max w-full p-5 text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700 m-3 border-2 border-gray-200 border-solid rounded-lg dark:border-gray-700">
<dt class="mb-2"><a class="flex flex-col pb-4" href="{{url_for('book.collection_view',book_id=book.id)}}">{{book.label}}</a></dt>
<dd class="flex flex-col md:flex-row text-lg font-semibold text-gray-500 md:text-lg dark:text-gray-400">
{% if book.versions %}
<p>
Last updated on {{book.versions[-1].updated_at.strftime('%B %d, %Y')}}
</p>
{% endif %}
<div class="flex ml-auto align-center justify-center space-x-3">
<span class="book-star-block space-x-0.5 flex items-center">
<svg class="star-btn cursor-pointer w-4 h-4 inline-flex mr-1 {% if book.current_user_has_star %}fill-yellow-300{% endif %}" data-book-id={{ book.id }} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 22 22" stroke-width="1" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" /> </svg>
<a href={{ url_for('book.statistic_view', book_id=book.id ) }} class="total-stars">{{ book.stars|length }}</a>
</span>
<span class="space-x-0.5 flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 22 22" stroke-width="1" stroke="currentColor" class="w-4 h-4 inline-flex mr-1"> <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" /> </svg>
<p>{{ book.approved_interpretations|length }}</p>
</span>
<span class="space-x-0.5 flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 22 22" stroke-width="1" stroke="currentColor" class="w-4 h-4 inline-flex mr-1"> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" /> </svg>
<p>{{ book.approved_comments|length }}</p>
</span>
</div>
</dd>
</dl>
{% endfor %}
{% if current_user.is_authenticated and page.pages > 1 %}
<div class="container content-center mt-3 flex bg-white dark:bg-gray-800">
<nav aria-label="Page navigation example" class="mx-auto">
<ul class="inline-flex items-center -space-x-px">
<li>
<!-- prettier-ignore -->
<a href="{{ url_for('book.favorite_books') }}?page=1&q={{page.query}}" class="block px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
<span class="sr-only">First</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"> <path fill-rule="evenodd" d="M15.79 14.77a.75.75 0 01-1.06.02l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 111.04 1.08L11.832 10l3.938 3.71a.75.75 0 01.02 1.06zm-6 0a.75.75 0 01-1.06.02l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 111.04 1.08L5.832 10l3.938 3.71a.75.75 0 01.02 1.06z" clip-rule="evenodd" /> </svg>
</a>
</li>
<li>
<!-- prettier-ignore -->
<a href="{{ url_for('book.favorite_books') }}?page={{page.page-1 if page.page > 1 else 1}}&q={{page.query}}" class="block px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
<span class="sr-only">Previous</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"> <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" /> </svg>
</a>
</li>
<!-- prettier-ignore -->
{% for p in page.pages_for_links %}
<li>
<!-- prettier-ignore -->
{% if p == page.page %}
<!-- prettier-ignore -->
<a href="{{ url_for('book.favorite_books') }}?page={{p}}&q={{page.query}}" aria-current="page" class="z-10 px-3 py-2 leading-tight text-blue-600 border border-blue-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white">{{p}}</a>
{% else %}
<!-- prettier-ignore -->
<a href="{{ url_for('book.favorite_books') }}?page={{p}}&q={{page.query}}" class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">{{p}}</a>
{% endif %}
</li>
{% endfor %}
<li>
<!-- prettier-ignore -->
<a href="{{ url_for('book.favorite_books') }}?page={{page.page+1 if page.page < page.pages else page.pages}}&q={{page.query}}" class="block px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
<!-- prettier-ignore -->
<span class="sr-only">Next</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"> <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" /> </svg>
</a>
</li>
<li>
<!-- prettier-ignore -->
<a href="{{ url_for('book.favorite_books') }}?page={{page.pages}}&q={{page.query}}" class="block px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
<!-- prettier-ignore -->
<span class="sr-only">Last</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"> <path fill-rule="evenodd" d="M10.21 14.77a.75.75 0 01.02-1.06L14.168 10 10.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" /> <path fill-rule="evenodd" d="M4.21 14.77a.75.75 0 01.02-1.06L8.168 10 4.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" /> </svg>
</a>
</li>
</ul>
</nav>
</div>
{% endif %}
</div>
</div>
<!-- prettier-ignore -->
{% endblock %}
<!-- prettier-ignore -->
{% block scripts %}
{% endblock %}

25
app/templates/book/interpretation_view.html
View File

@ -4,14 +4,14 @@
{% if current_user.is_authenticated %}
{% include 'book/delete_section_modal.html' %}
{% include 'book/edit_section_modal.html' %}
{% include 'book/approve_interpretation_modal.html' %}
<!-- prettier-ignore -->
{% set show_delete_section = True %}
<!-- prettier-ignore -->
{% set show_edit_section = True %}
{% block right_sidebar %}
{% include 'book/right_sidebar.html' %}
{% endblock %}
{% block right_sidebar %}
{% include 'book/right_sidebar.html' %}
{% endblock %}
{% endif %}
@ -147,17 +147,14 @@
<a href="{{url_for('user.profile',user_id=interpretation.user.id)}}" class=" text-blue-500 {% if interpretation.user.is_deleted %}line-through{% endif %}">{{interpretation.user.username}}</a> on {{interpretation.created_at.strftime('%B %d, %Y')}}
</div>
<div class="flex ml-auto justify-between w-24">
<span class="space-x-0.5 flex items-center">
<button data-tooltip-target="tooltip-click" data-tooltip-trigger="click" id="copyLinkButton" type="button" class="hover:text-white focus:ring-2 rounded-full font-medium text-sm p-2.5 text-center inline-flex items-center dark:hover:text-white" data-link="{{ build_qa_url(interpretation) }}">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 8.25H7.5a2.25 2.25 0 00-2.25 2.25v9a2.25 2.25 0 002.25 2.25h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25H15m0-3l-3-3m0 0l-3 3m3-3V15" /> </svg>
</span>
</button>
<div id="tooltip-click" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"> Link copied! <div class="tooltip-arrow" data-popper-arrow></div> </div>
<div class="space-x-0.5 flex items-center">
<a
class="!cursor-pointer text-no-underline flex items-center"
{% if sub_collection %}
href="{{ url_for('book.qa_view', book_id=book.id, collection_id=collection.id, sub_collection_id=sub_collection.id, section_id=section.id, interpretation_id=interpretation.id) }}"
{% else %}
href="{{ url_for('book.qa_view', book_id=book.id, collection_id=collection.id, section_id=section.id, interpretation_id=interpretation.id) }}"
{% endif %}
href="{{ build_qa_url(interpretation) }}"
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 01-.825-.242m9.345-8.334a2.126 2.126 0 00-.476-.095 48.64 48.64 0 00-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0011.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" /> </svg>
<p class="select-none">{{interpretation.active_comments | length}}</p>
@ -169,6 +166,12 @@
</div>
</dl>
{% endfor %}
<span class="approved-interpretation-id hidden">
{% if section.approved_interpretation.approved %}
{{ section.approved_interpretation.id }}
{% endif %}
</span>
</dl>
</div>
</div>

150
app/templates/book/my_contributions.html Normal file
View File

@ -0,0 +1,150 @@
<!-- prettier-ignore -->
{% extends 'base.html' %}
{% set selected_tab='my_contributions' %}
{% block content %}
<div
class="md:mr-64 relative overflow-x-auto shadow-md sm:rounded-lg mt-1 h-box w-box flex">
{% if not current_user.is_authenticated %}
<!-- prettier-ignore -->
<div class="mx-auto my-auto h-full w-full p-2">
<button type="button" id="connectWalletBtn" class="w-full h-full text-black dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-100 font-medium rounded-lg text-sm px-4 py-2.5 justify-center text-center inline-flex items-center border border-gray-200 dark:border-gray-700"><div class="my-auto"></div> Connect you wallet to see your contributions! </div></button></div>
<!-- prettier-ignore -->
{% endif %}
{% if current_user.is_authenticated and current_user.stars|length== 0%}
<!-- prettier-ignore -->
<div class="mx-auto my-auto h-full w-full p-2">
<button type="button" data-modal-target="add-book-modal" data-modal-toggle="add-book-modal" class="w-full h-full text-black dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-100 font-medium rounded-lg text-sm px-4 py-2.5 justify-center text-center inline-flex items-center border border-gray-200 dark:border-gray-700"><div class="my-auto"></div><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /> </svg> You don't have favorite books start to create your own! </div></button></div>
<!-- prettier-ignore -->
{% endif %}
<!-- prettier-ignore -->
<div class="flex flex-col w-4/5">
<h1 class=" text-lg font-extrabold dark:text-white ml-4">My contributions</h1>
{% for interpretation in interpretations %}
<!-- prettier-ignore -->
<dl class="bg-white dark:bg-gray-900 max-w-full p-3 text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700 m-3 border-2 border-gray-200 border-solid rounded-lg dark:border-gray-700">
<div class="flex flex-row pb-3 p-3 w-2/3 md:w-10/12">
<div class="vote-block flex flex-col m-5 justify-center items-center">
{% if interpretation.user_id != current_user.id %}
<div class="vote-button cursor-pointer" data-vote-for="interpretation" data-entity-id="{{ interpretation.id }}" data-positive="true">
<svg class="w-6 h-6 select-none
{% if interpretation.current_user_vote %}
stroke-green-500
{% endif %}
" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" > <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5L12 3m0 0l7.5 7.5M12 3v18" /> </svg>
</div>
{% endif %}
<span
class="vote-count text-3xl select-none
{% if interpretation.vote_count < 0 %}
text-red-500
{% elif interpretation.vote_count > 0 %}
text-green-500
{% endif %}
"
>
{{ interpretation.vote_count }}
</span>
{% if interpretation.user_id != current_user.id %}
<div class="vote-button cursor-pointer" data-vote-for="interpretation" data-entity-id="{{ interpretation.id }}" data-positive="false">
<svg class="w-6 h-6 select-none
{% if interpretation.current_user_vote == False %}
stroke-red-500
{% endif %}
" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3" /> </svg>
</div>
{% endif %}
</div>
<!-- prettier-ignore -->
<dt class="flex w-full mb-1 text-gray-500 md:text-lg dark:text-gray-400 flex-col">
<div class="ql-snow truncate md:max-w-xl">
{% set local_breadcrumbs = interpretation.section.breadcrumbs_path %}
{% include 'book/local_breadcrumbs_navigation.html'%}
<p>{{ interpretation.section.label }}</p>
</a>
<div class="dark:text-white h-30 ql-editor-readonly">
<p>{{ interpretation.text|safe }}</p>
</div>
</div>
<div class="flex mt-auto align-center justify-between md:w-full">
<div>
<span class="hidden md:inline-block">Interpretation by</span>
<a href="{{url_for('user.profile',user_id=interpretation.user.id)}}" class=" text-blue-500 {% if interpretation.user.is_deleted %}line-through{% endif %}">{{interpretation.user.username}}</a> on {{interpretation.created_at.strftime('%B %d, %Y')}}
</div>
<div class="flex ml-auto justify-between w-24">
<button data-tooltip-target="tooltip-click" data-tooltip-trigger="click" id="copyLinkButton" type="button" class="hover:text-white focus:ring-2 rounded-full font-medium text-sm p-2.5 text-center inline-flex items-center dark:hover:text-white" data-link="{{ build_qa_url(interpretation) }}"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 8.25H7.5a2.25 2.25 0 00-2.25 2.25v9a2.25 2.25 0 002.25 2.25h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25H15m0-3l-3-3m0 0l-3 3m3-3V15" /> </svg> </button>
<div id="tooltip-click" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"> Link copied! <div class="tooltip-arrow" data-popper-arrow></div> </div>
<div class="space-x-0.5 flex items-center">
<a class="!cursor-pointer text-no-underline flex items-center" href="{{ build_qa_url(interpretation) }}" >
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 01-.825-.242m9.345-8.334a2.126 2.126 0 00-.476-.095 48.64 48.64 0 00-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0011.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" /> </svg>
<p>{{interpretation.active_comments | length}}</p>
</a>
</div>
</div>
</div>
</dt>
</div>
</dl>
{% endfor %}
{% if current_user.is_authenticated and page.pages > 1 %}
<div class="container content-center mt-3 flex bg-white dark:bg-gray-800">
<nav aria-label="Page navigation example" class="mx-auto">
<ul class="inline-flex items-center -space-x-px">
<li>
<!-- prettier-ignore -->
<a href="{{ url_for('book.my_contributions') }}?page=1&q={{page.query}}" class="block px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
<span class="sr-only">First</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"> <path fill-rule="evenodd" d="M15.79 14.77a.75.75 0 01-1.06.02l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 111.04 1.08L11.832 10l3.938 3.71a.75.75 0 01.02 1.06zm-6 0a.75.75 0 01-1.06.02l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 111.04 1.08L5.832 10l3.938 3.71a.75.75 0 01.02 1.06z" clip-rule="evenodd" /> </svg>
</a>
</li>
<li>
<!-- prettier-ignore -->
<a href="{{ url_for('book.my_contributions') }}?page={{page.page-1 if page.page > 1 else 1}}&q={{page.query}}" class="block px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
<span class="sr-only">Previous</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"> <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" /> </svg>
</a>
</li>
<!-- prettier-ignore -->
{% for p in page.pages_for_links %}
<li>
<!-- prettier-ignore -->
{% if p == page.page %}
<!-- prettier-ignore -->
<a href="{{ url_for('book.my_contributions') }}?page={{p}}&q={{page.query}}" aria-current="page" class="z-10 px-3 py-2 leading-tight text-blue-600 border border-blue-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white">{{p}}</a>
{% else %}
<!-- prettier-ignore -->
<a href="{{ url_for('book.my_contributions') }}?page={{p}}&q={{page.query}}" class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">{{p}}</a>
{% endif %}
</li>
{% endfor %}
<li>
<!-- prettier-ignore -->
<a href="{{ url_for('book.my_contributions') }}?page={{page.page+1 if page.page < page.pages else page.pages}}&q={{page.query}}" class="block px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
<!-- prettier-ignore -->
<span class="sr-only">Next</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"> <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" /> </svg>
</a>
</li>
<li>
<!-- prettier-ignore -->
<a href="{{ url_for('book.my_contributions') }}?page={{page.pages}}&q={{page.query}}" class="block px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
<!-- prettier-ignore -->
<span class="sr-only">Last</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"> <path fill-rule="evenodd" d="M10.21 14.77a.75.75 0 01.02-1.06L14.168 10 10.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" /> <path fill-rule="evenodd" d="M4.21 14.77a.75.75 0 01.02-1.06L8.168 10 4.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" /> </svg>
</a>
</li>
</ul>
</nav>
</div>
{% endif %}
</div>
</div>
<!-- prettier-ignore -->
{% endblock %}
<!-- prettier-ignore -->
{% block scripts %}
{% endblock %}

9
app/templates/book/index.html → app/templates/book/my_library.html
View File

@ -24,10 +24,11 @@
{% endif %}
<!-- prettier-ignore -->
<div class="flex flex-col w-4/5">
<h1 class=" text-lg font-extrabold dark:text-white ml-4">My library</h1>
{% for book in books if not book.is_deleted%}
<!-- prettier-ignore -->
<dl class="bg-white dark:bg-gray-900 h-max w-full p-5 text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700 m-3 border-2 border-gray-200 border-solid rounded-lg dark:border-gray-700">
<dt class="mb-2"><a class="flex flex-col pb-4" href="{{url_for('book.collection_view',book_id=book.id)}}">{{book.owner.username}}/{{book.label}}</a></dt>
<dt class="mb-2"><a class="flex flex-col pb-4" href="{{url_for('book.collection_view',book_id=book.id)}}">{{book.label}}</a></dt>
<dd class="flex flex-col md:flex-row text-lg font-semibold text-gray-500 md:text-lg dark:text-gray-400">
{% if book.versions %}
<p>
@ -51,7 +52,7 @@
</dd>
</dl>
{% endfor %}
</div>
<!-- prettier-ignore -->
{% if current_user.is_authenticated and page.pages > 1 %}
<div class="container content-center mt-3 flex bg-white dark:bg-gray-800">
@ -106,8 +107,8 @@
</nav>
</div>
{% endif %}
</div>
{% include 'user/add.html' %}
</div>
</div>
<!-- prettier-ignore -->
{% endblock %}
<!-- prettier-ignore -->

2
app/templates/book/qa_view.html
View File

@ -89,7 +89,7 @@
<dl class="w-md md:w-full text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700">
<!-- prettier-ignore -->
<div class="text-sm dark:text-white p-3">Comments:</div>
{% for comment in interpretation.comments if not comment.is_deleted %}
{% for comment in interpretation.comments if not comment.is_deleted and not comment.parent_id%}
<!-- prettier-ignore -->
<dl class="bg-white dark:bg-gray-900 max-w-full p-3 text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700 m-3 border-2 border-gray-200 border-solid rounded-lg dark:border-gray-700">
<div class="flex flex-row pb-3 p-3 w-2/3 md:w-full">

4
app/templates/book/stat.html
View File

@ -16,13 +16,13 @@
</li>
<li class="mr-2 w-full md:w-auto" role="presentation">
<!-- prettier-ignore -->
<button class="inline-flex p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300" id="contributors-tab" data-tabs-target="#contributors" type="button" role="tab" aria-controls="contributors" aria-selected="false"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-3"> <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" /> </svg>
<button class="inline-flex p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300" id="contributors-tab" data-tabs-target="#contributors" type="button" role="tab" aria-controls="contributors" {% if active_tab=='contributors' %}aria-selected="true"{% endif %}><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-3"> <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" /> </svg>
Contributors
</button>
</li>
<li class="mr-2 w-full md:w-auto" role="presentation">
<!-- prettier-ignore -->
<button class="inline-flex p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300" id="fork-tab" data-tabs-target="#fork" type="button" role="tab" aria-controls="fork" aria-selected="false"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-3"> <path stroke-linecap="round" stroke-linejoin="round" d="M7.217 10.907a2.25 2.25 0 100 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186l9.566-5.314m-9.566 7.5l9.566 5.314m0 0a2.25 2.25 0 103.935 2.186 2.25 2.25 0 00-3.935-2.186zm0-12.814a2.25 2.25 0 103.933-2.185 2.25 2.25 0 00-3.933 2.185z" /> </svg>
<button class="inline-flex p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300" id="fork-tab" data-tabs-target="#fork" type="button" role="tab" aria-controls="fork" {% if active_tab=='forks' %}aria-selected="true"{% endif %}><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-3"> <path stroke-linecap="round" stroke-linejoin="round" d="M7.217 10.907a2.25 2.25 0 100 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186l9.566-5.314m-9.566 7.5l9.566 5.314m0 0a2.25 2.25 0 103.935 2.186 2.25 2.25 0 00-3.935-2.186zm0-12.814a2.25 2.25 0 103.933-2.185 2.25 2.25 0 00-3.933 2.185z" /> </svg>
Forks
</button>
</li>

8
app/templates/header.html
View File

@ -130,16 +130,16 @@
<span class="text-center md:text-left">My Library</span>
</a>
</li>
<li class="my-auto">
<li class="mx-2 {% if selected_tab == 'my_contributions' %} bg-slate-300 dark:bg-slate-700 rounded-lg {% endif %}">
<a
href="#"
href="{{url_for('book.my_contributions')}}"
class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
<span class="text-center md:text-left">My Contributions</span>
</a>
</li>
<li>
<li class="mx-2 {% if selected_tab == 'favorite_books' %} bg-slate-300 dark:bg-slate-700 rounded-lg {% endif %}">
<a
href="#"
href="{{ url_for('book.favorite_books')}}"
class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
<span class="text-center md:text-left">Favorite Books</span>
</a>

13
app/templates/home/index.html
View File

@ -82,12 +82,15 @@
<a href="{{url_for('user.profile',user_id=interpretation.user.id)}}" class=" text-blue-500 {% if interpretation.user.is_deleted %}line-through{% endif %}">{{interpretation.user.username}}</a> on {{interpretation.created_at.strftime('%B %d, %Y')}}
</div>
<div class="flex ml-auto justify-between w-24">
<span class="space-x-0.5 flex items-center">
<button data-tooltip-target="tooltip-click" data-tooltip-trigger="click" id="copyLinkButton" type="button" class="hover:text-white focus:ring-2 rounded-full font-medium text-sm p-2.5 text-center inline-flex items-center dark:hover:text-white" data-link="{{ build_qa_url(interpretation) }}">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 8.25H7.5a2.25 2.25 0 00-2.25 2.25v9a2.25 2.25 0 002.25 2.25h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25H15m0-3l-3-3m0 0l-3 3m3-3V15" /> </svg>
</span>
</button>
<div id="tooltip-click" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"> Link copied! <div class="tooltip-arrow" data-popper-arrow></div> </div>
<div class="space-x-0.5 flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 01-.825-.242m9.345-8.334a2.126 2.126 0 00-.476-.095 48.64 48.64 0 00-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0011.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" /> </svg>
<p>{{interpretation.active_comments | length}}</p>
<a class="!cursor-pointer text-no-underline flex items-center" href="{{ build_qa_url(interpretation) }}" >
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 01-.825-.242m9.345-8.334a2.126 2.126 0 00-.476-.095 48.64 48.64 0 00-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0011.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" /> </svg>
<p>{{interpretation.active_comments | length}}</p>
</a>
</div>
</div>
</div>
@ -102,7 +105,7 @@
{% for book in books if not book.is_deleted %}
<!-- prettier-ignore -->
<dl class=" bg-white dark:bg-gray-900 max-w-full p-5 text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700 m-3 border-2 border-gray-200 border-solid rounded-lg dark:border-gray-700">
<dt class="mb-2"><a class="flex flex-col pb-4" href="{{url_for('book.collection_view',book_id=book.id)}}">{{book.owner.username}}/{{book.label}}</a></dt>
<dt class="mb-2"><a class="flex flex-col pb-4" href="{{url_for('book.collection_view',book_id=book.id)}}">{{book.label}}</a></dt>
<dd class="flex flex-col md:flex-row text-lg font-semibold text-gray-500 md:text-lg dark:text-gray-400">
{% if book.versions %}
<p> Last updated by <a href="{{url_for('user.profile',user_id=book.owner.id)}}" class=" text-blue-500 {% if book.owner.is_deleted %}line-through{% endif %}">{{book.owner.username}}</a> on {{book.versions[-1].updated_at.strftime('%B %d, %Y')}} </p>

13
app/templates/user/profile.html
View File

@ -45,7 +45,7 @@
{% for book in user.books if not book.is_deleted %}
<!-- prettier-ignore -->
<dl class="bg-white dark:bg-gray-900 h-max w-full p-5 text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700 m-3 border-2 border-gray-200 border-solid rounded-lg dark:border-gray-700">
<dt class="mb-2"><a class="flex flex-col pb-4" href="{{url_for('book.collection_view',book_id=book.id)}}">{{book.owner.username}}/{{book.label}}</a></dt>
<dt class="mb-2"><a class="flex flex-col pb-4" href="{{url_for('book.collection_view',book_id=book.id)}}">{{book.label}}</a></dt>
<dd class="flex flex-col md:flex-row text-lg font-semibold text-gray-500 md:text-lg dark:text-gray-400">
{% if book.versions %}
<p>
@ -126,12 +126,13 @@
<a href="{{url_for('user.profile',user_id=interpretation.user.id)}}" class=" text-blue-500 {% if interpretation.user.is_deleted %}line-through{% endif %}">{{interpretation.user.username}}</a> on {{interpretation.created_at.strftime('%B %d, %Y')}}
</div>
<div class="flex ml-auto justify-between w-24">
<span class="space-x-0.5 flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 8.25H7.5a2.25 2.25 0 00-2.25 2.25v9a2.25 2.25 0 002.25 2.25h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25H15m0-3l-3-3m0 0l-3 3m3-3V15" /> </svg>
</span>
<button data-tooltip-target="tooltip-click" data-tooltip-trigger="click" id="copyLinkButton" type="button" class="hover:text-white focus:ring-2 rounded-full font-medium text-sm p-2.5 text-center inline-flex items-center dark:hover:text-white" data-link="{{ build_qa_url(interpretation) }}"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 8.25H7.5a2.25 2.25 0 00-2.25 2.25v9a2.25 2.25 0 002.25 2.25h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25H15m0-3l-3-3m0 0l-3 3m3-3V15" /> </svg> </button>
<div id="tooltip-click" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"> Link copied! <div class="tooltip-arrow" data-popper-arrow></div> </div>
<div class="space-x-0.5 flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 01-.825-.242m9.345-8.334a2.126 2.126 0 00-.476-.095 48.64 48.64 0 00-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0011.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" /> </svg>
<p>{{interpretation.active_comments | length}}</p>
<a class="!cursor-pointer text-no-underline flex items-center" href="{{ build_qa_url(interpretation) }}" >
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 01-.825-.242m9.345-8.334a2.126 2.126 0 00-.476-.095 48.64 48.64 0 00-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0011.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" /> </svg>
<p>{{interpretation.active_comments | length}}</p>
</a>
</div>
</div>
</div>

18
app/views/approve.py
View File

@ -33,6 +33,24 @@ def approve_interpretation(interpretation_id: int):
)
return jsonify({"message": "You dont have permission"}), 404
already_approved_interpretations = (
m.Interpretation.query.filter_by(
approved=True, section_id=interpretation.section_id
)
.filter(m.Interpretation.id != interpretation.id)
.all()
)
for approved_interpretation in already_approved_interpretations:
approved_interpretation: m.Interpretation
approved_interpretation.approved = False
log(
log.INFO,
"User [%s] revoked the approval of the interpretation: [%s]",
current_user,
interpretation,
)
approved_interpretation.save(False)
interpretation.approved = not interpretation.approved
log(
log.INFO,

75
app/views/book/book.py
View File

@ -6,6 +6,7 @@ from flask import (
request,
)
from flask_login import login_required, current_user
from sqlalchemy import and_, or_
from app.controllers import (
create_pagination,
@ -40,25 +41,20 @@ def get_all():
)
@bp.route("/", methods=["GET"])
@bp.route("/my_library", methods=["GET"])
def my_library():
if current_user.is_authenticated:
q = request.args.get("q", type=str, default=None)
books: m.Book = m.Book.query.order_by(m.Book.id)
books = books.filter_by(user_id=current_user.id, is_deleted=False)
if q:
books = books.filter(m.Book.label.like(f"{q}"))
pagination = create_pagination(total=books.count())
return render_template(
"book/index.html",
"book/my_library.html",
books=books.paginate(page=pagination.page, per_page=pagination.per_page),
page=pagination,
search_query=q,
)
return render_template(
"book/index.html",
"book/my_library.html",
books=[],
)
@ -146,3 +142,66 @@ def statistic_view(book_id: int):
flash("Book not found", "danger")
return redirect(url_for("book.my_library"))
return render_template("book/stat.html", book=book)
@bp.route("/favorite_books", methods=["GET"])
def favorite_books():
if current_user.is_authenticated:
books = (
db.session.query(
m.Book,
)
.filter(
and_(
m.Book.id == m.BookStar.book_id,
m.BookStar.user_id == current_user.id,
m.Book.is_deleted.is_(False),
)
)
.order_by(m.Book.created_at.desc())
)
books = books.filter_by(is_deleted=False)
pagination = create_pagination(total=books.count())
return render_template(
"book/favorite_books.html",
books=books.paginate(page=pagination.page, per_page=pagination.per_page),
page=pagination,
)
return render_template("book/favorite_books.html", books=[])
@bp.route("/my_contributions", methods=["GET"])
def my_contributions():
interpretations = (
db.session.query(
m.Interpretation,
)
.filter(
or_(
and_(
m.Interpretation.id == m.Comment.interpretation_id,
m.Comment.user_id == current_user.id,
m.Comment.is_deleted.is_(False),
m.Interpretation.is_deleted.is_(False),
),
and_(
m.Interpretation.user_id == current_user.id,
m.Interpretation.is_deleted.is_(False),
),
)
)
.group_by(m.Interpretation.id)
.order_by(m.Interpretation.created_at.desc())
)
pagination = create_pagination(total=interpretations.count())
return render_template(
"book/my_contributions.html",
interpretations=interpretations.paginate(
page=pagination.page, per_page=pagination.per_page
),
page=pagination,
)

14
app/views/book/collection.py
View File

@ -124,9 +124,7 @@ def collection_create(book_id: int, collection_id: int | None = None):
flash("Success!", "success")
if collection_id:
redirect_url = url_for(
"book.sub_collection_view", book_id=book_id, collection_id=collection_id
)
redirect_url = url_for("book.collection_view", book_id=book_id)
return redirect(redirect_url)
else:
log(log.ERROR, "Collection/Subcollection create errors: [%s]", form.errors)
@ -153,9 +151,8 @@ def collection_edit(
form = f.EditCollectionForm()
redirect_url = url_for(
"book.sub_collection_view",
"book.collection_view",
book_id=book_id,
collection_id=collection_id,
)
if form.validate_on_submit():
@ -194,13 +191,6 @@ def collection_edit(
collection.save()
flash("Success!", "success")
if sub_collection_id:
redirect_url = url_for(
"book.section_view",
book_id=book_id,
collection_id=collection_id,
sub_collection_id=sub_collection_id,
)
return redirect(redirect_url)
else:
log(log.ERROR, "Collection edit errors: [%s]", form.errors)

4
app/views/book/section.py
View File

@ -94,10 +94,8 @@ def section_create(
redirect_url = url_for("book.collection_view", book_id=book_id)
if collection_id:
redirect_url = url_for(
"book.section_view",
"book.collection_view",
book_id=book_id,
collection_id=collection_id,
sub_collection_id=sub_collection_id,
)
form = f.CreateSectionForm()

69
src/addSection.ts Normal file
View File

@ -0,0 +1,69 @@
import {Modal} from 'flowbite';
import type {ModalOptions, ModalInterface} from 'flowbite';
export function addSection() {
const addSectionModal: HTMLElement =
document.querySelector('#add-section-modal');
const addSectionModalBtns = document.querySelectorAll('#callAddSectionModal');
const collectionIdInAddSectionModal: HTMLInputElement =
document.querySelector('#add_section_modal_collection_id');
const subCollectionIdInAddSectionModal: HTMLInputElement =
document.querySelector('#add_section_modal_sub_collection_id');
const addSectionForm: HTMLFormElement = document.querySelector(
'#add_section_modal_form',
);
if (
addSectionModal &&
addSectionModalBtns &&
collectionIdInAddSectionModal &&
subCollectionIdInAddSectionModal &&
addSectionForm
) {
const defaultActionPath = addSectionForm.getAttribute('action');
const addModalCloseBtn = document.querySelector('#modalSectionCloseButton');
if (addModalCloseBtn) {
addModalCloseBtn.addEventListener('click', () => {
sectionModal.hide();
});
}
addSectionModalBtns.forEach(btn =>
btn.addEventListener('click', () => {
const collectionId = btn.getAttribute('data-collection-id');
const subCollectionId = btn.getAttribute('data-sub-collection-id');
collectionIdInAddSectionModal.value = collectionId;
subCollectionIdInAddSectionModal.value = subCollectionId;
let newActionPath: string = '';
if (subCollectionId === '_') {
newActionPath = defaultActionPath.replace(
'0/0/create_section',
`${collectionId}/create_section`,
);
} else {
newActionPath = defaultActionPath.replace(
'0/0/create_section',
`${collectionId}/${subCollectionId}/create_section`,
);
}
addSectionForm.setAttribute('action', `${newActionPath}`);
sectionModal.show();
}),
);
const modalOptions: ModalOptions = {
placement: 'bottom-right',
closable: true,
onHide: () => {
addSectionForm.setAttribute('action', '');
},
onShow: () => {},
onToggle: () => {},
};
const sectionModal: ModalInterface = new Modal(
addSectionModal,
modalOptions,
);
}
}

61
src/addSubCollection.ts Normal file
View File

@ -0,0 +1,61 @@
import {Modal} from 'flowbite';
import type {ModalOptions, ModalInterface} from 'flowbite';
export function addSubCollection() {
const addSubCollectionModal: HTMLElement = document.querySelector(
'#add-sub-collection-modal',
);
const addSubCollectionModalBtns = document.querySelectorAll(
'#callAddSubCollectionModal',
);
const collectionIdInAddSubCollectionModal: HTMLInputElement =
document.querySelector('#add_sub_collection_modal_collection_id');
const addSubCollectionForm: HTMLFormElement = document.querySelector(
'#add_sub_collection_modal_form',
);
if (
addSubCollectionModal &&
addSubCollectionModalBtns &&
collectionIdInAddSubCollectionModal &&
addSubCollectionForm
) {
const defaultActionPath = addSubCollectionForm.getAttribute('action');
const addModalCloseBtn = document.querySelector(
'#modalSubCollectionCloseButton',
);
if (addModalCloseBtn) {
addModalCloseBtn.addEventListener('click', () => {
subCollectionModal.hide();
});
}
addSubCollectionModalBtns.forEach(btn =>
btn.addEventListener('click', () => {
const collectionId = btn.getAttribute('data-collection-id');
collectionIdInAddSubCollectionModal.value = collectionId;
const newActionPath = defaultActionPath.replace(
'create_collection',
`${collectionId}/create_sub_collection`,
);
addSubCollectionForm.setAttribute('action', `${newActionPath}`);
subCollectionModal.show();
}),
);
const modalOptions: ModalOptions = {
placement: 'bottom-right',
closable: true,
onHide: () => {
addSubCollectionForm.setAttribute('action', '');
},
onShow: () => {},
onToggle: () => {},
};
const subCollectionModal: ModalInterface = new Modal(
addSubCollectionModal,
modalOptions,
);
}
}

78
src/approve.ts
View File

@ -1,8 +1,31 @@
import {Modal} from 'flowbite';
import type {ModalOptions, ModalInterface} from 'flowbite';
const REQUEST_URLS: {[key: string]: string} = {
interpretation: '/approve/interpretation/',
comment: '/approve/comment/',
};
const setAllApproveIconsToInactive = () => {
const approvedIconElements = document.querySelectorAll('.approved-icon');
approvedIconElements.forEach(el => {
el.classList.remove('hidden');
el.classList.add('hidden');
});
const notApprovedIconElements =
document.querySelectorAll('.not-approved-icon');
notApprovedIconElements.forEach(el => {
el.classList.remove('hidden');
});
};
// prettier-ignore
const $approveInterpretationModalElement: HTMLElement = document.querySelector( '#approve_interpretation_modal', );
const modalOptions: ModalOptions = {onShow: () => {}};
// prettier-ignore
const approveModal: ModalInterface = new Modal( $approveInterpretationModalElement, modalOptions, );
const approveClickEventListener = async (btn: Element) => {
const approve = btn.getAttribute('data-approve');
@ -13,6 +36,54 @@ const approveClickEventListener = async (btn: Element) => {
const entityId = btn.getAttribute('data-entity-id');
const approvedInterpretationIdBlock = document.querySelector(
'.approved-interpretation-id',
);
if (approve == 'interpretation') {
// prettier-ignore
if (approvedInterpretationIdBlock) {
const approvedInterpretationId = parseInt(
approvedInterpretationIdBlock.innerHTML,
);
if (approvedInterpretationId && approvedInterpretationId != parseInt(entityId)) {
approveModal.show();
const approvedInterpretationForm: HTMLFormElement =
document.querySelector('#approve-interpretation-form');
const submitFormEventListener = async (e: any) => {
e.preventDefault();
approvedInterpretationForm.removeEventListener(
'submit',
submitFormEventListener,
);
sendApproveRequest(
approve,
entityId,
btn,
approvedInterpretationIdBlock,
);
setAllApproveIconsToInactive();
approveModal.hide();
};
approvedInterpretationForm.addEventListener(
'submit',
submitFormEventListener,
);
return;
}
}
}
sendApproveRequest(approve, entityId, btn, approvedInterpretationIdBlock);
};
const sendApproveRequest = async (
approve: string,
entityId: string,
btn: Element,
approvedInterpretationIdBlock?: Element,
) => {
const requestUrl = REQUEST_URLS[approve] + entityId;
const response = await fetch(requestUrl, {
method: 'POST',
@ -24,6 +95,13 @@ const approveClickEventListener = async (btn: Element) => {
const json = await response.json();
const approved = json.approve;
if (approve == 'interpretation') {
if (approved) {
approvedInterpretationIdBlock!.innerHTML = entityId;
} else {
approvedInterpretationIdBlock!.innerHTML = '';
}
}
const approvedIconSvg = btn.querySelector('.approved-icon');
const notApprovedIconSvg = btn.querySelector('.not-approved-icon');

20
src/copyLink.ts Normal file
View File

@ -0,0 +1,20 @@
export function copyLink() {
const btns = document.querySelectorAll('#copyLinkButton');
if (btns) {
btns.forEach(btn =>
btn.addEventListener('click', () => {
const copiedLink = btn.getAttribute('data-link');
const el = document.createElement(`textarea`);
let text = window.location.host;
el.value = `${text}${copiedLink}`;
el.setAttribute(`readonly`, ``);
el.style.position = `absolute`;
el.style.left = `-9999px`;
document.body.appendChild(el);
el.select();
document.execCommand(`copy`);
document.body.removeChild(el);
}),
);
}
}

64
src/deleteCollection.ts Normal file
View File

@ -0,0 +1,64 @@
import {Modal} from 'flowbite';
import type {ModalOptions, ModalInterface} from 'flowbite';
export function deleteCollection() {
const deleteCollectionModal: HTMLElement = document.querySelector(
'#delete-collection-modal',
);
const deleteCollectionModalBtns = document.querySelectorAll(
'#callDeleteCollectionModal',
);
const collectionIdInDeleteCollectionModal: HTMLInputElement =
document.querySelector('#delete_collection_modal_collection_id');
const deleteCollectionForm: HTMLFormElement = document.querySelector(
'#delete_collection_modal_form',
);
if (
deleteCollectionModal &&
deleteCollectionModalBtns &&
collectionIdInDeleteCollectionModal &&
deleteCollectionForm
) {
const defaultActionPath = deleteCollectionForm.getAttribute('action');
const deleteModalCloseBtn = document.querySelector(
'#modalDeleteCollectionCloseButton',
);
if (deleteModalCloseBtn) {
deleteModalCloseBtn.addEventListener('click', () => {
collectionDeleteModal.hide();
});
}
deleteCollectionModalBtns.forEach(btn =>
btn.addEventListener('click', () => {
const collectionId = btn.getAttribute('data-collection-id');
collectionIdInDeleteCollectionModal.value = collectionId;
let newActionPath: string = '';
newActionPath = defaultActionPath.replace(
'0/delete',
`${collectionId}/delete`,
);
deleteCollectionForm.setAttribute('action', `${newActionPath}`);
collectionDeleteModal.show();
}),
);
const modalOptions: ModalOptions = {
placement: 'bottom-right',
closable: true,
onHide: () => {
deleteCollectionForm.setAttribute('action', '');
},
onShow: () => {},
onToggle: () => {},
};
const collectionDeleteModal: ModalInterface = new Modal(
deleteCollectionModal,
modalOptions,
);
}
}

80
src/deleteSection.ts Normal file
View File

@ -0,0 +1,80 @@
import {Modal} from 'flowbite';
import type {ModalOptions, ModalInterface} from 'flowbite';
export function deleteSection() {
const deleteSectionModal: HTMLElement = document.querySelector(
'#delete-section-modal',
);
const deleteSectionModalBtns = document.querySelectorAll(
'#callDeleteSectionModal',
);
const collectionIdInDeleteSectionModal: HTMLInputElement =
document.querySelector('#delete_section_modal_collection_id');
const subCollectionIdInDeleteSectionModal: HTMLInputElement =
document.querySelector('#delete_section_modal_sub_collection_id');
const sectionIdInDeleteSectionModal: HTMLInputElement =
document.querySelector('#delete_section_modal_section_id');
const deleteSectionForm: HTMLFormElement = document.querySelector(
'#delete_section_modal_form',
);
if (
deleteSectionModal &&
deleteSectionModalBtns &&
collectionIdInDeleteSectionModal &&
subCollectionIdInDeleteSectionModal &&
sectionIdInDeleteSectionModal &&
deleteSectionForm
) {
const defaultActionPath = deleteSectionForm.getAttribute('action');
const deleteModalCloseBtn = document.querySelector(
'#modalDeleteSectionCloseButton',
);
if (deleteModalCloseBtn) {
deleteModalCloseBtn.addEventListener('click', () => {
sectionDeleteModal.hide();
});
}
deleteSectionModalBtns.forEach(btn =>
btn.addEventListener('click', () => {
const collectionId = btn.getAttribute('data-collection-id');
const subCollectionId = btn.getAttribute('data-sub-collection-id');
const sectionId = btn.getAttribute('data-section-id');
collectionIdInDeleteSectionModal.value = collectionId;
subCollectionIdInDeleteSectionModal.value = subCollectionId;
sectionIdInDeleteSectionModal.value = sectionId;
let newActionPath: string = '';
if (subCollectionId === '_') {
newActionPath = defaultActionPath.replace(
'0/0/0/delete_section',
`${collectionId}/${sectionId}/delete_section`,
);
} else {
newActionPath = defaultActionPath.replace(
'0/0/0/delete_section',
`${collectionId}/${subCollectionId}/${sectionId}/delete_section`,
);
}
deleteSectionForm.setAttribute('action', `${newActionPath}`);
sectionDeleteModal.show();
}),
);
const modalOptions: ModalOptions = {
placement: 'bottom-right',
closable: true,
onHide: () => {
deleteSectionForm.setAttribute('action', '');
},
onShow: () => {},
onToggle: () => {},
};
const sectionDeleteModal: ModalInterface = new Modal(
deleteSectionModal,
modalOptions,
);
}
}

68
src/deleteSubCollection.ts Normal file
View File

@ -0,0 +1,68 @@
import {Modal} from 'flowbite';
import type {ModalOptions, ModalInterface} from 'flowbite';
export function deleteSubCollection() {
const deleteSubCollectionModal: HTMLElement = document.querySelector(
'#delete-sub-collection-modal',
);
const deleteSubCollectionModalBtns = document.querySelectorAll(
'#callDeleteSubCollectionModal',
);
const collectionIdInDeleteSubCollectionModal: HTMLInputElement =
document.querySelector('#delete_sub_collection_modal_collection_id');
const subCollectionIdInDeleteSubCollectionModal: HTMLInputElement =
document.querySelector('#delete_sub_collection_modal_sub_collection_id');
const deleteSubCollectionForm: HTMLFormElement = document.querySelector(
'#delete_sub_collection_modal_form',
);
if (
deleteSubCollectionModal &&
deleteSubCollectionModalBtns &&
collectionIdInDeleteSubCollectionModal &&
subCollectionIdInDeleteSubCollectionModal &&
deleteSubCollectionForm
) {
const defaultActionPath = deleteSubCollectionForm.getAttribute('action');
const deleteModalCloseBtn = document.querySelector(
'#modalDeleteSubCollectionCloseButton',
);
if (deleteModalCloseBtn) {
deleteModalCloseBtn.addEventListener('click', () => {
subCollectionDeleteModal.hide();
});
}
deleteSubCollectionModalBtns.forEach(btn =>
btn.addEventListener('click', () => {
const collectionId = btn.getAttribute('data-collection-id');
const subCollectionId = btn.getAttribute('data-sub-collection-id');
collectionIdInDeleteSubCollectionModal.value = collectionId;
let newActionPath: string = '';
newActionPath = defaultActionPath.replace(
'0/0/delete',
`${collectionId}/${subCollectionId}/delete`,
);
deleteSubCollectionForm.setAttribute('action', `${newActionPath}`);
subCollectionDeleteModal.show();
}),
);
const modalOptions: ModalOptions = {
placement: 'bottom-right',
closable: true,
onHide: () => {
deleteSubCollectionForm.setAttribute('action', '');
},
onShow: () => {},
onToggle: () => {},
};
const subCollectionDeleteModal: ModalInterface = new Modal(
deleteSubCollectionModal,
modalOptions,
);
}
}

24
src/main.ts
View File

@ -9,7 +9,19 @@ import {initTheme} from './theme';
import {initApprove} from './approve';
import {initStar} from './star';
import {initMultipleInput} from './multipleInput';
import {rightClick} from './rightClick';
import {addSubCollection} from './addSubCollection';
import {addSection} from './addSection';
import {deleteSection} from './deleteSection';
import {renameSection} from './renameSection';
import {deleteCollection} from './deleteCollection';
import {deleteSubCollection} from './deleteSubCollection';
import {renameCollection} from './renameCollection';
import {renameSubCollection} from './renameSubCollection';
import {initQuillReadOnly} from './initQuillReadOnly';
import {initGoBack} from './tabGoBackBtn';
import {scroll} from './scroll';
import {copyLink} from './copyLink';
initQuillReadOnly();
initBooks();
@ -23,3 +35,15 @@ initTheme();
initApprove();
initStar();
initMultipleInput();
rightClick();
addSubCollection();
addSection();
deleteSection();
renameSection();
deleteCollection();
renameCollection();
deleteSubCollection();
renameSubCollection();
initGoBack();
scroll();
copyLink();

47
src/renameCollection.ts Normal file
View File

@ -0,0 +1,47 @@
export function renameCollection() {
const renameCollectionBtns = document.querySelectorAll(
'[id^="rename-collection-button-"]',
);
const collectionRenameForms: NodeListOf<HTMLFormElement> =
document.querySelectorAll('[id^="rename-collection-label-form-"]');
if (renameCollectionBtns.length > 0 && collectionRenameForms.length > 0) {
renameCollectionBtns.forEach((btn, index) => {
btn.addEventListener('click', () => {
const inputsForRename: NodeListOf<HTMLInputElement> =
document.querySelectorAll(`[id^="edit-collection-label-"]`);
inputsForRename[index].removeAttribute('readonly');
const oldName = inputsForRename[index].value;
inputsForRename[index].value = '';
inputsForRename[index].focus();
inputsForRename[index].addEventListener('blur', () => {
inputsForRename[index].value = oldName;
});
collectionRenameForms[index].addEventListener('submit', async e => {
e.preventDefault();
const bookId =
collectionRenameForms[index].getAttribute('data-book-id');
const collectionId =
collectionRenameForms[index].getAttribute('data-collection-id');
const newLabel = inputsForRename[index].value;
inputsForRename[index].readOnly = true;
let url = `/book/${bookId}/${collectionId}/edit`;
const response = await fetch(url, {
method: 'POST',
credentials: 'include',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
label: newLabel,
}),
});
if (response.status == 200) {
location.reload();
} else return;
});
});
});
}
}

57
src/renameSection.ts Normal file
View File

@ -0,0 +1,57 @@
export function renameSection() {
const renameSectionBtns = document.querySelectorAll(
'[id^="rename-section-button-"]',
);
const sectionRenameForms: NodeListOf<HTMLFormElement> =
document.querySelectorAll('[id^="rename-section-label-form-"]');
if (renameSectionBtns.length > 0 && sectionRenameForms.length > 0) {
renameSectionBtns.forEach((btn, index) => {
btn.addEventListener('click', () => {
const inputsForRename: NodeListOf<HTMLInputElement> =
document.querySelectorAll(`[id^="edit-section-label-"]`);
const oldName = inputsForRename[index].value;
inputsForRename[index].removeAttribute('readonly');
inputsForRename[index].value = '';
inputsForRename[index].focus();
inputsForRename[index].addEventListener('blur', () => {
inputsForRename[index].value = oldName;
});
sectionRenameForms[index].addEventListener('submit', async e => {
e.preventDefault();
const bookId = sectionRenameForms[index].getAttribute('data-book-id');
const collectionId =
sectionRenameForms[index].getAttribute('data-collection-id');
const subCollectionId = sectionRenameForms[index].getAttribute(
'data-sub-collection-id',
);
const sectionId =
sectionRenameForms[index].getAttribute('data-section-id');
const newLabel = inputsForRename[index].value;
inputsForRename[index].readOnly = true;
let url = '';
if (subCollectionId === '_') {
url = `/book/${bookId}/${collectionId}/${sectionId}/edit_section_label`;
} else {
url = `/book/${bookId}/${collectionId}/${subCollectionId}/${sectionId}/edit_section_label`;
}
const response = await fetch(url, {
method: 'POST',
credentials: 'include',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
label: newLabel,
section_id: sectionId,
}),
});
if (response.status == 200) {
location.reload();
} else return;
});
});
});
}
}

53
src/renameSubCollection.ts Normal file
View File

@ -0,0 +1,53 @@
export function renameSubCollection() {
const renameSubCollectionBtns = document.querySelectorAll(
'[id^="rename-sub-collection-button-"]',
);
const subCollectionRenameForms: NodeListOf<HTMLFormElement> =
document.querySelectorAll('[id^="rename-sub-collection-label-form-"]');
if (
renameSubCollectionBtns.length > 0 &&
subCollectionRenameForms.length > 0
) {
renameSubCollectionBtns.forEach((btn, index) => {
btn.addEventListener('click', () => {
const inputsForRename: NodeListOf<HTMLInputElement> =
document.querySelectorAll(`[id^="edit-sub-collection-label-"]`);
const oldName = inputsForRename[index].value;
inputsForRename[index].removeAttribute('readonly');
inputsForRename[index].value = '';
inputsForRename[index].focus();
inputsForRename[index].addEventListener('blur', () => {
inputsForRename[index].value = oldName;
});
subCollectionRenameForms[index].addEventListener('submit', async e => {
e.preventDefault();
const bookId =
subCollectionRenameForms[index].getAttribute('data-book-id');
const collectionId =
subCollectionRenameForms[index].getAttribute('data-collection-id');
const subCollectionId = subCollectionRenameForms[index].getAttribute(
'data-sub-collection-id',
);
const newLabel = inputsForRename[index].value;
inputsForRename[index].readOnly = true;
let url = `/book/${bookId}/${collectionId}/${subCollectionId}/edit`;
const response = await fetch(url, {
method: 'POST',
credentials: 'include',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
label: newLabel,
}),
});
if (response.status == 200) {
location.reload();
} else return;
});
});
});
}
}

98
src/rightClick.ts Normal file
View File

@ -0,0 +1,98 @@
import {Dropdown, DropdownInterface} from 'flowbite';
import type {DropdownOptions} from 'flowbite';
// Triggers and elements for collections
const contextCollectionMenuTriggers: NodeListOf<HTMLElement> =
document.querySelectorAll('[id^="dropdownCollectionContextButton"]');
const collectionContextMenu: NodeListOf<HTMLElement> =
document.querySelectorAll('[data^="collection-context-menu-"]');
// Triggers and elements for sub_collections
const subCollectionContextMenu: NodeListOf<HTMLElement> =
document.querySelectorAll('[data^="sub-collection-context-menu-"]');
const contextSubCollectionMenuTriggers: NodeListOf<HTMLElement> =
document.querySelectorAll('[id^="dropdownSubCollectionContextButton"]');
// Triggers and elements for sub_collections
const sectionContextMenu: NodeListOf<HTMLElement> = document.querySelectorAll(
'[data^="section-context-menu-"]',
);
const contextSectionMenuTriggers: NodeListOf<HTMLElement> =
document.querySelectorAll('[id^="dropdownSectionContextButton"]');
let currentElement: DropdownInterface | null = null;
const options: DropdownOptions = {
offsetSkidding: 410,
offsetDistance: 0,
onHide: () => {},
onShow: tooltip => {
// this will close opened menu if you trigger another one
if (currentElement) {
if (tooltip !== currentElement) {
currentElement.hide();
}
currentElement = tooltip;
} else {
currentElement = tooltip;
}
},
onToggle: () => {},
};
let collectionDropDownArray: Dropdown[] = [];
let subCollectionDropDownArray: Dropdown[] = [];
let sectionDropDownArray: Dropdown[] = [];
// Creating for each dropDownMenu in DOM a Dropdown from FlowBite
collectionContextMenu.forEach((menu, index) => {
collectionDropDownArray.push(
new Dropdown(menu, contextCollectionMenuTriggers[index], options),
);
});
subCollectionContextMenu.forEach((menu, index) => {
subCollectionDropDownArray.push(
new Dropdown(menu, contextSubCollectionMenuTriggers[index], options),
);
});
sectionContextMenu.forEach((menu, index) => {
sectionDropDownArray.push(
new Dropdown(menu, contextSectionMenuTriggers[index], options),
);
});
export function rightClick() {
const collectionElements: NodeListOf<HTMLHeadingElement> =
document.querySelectorAll('[id^="accordion-collapse-heading-"]');
const subCollectionElements: NodeListOf<HTMLHeadingElement> =
document.querySelectorAll('[id^="accordion-nested-collapse-heading-"]');
const sectionElement: NodeListOf<HTMLHeadingElement> =
document.querySelectorAll('[id^="section-heading-"]');
collectionElements.forEach((item, index) => {
item.addEventListener('contextmenu', (event: any) => {
event.preventDefault();
if (event.currentTarget.id.startsWith('accordion-collapse-heading-')) {
collectionDropDownArray[index].show();
}
});
});
subCollectionElements.forEach((item, index) => {
item.addEventListener('contextmenu', (event: any) => {
event.preventDefault();
if (
event.currentTarget.id.startsWith('accordion-nested-collapse-heading-')
) {
subCollectionDropDownArray[index].show();
}
});
});
sectionElement.forEach((item, index) => {
item.addEventListener('contextmenu', (event: any) => {
event.preventDefault();
if (event.currentTarget.id.startsWith('section-heading-')) {
sectionDropDownArray[index].show();
}
});
});
}

15
src/scroll.ts Normal file
View File

@ -0,0 +1,15 @@
export function scroll() {
const btns = document.querySelectorAll('[href^="#section-"]');
if (btns) {
btns.forEach((btn, index) => {
btn.addEventListener('click', () => {
let link = btn.getAttribute('href');
link = link.replace('#', '');
const neededSection = document.querySelector(`[id^="${link}"]`);
if (neededSection) {
neededSection.scrollIntoView(true);
}
});
});
}
}

28
src/styles.css
View File

@ -1,4 +1,26 @@
@tailwind base;
/* Firefox */
* {
scrollbar-width: thin;
scrollbar-color: inherit gray ;
}
/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
width: 5px;
}
*::-webkit-scrollbar-track {
background: inherit;
border-radius: 1px;
}
*::-webkit-scrollbar-thumb {
background-color: gray;
border-radius: 14px;
border: 1px solid inherit;
}
@tailwind components;
@tailwind utilities;
@ -11,4 +33,8 @@
}
.w-box{
width: calc(100vw - 255px);
}
}
.mt-135{
margin-top:135px;
}

9
src/tabGoBackBtn.ts Normal file
View File

@ -0,0 +1,9 @@
export function initGoBack() {
const goBackBtn: HTMLButtonElement =
document.querySelector('#tabGoBackButton');
if (goBackBtn) {
goBackBtn.addEventListener('click', () => {
window.history.back();
});
}
}

27
tests/test_build_qa_url_using_interpretation.py Normal file
View File

@ -0,0 +1,27 @@
from flask.testing import FlaskClient
from flask import current_app as Response
from app.controllers.jinja_globals import (
build_qa_url_using_interpretation,
)
from .utils import create_test_book, login
from app import models as m
def test_build_qa_url_using_interpretation(client: FlaskClient):
_, user = login(client)
user: m.User
create_test_book(user.id)
interpretation: m.Interpretation = m.Interpretation.query.first()
url = build_qa_url_using_interpretation(interpretation)
assert url
response: Response = client.get(url, follow_redirects=True)
assert response.status_code == 200
section: m.Section = m.Section.query.first()
assert section
assert str.encode(section.label) in response.data