chore: init monorepo
This commit is contained in:
@@ -0,0 +1,20 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: { browser: true, es2020: true },
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
'plugin:react/recommended',
|
||||
'plugin:react/jsx-runtime',
|
||||
'plugin:react-hooks/recommended',
|
||||
],
|
||||
ignorePatterns: ['dist', '.eslintrc.cjs'],
|
||||
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
|
||||
settings: { react: { version: '18.2' } },
|
||||
plugins: ['react-refresh'],
|
||||
rules: {
|
||||
'react-refresh/only-export-components': [
|
||||
'warn',
|
||||
{ allowConstantExport: true },
|
||||
],
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@@ -0,0 +1,661 @@
|
||||
GNU AFFERO GENERAL PUBLIC LICENSE
|
||||
Version 3, 19 November 2007
|
||||
|
||||
Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
|
||||
Everyone is permitted to copy and distribute verbatim copies
|
||||
of this license document, but changing it is not allowed.
|
||||
|
||||
Preamble
|
||||
|
||||
The GNU Affero General Public License is a free, copyleft license for
|
||||
software and other kinds of works, specifically designed to ensure
|
||||
cooperation with the community in the case of network server software.
|
||||
|
||||
The licenses for most software and other practical works are designed
|
||||
to take away your freedom to share and change the works. By contrast,
|
||||
our General Public Licenses are intended to guarantee your freedom to
|
||||
share and change all versions of a program--to make sure it remains free
|
||||
software for all its users.
|
||||
|
||||
When we speak of free software, we are referring to freedom, not
|
||||
price. Our General Public Licenses are designed to make sure that you
|
||||
have the freedom to distribute copies of free software (and charge for
|
||||
them if you wish), that you receive source code or can get it if you
|
||||
want it, that you can change the software or use pieces of it in new
|
||||
free programs, and that you know you can do these things.
|
||||
|
||||
Developers that use our General Public Licenses protect your rights
|
||||
with two steps: (1) assert copyright on the software, and (2) offer
|
||||
you this License which gives you legal permission to copy, distribute
|
||||
and/or modify the software.
|
||||
|
||||
A secondary benefit of defending all users' freedom is that
|
||||
improvements made in alternate versions of the program, if they
|
||||
receive widespread use, become available for other developers to
|
||||
incorporate. Many developers of free software are heartened and
|
||||
encouraged by the resulting cooperation. However, in the case of
|
||||
software used on network servers, this result may fail to come about.
|
||||
The GNU General Public License permits making a modified version and
|
||||
letting the public access it on a server without ever releasing its
|
||||
source code to the public.
|
||||
|
||||
The GNU Affero General Public License is designed specifically to
|
||||
ensure that, in such cases, the modified source code becomes available
|
||||
to the community. It requires the operator of a network server to
|
||||
provide the source code of the modified version running there to the
|
||||
users of that server. Therefore, public use of a modified version, on
|
||||
a publicly accessible server, gives the public access to the source
|
||||
code of the modified version.
|
||||
|
||||
An older license, called the Affero General Public License and
|
||||
published by Affero, was designed to accomplish similar goals. This is
|
||||
a different license, not a version of the Affero GPL, but Affero has
|
||||
released a new version of the Affero GPL which permits relicensing under
|
||||
this license.
|
||||
|
||||
The precise terms and conditions for copying, distribution and
|
||||
modification follow.
|
||||
|
||||
TERMS AND CONDITIONS
|
||||
|
||||
0. Definitions.
|
||||
|
||||
"This License" refers to version 3 of the GNU Affero General Public License.
|
||||
|
||||
"Copyright" also means copyright-like laws that apply to other kinds of
|
||||
works, such as semiconductor masks.
|
||||
|
||||
"The Program" refers to any copyrightable work licensed under this
|
||||
License. Each licensee is addressed as "you". "Licensees" and
|
||||
"recipients" may be individuals or organizations.
|
||||
|
||||
To "modify" a work means to copy from or adapt all or part of the work
|
||||
in a fashion requiring copyright permission, other than the making of an
|
||||
exact copy. The resulting work is called a "modified version" of the
|
||||
earlier work or a work "based on" the earlier work.
|
||||
|
||||
A "covered work" means either the unmodified Program or a work based
|
||||
on the Program.
|
||||
|
||||
To "propagate" a work means to do anything with it that, without
|
||||
permission, would make you directly or secondarily liable for
|
||||
infringement under applicable copyright law, except executing it on a
|
||||
computer or modifying a private copy. Propagation includes copying,
|
||||
distribution (with or without modification), making available to the
|
||||
public, and in some countries other activities as well.
|
||||
|
||||
To "convey" a work means any kind of propagation that enables other
|
||||
parties to make or receive copies. Mere interaction with a user through
|
||||
a computer network, with no transfer of a copy, is not conveying.
|
||||
|
||||
An interactive user interface displays "Appropriate Legal Notices"
|
||||
to the extent that it includes a convenient and prominently visible
|
||||
feature that (1) displays an appropriate copyright notice, and (2)
|
||||
tells the user that there is no warranty for the work (except to the
|
||||
extent that warranties are provided), that licensees may convey the
|
||||
work under this License, and how to view a copy of this License. If
|
||||
the interface presents a list of user commands or options, such as a
|
||||
menu, a prominent item in the list meets this criterion.
|
||||
|
||||
1. Source Code.
|
||||
|
||||
The "source code" for a work means the preferred form of the work
|
||||
for making modifications to it. "Object code" means any non-source
|
||||
form of a work.
|
||||
|
||||
A "Standard Interface" means an interface that either is an official
|
||||
standard defined by a recognized standards body, or, in the case of
|
||||
interfaces specified for a particular programming language, one that
|
||||
is widely used among developers working in that language.
|
||||
|
||||
The "System Libraries" of an executable work include anything, other
|
||||
than the work as a whole, that (a) is included in the normal form of
|
||||
packaging a Major Component, but which is not part of that Major
|
||||
Component, and (b) serves only to enable use of the work with that
|
||||
Major Component, or to implement a Standard Interface for which an
|
||||
implementation is available to the public in source code form. A
|
||||
"Major Component", in this context, means a major essential component
|
||||
(kernel, window system, and so on) of the specific operating system
|
||||
(if any) on which the executable work runs, or a compiler used to
|
||||
produce the work, or an object code interpreter used to run it.
|
||||
|
||||
The "Corresponding Source" for a work in object code form means all
|
||||
the source code needed to generate, install, and (for an executable
|
||||
work) run the object code and to modify the work, including scripts to
|
||||
control those activities. However, it does not include the work's
|
||||
System Libraries, or general-purpose tools or generally available free
|
||||
programs which are used unmodified in performing those activities but
|
||||
which are not part of the work. For example, Corresponding Source
|
||||
includes interface definition files associated with source files for
|
||||
the work, and the source code for shared libraries and dynamically
|
||||
linked subprograms that the work is specifically designed to require,
|
||||
such as by intimate data communication or control flow between those
|
||||
subprograms and other parts of the work.
|
||||
|
||||
The Corresponding Source need not include anything that users
|
||||
can regenerate automatically from other parts of the Corresponding
|
||||
Source.
|
||||
|
||||
The Corresponding Source for a work in source code form is that
|
||||
same work.
|
||||
|
||||
2. Basic Permissions.
|
||||
|
||||
All rights granted under this License are granted for the term of
|
||||
copyright on the Program, and are irrevocable provided the stated
|
||||
conditions are met. This License explicitly affirms your unlimited
|
||||
permission to run the unmodified Program. The output from running a
|
||||
covered work is covered by this License only if the output, given its
|
||||
content, constitutes a covered work. This License acknowledges your
|
||||
rights of fair use or other equivalent, as provided by copyright law.
|
||||
|
||||
You may make, run and propagate covered works that you do not
|
||||
convey, without conditions so long as your license otherwise remains
|
||||
in force. You may convey covered works to others for the sole purpose
|
||||
of having them make modifications exclusively for you, or provide you
|
||||
with facilities for running those works, provided that you comply with
|
||||
the terms of this License in conveying all material for which you do
|
||||
not control copyright. Those thus making or running the covered works
|
||||
for you must do so exclusively on your behalf, under your direction
|
||||
and control, on terms that prohibit them from making any copies of
|
||||
your copyrighted material outside their relationship with you.
|
||||
|
||||
Conveying under any other circumstances is permitted solely under
|
||||
the conditions stated below. Sublicensing is not allowed; section 10
|
||||
makes it unnecessary.
|
||||
|
||||
3. Protecting Users' Legal Rights From Anti-Circumvention Law.
|
||||
|
||||
No covered work shall be deemed part of an effective technological
|
||||
measure under any applicable law fulfilling obligations under article
|
||||
11 of the WIPO copyright treaty adopted on 20 December 1996, or
|
||||
similar laws prohibiting or restricting circumvention of such
|
||||
measures.
|
||||
|
||||
When you convey a covered work, you waive any legal power to forbid
|
||||
circumvention of technological measures to the extent such circumvention
|
||||
is effected by exercising rights under this License with respect to
|
||||
the covered work, and you disclaim any intention to limit operation or
|
||||
modification of the work as a means of enforcing, against the work's
|
||||
users, your or third parties' legal rights to forbid circumvention of
|
||||
technological measures.
|
||||
|
||||
4. Conveying Verbatim Copies.
|
||||
|
||||
You may convey verbatim copies of the Program's source code as you
|
||||
receive it, in any medium, provided that you conspicuously and
|
||||
appropriately publish on each copy an appropriate copyright notice;
|
||||
keep intact all notices stating that this License and any
|
||||
non-permissive terms added in accord with section 7 apply to the code;
|
||||
keep intact all notices of the absence of any warranty; and give all
|
||||
recipients a copy of this License along with the Program.
|
||||
|
||||
You may charge any price or no price for each copy that you convey,
|
||||
and you may offer support or warranty protection for a fee.
|
||||
|
||||
5. Conveying Modified Source Versions.
|
||||
|
||||
You may convey a work based on the Program, or the modifications to
|
||||
produce it from the Program, in the form of source code under the
|
||||
terms of section 4, provided that you also meet all of these conditions:
|
||||
|
||||
a) The work must carry prominent notices stating that you modified
|
||||
it, and giving a relevant date.
|
||||
|
||||
b) The work must carry prominent notices stating that it is
|
||||
released under this License and any conditions added under section
|
||||
7. This requirement modifies the requirement in section 4 to
|
||||
"keep intact all notices".
|
||||
|
||||
c) You must license the entire work, as a whole, under this
|
||||
License to anyone who comes into possession of a copy. This
|
||||
License will therefore apply, along with any applicable section 7
|
||||
additional terms, to the whole of the work, and all its parts,
|
||||
regardless of how they are packaged. This License gives no
|
||||
permission to license the work in any other way, but it does not
|
||||
invalidate such permission if you have separately received it.
|
||||
|
||||
d) If the work has interactive user interfaces, each must display
|
||||
Appropriate Legal Notices; however, if the Program has interactive
|
||||
interfaces that do not display Appropriate Legal Notices, your
|
||||
work need not make them do so.
|
||||
|
||||
A compilation of a covered work with other separate and independent
|
||||
works, which are not by their nature extensions of the covered work,
|
||||
and which are not combined with it such as to form a larger program,
|
||||
in or on a volume of a storage or distribution medium, is called an
|
||||
"aggregate" if the compilation and its resulting copyright are not
|
||||
used to limit the access or legal rights of the compilation's users
|
||||
beyond what the individual works permit. Inclusion of a covered work
|
||||
in an aggregate does not cause this License to apply to the other
|
||||
parts of the aggregate.
|
||||
|
||||
6. Conveying Non-Source Forms.
|
||||
|
||||
You may convey a covered work in object code form under the terms
|
||||
of sections 4 and 5, provided that you also convey the
|
||||
machine-readable Corresponding Source under the terms of this License,
|
||||
in one of these ways:
|
||||
|
||||
a) Convey the object code in, or embodied in, a physical product
|
||||
(including a physical distribution medium), accompanied by the
|
||||
Corresponding Source fixed on a durable physical medium
|
||||
customarily used for software interchange.
|
||||
|
||||
b) Convey the object code in, or embodied in, a physical product
|
||||
(including a physical distribution medium), accompanied by a
|
||||
written offer, valid for at least three years and valid for as
|
||||
long as you offer spare parts or customer support for that product
|
||||
model, to give anyone who possesses the object code either (1) a
|
||||
copy of the Corresponding Source for all the software in the
|
||||
product that is covered by this License, on a durable physical
|
||||
medium customarily used for software interchange, for a price no
|
||||
more than your reasonable cost of physically performing this
|
||||
conveying of source, or (2) access to copy the
|
||||
Corresponding Source from a network server at no charge.
|
||||
|
||||
c) Convey individual copies of the object code with a copy of the
|
||||
written offer to provide the Corresponding Source. This
|
||||
alternative is allowed only occasionally and noncommercially, and
|
||||
only if you received the object code with such an offer, in accord
|
||||
with subsection 6b.
|
||||
|
||||
d) Convey the object code by offering access from a designated
|
||||
place (gratis or for a charge), and offer equivalent access to the
|
||||
Corresponding Source in the same way through the same place at no
|
||||
further charge. You need not require recipients to copy the
|
||||
Corresponding Source along with the object code. If the place to
|
||||
copy the object code is a network server, the Corresponding Source
|
||||
may be on a different server (operated by you or a third party)
|
||||
that supports equivalent copying facilities, provided you maintain
|
||||
clear directions next to the object code saying where to find the
|
||||
Corresponding Source. Regardless of what server hosts the
|
||||
Corresponding Source, you remain obligated to ensure that it is
|
||||
available for as long as needed to satisfy these requirements.
|
||||
|
||||
e) Convey the object code using peer-to-peer transmission, provided
|
||||
you inform other peers where the object code and Corresponding
|
||||
Source of the work are being offered to the general public at no
|
||||
charge under subsection 6d.
|
||||
|
||||
A separable portion of the object code, whose source code is excluded
|
||||
from the Corresponding Source as a System Library, need not be
|
||||
included in conveying the object code work.
|
||||
|
||||
A "User Product" is either (1) a "consumer product", which means any
|
||||
tangible personal property which is normally used for personal, family,
|
||||
or household purposes, or (2) anything designed or sold for incorporation
|
||||
into a dwelling. In determining whether a product is a consumer product,
|
||||
doubtful cases shall be resolved in favor of coverage. For a particular
|
||||
product received by a particular user, "normally used" refers to a
|
||||
typical or common use of that class of product, regardless of the status
|
||||
of the particular user or of the way in which the particular user
|
||||
actually uses, or expects or is expected to use, the product. A product
|
||||
is a consumer product regardless of whether the product has substantial
|
||||
commercial, industrial or non-consumer uses, unless such uses represent
|
||||
the only significant mode of use of the product.
|
||||
|
||||
"Installation Information" for a User Product means any methods,
|
||||
procedures, authorization keys, or other information required to install
|
||||
and execute modified versions of a covered work in that User Product from
|
||||
a modified version of its Corresponding Source. The information must
|
||||
suffice to ensure that the continued functioning of the modified object
|
||||
code is in no case prevented or interfered with solely because
|
||||
modification has been made.
|
||||
|
||||
If you convey an object code work under this section in, or with, or
|
||||
specifically for use in, a User Product, and the conveying occurs as
|
||||
part of a transaction in which the right of possession and use of the
|
||||
User Product is transferred to the recipient in perpetuity or for a
|
||||
fixed term (regardless of how the transaction is characterized), the
|
||||
Corresponding Source conveyed under this section must be accompanied
|
||||
by the Installation Information. But this requirement does not apply
|
||||
if neither you nor any third party retains the ability to install
|
||||
modified object code on the User Product (for example, the work has
|
||||
been installed in ROM).
|
||||
|
||||
The requirement to provide Installation Information does not include a
|
||||
requirement to continue to provide support service, warranty, or updates
|
||||
for a work that has been modified or installed by the recipient, or for
|
||||
the User Product in which it has been modified or installed. Access to a
|
||||
network may be denied when the modification itself materially and
|
||||
adversely affects the operation of the network or violates the rules and
|
||||
protocols for communication across the network.
|
||||
|
||||
Corresponding Source conveyed, and Installation Information provided,
|
||||
in accord with this section must be in a format that is publicly
|
||||
documented (and with an implementation available to the public in
|
||||
source code form), and must require no special password or key for
|
||||
unpacking, reading or copying.
|
||||
|
||||
7. Additional Terms.
|
||||
|
||||
"Additional permissions" are terms that supplement the terms of this
|
||||
License by making exceptions from one or more of its conditions.
|
||||
Additional permissions that are applicable to the entire Program shall
|
||||
be treated as though they were included in this License, to the extent
|
||||
that they are valid under applicable law. If additional permissions
|
||||
apply only to part of the Program, that part may be used separately
|
||||
under those permissions, but the entire Program remains governed by
|
||||
this License without regard to the additional permissions.
|
||||
|
||||
When you convey a copy of a covered work, you may at your option
|
||||
remove any additional permissions from that copy, or from any part of
|
||||
it. (Additional permissions may be written to require their own
|
||||
removal in certain cases when you modify the work.) You may place
|
||||
additional permissions on material, added by you to a covered work,
|
||||
for which you have or can give appropriate copyright permission.
|
||||
|
||||
Notwithstanding any other provision of this License, for material you
|
||||
add to a covered work, you may (if authorized by the copyright holders of
|
||||
that material) supplement the terms of this License with terms:
|
||||
|
||||
a) Disclaiming warranty or limiting liability differently from the
|
||||
terms of sections 15 and 16 of this License; or
|
||||
|
||||
b) Requiring preservation of specified reasonable legal notices or
|
||||
author attributions in that material or in the Appropriate Legal
|
||||
Notices displayed by works containing it; or
|
||||
|
||||
c) Prohibiting misrepresentation of the origin of that material, or
|
||||
requiring that modified versions of such material be marked in
|
||||
reasonable ways as different from the original version; or
|
||||
|
||||
d) Limiting the use for publicity purposes of names of licensors or
|
||||
authors of the material; or
|
||||
|
||||
e) Declining to grant rights under trademark law for use of some
|
||||
trade names, trademarks, or service marks; or
|
||||
|
||||
f) Requiring indemnification of licensors and authors of that
|
||||
material by anyone who conveys the material (or modified versions of
|
||||
it) with contractual assumptions of liability to the recipient, for
|
||||
any liability that these contractual assumptions directly impose on
|
||||
those licensors and authors.
|
||||
|
||||
All other non-permissive additional terms are considered "further
|
||||
restrictions" within the meaning of section 10. If the Program as you
|
||||
received it, or any part of it, contains a notice stating that it is
|
||||
governed by this License along with a term that is a further
|
||||
restriction, you may remove that term. If a license document contains
|
||||
a further restriction but permits relicensing or conveying under this
|
||||
License, you may add to a covered work material governed by the terms
|
||||
of that license document, provided that the further restriction does
|
||||
not survive such relicensing or conveying.
|
||||
|
||||
If you add terms to a covered work in accord with this section, you
|
||||
must place, in the relevant source files, a statement of the
|
||||
additional terms that apply to those files, or a notice indicating
|
||||
where to find the applicable terms.
|
||||
|
||||
Additional terms, permissive or non-permissive, may be stated in the
|
||||
form of a separately written license, or stated as exceptions;
|
||||
the above requirements apply either way.
|
||||
|
||||
8. Termination.
|
||||
|
||||
You may not propagate or modify a covered work except as expressly
|
||||
provided under this License. Any attempt otherwise to propagate or
|
||||
modify it is void, and will automatically terminate your rights under
|
||||
this License (including any patent licenses granted under the third
|
||||
paragraph of section 11).
|
||||
|
||||
However, if you cease all violation of this License, then your
|
||||
license from a particular copyright holder is reinstated (a)
|
||||
provisionally, unless and until the copyright holder explicitly and
|
||||
finally terminates your license, and (b) permanently, if the copyright
|
||||
holder fails to notify you of the violation by some reasonable means
|
||||
prior to 60 days after the cessation.
|
||||
|
||||
Moreover, your license from a particular copyright holder is
|
||||
reinstated permanently if the copyright holder notifies you of the
|
||||
violation by some reasonable means, this is the first time you have
|
||||
received notice of violation of this License (for any work) from that
|
||||
copyright holder, and you cure the violation prior to 30 days after
|
||||
your receipt of the notice.
|
||||
|
||||
Termination of your rights under this section does not terminate the
|
||||
licenses of parties who have received copies or rights from you under
|
||||
this License. If your rights have been terminated and not permanently
|
||||
reinstated, you do not qualify to receive new licenses for the same
|
||||
material under section 10.
|
||||
|
||||
9. Acceptance Not Required for Having Copies.
|
||||
|
||||
You are not required to accept this License in order to receive or
|
||||
run a copy of the Program. Ancillary propagation of a covered work
|
||||
occurring solely as a consequence of using peer-to-peer transmission
|
||||
to receive a copy likewise does not require acceptance. However,
|
||||
nothing other than this License grants you permission to propagate or
|
||||
modify any covered work. These actions infringe copyright if you do
|
||||
not accept this License. Therefore, by modifying or propagating a
|
||||
covered work, you indicate your acceptance of this License to do so.
|
||||
|
||||
10. Automatic Licensing of Downstream Recipients.
|
||||
|
||||
Each time you convey a covered work, the recipient automatically
|
||||
receives a license from the original licensors, to run, modify and
|
||||
propagate that work, subject to this License. You are not responsible
|
||||
for enforcing compliance by third parties with this License.
|
||||
|
||||
An "entity transaction" is a transaction transferring control of an
|
||||
organization, or substantially all assets of one, or subdividing an
|
||||
organization, or merging organizations. If propagation of a covered
|
||||
work results from an entity transaction, each party to that
|
||||
transaction who receives a copy of the work also receives whatever
|
||||
licenses to the work the party's predecessor in interest had or could
|
||||
give under the previous paragraph, plus a right to possession of the
|
||||
Corresponding Source of the work from the predecessor in interest, if
|
||||
the predecessor has it or can get it with reasonable efforts.
|
||||
|
||||
You may not impose any further restrictions on the exercise of the
|
||||
rights granted or affirmed under this License. For example, you may
|
||||
not impose a license fee, royalty, or other charge for exercise of
|
||||
rights granted under this License, and you may not initiate litigation
|
||||
(including a cross-claim or counterclaim in a lawsuit) alleging that
|
||||
any patent claim is infringed by making, using, selling, offering for
|
||||
sale, or importing the Program or any portion of it.
|
||||
|
||||
11. Patents.
|
||||
|
||||
A "contributor" is a copyright holder who authorizes use under this
|
||||
License of the Program or a work on which the Program is based. The
|
||||
work thus licensed is called the contributor's "contributor version".
|
||||
|
||||
A contributor's "essential patent claims" are all patent claims
|
||||
owned or controlled by the contributor, whether already acquired or
|
||||
hereafter acquired, that would be infringed by some manner, permitted
|
||||
by this License, of making, using, or selling its contributor version,
|
||||
but do not include claims that would be infringed only as a
|
||||
consequence of further modification of the contributor version. For
|
||||
purposes of this definition, "control" includes the right to grant
|
||||
patent sublicenses in a manner consistent with the requirements of
|
||||
this License.
|
||||
|
||||
Each contributor grants you a non-exclusive, worldwide, royalty-free
|
||||
patent license under the contributor's essential patent claims, to
|
||||
make, use, sell, offer for sale, import and otherwise run, modify and
|
||||
propagate the contents of its contributor version.
|
||||
|
||||
In the following three paragraphs, a "patent license" is any express
|
||||
agreement or commitment, however denominated, not to enforce a patent
|
||||
(such as an express permission to practice a patent or covenant not to
|
||||
sue for patent infringement). To "grant" such a patent license to a
|
||||
party means to make such an agreement or commitment not to enforce a
|
||||
patent against the party.
|
||||
|
||||
If you convey a covered work, knowingly relying on a patent license,
|
||||
and the Corresponding Source of the work is not available for anyone
|
||||
to copy, free of charge and under the terms of this License, through a
|
||||
publicly available network server or other readily accessible means,
|
||||
then you must either (1) cause the Corresponding Source to be so
|
||||
available, or (2) arrange to deprive yourself of the benefit of the
|
||||
patent license for this particular work, or (3) arrange, in a manner
|
||||
consistent with the requirements of this License, to extend the patent
|
||||
license to downstream recipients. "Knowingly relying" means you have
|
||||
actual knowledge that, but for the patent license, your conveying the
|
||||
covered work in a country, or your recipient's use of the covered work
|
||||
in a country, would infringe one or more identifiable patents in that
|
||||
country that you have reason to believe are valid.
|
||||
|
||||
If, pursuant to or in connection with a single transaction or
|
||||
arrangement, you convey, or propagate by procuring conveyance of, a
|
||||
covered work, and grant a patent license to some of the parties
|
||||
receiving the covered work authorizing them to use, propagate, modify
|
||||
or convey a specific copy of the covered work, then the patent license
|
||||
you grant is automatically extended to all recipients of the covered
|
||||
work and works based on it.
|
||||
|
||||
A patent license is "discriminatory" if it does not include within
|
||||
the scope of its coverage, prohibits the exercise of, or is
|
||||
conditioned on the non-exercise of one or more of the rights that are
|
||||
specifically granted under this License. You may not convey a covered
|
||||
work if you are a party to an arrangement with a third party that is
|
||||
in the business of distributing software, under which you make payment
|
||||
to the third party based on the extent of your activity of conveying
|
||||
the work, and under which the third party grants, to any of the
|
||||
parties who would receive the covered work from you, a discriminatory
|
||||
patent license (a) in connection with copies of the covered work
|
||||
conveyed by you (or copies made from those copies), or (b) primarily
|
||||
for and in connection with specific products or compilations that
|
||||
contain the covered work, unless you entered into that arrangement,
|
||||
or that patent license was granted, prior to 28 March 2007.
|
||||
|
||||
Nothing in this License shall be construed as excluding or limiting
|
||||
any implied license or other defenses to infringement that may
|
||||
otherwise be available to you under applicable patent law.
|
||||
|
||||
12. No Surrender of Others' Freedom.
|
||||
|
||||
If conditions are imposed on you (whether by court order, agreement or
|
||||
otherwise) that contradict the conditions of this License, they do not
|
||||
excuse you from the conditions of this License. If you cannot convey a
|
||||
covered work so as to satisfy simultaneously your obligations under this
|
||||
License and any other pertinent obligations, then as a consequence you may
|
||||
not convey it at all. For example, if you agree to terms that obligate you
|
||||
to collect a royalty for further conveying from those to whom you convey
|
||||
the Program, the only way you could satisfy both those terms and this
|
||||
License would be to refrain entirely from conveying the Program.
|
||||
|
||||
13. Remote Network Interaction; Use with the GNU General Public License.
|
||||
|
||||
Notwithstanding any other provision of this License, if you modify the
|
||||
Program, your modified version must prominently offer all users
|
||||
interacting with it remotely through a computer network (if your version
|
||||
supports such interaction) an opportunity to receive the Corresponding
|
||||
Source of your version by providing access to the Corresponding Source
|
||||
from a network server at no charge, through some standard or customary
|
||||
means of facilitating copying of software. This Corresponding Source
|
||||
shall include the Corresponding Source for any work covered by version 3
|
||||
of the GNU General Public License that is incorporated pursuant to the
|
||||
following paragraph.
|
||||
|
||||
Notwithstanding any other provision of this License, you have
|
||||
permission to link or combine any covered work with a work licensed
|
||||
under version 3 of the GNU General Public License into a single
|
||||
combined work, and to convey the resulting work. The terms of this
|
||||
License will continue to apply to the part which is the covered work,
|
||||
but the work with which it is combined will remain governed by version
|
||||
3 of the GNU General Public License.
|
||||
|
||||
14. Revised Versions of this License.
|
||||
|
||||
The Free Software Foundation may publish revised and/or new versions of
|
||||
the GNU Affero General Public License from time to time. Such new versions
|
||||
will be similar in spirit to the present version, but may differ in detail to
|
||||
address new problems or concerns.
|
||||
|
||||
Each version is given a distinguishing version number. If the
|
||||
Program specifies that a certain numbered version of the GNU Affero General
|
||||
Public License "or any later version" applies to it, you have the
|
||||
option of following the terms and conditions either of that numbered
|
||||
version or of any later version published by the Free Software
|
||||
Foundation. If the Program does not specify a version number of the
|
||||
GNU Affero General Public License, you may choose any version ever published
|
||||
by the Free Software Foundation.
|
||||
|
||||
If the Program specifies that a proxy can decide which future
|
||||
versions of the GNU Affero General Public License can be used, that proxy's
|
||||
public statement of acceptance of a version permanently authorizes you
|
||||
to choose that version for the Program.
|
||||
|
||||
Later license versions may give you additional or different
|
||||
permissions. However, no additional obligations are imposed on any
|
||||
author or copyright holder as a result of your choosing to follow a
|
||||
later version.
|
||||
|
||||
15. Disclaimer of Warranty.
|
||||
|
||||
THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
|
||||
APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
|
||||
HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
|
||||
OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
|
||||
THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
|
||||
PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
|
||||
IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
|
||||
ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
|
||||
|
||||
16. Limitation of Liability.
|
||||
|
||||
IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
|
||||
WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
|
||||
THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
|
||||
GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
|
||||
USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
|
||||
DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
|
||||
PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
|
||||
EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
|
||||
SUCH DAMAGES.
|
||||
|
||||
17. Interpretation of Sections 15 and 16.
|
||||
|
||||
If the disclaimer of warranty and limitation of liability provided
|
||||
above cannot be given local legal effect according to their terms,
|
||||
reviewing courts shall apply local law that most closely approximates
|
||||
an absolute waiver of all civil liability in connection with the
|
||||
Program, unless a warranty or assumption of liability accompanies a
|
||||
copy of the Program in return for a fee.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
||||
How to Apply These Terms to Your New Programs
|
||||
|
||||
If you develop a new program, and you want it to be of the greatest
|
||||
possible use to the public, the best way to achieve this is to make it
|
||||
free software which everyone can redistribute and change under these terms.
|
||||
|
||||
To do so, attach the following notices to the program. It is safest
|
||||
to attach them to the start of each source file to most effectively
|
||||
state the exclusion of warranty; and each file should have at least
|
||||
the "copyright" line and a pointer to where the full notice is found.
|
||||
|
||||
<one line to give the program's name and a brief idea of what it does.>
|
||||
Copyright (C) <year> <name of author>
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published
|
||||
by the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
Also add information on how to contact you by electronic and paper mail.
|
||||
|
||||
If your software can interact with users remotely through a computer
|
||||
network, you should also make sure that it provides a way for users to
|
||||
get its source. For example, if your program is a web application, its
|
||||
interface could display a "Source" link that leads users to an archive
|
||||
of the code. There are many ways you could offer source, and different
|
||||
solutions will be better for different programs; see section 13 for the
|
||||
specific requirements.
|
||||
|
||||
You should also get your employer (if you work as a programmer) or school,
|
||||
if any, to sign a "copyright disclaimer" for the program, if necessary.
|
||||
For more information on this, and how to apply and follow the GNU AGPL, see
|
||||
<https://www.gnu.org/licenses/>.
|
||||
@@ -0,0 +1,13 @@
|
||||
# YaBL web react
|
||||
Best web UI for ~~worst **best**~~ **my** API ~~ever~~ :)
|
||||
|
||||
|
||||
|
||||
## LICENSE
|
||||
It`s open source web interface for open source API.
|
||||
At this time, all source codes of the project are closed indefinitely
|
||||
|
||||
```
|
||||
GNU AGPLv3
|
||||
(c) by mi6e4ka, 2023
|
||||
```
|
||||
@@ -0,0 +1,16 @@
|
||||
- [ ] collections support
|
||||
- [ ] front-side
|
||||
- [ ]
|
||||
- [ ] back-side
|
||||
- [x] db model support
|
||||
- [ ] CRUD collections support
|
||||
- [ ] create collections
|
||||
- [ ] books management
|
||||
- [ ] add books
|
||||
- [ ] change books sequence (next release)
|
||||
- [ ] remove books
|
||||
- [ ] show list books in collections
|
||||
- [ ] delete collections
|
||||
- [ ] permissions and share collections
|
||||
- [ ] allow edit collections to users
|
||||
- [ ] share collections
|
||||
@@ -0,0 +1,100 @@
|
||||
# short-term
|
||||
- [x] correct dark mode (colors)
|
||||
- [x] names!!
|
||||
- [ ] lazy load
|
||||
- [x] fix-sized book blocks
|
||||
- [ ] router titles
|
||||
- [x] logout button
|
||||
|
||||
# TODO
|
||||
- [x] Getting data from API requests
|
||||
- [x] Account page
|
||||
- [x] Day/night theme
|
||||
- [ ] Online reader
|
||||
- [x] save progress (save read ratio)
|
||||
- [x] sync progress
|
||||
- [x] images
|
||||
- [x] contents
|
||||
- [x] current anchor
|
||||
- [ ] scroll to current anchor
|
||||
- [x] zero contents
|
||||
- [ ] fix bugs using "Чистый код. Создание, анализ и рефакторинг" !important
|
||||
- [x] fix width for 1080p
|
||||
- [x] read history (partial)
|
||||
- [x] bookshelf
|
||||
- [x] keyboard navigation
|
||||
- [ ] touch navigation
|
||||
- [x] smooth loading
|
||||
- [ ] settings
|
||||
- [x] menu on mobile
|
||||
- [x] offline
|
||||
- [ ] footnotes
|
||||
- [x] full offline/PWA (important roadmap)
|
||||
- [x] PWA init
|
||||
- [x] offline page
|
||||
- [x] cache covers
|
||||
- [x] cache google fonts
|
||||
- [x] offline lib
|
||||
- [x] offline book info page
|
||||
- [x] fix offline page request
|
||||
- [x] fix network detect
|
||||
- [x] manifest for YaBL
|
||||
- [ ] favicons (da pofig)
|
||||
- [x] load previous read book
|
||||
- [ ] Search filters (partially)
|
||||
- [x] add remove filter on backspace
|
||||
- [ ] filter by category
|
||||
- [ ] filter by book sequence
|
||||
- [ ] multi filters
|
||||
- [ ] recommended books
|
||||
|
||||
- [ ] collections support
|
||||
- [ ] front-side
|
||||
- [x] CRUD collections support
|
||||
- [x] create collections
|
||||
- [x] show list books in collections
|
||||
- [x] delete collections
|
||||
- [x] collections pagination
|
||||
- [x] books management
|
||||
- [x] add books
|
||||
- [ ] change books sequence (next release) (ig via d&d)
|
||||
- [x] remove books
|
||||
- [ ] edit collections name
|
||||
- [x] redesign
|
||||
- [x] fix touch behavior
|
||||
- [ ] add scroll listeners (hide buttons when manual scroll)
|
||||
- [x] collections list scrollable on book page
|
||||
- [x] collections list search on book page
|
||||
- [x] collection books list page
|
||||
- [ ] permissions and share collections
|
||||
- [ ] allow edit collections to users
|
||||
- [ ] share collections
|
||||
- [ ] back-side
|
||||
- [x] db model support
|
||||
- [x] CRUD collections support
|
||||
- [x] create collections
|
||||
- [x] list collections
|
||||
- [x] show list books in collections
|
||||
- [x] delete collections
|
||||
- [x] books management
|
||||
- [x] add books
|
||||
- [ ] change books sequence (next release)
|
||||
- [x] remove books
|
||||
- [ ] edit collections name
|
||||
- [ ] permissions and share collections
|
||||
- [ ] allow edit collections to users
|
||||
- [x] share collections
|
||||
- [ ] load userfiles
|
||||
- [ ] admin setting
|
||||
- [ ] users management
|
||||
- [ ] account settings
|
||||
- [ ] totp
|
||||
- [ ] change
|
||||
- [ ] name
|
||||
- [ ] username
|
||||
- [ ] pass
|
||||
- [ ] sync local (client) files
|
||||
- [ ] better image for not cover
|
||||
- [ ] use file hash as id (for likes and other)
|
||||
## low
|
||||
- [ ] rewrite to TypeScript
|
||||
@@ -0,0 +1,18 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>YaBL</title>
|
||||
|
||||
<meta name="description" content="YetAnother Book Library">
|
||||
<link rel="apple-touch-icon" href="/favicon.png" sizes="180x180">
|
||||
<link rel="mask-icon" href="/mask-icon.svg" color="#FFFFFF">
|
||||
<meta name="theme-color" content="#feba4b">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,4 @@
|
||||
vite build
|
||||
rm -r ../api/web/dist
|
||||
mv ./dist ../api/web/
|
||||
GOOS=linux go build -C ../api -o server
|
||||
Generated
+7979
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,41 @@
|
||||
{
|
||||
"name": "yabl-web",
|
||||
"private": true,
|
||||
"version": "pre-rc1",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@lit/react": "^1.0.6",
|
||||
"@material/material-color-utilities": "^0.3.0",
|
||||
"@material/web": "^2.2.0",
|
||||
"@tailwindcss/line-clamp": "^0.4.4",
|
||||
"@tailwindcss/vite": "^4.1.4",
|
||||
"axios": "^1.7.9",
|
||||
"dompurify": "^3.2.3",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-loading-skeleton": "^3.5.0",
|
||||
"react-router": "^7.1.1",
|
||||
"react-router-dom": "^7.1.1",
|
||||
"react-toastify": "^11.0.2",
|
||||
"tailwindcss": "^4.1.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.2.37",
|
||||
"@types/react-dom": "^18.2.15",
|
||||
"@vitejs/plugin-basic-ssl": "^1.2.0",
|
||||
"@vitejs/plugin-react": "^4.3.4",
|
||||
"eslint": "^9.17.0",
|
||||
"eslint-plugin-react": "^7.37.3",
|
||||
"eslint-plugin-react-hooks": "^5.1.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.16",
|
||||
"vite": "^6.0.7",
|
||||
"vite-plugin-pwa": "^0.21.1",
|
||||
"workbox-window": "^7.3.0"
|
||||
}
|
||||
}
|
||||
Generated
+5312
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,115 @@
|
||||
import { Routes, Route, useNavigate, useLocation } from "react-router";
|
||||
//
|
||||
import MainPage from "./pages/MainPage";
|
||||
import SearchPage from "./pages/SearchPage";
|
||||
import PageBody from "./pages/PageBody";
|
||||
import BookPage from "./pages/BookPage";
|
||||
import AccountPage from "./pages/account/AccountPage";
|
||||
import AuthPage from "./pages/AuthPage";
|
||||
//
|
||||
import {
|
||||
argbFromHex,
|
||||
themeFromSourceColor,
|
||||
applyTheme,
|
||||
} from "@material/material-color-utilities";
|
||||
import axios from "axios";
|
||||
import { useEffect, useState } from "react";
|
||||
import Reader from "./pages/Reader";
|
||||
import Offline from "./pages/Offline";
|
||||
import { ToastContainer } from "react-toastify";
|
||||
|
||||
import "react-toastify/dist/ReactToastify.css";
|
||||
import NotFound from "./pages/NotFound";
|
||||
import Collections from "./pages/account/Collections";
|
||||
import Main from "./pages/account/Main";
|
||||
import CollectionPage from "./pages/account/CollectionPage";
|
||||
import OOBE from "./pages/OOBE/OOBE";
|
||||
import OOBEWelcome from "./pages/OOBE/OOBEWelcome";
|
||||
import OOBECreateUser from "./pages/OOBE/OOBECreateUser";
|
||||
import UploadBook from "./pages/account/UploadBook";
|
||||
import ShelvePage from "./pages/account/ShelvePage";
|
||||
|
||||
const PWAPage = () => {
|
||||
const navigate = useNavigate();
|
||||
useEffect(() => {
|
||||
let lastReadBook = localStorage.getItem("lastReadBook");
|
||||
if (lastReadBook !== null) {
|
||||
navigate(`/reader/${lastReadBook}`);
|
||||
} else {
|
||||
navigate("/account");
|
||||
}
|
||||
});
|
||||
return <></>;
|
||||
};
|
||||
|
||||
function App() {
|
||||
const [checked, setChecked] = useState(false);
|
||||
|
||||
const theme = themeFromSourceColor(argbFromHex("ffddaf"));
|
||||
const systemDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
||||
applyTheme(theme, { target: document.body, dark: systemDark });
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
useEffect(() => {
|
||||
axios
|
||||
.get("/ping", { timeout: 5000 })
|
||||
.then(() => {
|
||||
window.onLine = true;
|
||||
setChecked(true);
|
||||
})
|
||||
.catch((error) => {
|
||||
if (error.response === undefined) {
|
||||
window.onLine = false;
|
||||
} else {
|
||||
if (error.response.status === 401) {
|
||||
window.onLine = true;
|
||||
if (
|
||||
location.pathname !== "/login" &&
|
||||
!location.pathname.startsWith("/oobe")
|
||||
) {
|
||||
console.log("redir");
|
||||
navigate(`/login?to=${location.pathname}`);
|
||||
}
|
||||
} else {
|
||||
window.onLine = false;
|
||||
}
|
||||
}
|
||||
setChecked(true);
|
||||
});
|
||||
}, []);
|
||||
if (!checked) {
|
||||
return <span>проверка соединения с сервером...</span>;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<ToastContainer theme={systemDark ? "dark" : "light"} autoClose={2000} />
|
||||
<Routes>
|
||||
<Route path="/login" element={<AuthPage />} />
|
||||
<Route path="/pwa" element={<PWAPage />} />
|
||||
<Route path="/oobe" element={<OOBE />}>
|
||||
<Route index element={<OOBEWelcome />} />
|
||||
<Route path="create-user" element={<OOBECreateUser />} />
|
||||
</Route>
|
||||
{/*<Route index element={<MainPage/>} />*/}
|
||||
<Route element={<PageBody />}>
|
||||
<Route path="/" element={<AccountPage />}>
|
||||
<Route index element={<Main />} />
|
||||
<Route path="collections" element={<Collections />} />
|
||||
<Route path="collection/:id" element={<CollectionPage />} />
|
||||
<Route path="shelve" element={<ShelvePage />} />
|
||||
<Route path="settings" element={<p>404</p>} />
|
||||
<Route path="upload" element={<UploadBook />} />
|
||||
</Route>
|
||||
<Route path="/search" element={<SearchPage />} />
|
||||
<Route path="/book/:id" element={<BookPage />} />
|
||||
<Route path="/reader/:id" element={<Reader />} />
|
||||
<Route path="/offline" element={<Offline />} />
|
||||
<Route path="*" element={<NotFound />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -0,0 +1,87 @@
|
||||
import axios from "axios";
|
||||
import { useEffect, useState } from "react";
|
||||
import BookCard from "./bookCard/BookCard";
|
||||
import LinearProgress from "../md-components/LinearProgress";
|
||||
import IconButton from "../md-components/IconButton";
|
||||
import Icon from "../md-components/Icon";
|
||||
|
||||
const Pagination = ({ offset, setOffset, perPage, total }) => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "10px",
|
||||
width: "100%",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<IconButton
|
||||
disabled={offset - perPage < 0}
|
||||
onClick={() => setOffset((prev) => prev - perPage)}
|
||||
>
|
||||
<Icon>arrow_back</Icon>
|
||||
</IconButton>
|
||||
<span>
|
||||
{total > 0 ? offset + 1 : 0}-
|
||||
{offset + perPage > total ? total : offset + perPage}
|
||||
{" из " /* если убрать ковычки - не будет пробеловё*/}
|
||||
{total}
|
||||
</span>
|
||||
<IconButton
|
||||
disabled={offset + perPage + 1 > total}
|
||||
onClick={() => setOffset((prev) => prev + perPage)}
|
||||
>
|
||||
<Icon>arrow_forward</Icon>
|
||||
</IconButton>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const SearchResults = ({ query, author, collection }) => {
|
||||
const [searchResults, setSearchResults] = useState(false);
|
||||
const [offset, setOffset] = useState(0);
|
||||
useEffect(() => {
|
||||
setSearchResults(false);
|
||||
axios
|
||||
.get("/search", {
|
||||
params: {
|
||||
q: query,
|
||||
author: author,
|
||||
collection: collection,
|
||||
offset: offset,
|
||||
limit: 8,
|
||||
},
|
||||
})
|
||||
.then((res) => setSearchResults(res.data));
|
||||
}, [offset]);
|
||||
if (!searchResults) {
|
||||
return <LinearProgress indeterminate style={{ width: "100%" }} />;
|
||||
}
|
||||
if (searchResults.count === 0) {
|
||||
return <p style={{ marginLeft: 20 }}>ничего не найдено</p>;
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<div className="results_container">
|
||||
{searchResults.books.map((book) => (
|
||||
<BookCard
|
||||
key={book.id}
|
||||
id={book.id}
|
||||
title={book.title}
|
||||
authors={book.authors}
|
||||
filetype={book.filetype}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<Pagination
|
||||
offset={offset}
|
||||
setOffset={setOffset}
|
||||
perPage={10}
|
||||
total={searchResults.count}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SearchResults;
|
||||
@@ -0,0 +1,174 @@
|
||||
import "./bookCard.css";
|
||||
import axios from "axios";
|
||||
import Skeleton from "react-loading-skeleton";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import IconButton from "../../md-components/IconButton";
|
||||
import Icon from "../../md-components/Icon";
|
||||
|
||||
function personToString(person) {
|
||||
let tmpString;
|
||||
if (person.lastName) {
|
||||
tmpString = person.lastName;
|
||||
} else {
|
||||
tmpString = person.firstName;
|
||||
}
|
||||
if (person.middleName) {
|
||||
tmpString += " " + person.middleName[0] + ".";
|
||||
}
|
||||
if (person.lastName && person.firstName) {
|
||||
tmpString += " " + person.firstName[0] + ".";
|
||||
}
|
||||
return tmpString;
|
||||
}
|
||||
function authorsString(authors) {
|
||||
let authorsStr = authors
|
||||
.slice(0, 2)
|
||||
.map((author) => personToString(author))
|
||||
.join(", ");
|
||||
if (authors.length > 2) {
|
||||
authorsStr += " и др.";
|
||||
}
|
||||
return authorsStr;
|
||||
}
|
||||
|
||||
const BookCard = ({
|
||||
id,
|
||||
title,
|
||||
authors,
|
||||
reader,
|
||||
offline,
|
||||
fromSearch,
|
||||
collectionDelId,
|
||||
fixed,
|
||||
filetype,
|
||||
}) => {
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
const [bookImgSrc, setBookImgSrc] = useState("");
|
||||
|
||||
async function loadImgFromCache() {
|
||||
if (window.caches === undefined) {
|
||||
setBookImgSrc(axios.defaults.baseURL + "/book/" + id + "/cover");
|
||||
return;
|
||||
}
|
||||
let cache = await window.caches.open("bookCovers");
|
||||
let img = await cache.match(`/api/book/${id}/cover`);
|
||||
if (img === undefined) {
|
||||
if (window.onLine) {
|
||||
setBookImgSrc(axios.defaults.baseURL + "/book/" + id + "/cover");
|
||||
return;
|
||||
} else {
|
||||
setBookImgSrc("/favicon.png");
|
||||
return;
|
||||
}
|
||||
}
|
||||
let blob = await img.blob();
|
||||
setBookImgSrc(URL.createObjectURL(blob));
|
||||
}
|
||||
useEffect(() => {
|
||||
loadImgFromCache();
|
||||
}, []);
|
||||
return (
|
||||
<Link
|
||||
className={"book_card" + (fixed ? " fixed" : "")}
|
||||
to={
|
||||
!offline && !window.onLine
|
||||
? false
|
||||
: reader === undefined
|
||||
? `/book/${id}${fromSearch ? "?from_search=" + fromSearch : ""}`
|
||||
: `/reader/${id}`
|
||||
}
|
||||
style={{
|
||||
color: "black",
|
||||
textDecoration: "none",
|
||||
}}
|
||||
>
|
||||
{!offline && !window.onLine ? (
|
||||
<div className="book_card_deactivate"></div>
|
||||
) : (
|
||||
<md-ripple></md-ripple>
|
||||
)}
|
||||
<div
|
||||
style={{
|
||||
width: "100%",
|
||||
overflow: "hidden",
|
||||
backgroundImage: "url(" + bookImgSrc + ")",
|
||||
backgroundSize: "100%",
|
||||
}}
|
||||
className="book_card_image"
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
left: 5,
|
||||
top: 5,
|
||||
zIndex: 1,
|
||||
background: "var(--md-sys-color-inverse-primary)",
|
||||
padding: 5,
|
||||
borderRadius: 10,
|
||||
}}
|
||||
>
|
||||
<b>{filetype}</b>
|
||||
</div>
|
||||
{/* {
|
||||
collectionDelId ?
|
||||
<div className="book_actions">
|
||||
<IconButton onClick={() => {
|
||||
axios.post("/collection/"+collectionDelId, {book_id: String(id)})
|
||||
}}>
|
||||
<Icon>delete</Icon>
|
||||
</IconButton>
|
||||
</div> : <></>
|
||||
} */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
height: "100%",
|
||||
backdropFilter: "blur(5px)",
|
||||
}}
|
||||
>
|
||||
{loaded ? (
|
||||
<></>
|
||||
) : (
|
||||
<Skeleton
|
||||
style={{
|
||||
width: 240,
|
||||
height: 380,
|
||||
lineHeight: "revert",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<img
|
||||
onLoad={() => setLoaded(true)}
|
||||
style={{
|
||||
pointerEvents: "none",
|
||||
boxShadow: "0px 0px 20px gray",
|
||||
width: "100%",
|
||||
}}
|
||||
src={bookImgSrc}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
padding: "10px 0px",
|
||||
}}
|
||||
>
|
||||
<span className="h-fit line-clamp-2 break-words">
|
||||
<b>{title}</b>
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
color: "gray",
|
||||
}}
|
||||
>
|
||||
{authorsString(authors)}
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
export default BookCard;
|
||||
@@ -0,0 +1,63 @@
|
||||
.book_card {
|
||||
display: flex;
|
||||
border-radius: 17px;
|
||||
/* border: 2px solid var(--md-sys-color-outline); */
|
||||
overflow: hidden;
|
||||
flex-direction: column;
|
||||
width: 180px;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
padding: 10px 10px 0 10px;
|
||||
}
|
||||
.book_card_deactivate {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
z-index: 1;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
md-ripple {
|
||||
z-index: 2;
|
||||
}
|
||||
.book_card_image {
|
||||
height: 280px;
|
||||
border-radius: 12px;
|
||||
position: relative;
|
||||
}
|
||||
.book_actions {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 2;
|
||||
opacity: 0;
|
||||
display: flex;
|
||||
transition: all 0.1s;
|
||||
}
|
||||
.book_actions:hover {
|
||||
opacity: 1;
|
||||
/* background: #ffffff55; */
|
||||
}
|
||||
@media screen and (max-width: 120px) {
|
||||
.book_card:not(.fixed) {
|
||||
width: calc(33% - 9px);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
.book_card:not(.fixed) {
|
||||
width: calc(50% - 25px);
|
||||
}
|
||||
.book_card_image:not(.fixed) {
|
||||
height: 260px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 450px) {
|
||||
.book_card {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
import Skeleton from 'react-loading-skeleton'
|
||||
import "./contents.css"
|
||||
|
||||
const Contents = ({data, readerRef, readerHeight, currentPage, setCurrentPage}) => {
|
||||
const Chapter = ({title, id, subId}) => {
|
||||
if (!readerRef.current) return
|
||||
let totalSections = readerRef.current.getElementsByTagName("section")
|
||||
if (totalSections[id] === undefined) return
|
||||
let anchorOffset = totalSections[id].offsetTop
|
||||
let nextAnchorOffset
|
||||
if (totalSections[id+1] != undefined) {
|
||||
nextAnchorOffset = totalSections[id+1].offsetTop
|
||||
}
|
||||
let anchorPage = Math.ceil(anchorOffset / readerHeight)
|
||||
let nextAnchorPage
|
||||
if (nextAnchorOffset) {
|
||||
nextAnchorPage = Math.ceil(nextAnchorOffset / readerHeight)
|
||||
}
|
||||
return <div
|
||||
className={subId !== undefined ? "contents__chapter sub" : "contents__chapter"}
|
||||
onClick={() => {
|
||||
setCurrentPage(anchorPage)
|
||||
}}
|
||||
style={{
|
||||
backgroundColor: currentPage >= anchorPage && currentPage < nextAnchorPage || currentPage == anchorPage ? "var(--md-sys-color-primary-container)" : ""
|
||||
}}
|
||||
>
|
||||
<md-ripple></md-ripple>
|
||||
{title}
|
||||
</div>
|
||||
}
|
||||
if (!readerRef.current || readerRef.current.getElementsByTagName("section").length === 0) {
|
||||
return <div className="contents">
|
||||
<span className="contents__scroll">
|
||||
<div className="contents__chapter" style={{background: "var(--md-sys-color-primary-container)"}}>
|
||||
<md-ripple></md-ripple>
|
||||
<Skeleton width={200}/>
|
||||
</div>
|
||||
<div className="contents__chapter">
|
||||
<md-ripple></md-ripple>
|
||||
<Skeleton width={130}/>
|
||||
</div>
|
||||
<div className="contents__chapter">
|
||||
<md-ripple></md-ripple>
|
||||
<Skeleton width={180}/>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
let anchors = data.map(chapter => {
|
||||
let chapters = []
|
||||
if (chapter.title === "") return false
|
||||
chapters.push(<Chapter title={chapter.title} id={chapter.id} key={chapter.id}/>)
|
||||
if (chapter.subChapters) {
|
||||
chapter.subChapters.map(subchapter => {
|
||||
if (subchapter.title === "") return false
|
||||
chapters.push(<Chapter title={subchapter.title} id={subchapter.id} subId={subchapter.id} key={subchapter.id}/>)
|
||||
})
|
||||
}
|
||||
return chapters
|
||||
}).filter(val => val !== false)
|
||||
if (anchors.length === 0) {
|
||||
return <></>
|
||||
}
|
||||
return <div className="contents">
|
||||
<span className="contents__scroll">
|
||||
{
|
||||
anchors
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
export default Contents
|
||||
@@ -0,0 +1,30 @@
|
||||
.contents {
|
||||
width: fit-content;
|
||||
height: calc(100vh - 60px);
|
||||
overflow: hidden;
|
||||
}
|
||||
.contents__scroll {
|
||||
display: block;
|
||||
height: calc(100vh - 80px);
|
||||
overflow-x: hidden;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.contents__chapter {
|
||||
border-radius: 15px;
|
||||
/*height: 50px;*/
|
||||
width: 220px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
padding-left: 20px;
|
||||
margin: 5px;
|
||||
cursor: pointer;
|
||||
padding: 15px;
|
||||
}
|
||||
.contents__chapter.sub {
|
||||
width: 205px;
|
||||
padding-left: 20px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
@@ -0,0 +1,281 @@
|
||||
const curVersion = 1
|
||||
|
||||
export function initDB() {
|
||||
return new Promise(resolve => {
|
||||
let openRequest = indexedDB.open("YaBL", curVersion);
|
||||
|
||||
openRequest.onupgradeneeded = () => {
|
||||
console.log("init db!")
|
||||
let db = openRequest.result;
|
||||
if (!db.objectStoreNames.contains('books')) {
|
||||
db.createObjectStore('books', {keyPath: 'id'});
|
||||
}
|
||||
if (!db.objectStoreNames.contains('reader')) {
|
||||
db.createObjectStore('reader', {keyPath: 'id'});
|
||||
}
|
||||
resolve(true)
|
||||
};
|
||||
openRequest.onsuccess = () => {
|
||||
resolve(true)
|
||||
}
|
||||
})
|
||||
}
|
||||
export function addBook(id, bookInfo, contents) {
|
||||
return new Promise(async resolve => {
|
||||
await initDB()
|
||||
let openRequest = indexedDB.open("YaBL", curVersion);
|
||||
openRequest.onsuccess = () => {
|
||||
let db = openRequest.result;
|
||||
db.onversionchange = () => {
|
||||
db.close();
|
||||
alert("База данных устарела, пожалуйста, перезагрузите страницу.")
|
||||
};
|
||||
let transaction = db.transaction("books", "readwrite")
|
||||
let books = transaction.objectStore("books")
|
||||
books.add({
|
||||
id: id,
|
||||
...bookInfo,
|
||||
contents: contents
|
||||
})
|
||||
resolve(true)
|
||||
};
|
||||
openRequest.onerror = () => {
|
||||
resolve(false)
|
||||
}
|
||||
})
|
||||
}
|
||||
export function removeBook(id) {
|
||||
return new Promise(async resolve => {
|
||||
await initDB()
|
||||
let openRequest = indexedDB.open("YaBL", curVersion);
|
||||
openRequest.onsuccess = () => {
|
||||
let db = openRequest.result;
|
||||
db.onversionchange = () => {
|
||||
db.close();
|
||||
alert("База данных устарела, пожалуйста, перезагрузите страницу.")
|
||||
};
|
||||
let transaction = db.transaction("books", "readwrite")
|
||||
let books = transaction.objectStore("books")
|
||||
books.delete(id)
|
||||
resolve(true)
|
||||
};
|
||||
openRequest.onerror = () => {
|
||||
resolve(false)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export function getBook(id) {
|
||||
return new Promise(async resolve => {
|
||||
await initDB()
|
||||
let openRequest = indexedDB.open("YaBL", curVersion);
|
||||
openRequest.onsuccess = () => {
|
||||
let db = openRequest.result;
|
||||
db.onversionchange = () => {
|
||||
db.close();
|
||||
alert("База данных устарела, пожалуйста, перезагрузите страницу.")
|
||||
};
|
||||
let transaction = db.transaction("books")
|
||||
let books = transaction.objectStore("books")
|
||||
let req = books.get(id)
|
||||
req.onsuccess = () => {
|
||||
if (req.result !== undefined) {
|
||||
resolve(req.result)
|
||||
} else {
|
||||
resolve(undefined)
|
||||
}
|
||||
};
|
||||
};
|
||||
openRequest.onerror = () => {
|
||||
resolve(false)
|
||||
}
|
||||
})
|
||||
}
|
||||
export function getAllBooks() {
|
||||
return new Promise(async resolve => {
|
||||
await initDB()
|
||||
let openRequest = indexedDB.open("YaBL", curVersion);
|
||||
openRequest.onsuccess = () => {
|
||||
let db = openRequest.result;
|
||||
db.onversionchange = () => {
|
||||
db.close();
|
||||
alert("База данных устарела, пожалуйста, перезагрузите страницу.")
|
||||
};
|
||||
let transaction = db.transaction("books")
|
||||
let books = transaction.objectStore("books")
|
||||
let req = books.getAll()
|
||||
req.onsuccess = () => {
|
||||
if (req.result !== undefined) {
|
||||
resolve(req.result)
|
||||
} else {
|
||||
resolve(undefined)
|
||||
}
|
||||
};
|
||||
};
|
||||
openRequest.onerror = () => {
|
||||
resolve(false)
|
||||
}
|
||||
})
|
||||
}
|
||||
export function getAllReadBooks() {
|
||||
return new Promise(async resolve => {
|
||||
await initDB()
|
||||
let openRequest = indexedDB.open("YaBL", curVersion);
|
||||
openRequest.onsuccess = () => {
|
||||
let db = openRequest.result;
|
||||
db.onversionchange = () => {
|
||||
db.close();
|
||||
alert("База данных устарела, пожалуйста, перезагрузите страницу.")
|
||||
};
|
||||
let transaction = db.transaction("reader")
|
||||
let reader = transaction.objectStore("reader")
|
||||
let req = reader.getAll()
|
||||
req.onsuccess = () => {
|
||||
if (req.result !== undefined) {
|
||||
resolve(req.result)
|
||||
} else {
|
||||
resolve(undefined)
|
||||
}
|
||||
};
|
||||
};
|
||||
openRequest.onerror = () => {
|
||||
resolve(false)
|
||||
}
|
||||
})
|
||||
}
|
||||
export function getReadBook(id) {
|
||||
return new Promise(async resolve => {
|
||||
await initDB()
|
||||
let openRequest = indexedDB.open("YaBL", curVersion);
|
||||
openRequest.onsuccess = () => {
|
||||
let db = openRequest.result;
|
||||
db.onversionchange = () => {
|
||||
db.close();
|
||||
alert("База данных устарела, пожалуйста, перезагрузите страницу.")
|
||||
};
|
||||
let transaction = db.transaction("reader")
|
||||
let reader = transaction.objectStore("reader")
|
||||
let req = reader.get(id)
|
||||
req.onsuccess = () => {
|
||||
if (req.result !== undefined) {
|
||||
resolve(req.result)
|
||||
} else {
|
||||
resolve(undefined)
|
||||
}
|
||||
};
|
||||
};
|
||||
openRequest.onerror = () => {
|
||||
resolve(false)
|
||||
}
|
||||
})
|
||||
}
|
||||
export function updateReadBook(id, progress) {
|
||||
return new Promise(async resolve => {
|
||||
await initDB()
|
||||
let openRequest = indexedDB.open("YaBL", curVersion);
|
||||
openRequest.onsuccess = () => {
|
||||
let db = openRequest.result;
|
||||
db.onversionchange = () => {
|
||||
db.close();
|
||||
alert("База данных устарела, пожалуйста, перезагрузите страницу.")
|
||||
};
|
||||
let transaction = db.transaction("reader", "readwrite")
|
||||
let reader = transaction.objectStore("reader")
|
||||
let prev = reader.get(id)
|
||||
prev.onsuccess = () => {
|
||||
reader.put({
|
||||
id: id,
|
||||
...prev.result,
|
||||
progress: progress,
|
||||
lastRead: Math.floor(Date.now() / 1000)
|
||||
})
|
||||
resolve(true)
|
||||
}
|
||||
};
|
||||
openRequest.onerror = () => {
|
||||
resolve(false)
|
||||
}
|
||||
})
|
||||
}
|
||||
export function putReadBook(id, onBookshelf, bookInfo) {
|
||||
return new Promise(async resolve => {
|
||||
await initDB()
|
||||
let openRequest = indexedDB.open("YaBL", curVersion);
|
||||
openRequest.onsuccess = () => {
|
||||
let db = openRequest.result;
|
||||
db.onversionchange = () => {
|
||||
db.close();
|
||||
alert("База данных устарела, пожалуйста, перезагрузите страницу.")
|
||||
};
|
||||
let transaction = db.transaction("reader", "readwrite")
|
||||
let reader = transaction.objectStore("reader")
|
||||
let prev = reader.get(id)
|
||||
prev.onsuccess = () => {
|
||||
reader.put({
|
||||
id: id,
|
||||
...prev.result,
|
||||
onBookshelf: onBookshelf,
|
||||
bookInfo: onBookshelf ? {
|
||||
title: bookInfo.title,
|
||||
authors: bookInfo.authors,
|
||||
} : {}
|
||||
})
|
||||
resolve(true)
|
||||
}
|
||||
};
|
||||
openRequest.onerror = () => {
|
||||
resolve(false)
|
||||
}
|
||||
})
|
||||
}
|
||||
export function saveReadBook(id, offline) {
|
||||
return new Promise(async resolve => {
|
||||
await initDB()
|
||||
let openRequest = indexedDB.open("YaBL", curVersion);
|
||||
openRequest.onsuccess = () => {
|
||||
let db = openRequest.result;
|
||||
db.onversionchange = () => {
|
||||
db.close();
|
||||
alert("База данных устарела, пожалуйста, перезагрузите страницу.")
|
||||
};
|
||||
let transaction = db.transaction("reader", "readwrite")
|
||||
let reader = transaction.objectStore("reader")
|
||||
let prev = reader.get(id)
|
||||
prev.onsuccess = () => {
|
||||
reader.put({
|
||||
id: id,
|
||||
...prev.result,
|
||||
offline: offline,
|
||||
})
|
||||
resolve(true)
|
||||
}
|
||||
};
|
||||
openRequest.onerror = () => {
|
||||
resolve(false)
|
||||
}
|
||||
})
|
||||
}
|
||||
export function syncReadBook(syncData) {
|
||||
return new Promise(async resolve => {
|
||||
await initDB()
|
||||
let openRequest = indexedDB.open("YaBL", curVersion);
|
||||
openRequest.onsuccess = () => {
|
||||
let db = openRequest.result;
|
||||
db.onversionchange = () => {
|
||||
db.close();
|
||||
alert("База данных устарела, пожалуйста, перезагрузите страницу.")
|
||||
};
|
||||
let transaction = db.transaction("reader", "readwrite")
|
||||
let reader = transaction.objectStore("reader")
|
||||
reader.clear()
|
||||
if (syncData === null) {resolve(true); return}
|
||||
for (let book of syncData) {
|
||||
reader.add(book)
|
||||
}
|
||||
resolve(true)
|
||||
};
|
||||
openRequest.onerror = () => {
|
||||
resolve(false)
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
:root {
|
||||
--md-sys-color-primary: olive;
|
||||
--md-sys-color-secondary: tomato;
|
||||
--md-ref-typeface-brand: "MiSans Regular";
|
||||
--md-ref-typeface-plain: "MiSans Regular";
|
||||
font-family: "MiSans Regular";
|
||||
}
|
||||
md-icon {
|
||||
--md-icon-font: "Material Symbols Rounded";
|
||||
font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Material Symbols Rounded";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(/material-icons-rounded.woff2) format("woff2");
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-family: "MiSans Regular";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(/moscowsansregular.woff2) format("woff2");
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--md-sys-color-background);
|
||||
--md-sys-color-surface-container-high: var(--md-sys-color-surface-variant);
|
||||
--md-sys-color-surface-container-highest: var(--md-sys-color-surface-variant);
|
||||
--md-sys-color-surface-container: var(--md-sys-color-surface-variant);
|
||||
}
|
||||
span,
|
||||
p,
|
||||
td,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
b,
|
||||
v,
|
||||
cite,
|
||||
/* md-icon, */
|
||||
input {
|
||||
color: var(--md-sys-color-on-background);
|
||||
}
|
||||
#root {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Material Symbols Rounded Filled";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(/material-icons-filled.woff) format("woff");
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(155, 155, 155);
|
||||
border-radius: 20px;
|
||||
border: transparent;
|
||||
}
|
||||
|
||||
@layer theme, base, components, utilities;
|
||||
@import "tailwindcss/theme.css" layer(theme);
|
||||
@import "tailwindcss/utilities.css" layer(utilities);
|
||||
@@ -0,0 +1,18 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import App from "./App.jsx";
|
||||
import "./index.css";
|
||||
import "react-loading-skeleton/dist/skeleton.css";
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
import axios from "axios";
|
||||
import { registerSW } from "virtual:pwa-register";
|
||||
|
||||
registerSW({ immediate: true });
|
||||
|
||||
axios.defaults.baseURL = "/api";
|
||||
|
||||
ReactDOM.createRoot(document.getElementById("root")).render(
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
);
|
||||
@@ -0,0 +1,14 @@
|
||||
import React from "react";
|
||||
import { createComponent } from "@lit/react";
|
||||
import { MdAssistChip } from "@material/web/chips/assist-chip";
|
||||
|
||||
const AssistChip = createComponent({
|
||||
tagName: "md-assist-chip",
|
||||
elementClass: MdAssistChip,
|
||||
react: React,
|
||||
events: {
|
||||
onClick: "click"
|
||||
}
|
||||
});
|
||||
|
||||
export default AssistChip
|
||||
@@ -0,0 +1,14 @@
|
||||
import React from "react";
|
||||
import { createComponent } from "@lit/react";
|
||||
import { MdChipSet } from "@material/web/chips/chip-set";
|
||||
|
||||
const ChipSet = createComponent({
|
||||
tagName: "md-chip-set",
|
||||
elementClass: MdChipSet,
|
||||
react: React,
|
||||
events: {
|
||||
onClick: "click"
|
||||
}
|
||||
});
|
||||
|
||||
export default ChipSet
|
||||
@@ -0,0 +1,14 @@
|
||||
import React from "react";
|
||||
import { createComponent } from "@lit/react";
|
||||
import { MdIconButton } from "@material/web/iconbutton/icon-button";
|
||||
|
||||
const DefaultIconButton = createComponent({
|
||||
tagName: "md-icon-button",
|
||||
elementClass: MdIconButton,
|
||||
react: React,
|
||||
events: {
|
||||
onClick: "click"
|
||||
}
|
||||
});
|
||||
|
||||
export default DefaultIconButton
|
||||
@@ -0,0 +1,15 @@
|
||||
import React from "react";
|
||||
import { createComponent } from "@lit/react";
|
||||
import { MdDialog } from "@material/web/dialog/dialog";
|
||||
|
||||
const Dialog = createComponent({
|
||||
tagName: "md-dialog",
|
||||
elementClass: MdDialog,
|
||||
react: React,
|
||||
events: {
|
||||
onClick: "click",
|
||||
onClose: "close"
|
||||
}
|
||||
});
|
||||
|
||||
export default Dialog
|
||||
@@ -0,0 +1,14 @@
|
||||
import React from "react";
|
||||
import { createComponent } from "@lit/react";
|
||||
import { MdFilledButton } from "@material/web/button/filled-button";
|
||||
|
||||
const FilledButton = createComponent({
|
||||
tagName: "md-filled-button",
|
||||
elementClass: MdFilledButton,
|
||||
react: React,
|
||||
events: {
|
||||
onClick: "click"
|
||||
}
|
||||
});
|
||||
|
||||
export default FilledButton
|
||||
@@ -0,0 +1,14 @@
|
||||
import React from "react";
|
||||
import { createComponent } from "@lit/react";
|
||||
import { MdIcon } from "@material/web/icon/icon";
|
||||
|
||||
const Icon = createComponent({
|
||||
tagName: "md-icon",
|
||||
elementClass: MdIcon,
|
||||
react: React,
|
||||
events: {
|
||||
onClick: "click"
|
||||
}
|
||||
});
|
||||
|
||||
export default Icon
|
||||
@@ -0,0 +1,14 @@
|
||||
import React from "react";
|
||||
import { createComponent } from "@lit/react";
|
||||
import { MdFilledTonalIconButton } from "@material/web/iconbutton/filled-tonal-icon-button";
|
||||
|
||||
const IconButton = createComponent({
|
||||
tagName: "md-filled-tonal-icon-button",
|
||||
elementClass: MdFilledTonalIconButton,
|
||||
react: React,
|
||||
events: {
|
||||
onClick: "click"
|
||||
}
|
||||
});
|
||||
|
||||
export default IconButton
|
||||
@@ -0,0 +1,15 @@
|
||||
import React from "react";
|
||||
import { createComponent } from "@lit/react";
|
||||
import { MdInputChip } from "@material/web/chips/input-chip";
|
||||
|
||||
const InputChip = createComponent({
|
||||
tagName: "md-input-chip",
|
||||
elementClass: MdInputChip,
|
||||
react: React,
|
||||
events: {
|
||||
onClick: "click",
|
||||
onRemove: "remove"
|
||||
}
|
||||
});
|
||||
|
||||
export default InputChip
|
||||
@@ -0,0 +1,14 @@
|
||||
import React from "react";
|
||||
import { createComponent } from "@lit/react";
|
||||
import { MdLinearProgress } from "@material/web/progress/linear-progress";
|
||||
|
||||
const LinearProgress = createComponent({
|
||||
tagName: "md-linear-progress",
|
||||
elementClass: MdLinearProgress,
|
||||
react: React,
|
||||
events: {
|
||||
onClick: "click"
|
||||
}
|
||||
});
|
||||
|
||||
export default LinearProgress
|
||||
@@ -0,0 +1,14 @@
|
||||
import React from "react";
|
||||
import { createComponent } from "@lit/react";
|
||||
import { MdList } from "@material/web/list/list";
|
||||
|
||||
const List = createComponent({
|
||||
tagName: "md-list",
|
||||
elementClass: MdList,
|
||||
react: React,
|
||||
events: {
|
||||
onClick: "click"
|
||||
}
|
||||
});
|
||||
|
||||
export default List
|
||||
@@ -0,0 +1,14 @@
|
||||
import React from "react";
|
||||
import { createComponent } from "@lit/react";
|
||||
import { MdListItem } from "@material/web/list/list-item";
|
||||
|
||||
const ListItem = createComponent({
|
||||
tagName: "md-list-item",
|
||||
elementClass: MdListItem,
|
||||
react: React,
|
||||
events: {
|
||||
onClick: "click"
|
||||
}
|
||||
});
|
||||
|
||||
export default ListItem
|
||||
@@ -0,0 +1,14 @@
|
||||
import React from "react";
|
||||
import { createComponent } from "@lit/react";
|
||||
import { MdMenu } from "@material/web/menu/menu";
|
||||
|
||||
const Menu = createComponent({
|
||||
tagName: "md-menu",
|
||||
elementClass: MdMenu,
|
||||
react: React,
|
||||
events: {
|
||||
onClick: "click"
|
||||
}
|
||||
});
|
||||
|
||||
export default Menu
|
||||
@@ -0,0 +1,14 @@
|
||||
import React from "react";
|
||||
import { createComponent } from "@lit/react";
|
||||
import { MdMenuItem } from "@material/web/menu/menu-item";
|
||||
|
||||
const MenuItem = createComponent({
|
||||
tagName: "md-menu-item",
|
||||
elementClass: MdMenuItem,
|
||||
react: React,
|
||||
events: {
|
||||
onClick: "click"
|
||||
}
|
||||
});
|
||||
|
||||
export default MenuItem
|
||||
@@ -0,0 +1,14 @@
|
||||
import React from "react";
|
||||
import { createComponent } from "@lit/react";
|
||||
import { MdOutlinedButton } from "@material/web/button/outlined-button";
|
||||
|
||||
const OutlinedButton = createComponent({
|
||||
tagName: "md-outlined-button",
|
||||
elementClass: MdOutlinedButton,
|
||||
react: React,
|
||||
events: {
|
||||
onClick: "click"
|
||||
}
|
||||
});
|
||||
|
||||
export default OutlinedButton
|
||||
@@ -0,0 +1,14 @@
|
||||
import React from "react";
|
||||
import { createComponent } from "@lit/react";
|
||||
import { MdOutlinedIconButton } from "@material/web/iconbutton/outlined-icon-button";
|
||||
|
||||
const OutlinedIconButton = createComponent({
|
||||
tagName: "md-outlined-icon-button",
|
||||
elementClass: MdOutlinedIconButton,
|
||||
react: React,
|
||||
events: {
|
||||
onClick: "click"
|
||||
}
|
||||
});
|
||||
|
||||
export default OutlinedIconButton
|
||||
@@ -0,0 +1,14 @@
|
||||
import React from "react";
|
||||
import { createComponent } from "@lit/react";
|
||||
import { MdPrimaryTab } from "@material/web/tabs/primary-tab";
|
||||
|
||||
const PrimaryTab = createComponent({
|
||||
tagName: "md-primary-tab",
|
||||
elementClass: MdPrimaryTab,
|
||||
react: React,
|
||||
events: {
|
||||
onClick: "click"
|
||||
}
|
||||
});
|
||||
|
||||
export default PrimaryTab
|
||||
@@ -0,0 +1,15 @@
|
||||
import React from "react";
|
||||
import { createComponent } from "@lit/react";
|
||||
import { MdTabs } from "@material/web/tabs/tabs";
|
||||
|
||||
const Tabs = createComponent({
|
||||
tagName: "md-tabs",
|
||||
elementClass: MdTabs,
|
||||
react: React,
|
||||
events: {
|
||||
onClick: "click",
|
||||
onChange: "change"
|
||||
}
|
||||
});
|
||||
|
||||
export default Tabs
|
||||
@@ -0,0 +1,14 @@
|
||||
import React from "react";
|
||||
import { createComponent } from "@lit/react";
|
||||
import { MdTextButton } from "@material/web/button/text-button";
|
||||
|
||||
const TextButton = createComponent({
|
||||
tagName: "md-text-button",
|
||||
elementClass: MdTextButton,
|
||||
react: React,
|
||||
events: {
|
||||
onClick: "click"
|
||||
}
|
||||
});
|
||||
|
||||
export default TextButton
|
||||
@@ -0,0 +1,14 @@
|
||||
import React from "react";
|
||||
import { createComponent } from "@lit/react";
|
||||
import { MdOutlinedTextField } from "@material/web/textfield/outlined-text-field";
|
||||
|
||||
const TextField = createComponent({
|
||||
tagName: "md-outlined-text-field",
|
||||
elementClass: MdOutlinedTextField,
|
||||
react: React,
|
||||
events: {
|
||||
onClick: "click"
|
||||
}
|
||||
});
|
||||
|
||||
export default TextField
|
||||
@@ -0,0 +1,88 @@
|
||||
import { useRef, useState } from "react"
|
||||
import FilledButton from "../md-components/FilledButton"
|
||||
import TextField from "../md-components/TextField"
|
||||
import axios from "axios"
|
||||
import { useNavigate } from "react-router"
|
||||
import { toast } from "react-toastify"
|
||||
import { useSearchParams } from "react-router-dom"
|
||||
|
||||
const AuthPage = () => {
|
||||
const widthStyle = {width: "100%"}
|
||||
const [login, setLogin] = useState("")
|
||||
const [password, setPassword] = useState("")
|
||||
const submitRef = useRef()
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
const navigate = useNavigate()
|
||||
const [searchParams] = useSearchParams()
|
||||
|
||||
function makeLogin() {
|
||||
if (loading) return
|
||||
setLoading(true)
|
||||
axios.post("/auth", {login: login, password: password})
|
||||
.then(() => {
|
||||
axios.get("/user")
|
||||
.then(res => {localStorage.setItem("userInfo", JSON.stringify(res.data))})
|
||||
if (searchParams.get("to") !== null) {
|
||||
navigate(searchParams.get("to"))
|
||||
} else {
|
||||
navigate("/")
|
||||
}
|
||||
})
|
||||
.catch(() => {toast.error("Неверный логин или пароль!");setLoading(false)})
|
||||
}
|
||||
function handleSubmit(e) {
|
||||
if(e.key==="Enter"){
|
||||
submitRef.current.click()
|
||||
}
|
||||
}
|
||||
return <div style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
minHeight: "100vh",
|
||||
flexDirection: "column",
|
||||
gap: "15px",
|
||||
margin: "0 15px"
|
||||
}}>
|
||||
<h2>Вход</h2>
|
||||
<form onSubmit={(e) => {e.preventDefault();makeLogin()}}
|
||||
id="form-id"
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "15px",
|
||||
width: "100%",
|
||||
maxWidth: "400px",
|
||||
alignItems: "center",
|
||||
}}>
|
||||
<TextField
|
||||
style={widthStyle}
|
||||
label="Логин"
|
||||
required
|
||||
onInput={e => setLogin(e.target.value.toLowerCase())}
|
||||
value={login}
|
||||
onKeyDown={handleSubmit}
|
||||
disabled={loading}
|
||||
/>
|
||||
<TextField
|
||||
style={widthStyle}
|
||||
label="Пароль"
|
||||
required
|
||||
type="password"
|
||||
onInput={e => setPassword(e.target.value)}
|
||||
value={password}
|
||||
onKeyDown={handleSubmit}
|
||||
disable={loading}
|
||||
/>
|
||||
<FilledButton
|
||||
type="submit"
|
||||
style={widthStyle}
|
||||
ref={submitRef}
|
||||
disabled={loading}
|
||||
>Войти</FilledButton>
|
||||
</form>
|
||||
</div>
|
||||
}
|
||||
|
||||
export default AuthPage
|
||||
@@ -0,0 +1,76 @@
|
||||
.book_container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 40px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.book_cover {
|
||||
border-radius: 25px;
|
||||
max-width: 400px;
|
||||
align-self: flex-start;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.book_info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 580px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.buttons_container {
|
||||
display: flex;
|
||||
gap: 25px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.action_button {
|
||||
flex-basis: 33%;
|
||||
}
|
||||
|
||||
.info_table td:last-child {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.m3infoTable h3 {
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
/* font-family: monospace; */
|
||||
/* font-weight: bolder; */
|
||||
}
|
||||
.m3infoTable span {
|
||||
display: block;
|
||||
font-family: monospace;
|
||||
margin-bottom: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: calc(640px + 400px)) { /* мини картинка */
|
||||
.book_cover {
|
||||
max-width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: calc(640px + 200px)) { /* телефонный вид */
|
||||
.book_cover {
|
||||
max-width: calc(100% - 15px);
|
||||
max-height: 300px;
|
||||
align-self: center;
|
||||
}
|
||||
.book_container {
|
||||
flex-direction: column;
|
||||
}
|
||||
.book_info {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) { /* кнопки в столбик */
|
||||
.buttons_container {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.action_button {
|
||||
flex-basis: auto;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,464 @@
|
||||
import { useNavigate, useParams } from "react-router";
|
||||
import "@material/web/chips/assist-chip";
|
||||
import "@material/web/chips/chip-set";
|
||||
import ChipSet from "../md-components/ChipSet";
|
||||
import AssistChip from "../md-components/AssistChip";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import FilledButton from "../md-components/FilledButton";
|
||||
import Dialog from "../md-components/Dialog";
|
||||
import OutlinedButton from "../md-components/OutlinedButton";
|
||||
import Icon from "../md-components/Icon";
|
||||
import "./BookPage.css";
|
||||
import Skeleton from "react-loading-skeleton";
|
||||
import axios from "axios";
|
||||
import DOMPurify from "dompurify";
|
||||
import { Link } from "react-router-dom";
|
||||
import { getBook } from "../db";
|
||||
import { translit } from "../translit";
|
||||
import { toast } from "react-toastify";
|
||||
import IconButton from "../md-components/IconButton";
|
||||
import NotFound from "./NotFound";
|
||||
import MenuItem from "../md-components/MenuItem";
|
||||
import Menu from "../md-components/Menu";
|
||||
import List from "../md-components/List";
|
||||
import ListItem from "../md-components/ListItem";
|
||||
import TextField from "../md-components/TextField";
|
||||
|
||||
const InfoRow = ({ field, name }) => {
|
||||
if (!field) return;
|
||||
let result = field;
|
||||
if (result instanceof Object) {
|
||||
result = field.map((obj) => obj.name);
|
||||
}
|
||||
if (result instanceof Array) {
|
||||
result = result.join(", ");
|
||||
}
|
||||
return (
|
||||
<tr>
|
||||
<td>{name}</td>
|
||||
<td>{result}</td>
|
||||
</tr>
|
||||
);
|
||||
};
|
||||
|
||||
const BookPage = () => {
|
||||
const { id } = useParams();
|
||||
const [bookInfo, setBookInfo] = useState(false);
|
||||
const [bookImgSrc, setBookImgSrc] = useState();
|
||||
const [openShare, setOpenShare] = useState(false);
|
||||
const [openInfo, setOpenInfo] = useState(false);
|
||||
const [allCollections, setAllCollections] = useState([]);
|
||||
const [collectionsFilter, setCollectionsFilter] = useState([]);
|
||||
const [downloading, setDownloading] = useState(false);
|
||||
|
||||
const navigate = useNavigate();
|
||||
async function loadImgFromCache() {
|
||||
if (window.caches === undefined) {
|
||||
setBookImgSrc(axios.defaults.baseURL + "/book/" + id + "/cover");
|
||||
return;
|
||||
}
|
||||
let cache = await window.caches.open("bookCovers");
|
||||
let img = await cache.match(`/api/book/${id}/cover`);
|
||||
if (img === undefined) {
|
||||
setBookImgSrc(axios.defaults.baseURL + "/book/" + id + "/cover");
|
||||
return;
|
||||
}
|
||||
let blob = await img.blob();
|
||||
setBookImgSrc(URL.createObjectURL(blob));
|
||||
}
|
||||
const loadBookInfo = async (soft) => {
|
||||
if (!soft) {
|
||||
setBookInfo(false);
|
||||
}
|
||||
loadImgFromCache();
|
||||
let localBook = await getBook(id);
|
||||
if (window.onLine && !localBook) {
|
||||
axios
|
||||
.get("/book/" + id)
|
||||
.then((res) => setBookInfo(res.data))
|
||||
.catch(() => setBookInfo(404));
|
||||
axios.get("/collection").then((res) => setAllCollections(res.data));
|
||||
} else if (localBook) {
|
||||
setBookInfo(localBook);
|
||||
} else {
|
||||
navigate("/offline");
|
||||
}
|
||||
};
|
||||
const updateCollections = (id) => {
|
||||
setAllCollections((a) =>
|
||||
a.map((c) => {
|
||||
if (c.id !== id) return c;
|
||||
c.hasBook = !c.hasBook;
|
||||
return c;
|
||||
})
|
||||
);
|
||||
};
|
||||
useEffect(() => {
|
||||
loadBookInfo();
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
// первоначальная загрузка наличия книги в списках (ааа какой же костыль)
|
||||
if (bookInfo.collections) {
|
||||
setAllCollections((a) =>
|
||||
a.map((c) => {
|
||||
if (bookInfo.collections.filter((o) => o.id === c.id).length > 0) {
|
||||
c.hasBook = true;
|
||||
} else {
|
||||
c.hasBook = false;
|
||||
}
|
||||
return c;
|
||||
})
|
||||
);
|
||||
}
|
||||
}, [bookInfo]);
|
||||
async function getBookBlob() {
|
||||
return (await axios.get(`/book/${id}/download`, { responseType: "blob" }))
|
||||
.data;
|
||||
}
|
||||
function getBookFilename() {
|
||||
if (bookInfo.authors === null) {
|
||||
return `${translit(bookInfo.title)}.${bookInfo.filetype}`;
|
||||
} else {
|
||||
return `${translit(bookInfo.authors[0].name)}_-_${translit(
|
||||
bookInfo.title
|
||||
)}.${bookInfo.filetype}`;
|
||||
}
|
||||
}
|
||||
async function downloadBook() {
|
||||
setDownloading(true);
|
||||
let a = document.createElement("a");
|
||||
let bookBlob = await getBookBlob();
|
||||
document.body.appendChild(a);
|
||||
a.style = "display: none";
|
||||
let blobURL = URL.createObjectURL(bookBlob);
|
||||
a.href = blobURL;
|
||||
a.download = getBookFilename();
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(blobURL);
|
||||
setDownloading(false);
|
||||
}
|
||||
const selectLinkRef = useRef();
|
||||
const collectionDialogRef = useRef();
|
||||
function share() {
|
||||
setOpenShare(true);
|
||||
}
|
||||
if (bookInfo == 404) {
|
||||
return <NotFound />;
|
||||
}
|
||||
return (
|
||||
<div className="book_container">
|
||||
<Dialog open={openShare} onClose={() => setOpenShare(false)}>
|
||||
<div slot="headline">Поделиться</div>
|
||||
<div slot="content">
|
||||
<div
|
||||
style={{
|
||||
background: "var(--md-sys-color-inverse-on-surface)",
|
||||
color: "white",
|
||||
padding: "10px",
|
||||
borderRadius: "25px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "15px",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
ref={selectLinkRef}
|
||||
style={{ wordBreak: "break-all", textAlign: "center" }}
|
||||
>
|
||||
{window.location.protocol +
|
||||
"//" +
|
||||
window.location.host +
|
||||
window.location.pathname}
|
||||
</span>
|
||||
<div style={{ width: "40px", height: "40px" }}>
|
||||
<IconButton
|
||||
onClick={async () => {
|
||||
let range = document.createRange();
|
||||
range.selectNode(selectLinkRef.current);
|
||||
let sel = window.getSelection();
|
||||
sel.removeAllRanges();
|
||||
sel.addRange(range);
|
||||
await navigator.clipboard.writeText(sel.toString());
|
||||
toast.success("скопировано");
|
||||
}}
|
||||
disabled={navigator.clipboard === undefined}
|
||||
>
|
||||
<Icon>link</Icon>
|
||||
</IconButton>
|
||||
</div>
|
||||
</div>
|
||||
{navigator.share === undefined ? (
|
||||
<p style={{ color: "#ff3333" }}>
|
||||
Ваш браузер не поддерживает{" "}
|
||||
<a
|
||||
href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share"
|
||||
style={{ color: "#ff3333" }}
|
||||
>
|
||||
share api
|
||||
</a>
|
||||
</p>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</div>
|
||||
<div slot="actions">
|
||||
<OutlinedButton onClick={() => setOpenShare(false)}>
|
||||
закрыть
|
||||
</OutlinedButton>
|
||||
{/* FileShare - до лучших времен
|
||||
<OutlinedIconButton
|
||||
disabled={navigator.share === undefined}
|
||||
onClick={async () => {
|
||||
let bookBlob = await getBookBlob()
|
||||
console.log(bookBlob)
|
||||
navigator.share({
|
||||
files: [
|
||||
new File(
|
||||
[bookBlob],
|
||||
"test.fb2",
|
||||
{
|
||||
type: "application/pdf"
|
||||
}
|
||||
)
|
||||
],
|
||||
text: "YaBL - " + bookInfo.title,
|
||||
title: 'some_title',
|
||||
url: 'some_url'
|
||||
})
|
||||
}}
|
||||
>
|
||||
<Icon>attach_file</Icon>
|
||||
</OutlinedIconButton> */}
|
||||
<FilledButton
|
||||
onClick={() => {
|
||||
setOpenShare(false);
|
||||
navigator.share({
|
||||
url: "",
|
||||
title: "YaBL - " + bookInfo.title,
|
||||
});
|
||||
}}
|
||||
disabled={navigator.share === undefined}
|
||||
autoFocus
|
||||
>
|
||||
<Icon slot="icon">share</Icon>
|
||||
поделиться
|
||||
</FilledButton>
|
||||
</div>
|
||||
</Dialog>
|
||||
<Dialog open={openInfo} onClose={() => setOpenInfo(false)}>
|
||||
<div slot="headline">Информация</div>
|
||||
<div slot="content" className="m3infoTable">
|
||||
<h3>Вес файла</h3>
|
||||
<span>{(bookInfo.size / 1024 / 1024).toFixed(2)} Мб</span>
|
||||
<h3>Файл</h3>
|
||||
<span>{bookInfo.filename}</span>
|
||||
<h3>Хеш (xxh64)</h3>
|
||||
<span>{bookInfo.hash || "отсутствует"}</span>
|
||||
<h3>Архив</h3>
|
||||
<span>{bookInfo.bookcase}</span>
|
||||
</div>
|
||||
<div slot="actions">
|
||||
<FilledButton onClick={() => setOpenInfo(false)}>
|
||||
закрыть
|
||||
</FilledButton>
|
||||
</div>
|
||||
</Dialog>
|
||||
<Dialog ref={collectionDialogRef}>
|
||||
<div slot="headline">Коллекции</div>
|
||||
<div slot="content">
|
||||
<TextField onInput={(e) => setCollectionsFilter(e.target.value)}>
|
||||
<Icon slot="leading-icon">search</Icon>
|
||||
</TextField>
|
||||
<br />
|
||||
<br />
|
||||
<div style={{ height: 300 }}>
|
||||
<List
|
||||
style={{
|
||||
borderRadius: 12,
|
||||
overflowX: "hidden",
|
||||
height: "calc(100% - 10px)",
|
||||
}}
|
||||
>
|
||||
{allCollections
|
||||
.filter((coll) => coll.name.includes(collectionsFilter))
|
||||
.map((coll) => (
|
||||
<ListItem
|
||||
key={coll.id}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
axios
|
||||
.post("/collection/" + coll.id, { book_id: id })
|
||||
.then(() => updateCollections(coll.id));
|
||||
}}
|
||||
>
|
||||
{coll.name}
|
||||
{coll.hasBook ? <Icon slot="end">check</Icon> : <></>}
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="actions">
|
||||
<FilledButton onClick={() => collectionDialogRef.current.close()}>
|
||||
закрыть
|
||||
</FilledButton>
|
||||
</div>
|
||||
</Dialog>
|
||||
<img className="book_cover" src={bookImgSrc} />
|
||||
<div className="book_info">
|
||||
<span
|
||||
className="break-words"
|
||||
style={{
|
||||
fontSize: "35px",
|
||||
}}
|
||||
>
|
||||
{bookInfo.title || <Skeleton width={200} />}
|
||||
</span>
|
||||
<span>
|
||||
{bookInfo.authors ? (
|
||||
bookInfo.authors
|
||||
.map((author) => (
|
||||
<Link
|
||||
to={`/search?author=${author.id}&offset=0&limit=10`}
|
||||
style={{ color: "var(--md-sys-color-on-background)" }}
|
||||
>
|
||||
{author.name}
|
||||
</Link>
|
||||
))
|
||||
.reduce((prev, curr) => [prev, ", ", curr])
|
||||
) : bookInfo.authors === null ? (
|
||||
<span>Автор неизвестен</span>
|
||||
) : (
|
||||
<Skeleton width={300} />
|
||||
)}
|
||||
</span>
|
||||
<ChipSet
|
||||
style={{
|
||||
margin: "10px 0",
|
||||
}}
|
||||
>
|
||||
{bookInfo.genres !== undefined ? (
|
||||
bookInfo.genres !== null ? (
|
||||
bookInfo.genres.map((value) => (
|
||||
<AssistChip label={value.name} key={value.id} />
|
||||
))
|
||||
) : (
|
||||
<></>
|
||||
)
|
||||
) : (
|
||||
[150, 100, 200].map((w, key) => (
|
||||
<Skeleton width={w} height={32} key={key} />
|
||||
))
|
||||
)}
|
||||
</ChipSet>
|
||||
|
||||
<div className="buttons_container">
|
||||
<FilledButton
|
||||
style={{ width: "100%" }}
|
||||
disabled={!window.onLine || downloading}
|
||||
onClick={downloadBook}
|
||||
className="action_button"
|
||||
>
|
||||
{downloading ? (
|
||||
<>
|
||||
<div slot="icon" class="flex justify-center items-center">
|
||||
<div class="w-3 border-t-transparent rounded-full h-3 border-2 animate-spin"></div>
|
||||
</div>
|
||||
<>Загрузка...</>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Icon slot="icon" style={{ marginTop: "2px" }}>
|
||||
download
|
||||
</Icon>
|
||||
<>Скачать .{bookInfo.filetype}</>
|
||||
</>
|
||||
)}
|
||||
</FilledButton>
|
||||
<Link to={"/reader/" + id} className="action_button">
|
||||
<OutlinedButton style={{ width: "100%" }}>
|
||||
<Icon slot="icon" style={{ marginTop: "2px" }}>
|
||||
chrome_reader_mode
|
||||
</Icon>
|
||||
Читать онлайн
|
||||
</OutlinedButton>
|
||||
</Link>
|
||||
<OutlinedButton
|
||||
disabled={!window.onLine}
|
||||
className="action_button"
|
||||
onClick={() => collectionDialogRef.current.show()}
|
||||
>
|
||||
<Icon
|
||||
slot="icon"
|
||||
style={{
|
||||
marginTop: "2px",
|
||||
}}
|
||||
>
|
||||
collections_bookmark
|
||||
</Icon>
|
||||
В коллекцию
|
||||
</OutlinedButton>
|
||||
</div>
|
||||
{bookInfo.description !== "" ? (
|
||||
<span>
|
||||
<b>Описание</b>
|
||||
</span>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
{bookInfo.description !== undefined || bookInfo.description !== "" ? (
|
||||
<div
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: DOMPurify.sanitize(bookInfo.description),
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Skeleton count={10} />
|
||||
)}
|
||||
<div style={{ height: "20px" }} />
|
||||
<span>
|
||||
<b>Информация</b>
|
||||
</span>
|
||||
<div style={{ height: "20px" }} />
|
||||
{bookInfo ? (
|
||||
<table className="info_table">
|
||||
<tbody>
|
||||
<InfoRow field={bookInfo.lang} name={"Язык"} />
|
||||
<InfoRow field={bookInfo.translators} name={"Переводчики"} />
|
||||
<InfoRow field={bookInfo.sequence} name={"Серия"} />
|
||||
<InfoRow field={bookInfo.src_lang} name={"Язык оригинала"} />
|
||||
<InfoRow field={bookInfo.isbn} name={"ISBN"} />
|
||||
<InfoRow field={bookInfo.publisher} name={"Издатель"} />
|
||||
<InfoRow field={bookInfo.year} name={"Год выхода"} />
|
||||
<InfoRow field={bookInfo.downloads} name={"Загрузки"} />
|
||||
</tbody>
|
||||
</table>
|
||||
) : (
|
||||
<Skeleton count={5} />
|
||||
)}
|
||||
<div
|
||||
style={{
|
||||
marginTop: "25px",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: "15px",
|
||||
}}
|
||||
>
|
||||
<IconButton onClick={() => setOpenInfo(true)}>
|
||||
<Icon>info</Icon>
|
||||
</IconButton>
|
||||
<IconButton onClick={() => share()}>
|
||||
<Icon>share</Icon>
|
||||
</IconButton>
|
||||
<IconButton onClick={() => toast.info("coming soon...")}>
|
||||
<Icon>flag</Icon>
|
||||
</IconButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BookPage;
|
||||
@@ -0,0 +1,21 @@
|
||||
import { useEffect } from "react"
|
||||
import SearchHeader from "./SearchHeader"
|
||||
|
||||
|
||||
const MainPage = () => {
|
||||
useEffect(() => {
|
||||
|
||||
})
|
||||
return <div style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
minHeight: "100vh",
|
||||
width: "calc(100% - 30px)",
|
||||
margin: "0 15px",
|
||||
}}>
|
||||
<SearchHeader/>
|
||||
</div>
|
||||
}
|
||||
|
||||
export default MainPage
|
||||
@@ -0,0 +1,24 @@
|
||||
import { Link } from "react-router-dom"
|
||||
import FilledButton from "../md-components/FilledButton"
|
||||
import Icon from "../md-components/Icon"
|
||||
|
||||
const NotFound = () => {
|
||||
return <div style={{
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
flexDirection: "column",
|
||||
gap: "40px"
|
||||
}}>
|
||||
<h1 style={{margin: 0}}>404</h1>
|
||||
<Icon style={{fontSize: "100px", height: "100px", width: "100px", color: "var(--md-sys-color-on-background)"}}>search_off</Icon>
|
||||
<Link to={"/"}>
|
||||
<FilledButton>
|
||||
<Icon slot="icon">search</Icon>
|
||||
Найти что-нибудь еще
|
||||
</FilledButton>
|
||||
</Link>
|
||||
</div>
|
||||
}
|
||||
export default NotFound
|
||||
@@ -0,0 +1,13 @@
|
||||
import { Outlet } from "react-router";
|
||||
|
||||
function OOBE() {
|
||||
return (
|
||||
<div className="flex items-center h-screen justify-center flex-col p-3">
|
||||
<div className="flex flex-col bg-(--md-sys-color-surface-variant) p-8 rounded-3xl w-full max-w-180 min-h-100 justify-between items-center">
|
||||
<Outlet />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default OOBE;
|
||||
@@ -0,0 +1,96 @@
|
||||
import { Link, useNavigate } from "react-router";
|
||||
import TextField from "../../md-components/TextField";
|
||||
import FilledButton from "../../md-components/FilledButton";
|
||||
import { useRef, useState } from "react";
|
||||
import axios from "axios";
|
||||
import { toast } from "react-toastify";
|
||||
|
||||
function OOBECreateUser() {
|
||||
const submitRef = useRef();
|
||||
const [processing, setProcessing] = useState(false);
|
||||
function handleSubmit(e) {
|
||||
if (e.key === "Enter") {
|
||||
submitRef.current.click();
|
||||
}
|
||||
}
|
||||
const navigate = useNavigate();
|
||||
function createUser(name, username, password) {
|
||||
axios
|
||||
.post("/oobe/create-user", {
|
||||
name: name,
|
||||
username: username,
|
||||
password: password,
|
||||
})
|
||||
.then(() => {
|
||||
toast(`happy reading ${name}!`);
|
||||
axios
|
||||
.post("/auth", { login: username, password: password })
|
||||
.then(() => {
|
||||
axios.get("/user").then((res) => {
|
||||
localStorage.setItem("userInfo", JSON.stringify(res.data));
|
||||
});
|
||||
navigate("/");
|
||||
})
|
||||
.catch(() => {
|
||||
toast.error("Что то пошло не так...");
|
||||
setProcessing(false);
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
if (error.response.status === 403) {
|
||||
toast.error("OOBE уже завершен, невозможно создать пользователя");
|
||||
} else {
|
||||
toast.error("Ошибка при создании пользователя");
|
||||
}
|
||||
setProcessing(false);
|
||||
});
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<h1 className="font-bold text-2xl mb-6">Создать пользователя</h1>
|
||||
<div className="mb-0">
|
||||
<span>Введите данные для администратора библиотеки</span>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
if (processing) return;
|
||||
setProcessing(true);
|
||||
createUser(
|
||||
e.target.name.value,
|
||||
e.target.username.value,
|
||||
e.target.password.value
|
||||
);
|
||||
}}
|
||||
className="flex flex-col gap-3 py-4 items-center"
|
||||
>
|
||||
<TextField label="Имя" id="name" onKeyDown={handleSubmit} required />
|
||||
<TextField
|
||||
label="Логин"
|
||||
type="username"
|
||||
id="username"
|
||||
onKeyDown={handleSubmit}
|
||||
required
|
||||
/>
|
||||
<TextField
|
||||
label="Пароль"
|
||||
type="password"
|
||||
id="password"
|
||||
onKeyDown={handleSubmit}
|
||||
required
|
||||
/>
|
||||
<FilledButton
|
||||
className="w-50"
|
||||
type="submit"
|
||||
ref={submitRef}
|
||||
disabled={processing}
|
||||
>
|
||||
{processing ? "Создание..." : "Создать"}
|
||||
</FilledButton>
|
||||
</form>
|
||||
</div>
|
||||
<span className="text-center mt-4">v2.0-beta</span>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default OOBECreateUser;
|
||||
@@ -0,0 +1,19 @@
|
||||
import { Link } from "react-router";
|
||||
import FilledButton from "../../md-components/FilledButton";
|
||||
|
||||
function OOBEWelcome() {
|
||||
return (
|
||||
<>
|
||||
<h1 className="font-bold text-2xl mb-6">Добро пожаловать!</h1>
|
||||
<div className="mb-6">
|
||||
<span>Настройте библиотеку под себя</span>
|
||||
</div>
|
||||
<Link to={"/oobe/create-user"} viewTransition>
|
||||
<FilledButton className="w-50">К настройке</FilledButton>
|
||||
</Link>
|
||||
<span className="text-center">v2.0-beta</span>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default OOBEWelcome;
|
||||
@@ -0,0 +1,24 @@
|
||||
import { Link } from "react-router-dom"
|
||||
import FilledButton from "../md-components/FilledButton"
|
||||
import Icon from "../md-components/Icon"
|
||||
|
||||
const Offline = () => {
|
||||
return <div style={{
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
flexDirection: "column",
|
||||
gap: "40px"
|
||||
}}>
|
||||
<h1 style={{margin: 0}}>Нет сети</h1>
|
||||
<Icon style={{fontSize: "80px", height: "80px", width: "80px", color: "var(--md-sys-color-on-background)"}}>cloud_off</Icon>
|
||||
<Link to={"/account"}>
|
||||
<FilledButton>
|
||||
<Icon slot="icon">local_library</Icon>
|
||||
В локальную библиотеку
|
||||
</FilledButton>
|
||||
</Link>
|
||||
</div>
|
||||
}
|
||||
export default Offline
|
||||
@@ -0,0 +1,43 @@
|
||||
import { Outlet } from "react-router"
|
||||
import SearchHeader from "./SearchHeader"
|
||||
import Icon from "../md-components/Icon"
|
||||
|
||||
const PageBody = () => {
|
||||
return <>
|
||||
{/* {
|
||||
window.location.protocol !== "https:" ?
|
||||
<div style={{
|
||||
background: "#F80000",
|
||||
height: 22,
|
||||
width: "100%",
|
||||
// marginTop: "-15px",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
<Icon style={{color: "white", fontSize: 16}}>warning</Icon>
|
||||
<span style={{fontSize: 14}}>Сайт использует протокол HTTP, часть функционала недоступна</span>
|
||||
</div>
|
||||
: <></>
|
||||
} */}
|
||||
<div style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
}}>
|
||||
<div style={{
|
||||
display: "flex",
|
||||
width: "calc(100% - 20px)",
|
||||
maxWidth: "1300px",
|
||||
flexDirection: "column",
|
||||
padding: "10px",
|
||||
gap: "10px",
|
||||
minHeight: "calc(100vh - 20px)"
|
||||
}}>
|
||||
<SearchHeader/>
|
||||
<Outlet/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
|
||||
export default PageBody
|
||||
@@ -0,0 +1,186 @@
|
||||
import axios from "axios";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useNavigate, useParams } from "react-router";
|
||||
import "./reader.css";
|
||||
import OutlinedButton from "../md-components/OutlinedButton";
|
||||
import FilledButton from "../md-components/FilledButton";
|
||||
import Contents from "../components/contents/Contents";
|
||||
import Icon from "../md-components/Icon";
|
||||
import { Link } from "react-router-dom";
|
||||
import Skeleton from "react-loading-skeleton";
|
||||
import LinearProgress from "../md-components/LinearProgress";
|
||||
import {
|
||||
addBook,
|
||||
getBook,
|
||||
getReadBook,
|
||||
putReadBook,
|
||||
removeBook,
|
||||
saveReadBook,
|
||||
updateReadBook,
|
||||
} from "../db";
|
||||
import IconButton from "../md-components/IconButton";
|
||||
import ReaderFB2 from "./ReaderFB2";
|
||||
|
||||
const Reader = () => {
|
||||
const { id } = useParams();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [isLocal, setIsLocal] = useState(false);
|
||||
const [onBookshelf, setOnBookshelf] = useState(false);
|
||||
const [bookInfo, setBookInfo] = useState(false);
|
||||
const [contents, setContents] = useState([]);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [shelving, setShelving] = useState(false);
|
||||
const [pdfURL, setPdfURL] = useState(false);
|
||||
|
||||
async function loadBook() {
|
||||
let readBook = await getReadBook(id);
|
||||
if (readBook) {
|
||||
setOnBookshelf(readBook.onBookshelf === true);
|
||||
}
|
||||
let caches = undefined;
|
||||
let localFile = undefined;
|
||||
if (window.caches !== undefined) {
|
||||
caches = await window.caches.open("books");
|
||||
localFile = await caches.match(`/api/book/${id}/reader`);
|
||||
}
|
||||
let localBook = await getBook(id);
|
||||
if (localBook !== undefined && localFile !== undefined) {
|
||||
setIsLocal(true);
|
||||
setContents(localBook.contents);
|
||||
setBookInfo(localBook);
|
||||
|
||||
let blob = await localFile.blob();
|
||||
let pdfBlob = new Blob([blob], { type: "application/pdf" });
|
||||
console.log(pdfBlob);
|
||||
setPdfURL(URL.createObjectURL(pdfBlob));
|
||||
} else {
|
||||
if (!window.onLine) {
|
||||
localStorage.removeItem("lastReadBook");
|
||||
navigate("/offline");
|
||||
}
|
||||
setIsLocal(false);
|
||||
axios
|
||||
.get(`/book/${id}`)
|
||||
.then((res) => setBookInfo(res.data))
|
||||
.catch(() => navigate("/notfound"));
|
||||
axios.get(`/book/${id}/contents`).then((res) => setContents(res.data));
|
||||
setPdfURL(`/api/book/${id}/reader`);
|
||||
}
|
||||
console.log(bookInfo);
|
||||
localStorage.setItem("lastReadBook", id);
|
||||
}
|
||||
useEffect(() => {
|
||||
loadBook();
|
||||
}, [id]);
|
||||
async function saveBook() {
|
||||
setSaving(true);
|
||||
let caches = await window.caches.open("books");
|
||||
await caches.add(`/api/book/${id}/reader`);
|
||||
await addBook(id, bookInfo, contents);
|
||||
await saveReadBook(id, true);
|
||||
setIsLocal(true);
|
||||
setSaving(false);
|
||||
console.log("save");
|
||||
}
|
||||
async function deleteBook() {
|
||||
let caches = await window.caches.open("books");
|
||||
await caches.delete(`/api/book/${id}/reader`);
|
||||
await removeBook(id);
|
||||
await saveReadBook(id, false);
|
||||
setIsLocal(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1 style={{ display: "flex", marginBottom: 0, gap: "10px" }}>
|
||||
<span className="truncate">
|
||||
{bookInfo.title || (
|
||||
<Skeleton width={300} style={{ display: "inline-block" }} />
|
||||
)}{" "}
|
||||
</span>
|
||||
{isLocal ? (
|
||||
<Icon style={{ lineHeight: "38px", height: "100%" }}>cloud_off</Icon>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</h1>
|
||||
<span>
|
||||
{bookInfo.authors ? (
|
||||
bookInfo.authors
|
||||
.map((author) => (
|
||||
<Link
|
||||
to={"/search?author=" + author.id}
|
||||
style={{ color: "var(--md-sys-color-on-background)" }}
|
||||
>
|
||||
{author.name}
|
||||
</Link>
|
||||
))
|
||||
.reduce((prev, curr) => [prev, ", ", curr])
|
||||
) : bookInfo.authors === null ? (
|
||||
<span>Автор неизвестен</span>
|
||||
) : (
|
||||
<Skeleton width={350} />
|
||||
)}
|
||||
</span>
|
||||
<div style={{ display: "flex", gap: "10px" }} className="flex mt-4">
|
||||
<Link to={`/book/${id}`} className="reader_action_button">
|
||||
<FilledButton style={{ width: "100%" }}>
|
||||
<Icon slot="icon">info</Icon>
|
||||
Информация
|
||||
</FilledButton>
|
||||
</Link>
|
||||
{isLocal ? (
|
||||
<OutlinedButton onClick={deleteBook} className="reader_action_button">
|
||||
<Icon slot="icon">delete</Icon>
|
||||
Удалить с устройства
|
||||
</OutlinedButton>
|
||||
) : (
|
||||
<OutlinedButton
|
||||
onClick={saveBook}
|
||||
className="reader_action_button"
|
||||
disabled={window.caches === undefined || saving}
|
||||
>
|
||||
<Icon slot="icon">cloud</Icon>
|
||||
{saving ? "Сохранение..." : "Сохранить локально"}
|
||||
</OutlinedButton>
|
||||
)}
|
||||
{/* <OutlinedButton
|
||||
className="reader_action_button"
|
||||
onClick={async () => {
|
||||
setShelving(true);
|
||||
let caches = await window.caches.open("bookCovers");
|
||||
if (onBookshelf) {
|
||||
await caches.delete(`/api/book/${id}/cover`);
|
||||
} else {
|
||||
await caches.add(`/api/book/${id}/cover`);
|
||||
}
|
||||
putReadBook(id, !onBookshelf, bookInfo);
|
||||
setOnBookshelf(!onBookshelf);
|
||||
setShelving(false);
|
||||
}}
|
||||
disabled={shelving}
|
||||
>
|
||||
<Icon slot="icon">book</Icon>
|
||||
{shelving
|
||||
? "Сохранение..."
|
||||
: onBookshelf
|
||||
? "Убрать с полки"
|
||||
: "На полку"}
|
||||
</OutlinedButton> */}
|
||||
</div>
|
||||
{bookInfo.filetype === "fb2" ? (
|
||||
<ReaderFB2 />
|
||||
) : pdfURL ? (
|
||||
<embed className="h-[calc(100vh-15px)]" src={pdfURL}></embed>
|
||||
) : (
|
||||
<>
|
||||
<LinearProgress indeterminate />
|
||||
<span>Загрузка...</span>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Reader;
|
||||
@@ -0,0 +1,257 @@
|
||||
import axios from "axios";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useNavigate, useParams } from "react-router";
|
||||
import "./reader.css";
|
||||
import OutlinedButton from "../md-components/OutlinedButton";
|
||||
import FilledButton from "../md-components/FilledButton";
|
||||
import Contents from "../components/contents/Contents";
|
||||
import Icon from "../md-components/Icon";
|
||||
import { Link } from "react-router-dom";
|
||||
import Skeleton from "react-loading-skeleton";
|
||||
import LinearProgress from "../md-components/LinearProgress";
|
||||
import {
|
||||
addBook,
|
||||
getBook,
|
||||
getReadBook,
|
||||
putReadBook,
|
||||
removeBook,
|
||||
saveReadBook,
|
||||
updateReadBook,
|
||||
} from "../db";
|
||||
import IconButton from "../md-components/IconButton";
|
||||
|
||||
const ReaderFB2 = () => {
|
||||
const { id } = useParams();
|
||||
const readerRef = useRef();
|
||||
const containerRef = useRef();
|
||||
const progressRef = useRef();
|
||||
const contentsRef = useRef();
|
||||
const contentsBackdropRef = useRef();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [totalHeight, setTotalHeight] = useState(0);
|
||||
const [currentHeight, setCurrentHeight] = useState(0);
|
||||
const [readerHeight, setReaderHeight] = useState(0);
|
||||
const [totalPages, setTotalPages] = useState(1);
|
||||
const [currentPage, setCurrentPage] = useState(0);
|
||||
const [isLocal, setIsLocal] = useState(false);
|
||||
const [onBookshelf, setOnBookshelf] = useState(false);
|
||||
|
||||
const [bookInfo, setBookInfo] = useState({ title: "" });
|
||||
const [contents, setContents] = useState([]);
|
||||
|
||||
function nextPage() {
|
||||
setCurrentPage((prev) => {
|
||||
if (totalPages - prev < 1) {
|
||||
return prev;
|
||||
}
|
||||
return prev + 1;
|
||||
});
|
||||
}
|
||||
function prevPage() {
|
||||
setCurrentPage((prev) => {
|
||||
if (prev <= 1) {
|
||||
return prev;
|
||||
}
|
||||
return prev - 1;
|
||||
});
|
||||
}
|
||||
|
||||
const leftRef = useRef();
|
||||
const rightRef = useRef();
|
||||
function keyboardPagination(e) {
|
||||
if (!(leftRef.current && rightRef.current)) {
|
||||
console.log("harakiri");
|
||||
document.removeEventListener("keydown", keyboardPagination, false);
|
||||
return;
|
||||
}
|
||||
if (e.key === "ArrowRight") {
|
||||
rightRef.current.click();
|
||||
}
|
||||
if (e.key === "ArrowLeft") {
|
||||
leftRef.current.click();
|
||||
}
|
||||
}
|
||||
useEffect(() => {
|
||||
if (!(leftRef.current && rightRef.current)) return;
|
||||
console.log("add listener");
|
||||
document.addEventListener("keydown", keyboardPagination, false);
|
||||
}, [leftRef, rightRef]);
|
||||
|
||||
function toggleFloatingContents() {
|
||||
if (!contentsRef.current || !contentsBackdropRef.current) return;
|
||||
contentsRef.current.classList.toggle("show");
|
||||
contentsBackdropRef.current.classList.toggle("show");
|
||||
}
|
||||
useEffect(() => {
|
||||
if (currentPage === 0) return;
|
||||
if (readerHeight === totalHeight) return;
|
||||
setCurrentHeight(readerHeight * (currentPage - 1));
|
||||
readerRef.current.scrollTop = readerHeight * (currentPage - 1);
|
||||
progressRef.current.style.width = `${(currentPage / totalPages) * 100}%`;
|
||||
//console.log(readerHeight * (currentPage-1) / totalHeight, "update read book", currentPage)
|
||||
//console.log(readerHeight, currentPage, totalHeight)
|
||||
updateReadBook(id, (readerHeight * (currentPage - 1)) / totalHeight);
|
||||
}, [currentPage]);
|
||||
|
||||
async function loadBook() {
|
||||
let readBook = await getReadBook(id);
|
||||
if (readBook) {
|
||||
setOnBookshelf(readBook.onBookshelf === true);
|
||||
}
|
||||
let caches = undefined;
|
||||
let localHTML = undefined;
|
||||
if (window.caches !== undefined) {
|
||||
caches = await window.caches.open("books");
|
||||
localHTML = await caches.match(`/api/book/${id}/reader`);
|
||||
}
|
||||
let localBook = await getBook(id);
|
||||
let innerHTML = "";
|
||||
if (localBook !== undefined && localHTML !== undefined) {
|
||||
setIsLocal(true);
|
||||
setBookInfo(localBook);
|
||||
setContents(localBook.contents);
|
||||
await localHTML.text().then((html) => {
|
||||
innerHTML = html;
|
||||
});
|
||||
} else {
|
||||
if (!window.onLine) {
|
||||
localStorage.removeItem("lastReadBook");
|
||||
navigate("/offline");
|
||||
}
|
||||
setIsLocal(false);
|
||||
axios
|
||||
.get(`/book/${id}`)
|
||||
.then((res) => setBookInfo(res.data))
|
||||
.catch(() => navigate("/notfound"));
|
||||
axios.get(`/book/${id}/contents`).then((res) => setContents(res.data));
|
||||
await axios.get(`/book/${id}/reader`).then((res) => {
|
||||
innerHTML = res.data;
|
||||
});
|
||||
}
|
||||
localStorage.setItem("lastReadBook", id);
|
||||
readerRef.current.innerHTML =
|
||||
innerHTML +
|
||||
"<br>".repeat(Math.floor(containerRef.current.clientHeight / 23) * 2); // заполнение двух страниц пустотой для возможности прокрутки не до конца
|
||||
resizingReader(true);
|
||||
}
|
||||
async function resizingReader(firstLoad) {
|
||||
if (!readerRef.current) return;
|
||||
if (readerRef.current.scrollHeight === 0) return;
|
||||
let progressRatio;
|
||||
if (firstLoad) {
|
||||
let readBook = await getReadBook(id);
|
||||
if (readBook === undefined) {
|
||||
progressRatio = 0;
|
||||
updateReadBook(id, 0);
|
||||
} else {
|
||||
progressRatio = readBook.progress;
|
||||
}
|
||||
}
|
||||
readerRef.current.style.height = `${
|
||||
Math.floor(containerRef.current.clientHeight / 23) * 23 - 23
|
||||
}px`; // подгоняем блок контента под окно ридера, и не забывает учитывать прогресс
|
||||
setTotalHeight(readerRef.current.scrollHeight);
|
||||
setReaderHeight(readerRef.current.clientHeight);
|
||||
setTotalPages(
|
||||
Math.ceil(
|
||||
readerRef.current.scrollHeight / readerRef.current.clientHeight
|
||||
) - 2
|
||||
);
|
||||
|
||||
setCurrentPage(
|
||||
Math.ceil(
|
||||
Math.floor(progressRatio * readerRef.current.scrollHeight) /
|
||||
readerRef.current.clientHeight
|
||||
) + 1
|
||||
);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!readerRef.current) return;
|
||||
loadBook();
|
||||
}, [id]);
|
||||
// изменение размера изображений для соответствия с шириной строки (23px)
|
||||
useEffect(() => {
|
||||
if (!readerRef.current) return;
|
||||
let images = Array.from(readerRef.current.getElementsByTagName("img"));
|
||||
images.map((img) => {
|
||||
img.height = Math.floor(img.height / 23) * 23;
|
||||
});
|
||||
}, [totalHeight]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className="reader_contents_backdrop"
|
||||
ref={contentsBackdropRef}
|
||||
onClick={toggleFloatingContents}
|
||||
></div>
|
||||
<div className="reader_contents" ref={contentsRef}>
|
||||
<Contents
|
||||
data={contents}
|
||||
readerRef={readerRef}
|
||||
readerHeight={readerHeight}
|
||||
currentPage={currentPage}
|
||||
setCurrentPage={setCurrentPage}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: "10px" }} className="mb-4">
|
||||
{!(contents.length === 1 && contents[0].title === "") &&
|
||||
contents.length !== 0 ? (
|
||||
<OutlinedButton
|
||||
className="contents_button reader_action_button"
|
||||
onClick={toggleFloatingContents}
|
||||
>
|
||||
<Icon slot="icon">article</Icon>
|
||||
Содержание
|
||||
</OutlinedButton>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</div>
|
||||
<div className="reader_container" ref={containerRef}>
|
||||
<div className="book_content" ref={readerRef} id="reader">
|
||||
<LinearProgress indeterminate />
|
||||
<br />
|
||||
<Skeleton
|
||||
count={
|
||||
containerRef.current
|
||||
? Math.floor(containerRef.current.clientHeight / 23) - 2
|
||||
: 0
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="reader_progress" ref={progressRef}></div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
gap: "20px",
|
||||
}}
|
||||
>
|
||||
<IconButton
|
||||
onClick={prevPage}
|
||||
disabled={currentHeight === 0}
|
||||
ref={leftRef}
|
||||
>
|
||||
<Icon>arrow_back</Icon>
|
||||
</IconButton>
|
||||
<span>
|
||||
{currentPage} из {totalPages}
|
||||
</span>
|
||||
<IconButton
|
||||
onClick={nextPage}
|
||||
disabled={totalPages - currentPage < 1}
|
||||
ref={rightRef}
|
||||
>
|
||||
<Icon>arrow_forward</Icon>
|
||||
</IconButton>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ReaderFB2;
|
||||
@@ -0,0 +1,36 @@
|
||||
import Search from "../search/Search"
|
||||
import Icon from "../md-components/Icon"
|
||||
import IconButton from "../md-components/IconButton"
|
||||
import { Link } from "react-router-dom"
|
||||
|
||||
const SearchHeader = () => {
|
||||
return (
|
||||
<div style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
width: "100%"
|
||||
}}>
|
||||
<Link to={"/"}>
|
||||
<img
|
||||
width={48}
|
||||
src="/favicon.png"
|
||||
/>
|
||||
</Link>
|
||||
|
||||
<Search/>
|
||||
{/* <Link to={"/account"}>
|
||||
<IconButton
|
||||
style={{
|
||||
"--md-filled-tonal-icon-button-container-height": "48px",
|
||||
"--md-filled-tonal-icon-button-container-width": "48px"
|
||||
}}
|
||||
>
|
||||
<Icon>person</Icon>
|
||||
</IconButton>
|
||||
</Link> */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SearchHeader
|
||||
@@ -0,0 +1,11 @@
|
||||
.results_container {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 820px) {
|
||||
.results_container {
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,121 @@
|
||||
import { useNavigate, useSearchParams } from "react-router-dom";
|
||||
import BookCard from "../components/bookCard/BookCard";
|
||||
import { useEffect, useState } from "react";
|
||||
import "@material/web/progress/linear-progress";
|
||||
import LinearProgress from "../md-components/LinearProgress";
|
||||
import "./SearchPage.css";
|
||||
import axios from "axios";
|
||||
import IconButton from "../md-components/IconButton";
|
||||
import Icon from "../md-components/Icon";
|
||||
|
||||
const Pagination = ({ total }) => {
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const [perPage, setPerPage] = useState(10);
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "10px",
|
||||
width: "100%",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<IconButton
|
||||
disabled={Number(searchParams.get("offset")) - perPage < 0}
|
||||
onClick={() => {
|
||||
searchParams.set(
|
||||
"offset",
|
||||
Number(searchParams.get("offset")) - perPage
|
||||
);
|
||||
setSearchParams(searchParams);
|
||||
}}
|
||||
>
|
||||
<Icon>arrow_back</Icon>
|
||||
</IconButton>
|
||||
<span>
|
||||
{Number(searchParams.get("offset")) + 1}-
|
||||
{Number(searchParams.get("offset")) + perPage > total
|
||||
? total
|
||||
: Number(searchParams.get("offset")) + perPage}
|
||||
{" из "}
|
||||
{total}
|
||||
</span>
|
||||
<IconButton
|
||||
disabled={Number(searchParams.get("offset")) + perPage + 1 > total}
|
||||
onClick={() => {
|
||||
searchParams.set(
|
||||
"offset",
|
||||
Number(searchParams.get("offset")) + perPage
|
||||
);
|
||||
setSearchParams(searchParams);
|
||||
}}
|
||||
>
|
||||
<Icon>arrow_forward</Icon>
|
||||
</IconButton>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const SearchPage = () => {
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const [result, setResult] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const loadResults = async () => {
|
||||
setResult(false);
|
||||
axios
|
||||
.get("/search", {
|
||||
params: Object.fromEntries(searchParams.entries()),
|
||||
})
|
||||
.then((res) => setResult(res.data));
|
||||
};
|
||||
useEffect(() => {
|
||||
if (!window.onLine) navigate("/offline");
|
||||
if (
|
||||
searchParams.get("offset") === null ||
|
||||
searchParams.get("limit") === null
|
||||
) {
|
||||
searchParams.set("offset", "0");
|
||||
searchParams.set("limit", "10");
|
||||
window.history.replaceState(
|
||||
null,
|
||||
"",
|
||||
`/search?${searchParams.toString()}`
|
||||
);
|
||||
setSearchParams(searchParams);
|
||||
}
|
||||
loadResults();
|
||||
}, [searchParams]);
|
||||
if (!result) {
|
||||
return <LinearProgress />;
|
||||
}
|
||||
return (
|
||||
<>
|
||||
{
|
||||
<span>
|
||||
Найдено <b>{result.count}</b> за <b>{result.time}</b> с. 🚀
|
||||
</span>
|
||||
}
|
||||
<div className="results_container">
|
||||
{result.books === null ? (
|
||||
<p>Ничего не найдено 🙁</p>
|
||||
) : (
|
||||
result.books.map((value) => (
|
||||
<BookCard
|
||||
key={value.id}
|
||||
id={value.id}
|
||||
authors={value.authors}
|
||||
title={value.title}
|
||||
fromSearch={searchParams.get("q")}
|
||||
filetype={value.filetype}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
<Pagination total={result.count} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SearchPage;
|
||||
@@ -0,0 +1,63 @@
|
||||
.account_buttons_container {
|
||||
display: flex;
|
||||
gap: 25px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.main_down_menu {
|
||||
display: none;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
justify-content: space-around;
|
||||
background-color: var(--md-sys-color-background);
|
||||
padding: 10px 0;
|
||||
z-index: 4;
|
||||
}
|
||||
.main_down_menu_item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
color: var(--md-sys-color-on-surface);
|
||||
gap: 2px;
|
||||
font-size: 14px;
|
||||
user-select: none;
|
||||
}
|
||||
.main_down_menu_item .icon {
|
||||
width: 65px;
|
||||
position: relative;
|
||||
padding: 3px 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.main_down_menu_item .icon.active {
|
||||
background: var(--md-sys-color-primary-container);
|
||||
}
|
||||
.main_page_container {
|
||||
display: flex;
|
||||
gap: 50px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 470px) { /* кнопки в столбик */
|
||||
.account_buttons_container {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.account_action_button {
|
||||
flex-basis: auto;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1160px) {
|
||||
.main_page_container {
|
||||
gap: 0;
|
||||
margin-bottom: 71px;
|
||||
}
|
||||
.main_side_menu {
|
||||
display: none !important;
|
||||
}
|
||||
.main_down_menu {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,119 @@
|
||||
import { Outlet, useLocation } from "react-router";
|
||||
import List from "../../md-components/List";
|
||||
import ListItem from "../../md-components/ListItem";
|
||||
import { Link } from "react-router-dom";
|
||||
import Icon from "../../md-components/Icon";
|
||||
|
||||
const AccountPage = () => {
|
||||
const location = useLocation();
|
||||
const menuRoutes = [
|
||||
{
|
||||
name: "Главная",
|
||||
path: "/",
|
||||
icon: "home",
|
||||
},
|
||||
{
|
||||
name: "Коллекции",
|
||||
path: "/collections",
|
||||
icon: "collections_bookmark",
|
||||
},
|
||||
{
|
||||
name: "Полка",
|
||||
path: "/shelve",
|
||||
icon: "shelves",
|
||||
},
|
||||
{
|
||||
name: "Загрузить книгу",
|
||||
path: "/upload",
|
||||
icon: "upload",
|
||||
},
|
||||
// {
|
||||
// name: "Настройки",
|
||||
// path: "/settings",
|
||||
// icon: "settings",
|
||||
// },
|
||||
// {
|
||||
// name: "Безопасность",
|
||||
// path: "/security",
|
||||
// icon: "security",
|
||||
// },
|
||||
// {
|
||||
// name: "Администрирование",
|
||||
// path: "/admin",
|
||||
// icon: "admin_panel_settings",
|
||||
// },
|
||||
];
|
||||
return (
|
||||
<>
|
||||
<div className="main_page_container">
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
paddingTop: 50,
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
<List
|
||||
style={{
|
||||
border: "0px solid gray",
|
||||
borderRadius: 15,
|
||||
padding: 10,
|
||||
gap: 10,
|
||||
width: 240,
|
||||
}}
|
||||
className="main_side_menu"
|
||||
>
|
||||
{menuRoutes.map((route) => (
|
||||
<Link
|
||||
to={route.path}
|
||||
style={{ textDecoration: "none" }}
|
||||
key={route.path}
|
||||
>
|
||||
<ListItem
|
||||
type="button"
|
||||
style={{
|
||||
borderRadius: 15,
|
||||
background:
|
||||
location.pathname == route.path
|
||||
? "var(--md-sys-color-primary-container)"
|
||||
: "",
|
||||
}}
|
||||
onClick={() => {} /*navigate(route.path)*/}
|
||||
>
|
||||
<Icon slot="start">{route.icon}</Icon>
|
||||
{route.name}
|
||||
</ListItem>
|
||||
</Link>
|
||||
))}
|
||||
</List>
|
||||
</div>
|
||||
<div style={{ paddingTop: 20, width: "100%" }}>
|
||||
<Outlet />
|
||||
</div>
|
||||
</div>
|
||||
<div className="main_down_menu">
|
||||
{menuRoutes.map((route, i) => (
|
||||
<Link
|
||||
className="main_down_menu_item"
|
||||
to={route.path}
|
||||
id={"route" + i}
|
||||
key={i}
|
||||
>
|
||||
<div
|
||||
className={
|
||||
"icon " + (location.pathname == route.path ? "active" : "")
|
||||
}
|
||||
>
|
||||
<md-ripple for={"route" + i} />
|
||||
<Icon>{route.icon}</Icon>
|
||||
</div>
|
||||
<span>{route.name}</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AccountPage;
|
||||
@@ -0,0 +1,30 @@
|
||||
import { useParams } from "react-router"
|
||||
import SearchResults from "../../components/SearchResults"
|
||||
import DefaultIconButton from "../../md-components/DefaultIconButton"
|
||||
import Icon from "../../md-components/Icon"
|
||||
import { Link } from "react-router-dom"
|
||||
import { useEffect, useState } from "react"
|
||||
import axios from "axios"
|
||||
|
||||
const CollectionPage = () => {
|
||||
const [ collectionInfo, setCollectionInfo ] = useState(false)
|
||||
const { id } = useParams()
|
||||
useEffect(() => {
|
||||
axios.get("/collection/"+id).then(res=>setCollectionInfo(res.data))
|
||||
}, [])
|
||||
return <>
|
||||
<div style={{display: "flex", alignItems: "center", gap: 15}}>
|
||||
<Link to={"/collections"}>
|
||||
<DefaultIconButton>
|
||||
<Icon>chevron_left</Icon>
|
||||
</DefaultIconButton>
|
||||
</Link>
|
||||
<h3 style={{margin: 0}}>{collectionInfo.name}</h3>
|
||||
</div>
|
||||
<SearchResults
|
||||
collection={id}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
|
||||
export default CollectionPage
|
||||
@@ -0,0 +1,19 @@
|
||||
.scroll_container {
|
||||
width: calc(205px * 4);
|
||||
overflow-x: auto !important;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.slider_button {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1160px) {
|
||||
.scroll_container {
|
||||
/* width: calc(205px * 2 + 80px); */
|
||||
width: calc(100vw - 30px);
|
||||
}
|
||||
.slider_button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,167 @@
|
||||
import axios from "axios";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import BookCard from "../../components/bookCard/BookCard";
|
||||
import LinearProgress from "../../md-components/LinearProgress";
|
||||
import Icon from "../../md-components/Icon";
|
||||
import { Link } from "react-router-dom";
|
||||
import IconButton from "../../md-components/IconButton";
|
||||
import "./CollectionSlider.css";
|
||||
import DefaultIconButton from "../../md-components/DefaultIconButton";
|
||||
|
||||
const CollectionSlider = ({ id, name, onDelete }) => {
|
||||
const [collectionInfo, setCollectionInfo] = useState(false);
|
||||
const [collectionBooks, setCollectionBooks] = useState(false);
|
||||
const [curPage, setCurPage] = useState(0);
|
||||
const scrollRef = useRef();
|
||||
|
||||
const loadCollectionInfo = () => {
|
||||
setCollectionInfo(false);
|
||||
axios.get("/collection/" + id).then((res) => setCollectionInfo(res.data));
|
||||
axios
|
||||
.get("/search", { params: { collection: id, offset: 0, limit: 9 } })
|
||||
.then((res) => setCollectionBooks(res.data.books));
|
||||
};
|
||||
|
||||
useEffect(() => loadCollectionInfo(), [id]);
|
||||
|
||||
// до лучших времен
|
||||
// useEffect(() => {
|
||||
// if (scrollRef.current !== undefined) {
|
||||
// console.log('add listener')
|
||||
// scrollRef.current.addEventListener("scroll", e => console.log(e.target.scrollLeft))
|
||||
// }
|
||||
// }, [scrollRef])
|
||||
|
||||
useEffect(() => {
|
||||
if (scrollRef.current == undefined) return;
|
||||
scrollRef.current.scrollLeft = 205 * 4 * curPage;
|
||||
}, [curPage]);
|
||||
if (!collectionInfo || !collectionBooks) {
|
||||
return (
|
||||
<>
|
||||
<br />
|
||||
<LinearProgress indeterminate style={{ width: "100%" }} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
const userInfo = JSON.parse(localStorage.getItem("userInfo"));
|
||||
return (
|
||||
<>
|
||||
<div style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
|
||||
<DefaultIconButton
|
||||
onClick={() => onDelete(collectionInfo.creator.id === userInfo.id)}
|
||||
>
|
||||
<Icon>
|
||||
{collectionInfo.creator.id === userInfo.id
|
||||
? "delete"
|
||||
: "bookmark_remove"}
|
||||
</Icon>
|
||||
</DefaultIconButton>
|
||||
<Link to={"/collection/" + id} style={{ textDecoration: "none" }}>
|
||||
<h3 style={{ display: "flex", width: "fit-content" }}>
|
||||
{name}
|
||||
<Icon>chevron_right</Icon>
|
||||
</h3>
|
||||
</Link>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
width: "fit-content",
|
||||
}}
|
||||
>
|
||||
<IconButton
|
||||
className="slider_button"
|
||||
onClick={() => setCurPage((p) => p - 1)}
|
||||
style={{
|
||||
left: -15,
|
||||
top: 135,
|
||||
opacity: curPage === 0 ? 0 : 1,
|
||||
transition: "all 0.2s",
|
||||
}}
|
||||
disabled={curPage === 0}
|
||||
>
|
||||
<Icon>chevron_left</Icon>
|
||||
</IconButton>
|
||||
{collectionBooks.length === 0 ? (
|
||||
<span style={{ marginLeft: 25 }}>
|
||||
добавьте первую книгу в коллекцию
|
||||
</span>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
<div
|
||||
ref={scrollRef}
|
||||
style={{
|
||||
translate: "all 1s",
|
||||
scrollBehavior: "smooth",
|
||||
}}
|
||||
className="scroll_container"
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: 5,
|
||||
width:
|
||||
collectionBooks.length > 8
|
||||
? 205 * 8
|
||||
: 205 * collectionBooks.length,
|
||||
}}
|
||||
>
|
||||
{collectionBooks.slice(0, 7).map((book) => (
|
||||
<BookCard
|
||||
key={book.id}
|
||||
id={book.id}
|
||||
title={book.title}
|
||||
authors={book.authors}
|
||||
collectionDelId={id}
|
||||
fixed
|
||||
filetype={book.filetype}
|
||||
/>
|
||||
))}
|
||||
{collectionBooks.length > 8 ? (
|
||||
<Link to={"/collection/" + id} style={{ textDecoration: "none" }}>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
height: 280,
|
||||
width: 180,
|
||||
margin: 10,
|
||||
borderRadius: 12,
|
||||
background: "var(--md-sys-color-primary-container)",
|
||||
color: "var(--md-sys-color-on-primary-container)",
|
||||
position: "relative",
|
||||
userSelect: "none",
|
||||
}}
|
||||
>
|
||||
<md-ripple />
|
||||
<span>Еще</span>
|
||||
<Icon>chevron_right</Icon>
|
||||
</div>
|
||||
</Link>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<IconButton
|
||||
className="slider_button"
|
||||
onClick={() => setCurPage((p) => p + 1)}
|
||||
style={{
|
||||
right: -15,
|
||||
top: 135,
|
||||
opacity: (curPage === 0) & (collectionBooks.length > 4) ? 1 : 0,
|
||||
transition: "all 0.2s",
|
||||
}}
|
||||
disabled={(curPage !== 0) | (collectionBooks.length < 4)}
|
||||
>
|
||||
<Icon>chevron_right</Icon>
|
||||
</IconButton>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default CollectionSlider;
|
||||
@@ -0,0 +1,158 @@
|
||||
import axios from "axios";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import Icon from "../../md-components/Icon";
|
||||
import LinearProgress from "../../md-components/LinearProgress";
|
||||
import Dialog from "../../md-components/Dialog";
|
||||
import FilledButton from "../../md-components/FilledButton";
|
||||
import TextButton from "../../md-components/TextButton";
|
||||
import TextField from "../../md-components/TextField";
|
||||
import CollectionSlider from "./CollectionSlider";
|
||||
|
||||
const Collections = () => {
|
||||
const [currentCollectionTab, setCurrentCollectionTab] = useState(0);
|
||||
const [collectionPermDel, setCollectionPermDel] = useState(false);
|
||||
const [collectionTabs, setCollectionTabs] = useState(false);
|
||||
const [limit, setLimit] = useState(3);
|
||||
const createDialogRef = useRef();
|
||||
const deleteDialogRef = useRef();
|
||||
const newCollectionNameRef = useRef();
|
||||
|
||||
const deleteAction = (indx, permDel) => {
|
||||
setCurrentCollectionTab(indx);
|
||||
setCollectionPermDel(permDel);
|
||||
deleteDialogRef.current.show();
|
||||
};
|
||||
const deleteCollection = (id) => {
|
||||
axios.delete("/collection/" + id).then(() => deleteFromList(id));
|
||||
};
|
||||
const removeCollection = (id) => {
|
||||
axios.delete("/user/collection/" + id).then(() => deleteFromList(id));
|
||||
};
|
||||
|
||||
const deleteFromList = useCallback(
|
||||
(delId) =>
|
||||
setCollectionTabs((old) => old.filter((tab) => tab.id !== delId)),
|
||||
[]
|
||||
);
|
||||
const addToList = (newColl) => setCollectionTabs((old) => [...old, newColl]);
|
||||
|
||||
const createNewCollection = (name) => {
|
||||
axios
|
||||
.put("/collection", { name: name })
|
||||
.then((res) => addToList({ id: res.data.id, name: name }));
|
||||
};
|
||||
const loadCollectionsList = () => {
|
||||
setCollectionTabs(false);
|
||||
axios.get("/collection").then((res) => {
|
||||
setCollectionTabs(res.data);
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => loadCollectionsList(), []);
|
||||
|
||||
if (!window.onLine) {
|
||||
return <span>Недоступно оффлайн</span>;
|
||||
}
|
||||
if (collectionTabs === false) {
|
||||
return <LinearProgress indeterminate style={{ width: "100%" }} />;
|
||||
}
|
||||
return (
|
||||
<>
|
||||
{collectionTabs.slice(0, limit).map((tab, i) => (
|
||||
<div className="mb-4">
|
||||
<CollectionSlider
|
||||
key={tab.id}
|
||||
id={tab.id}
|
||||
name={tab.name}
|
||||
onDelete={(permDel) => deleteAction(i, permDel)}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
{collectionTabs.length > limit ? (
|
||||
<TextButton onClick={() => setLimit((pr) => (pr += 10))}>
|
||||
<Icon slot="icon">keyboard_arrow_down</Icon> загрузить еще
|
||||
</TextButton>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
<TextButton
|
||||
onClick={() => {
|
||||
newCollectionNameRef.current.value = "";
|
||||
createDialogRef.current.show();
|
||||
}}
|
||||
>
|
||||
<Icon slot="icon">add</Icon> создать коллекцию
|
||||
</TextButton>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
gap: 5,
|
||||
}}
|
||||
>
|
||||
{/* {
|
||||
collectionInfo ? collectionInfo.books.map(book => <BookCard key={book.id}
|
||||
id={book.id}
|
||||
title={book.title}
|
||||
authors={book.authors}
|
||||
/>) : <LinearProgress indeterminate style={{width: "100%"}}/>
|
||||
} */}
|
||||
</div>
|
||||
<Dialog ref={createDialogRef}>
|
||||
<div slot="headline">Новая коллекция</div>
|
||||
<div slot="content">
|
||||
<TextField ref={newCollectionNameRef} label="Название" required />
|
||||
</div>
|
||||
<div slot="actions">
|
||||
<TextButton onClick={() => createDialogRef.current.close()}>
|
||||
отмена
|
||||
</TextButton>
|
||||
<FilledButton
|
||||
onClick={() => {
|
||||
if (newCollectionNameRef.current.reportValidity()) {
|
||||
createNewCollection(newCollectionNameRef.current.value);
|
||||
createDialogRef.current.close();
|
||||
}
|
||||
}}
|
||||
>
|
||||
создать
|
||||
</FilledButton>
|
||||
</div>
|
||||
</Dialog>
|
||||
<Dialog ref={deleteDialogRef}>
|
||||
<div slot="headline">Удаление</div>
|
||||
<div slot="content" className="">
|
||||
<p>
|
||||
Вы потеряете весь список собранных книг в коллекции "
|
||||
<b>
|
||||
{collectionTabs[currentCollectionTab]
|
||||
? collectionTabs[currentCollectionTab].name
|
||||
: ""}
|
||||
</b>
|
||||
" без возможности восстановления
|
||||
</p>
|
||||
<p>Уверены что хотите продолжить?</p>
|
||||
</div>
|
||||
<div slot="actions">
|
||||
<TextButton onClick={() => deleteDialogRef.current.close()}>
|
||||
отмена
|
||||
</TextButton>
|
||||
<FilledButton
|
||||
onClick={() => {
|
||||
let colId = collectionTabs[currentCollectionTab].id;
|
||||
collectionPermDel
|
||||
? deleteCollection(colId)
|
||||
: removeCollection(colId);
|
||||
deleteDialogRef.current.close();
|
||||
}}
|
||||
//style={{"--md-filled-button-container-color": "red", "--md-filled-button-label-text-color": "white"}}
|
||||
>
|
||||
уверен
|
||||
</FilledButton>
|
||||
</div>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Collections;
|
||||
@@ -0,0 +1,195 @@
|
||||
import axios from "axios";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import Skeleton from "react-loading-skeleton";
|
||||
import BookCard from "../../components/bookCard/BookCard";
|
||||
import Icon from "../../md-components/Icon";
|
||||
import {
|
||||
getAllReadBooks,
|
||||
getBook,
|
||||
putReadBook,
|
||||
saveReadBook,
|
||||
syncReadBook,
|
||||
} from "../../db";
|
||||
import { toast } from "react-toastify";
|
||||
import OutlinedButton from "../../md-components/OutlinedButton";
|
||||
import "./AccountPage.css";
|
||||
import FilledButton from "../../md-components/FilledButton";
|
||||
import { useNavigate } from "react-router";
|
||||
|
||||
const Main = () => {
|
||||
const navigate = useNavigate();
|
||||
const [accountInfo, setAccountInfo] = useState(false);
|
||||
const [bookshelf, setBookshelf] = useState([]);
|
||||
|
||||
async function loadAccount() {
|
||||
if (window.onLine) {
|
||||
axios.get("/user").then((res) => setAccountInfo(res.data));
|
||||
}
|
||||
}
|
||||
useEffect(() => {
|
||||
if (accountInfo !== false) return;
|
||||
loadAccount();
|
||||
updateBookshelf();
|
||||
}, [accountInfo]);
|
||||
async function updateBookshelf() {
|
||||
let caches = await window.caches.open("bookCovers");
|
||||
let reader = await getAllReadBooks();
|
||||
if (bookshelf.length !== 0) return;
|
||||
reader
|
||||
.filter((book) => book.onBookshelf)
|
||||
.map(async (value) => {
|
||||
let newBook;
|
||||
if (value.offline === undefined) {
|
||||
let localBook = await getBook(value.id);
|
||||
if (localBook !== undefined) {
|
||||
await saveReadBook(value.id, true);
|
||||
} else {
|
||||
await saveReadBook(value.id, false);
|
||||
}
|
||||
}
|
||||
if (window.onLine) {
|
||||
if (
|
||||
(await caches.match(`/api/book/${value.id}/cover`)) === undefined
|
||||
) {
|
||||
await caches.add(`/api/book/${value.id}/cover`);
|
||||
}
|
||||
}
|
||||
if (value.bookInfo === undefined) {
|
||||
if (window.onLine) {
|
||||
let bookInfo = (await axios.get("/book/" + value.id)).data;
|
||||
await putReadBook(value.id, true, bookInfo);
|
||||
newBook = (
|
||||
<BookCard
|
||||
key={value.id}
|
||||
id={value.id}
|
||||
authors={bookInfo.authors}
|
||||
title={bookInfo.title}
|
||||
reader={true}
|
||||
offline={value.offline}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
newBook = (
|
||||
<BookCard
|
||||
key={value.id}
|
||||
id={value.id}
|
||||
authors={[]}
|
||||
title={"Подключитесь к интернету"}
|
||||
reader={true}
|
||||
offline={false}
|
||||
/>
|
||||
);
|
||||
}
|
||||
} else {
|
||||
newBook = (
|
||||
<BookCard
|
||||
key={value.id}
|
||||
id={value.id}
|
||||
authors={value.bookInfo.authors}
|
||||
title={value.bookInfo.title}
|
||||
reader={true}
|
||||
offline={value.offline}
|
||||
/>
|
||||
);
|
||||
}
|
||||
setBookshelf((prev) => [...prev, newBook]);
|
||||
});
|
||||
}
|
||||
return (
|
||||
<>
|
||||
{/* <IconButton onClick={() => {
|
||||
setAccountInfo(false)
|
||||
}}><Icon>refresh</Icon></IconButton> */}
|
||||
{window.onLine ? (
|
||||
<h2>Здравствуйте, {accountInfo.name || <Skeleton width={150} />}</h2>
|
||||
) : (
|
||||
<h2>
|
||||
Офлайн режим{" "}
|
||||
<Icon style={{ lineHeight: "30px", height: "100%" }}>cloud_off</Icon>
|
||||
</h2>
|
||||
)}
|
||||
<FilledButton
|
||||
className="w-26"
|
||||
//style={{"--md-filled-button-container-color": "var(--md-sys-color-error)"}}
|
||||
onClick={() => {
|
||||
document.cookie = "token=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
|
||||
navigate("/login");
|
||||
}}
|
||||
>
|
||||
выйти
|
||||
</FilledButton>
|
||||
{/* <h3>Синхронизация</h3>
|
||||
<div className="account_buttons_container">
|
||||
<OutlinedButton
|
||||
className="account_action_button"
|
||||
disabled={!window.onLine}
|
||||
onClick={async () => {
|
||||
axios.put("/user/reader", await getAllReadBooks()).then((res) => {
|
||||
if (res.status === 200) {
|
||||
toast.success("Успешно!");
|
||||
} else {
|
||||
toast.error("Что то пошло не так");
|
||||
}
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Icon slot="icon">upload</Icon>
|
||||
Загрузить на сервер
|
||||
</OutlinedButton>
|
||||
<OutlinedButton
|
||||
className="account_action_button"
|
||||
disabled={!window.onLine}
|
||||
onClick={async () => {
|
||||
axios.get("/user/reader").then(async (res) => {
|
||||
if (res.status === 200) {
|
||||
await window.caches.delete("bookCovers");
|
||||
await syncReadBook(res.data);
|
||||
updateBookshelf();
|
||||
toast.success("Успешно!");
|
||||
} else {
|
||||
toast.error("Что то пошло не так");
|
||||
}
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Icon slot="icon">download</Icon>
|
||||
Получить с сервера
|
||||
</OutlinedButton>
|
||||
</div> */}
|
||||
{/*<h3>Избранное</h3>
|
||||
<div className="results_container">
|
||||
{
|
||||
window.ononline ?
|
||||
accountInfo.favorites === undefined ?
|
||||
<Skeleton/>
|
||||
:
|
||||
accountInfo.favorites === null || accountInfo.favorites.length === 0 ?
|
||||
<p>Нет избранных книг 💔</p>
|
||||
:
|
||||
accountInfo.favorites.map(value => <BookCard
|
||||
key={value.id}
|
||||
id={value.id}
|
||||
authors={value.authors}
|
||||
title={value.title}
|
||||
/>)
|
||||
: <p>Невозможно загрузить избранное в офлайн режиме ✈️</p>
|
||||
}
|
||||
</div>*/}
|
||||
{/* todo */}
|
||||
{/* <h3>Продолжить чтение</h3>
|
||||
<div className="results_container">
|
||||
{
|
||||
bookshelf === false ?
|
||||
<Skeleton/>
|
||||
:
|
||||
bookshelf.length === 0 ?
|
||||
<p>Вы еще ничего не добавляли на полку</p>
|
||||
:
|
||||
bookshelf
|
||||
}
|
||||
</div> */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Main;
|
||||
@@ -0,0 +1,36 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { getAllBooks } from "../../db";
|
||||
import BookCard from "../../components/bookCard/BookCard";
|
||||
function ShelvePage() {
|
||||
const [allBooks, setAllBooks] = useState([]);
|
||||
async function loadBooks() {
|
||||
let allBooks = await getAllBooks();
|
||||
setAllBooks(allBooks);
|
||||
}
|
||||
useEffect(() => {
|
||||
loadBooks();
|
||||
}, []);
|
||||
return (
|
||||
<>
|
||||
<h2>Книги, доступные оффлайн</h2>
|
||||
<div className="flex flex-wrap">
|
||||
{allBooks.length === 0 ? (
|
||||
<span>Тут ничего нет</span>
|
||||
) : (
|
||||
allBooks.map((book) => (
|
||||
<BookCard
|
||||
key={book.id}
|
||||
id={book.id}
|
||||
authors={book.authors ? book.authors : []}
|
||||
title={book.title}
|
||||
filetype={book.filetype}
|
||||
offline
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default ShelvePage;
|
||||
@@ -0,0 +1,140 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import FilledButton from "../../md-components/FilledButton";
|
||||
import Icon from "../../md-components/Icon";
|
||||
import IconButton from "../../md-components/IconButton";
|
||||
import axios from "axios";
|
||||
import { toast } from "react-toastify";
|
||||
|
||||
function UploadBook() {
|
||||
const fileSelectorRef = useRef();
|
||||
const [uploadedFiles, setUploadedFiles] = useState([]);
|
||||
const [uploadStatuses, setUploadStatuses] = useState([]);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
|
||||
const handleFileChange = (e) => {
|
||||
const files = Array.from(e.target.files);
|
||||
setUploadedFiles((prev) => [...prev, ...files]);
|
||||
};
|
||||
|
||||
const handleDrop = (e) => {
|
||||
e.preventDefault();
|
||||
setIsDragging(false);
|
||||
const droppedFiles = Array.from(e.dataTransfer.files);
|
||||
setUploadedFiles((prev) => [...prev, ...droppedFiles]);
|
||||
};
|
||||
|
||||
const handleDragOver = (e) => {
|
||||
e.preventDefault();
|
||||
setIsDragging(true);
|
||||
};
|
||||
|
||||
const handleDragLeave = () => {
|
||||
setIsDragging(false);
|
||||
};
|
||||
useEffect(
|
||||
() => setUploadStatuses(uploadedFiles.map(() => 0)),
|
||||
[uploadedFiles]
|
||||
);
|
||||
|
||||
const handleUpload = async () => {
|
||||
setUploading(true);
|
||||
console.log(uploading);
|
||||
if (uploadedFiles.length === 0) {
|
||||
alert("Нечего грузить, капитан.");
|
||||
return;
|
||||
}
|
||||
|
||||
for (const [i, file] of uploadedFiles.entries()) {
|
||||
const formData = new FormData();
|
||||
formData.append("files", file);
|
||||
try {
|
||||
console.log(uploadedFiles);
|
||||
const res = await axios.post("/book/upload", formData);
|
||||
console.log(res);
|
||||
if (res.status === 200) {
|
||||
// toast("Залили! 🧃");
|
||||
setUploadStatuses((prev) => ({ ...prev, [i]: 1 }));
|
||||
console.log(uploadStatuses);
|
||||
} else {
|
||||
toast("Ошибка на сервере, go дебажить.");
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Ошибка:", err);
|
||||
toast("Шатался интернет или сервер умер.");
|
||||
}
|
||||
}
|
||||
|
||||
setUploading(false);
|
||||
setUploadedFiles([]);
|
||||
};
|
||||
if (!window.onLine) {
|
||||
return <span>Недоступно оффлайн</span>;
|
||||
}
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center h-screen">
|
||||
<h1 className="text-2xl font-bold mb-4">Загрузка литературы</h1>
|
||||
|
||||
<div
|
||||
className={`flex items-center justify-around w-full max-w-lg h-50 mb-4 rounded-xl flex-col gap-1 px-4 border-2 border-dashed transition-colors duration-200 cursor-pointer border-(--md-sys-color-outline) ${
|
||||
isDragging
|
||||
? "bg-(--md-sys-color-surface-variant)"
|
||||
: "bg-(--md-sys-color-inverse-on-surface)"
|
||||
}`}
|
||||
onClick={() => fileSelectorRef.current.click()}
|
||||
onDrop={handleDrop}
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
>
|
||||
<>
|
||||
<span className="font-bold">Перетащи файл сюда или кликни</span>
|
||||
<IconButton className="w-24 h-24">
|
||||
<Icon className="text-6xl w-24 h-24">upload_file</Icon>
|
||||
</IconButton>
|
||||
<span className="text-sm">Поддерживается .fb2 и .pdf</span>
|
||||
</>
|
||||
<input
|
||||
type="file"
|
||||
multiple
|
||||
accept=".fb2,.pdf"
|
||||
ref={fileSelectorRef}
|
||||
className="hidden"
|
||||
onChange={handleFileChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full max-w-lg bg-(--md-sys-color-surface-variant) flex p-[18px] rounded-2xl flex-col max-h-60 overflow-scroll gap-3 mb-4">
|
||||
{uploadedFiles.length === 0 ? <span>Нечего загружать</span> : <></>}
|
||||
{uploadedFiles.map((file, i) => (
|
||||
<div className="flex justify-between" key={i}>
|
||||
<span className="truncate w-[calc(100%-42px)] inline-block">
|
||||
{file.name}
|
||||
</span>
|
||||
{uploading ? (
|
||||
<Icon className="text-(--md-sys-color-on-surface)">
|
||||
{uploadStatuses[i] === 0
|
||||
? "sync"
|
||||
: uploadStatuses[i] === -1
|
||||
? "error"
|
||||
: "check_circle"}
|
||||
</Icon>
|
||||
) : (
|
||||
<IconButton
|
||||
onClick={() =>
|
||||
setUploadedFiles((prev) => prev.filter((_, io) => io !== i))
|
||||
}
|
||||
>
|
||||
<Icon>remove</Icon>
|
||||
</IconButton>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<FilledButton onClick={handleUpload} disabled={uploading}>
|
||||
Загрузить
|
||||
</FilledButton>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default UploadBook;
|
||||
@@ -0,0 +1,137 @@
|
||||
.book_content h2 {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
font-size: 23px;
|
||||
margin: 23px;
|
||||
}
|
||||
.book_content emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
.book_content epigraph {
|
||||
display: block;
|
||||
font-style: italic;
|
||||
background-color: var(--md-sys-color-inverse-on-surface);
|
||||
margin: calc(23px/2);
|
||||
padding: calc(23px/2);
|
||||
border-radius: 10px;
|
||||
}
|
||||
.book_content epigraph b {
|
||||
margin-left: 15px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.book_content poem {
|
||||
display: block;
|
||||
margin: 23px 25px;
|
||||
}
|
||||
.book_content poem v {
|
||||
display: block;
|
||||
text-indent: 25px;
|
||||
}
|
||||
|
||||
.book_content p {
|
||||
margin: 0;
|
||||
text-indent: 25px;
|
||||
}
|
||||
.book_content sub {
|
||||
line-height: 23px;
|
||||
}
|
||||
.reader_container {
|
||||
position: relative;
|
||||
height: calc(100vh - 30px - 40px);
|
||||
border: 1px solid gray;
|
||||
/*border-bottom: 0;*/
|
||||
border-radius: 15px 15px 0 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.book_content {
|
||||
overflow:hidden;
|
||||
line-height: 23px;
|
||||
padding: 0 23px;
|
||||
width: 100%;
|
||||
color: var(--md-sys-color-on-background);
|
||||
}
|
||||
.book_content a {
|
||||
color: var(--md-sys-color-on-background);
|
||||
}
|
||||
.book_img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
.reader_progress {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 5px;
|
||||
background-color: var(--md-sys-color-primary);
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.reader_contents {
|
||||
position: fixed;
|
||||
top: 25px;
|
||||
left: 10px;
|
||||
overflow: hidden;
|
||||
transition: 0.5s;
|
||||
transform: translateX(0);
|
||||
background: var(--md-sys-color-background);
|
||||
z-index: 1;
|
||||
border-radius: 15px;
|
||||
border: 1px solid var(--md-sys-color-outline);
|
||||
}
|
||||
|
||||
.contents_button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.reader_contents_backdrop {
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--md-sys-color-outline-variant);
|
||||
z-index: 1;
|
||||
transition: 0.5s;
|
||||
}
|
||||
.reader_contents_backdrop.show {
|
||||
visibility: visible;
|
||||
opacity: 0.4;
|
||||
pointer-events: all;
|
||||
}
|
||||
code {
|
||||
line-height: 23px;
|
||||
}
|
||||
.reader_buttons_container {
|
||||
display: flex;
|
||||
gap: 25px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1880px) {
|
||||
.reader_contents {
|
||||
transform: translateX(calc(-100% - 15px));
|
||||
border: none;
|
||||
}
|
||||
.reader_contents.show {
|
||||
transform: translateX(15px);
|
||||
box-shadow: 0px 0px 35px -15px var(--md-sys-color-shadow);
|
||||
}
|
||||
.contents_button {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 750px) { /* кнопки в столбик */
|
||||
.reader_buttons_container {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.reader_action_button {
|
||||
flex-basis: auto;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
import { useEffect, useState } from "react"
|
||||
import './search.css'
|
||||
import { useNavigate } from "react-router"
|
||||
import { useSearchParams } from "react-router-dom"
|
||||
import FilledButton from "../md-components/FilledButton"
|
||||
import Icon from "../md-components/Icon"
|
||||
import InputChip from "../md-components/InputChip"
|
||||
import axios from "axios"
|
||||
|
||||
const Search = () => {
|
||||
const [searchParams, setSearchParams] = useSearchParams()
|
||||
const searchText = searchParams.get("q")
|
||||
const fromSearch = searchParams.get("from_search")
|
||||
const authorId = searchParams.get("author")
|
||||
const navigate = useNavigate()
|
||||
const [value, setValue] = useState(searchText === null ? "" : searchText)
|
||||
const [authorInfo, setAuthorInfo] = useState({name: "..."})
|
||||
useEffect(() => {
|
||||
if (!authorId) return
|
||||
axios.get("/author/"+authorId)
|
||||
.then(res => setAuthorInfo(res.data))
|
||||
}, [authorId])
|
||||
useEffect(() => {
|
||||
if (searchText === null) {
|
||||
if (fromSearch !== null) {
|
||||
setValue(fromSearch)
|
||||
} else {
|
||||
setValue("")
|
||||
}
|
||||
} else {
|
||||
setValue(searchText)
|
||||
}
|
||||
}, [searchParams])
|
||||
function search() {
|
||||
if (!searchParams.has("q") && !searchParams.has("author")) {
|
||||
navigate(`/search?q=${value}&offset=0&limit=10`)
|
||||
} else {
|
||||
if (value === '' && authorId) {
|
||||
searchParams.delete("q")
|
||||
} else {
|
||||
searchParams.set("q", value)
|
||||
}
|
||||
searchParams.set("offset", "0")
|
||||
setSearchParams(searchParams)
|
||||
}
|
||||
}
|
||||
function removeAuthorFilter() {
|
||||
// remove author filter
|
||||
searchParams.delete("author")
|
||||
searchParams.set("q", value)
|
||||
setSearchParams(searchParams)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="search_container">
|
||||
<div className="text-field-block">
|
||||
{
|
||||
authorId ?
|
||||
<div>
|
||||
<InputChip
|
||||
className="search_mobile_chip"
|
||||
onRemove={removeAuthorFilter}
|
||||
removable
|
||||
removeOnly
|
||||
>
|
||||
<Icon slot="icon">person</Icon>
|
||||
</InputChip>
|
||||
<InputChip
|
||||
className="search_chip"
|
||||
label={authorInfo.name}
|
||||
onRemove={removeAuthorFilter}
|
||||
removable
|
||||
removeOnly
|
||||
/>
|
||||
</div>
|
||||
|
||||
: <></>
|
||||
}
|
||||
<input
|
||||
className="text-field"
|
||||
placeholder={authorId ? 'поиск по автору' : 'поиск на YaBL'}
|
||||
onChange={e => setValue(e.target.value)}
|
||||
value={value}
|
||||
onKeyDown={e => {
|
||||
if (e.key === "Enter") search()
|
||||
if (e.key === "Backspace" && e.target.selectionStart === 0 && e.target.selectionEnd === 0 && searchParams.has("author")) removeAuthorFilter()
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FilledButton
|
||||
className="search_button"
|
||||
onClick={search}
|
||||
>
|
||||
<span className="search_button_text">Поиск</span>
|
||||
<Icon className="search_button_icon">search</Icon>
|
||||
</FilledButton>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Search
|
||||
@@ -0,0 +1,79 @@
|
||||
.text-field-block {
|
||||
max-width: 500px;
|
||||
width: calc(100% - 130px);
|
||||
height: 46px;
|
||||
border: 1px solid gray;
|
||||
padding-left: 15px;
|
||||
border-right: 0;
|
||||
border-radius: 9999px 0 0 9999px;
|
||||
box-sizing: border-box;
|
||||
background: var(--md-sys-color-surface);
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.text-field {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
padding: 16px 0;
|
||||
background: var(--md-sys-color-surface);
|
||||
color: var(--md-sys-color-on-surface);
|
||||
outline: 0;
|
||||
}
|
||||
.text-field-box:focus {
|
||||
outline: 0;
|
||||
border-width: 2px;
|
||||
padding: 15px;
|
||||
}
|
||||
.search_button {
|
||||
height: 46px;
|
||||
width: 130px;
|
||||
border: 0;
|
||||
--_container-shape-start-start: 0;
|
||||
--_container-shape-end-start: 0;
|
||||
}
|
||||
.search_button span {
|
||||
color: var(--md-sys-color-on-primary);
|
||||
}
|
||||
.search_button_icon {
|
||||
display: none;
|
||||
}
|
||||
.search_container {
|
||||
max-width: 630px;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
}
|
||||
.search_mobile_chip {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.search_button {
|
||||
width: fit-content;
|
||||
padding: 15px;
|
||||
}
|
||||
.search_button_text {
|
||||
display: none;
|
||||
}
|
||||
.search_button_icon {
|
||||
display: block;
|
||||
}
|
||||
.text-field-block {
|
||||
width: calc(100% - 0px);
|
||||
}
|
||||
.search_container {
|
||||
padding: 0 10px;
|
||||
}
|
||||
.search_chip {
|
||||
display: none;
|
||||
}
|
||||
.search_mobile_chip {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
const converter = {
|
||||
'а': 'a', 'б': 'b', 'в': 'v', 'г': 'g', 'д': 'd',
|
||||
'е': 'e', 'ё': 'e', 'ж': 'zh', 'з': 'z', 'и': 'i',
|
||||
'й': 'y', 'к': 'k', 'л': 'l', 'м': 'm', 'н': 'n',
|
||||
'о': 'o', 'п': 'p', 'р': 'r', 'с': 's', 'т': 't',
|
||||
'у': 'u', 'ф': 'f', 'х': 'h', 'ц': 'c', 'ч': 'ch',
|
||||
'ш': 'sh', 'щ': 'sch', 'ь': '', 'ы': 'y', 'ъ': '',
|
||||
'э': 'e', 'ю': 'yu', 'я': 'ya', ' ': "_",
|
||||
};
|
||||
// TODO: if language not cyrillic or latin (ex chinese), may cause errors, but mne pofig
|
||||
export function translit(word){
|
||||
return word.toLowerCase().split("").map(letter => converter[letter] === undefined ? letter : converter[letter]).join("")
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
import { defineConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
import { VitePWA } from "vite-plugin-pwa";
|
||||
import tailwindcss from "@tailwindcss/vite";
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
react(),
|
||||
tailwindcss(),
|
||||
//BasicSSL(),
|
||||
VitePWA({
|
||||
registerType: "autoUpdate",
|
||||
workbox: {
|
||||
globPatterns: ["**/*"],
|
||||
maximumFileSizeToCacheInBytes: 5 * 1024 ** 2, // 5MB
|
||||
},
|
||||
includeAssets: ["**/*"],
|
||||
manifest: {
|
||||
name: "YaBL app",
|
||||
short_name: "YaBL",
|
||||
description: "Yet another Book Library",
|
||||
theme_color: "#feba4b",
|
||||
start_url: "/pwa",
|
||||
icons: [
|
||||
{
|
||||
src: "favicon.png",
|
||||
sizes: "192x192",
|
||||
type: "image/png",
|
||||
},
|
||||
{
|
||||
src: "favicon.png",
|
||||
sizes: "512x512",
|
||||
type: "image/png",
|
||||
},
|
||||
],
|
||||
},
|
||||
}),
|
||||
],
|
||||
server: {
|
||||
proxy: {
|
||||
"/api": "http://localhost:8080",
|
||||
},
|
||||
},
|
||||
preview: {
|
||||
proxy: {
|
||||
"/api": "http://localhost:8080",
|
||||
},
|
||||
https: false,
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user