Garrit Franke
3 years ago
71 changed files with 28269 additions and 30045 deletions
@ -1,21 +1,661 @@
|
||||
MIT License |
||||
|
||||
Copyright (c) 2018 garritfra |
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy |
||||
of this software and associated documentation files (the "Software"), to deal |
||||
in the Software without restriction, including without limitation the rights |
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
||||
copies of the Software, and to permit persons to whom the Software is |
||||
furnished to do so, subject to the following conditions: |
||||
|
||||
The above copyright notice and this permission notice shall be included in all |
||||
copies or substantial portions of the Software. |
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
||||
SOFTWARE. |
||||
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/>. |
@ -1,3 +1,22 @@
|
||||
# react-parcel-boilerplate |
||||
# shape.camp |
||||
|
||||
A minimal react boilerplate that uses parcel to bundle all of your assets |
||||
Collect and trade random geometric shapes! |
||||
|
||||
## State of the project |
||||
|
||||
shape.camp is still in early development. It is not yet deployed, but can be |
||||
self-hosted. Pull requests are always welcome! |
||||
|
||||
### Todo |
||||
|
||||
- [ ] Generate shape for user |
||||
- [ ] Open shape for trade |
||||
- [ ] See shapes in gallery |
||||
|
||||
## Setup |
||||
|
||||
To deploy a shape.camp backend and frontend, follow the instructions in |
||||
`server/` and `client/` respectively. |
||||
|
||||
Alternatively, you can deploy the app via docker-compose. See |
||||
`docker-compose.yml` for an example. |
||||
|
@ -1,13 +0,0 @@
|
||||
{ |
||||
"presets": [ |
||||
[ |
||||
"@babel/preset-react", |
||||
{ |
||||
"targets": { |
||||
"node": "current" |
||||
} |
||||
} |
||||
], |
||||
"@babel/preset-env" |
||||
] |
||||
} |
@ -0,0 +1,13 @@
|
||||
FROM node:15.0.1-alpine3.11 |
||||
|
||||
WORKDIR /usr/src/app |
||||
|
||||
COPY package*.json ./ |
||||
|
||||
RUN npm ci |
||||
|
||||
COPY . . |
||||
|
||||
EXPOSE 80 |
||||
EXPOSE 443 |
||||
CMD [ "npm", "start" ] |
@ -0,0 +1,21 @@
|
||||
MIT License |
||||
|
||||
Copyright (c) 2018 garritfra |
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy |
||||
of this software and associated documentation files (the "Software"), to deal |
||||
in the Software without restriction, including without limitation the rights |
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
||||
copies of the Software, and to permit persons to whom the Software is |
||||
furnished to do so, subject to the following conditions: |
||||
|
||||
The above copyright notice and this permission notice shall be included in all |
||||
copies or substantial portions of the Software. |
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
||||
SOFTWARE. |
@ -0,0 +1,6 @@
|
||||
## Configuration |
||||
|
||||
To configure the client, you need these fields in your `.env` file: |
||||
|
||||
- API_BASE_PATH - Backend URL |
||||
- FRONTEND_BASE_PATH - Frontend URL |
@ -0,0 +1,51 @@
|
||||
const express = require("express"); |
||||
const jwt = require("jsonwebtoken"); |
||||
const fs = require("fs"); |
||||
|
||||
const app = express(); |
||||
|
||||
require("dotenv").config(); |
||||
|
||||
app.use("/", express.static(__dirname + "/public")); |
||||
|
||||
app.set("views", __dirname + "/views"); |
||||
app.set("view engine", "jsx"); |
||||
app.engine( |
||||
"jsx", |
||||
require("express-react-views").createEngine({ |
||||
babel: { |
||||
presets: [ |
||||
"@babel/preset-react", |
||||
["@babel/preset-env", { targets: { node: "current" } }], |
||||
], |
||||
}, |
||||
plugins: ["@babel/plugin-proposal-object-rest-spread"], |
||||
}) |
||||
); |
||||
|
||||
app.use(require("cookie-parser")()); |
||||
|
||||
// Attach user
|
||||
app.use((req, res, next) => { |
||||
const token = req.cookies.token; |
||||
req.user = { ...jwt.decode(token), token }; |
||||
next(); |
||||
}); |
||||
|
||||
app.use("/landing", require("./routes/landing")); |
||||
app.use("/auth", require("./routes/auth")); |
||||
|
||||
// Redirect if not authenticated
|
||||
app.use((req, res, next) => { |
||||
if (!req.user.token) return res.redirect("/landing"); |
||||
next(); |
||||
}); |
||||
|
||||
app.use("/", require("./routes/index")); |
||||
app.use("/clients", require("./routes/clients")); |
||||
|
||||
app.get("/*", (req, res) => { |
||||
res.render("404"); |
||||
}); |
||||
|
||||
app.listen(process.env.PORT || 80); |
@ -0,0 +1,14 @@
|
||||
server { |
||||
listen 80; |
||||
server_name localhost; |
||||
|
||||
location / { |
||||
|
||||
if (!-e $request_filename){ |
||||
rewrite http://$server_name break; |
||||
|
||||
root /usr/share/nginx/html; |
||||
index index.html index.htm; |
||||
try_files $uri $uri/ /index.html; |
||||
} |
||||
} |
@ -0,0 +1,3 @@
|
||||
const { createContext } = require("react"); |
||||
|
||||
module.exports = createContext({}); |
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,36 @@
|
||||
{ |
||||
"name": "react-parcel-boilerplate", |
||||
"version": "1.0.0", |
||||
"description": "React Parcel Boilerplate", |
||||
"main": "index.js", |
||||
"scripts": { |
||||
"start": "NODE_ENV=production node app.js", |
||||
"start:dev": "nodemon app.js", |
||||
"build": "sh ./build.sh", |
||||
"test": "jest --coverage" |
||||
}, |
||||
"author": "Garrit Franke", |
||||
"license": "MIT", |
||||
"dependencies": { |
||||
"@types/node": "^14.14.6", |
||||
"axios": "^0.21.1", |
||||
"cookie-parser": "^1.4.5", |
||||
"dotenv": "^8.2.0", |
||||
"express": "^4.17.1", |
||||
"express-react-views": "^0.11.0", |
||||
"jsonwebtoken": "^8.5.1", |
||||
"moment": "^2.29.1", |
||||
"nodemon": "^2.0.6", |
||||
"react": "^16.14.0", |
||||
"react-dom": "^16.14.0", |
||||
"react-router-dom": "^5.2.0", |
||||
"styled-components": "^4.4.1" |
||||
}, |
||||
"devDependencies": { |
||||
"@babel/core": "^7.12.3", |
||||
"@babel/plugin-proposal-object-rest-spread": "^7.12.1", |
||||
"@babel/preset-env": "^7.12.1", |
||||
"@babel/preset-react": "^7.12.1", |
||||
"@babel/preset-typescript": "^7.12.1" |
||||
} |
||||
} |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 15 KiB |
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,30 @@
|
||||
ul.timeline { |
||||
list-style-type: none; |
||||
position: relative; |
||||
} |
||||
ul.timeline:before { |
||||
content: " "; |
||||
background: #d4d9df; |
||||
display: inline-block; |
||||
position: absolute; |
||||
left: 29px; |
||||
width: 2px; |
||||
height: 100%; |
||||
z-index: 400; |
||||
} |
||||
ul.timeline > li { |
||||
margin: 20px 0; |
||||
padding-left: 20px; |
||||
} |
||||
ul.timeline > li:before { |
||||
content: " "; |
||||
background: white; |
||||
display: inline-block; |
||||
position: absolute; |
||||
border-radius: 50%; |
||||
border: 3px solid #22c0e8; |
||||
left: 20px; |
||||
width: 20px; |
||||
height: 20px; |
||||
z-index: 400; |
||||
} |
@ -0,0 +1,18 @@
|
||||
const router = require("express").Router(); |
||||
const axios = require("axios"); |
||||
|
||||
const basePath = process.env.API_BASE_PATH; |
||||
|
||||
router.get("/login", (req, res) => { |
||||
res.render("Login"); |
||||
}); |
||||
|
||||
router.get("/register", (req, res) => { |
||||
res.render("Register"); |
||||
}); |
||||
|
||||
router.get("/logout", (req, res) => { |
||||
res.clearCookie("token").redirect("/"); |
||||
}); |
||||
|
||||
module.exports = router; |
@ -0,0 +1,62 @@
|
||||
const router = require("express").Router(); |
||||
const axios = require("axios"); |
||||
|
||||
const basePath = process.env.API_BASE_PATH; |
||||
|
||||
router.get("/", async (req, res) => { |
||||
const clients = await axios |
||||
.get(basePath + "/clients", { |
||||
headers: { Authorization: "Bearer " + req.cookies.token }, |
||||
}) |
||||
.then((response) => response.data) |
||||
.then((clients) => |
||||
clients.map((c) => { |
||||
return { ...c, id: c._id }; |
||||
}) |
||||
); |
||||
|
||||
res.render("clients/Index", { |
||||
clients, |
||||
user: req.user, |
||||
}); |
||||
}); |
||||
|
||||
router.get("/new", async (req, res) => { |
||||
res.render("clients/New", { |
||||
user: req.user, |
||||
}); |
||||
}); |
||||
|
||||
router.get("/:id", async (req, res) => { |
||||
const client = await axios |
||||
.get(basePath + "/clients/" + req.params.id, { |
||||
headers: { Authorization: "Bearer " + req.cookies.token }, |
||||
}) |
||||
.then((res) => res.data); |
||||
|
||||
if (res.status === 404) { |
||||
res.render("404"); |
||||
} else { |
||||
res.render("clients/Detail", { user: req.user, client }); |
||||
} |
||||
}); |
||||
|
||||
router.get("/:id/timeline", async (req, res) => { |
||||
const client = await axios |
||||
.get(basePath + "/clients/" + req.params.id, { |
||||
headers: { Authorization: "Bearer " + req.cookies.token }, |
||||
}) |
||||
.then((res) => res.data); |
||||
|
||||
if (res.status === 404) { |
||||
res.render("404"); |
||||
} else { |
||||
res.render("clients/Timeline", { |
||||
user: req.user, |
||||
events: client.events, |
||||
client, |
||||
}); |
||||
} |
||||
}); |
||||
|
||||
module.exports = router; |
@ -0,0 +1,7 @@
|
||||
const router = require("express").Router(); |
||||
|
||||
router.get("/", (req, res) => { |
||||
res.render("Index", { user: req.user }); |
||||
}); |
||||
|
||||
module.exports = router; |
@ -0,0 +1,7 @@
|
||||
const router = require("express").Router(); |
||||
|
||||
router.get("/", (req, res) => { |
||||
res.render("Landing"); |
||||
}); |
||||
|
||||
module.exports = router; |
@ -0,0 +1,50 @@
|
||||
const axios = require("axios"); |
||||
|
||||
const basepath = process.env.API_BASE_PATH; |
||||
|
||||
module.exports = { |
||||
getClients() { |
||||
return axios |
||||
.get(basepath + "/clients") |
||||
.then((res) => res.data) |
||||
.then((data) => |
||||
data.map((client) => { |
||||
return { id: client._id, name: client.name }; |
||||
}) |
||||
); |
||||
}, |
||||
|
||||
addClient(client) { |
||||
return axios |
||||
.post(basepath + "/clients", client) |
||||
.then((res) => res.data) |
||||
.then((client) => { |
||||
return { ...client, id: client._id }; |
||||
}); |
||||
}, |
||||
|
||||
getClientById(id) { |
||||
return axios |
||||
.get(basepath + "/clients/" + id) |
||||
.then((res) => res.data) |
||||
.then((client) => { |
||||
return { ...client, id: client._id }; |
||||
}); |
||||
}, |
||||
|
||||
updateStatus(id, status) { |
||||
return axios.post(basepath + "/clients/" + id + "/events", { |
||||
eventType: "status_changed", |
||||
value: status, |
||||
}); |
||||
}, |
||||
|
||||
deleteMany(ids) { |
||||
console.log("To delete:", ids); |
||||
return axios({ |
||||
method: "delete", |
||||
url: basepath + "/clients", |
||||
data: ids, |
||||
}); |
||||
}, |
||||
}; |
@ -0,0 +1,40 @@
|
||||
const axios = require("axios"); |
||||
|
||||
const basepath = process.env.API_BASE_PATH; |
||||
|
||||
module.exports = { |
||||
async getUser() { |
||||
console.debug("Getting user"); |
||||
const response = await axios.get(basepath + "/auth/profile", { |
||||
headers: { Authorization: "Bearer " + document.cookie }, |
||||
}); |
||||
const data = response.data; |
||||
|
||||
return { |
||||
id: data._id, |
||||
fullName: data.full_name, |
||||
email: data.email, |
||||
}; |
||||
}, |
||||
|
||||
async login(email, password) { |
||||
const response = await axios.post(basepath + "/auth/login", { |
||||
email, |
||||
password, |
||||
}); |
||||
const token = response.data.token; |
||||
document.cookie = "token=" + token; |
||||
return token; |
||||
}, |
||||
|
||||
async register(email, password, fullName) { |
||||
const response = await axios.post(basepath + "/auth/register", { |
||||
email, |
||||
password, |
||||
full_name: fullName, |
||||
}); |
||||
|
||||
const user = response.data; |
||||
return { id: user._id, fullName: user.full_name, email: user.email }; |
||||
}, |
||||
}; |
@ -0,0 +1,14 @@
|
||||
/* Custom axios instance that adds the token to the headers, if existent */ |
||||
const axios = require("axios"); |
||||
const UserService = require("./UserService"); |
||||
|
||||
axios.interceptors.request.use(function (config) { |
||||
const token = UserService.getToken(); |
||||
|
||||
if (token) { |
||||
config.headers.Authorization = "Bearer " + token; |
||||
} |
||||
return config; |
||||
}); |
||||
|
||||
export default axios; |
@ -0,0 +1,79 @@
|
||||
import React, { useState } from "react"; |
||||
import { Layout, Empty } from "antd"; |
||||
import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; |
||||
import ClientsListPage from "../pages/ClientsListPage"; |
||||
import RegisterPage from "../pages/RegisterPage"; |
||||
import NewClientPage from "../pages/NewClientPage"; |
||||
import LoginPage from "../pages/LoginPage"; |
||||
import ClientPage from "../pages/ClientPage"; |
||||
|
||||
import Sidebar from "./Sidebar"; |
||||
import Header from "./Header"; |
||||
import Breadcrumbs from "./Breadcrumbs"; |
||||
import ProjectsListPage from "../pages/ProjectsListPage"; |
||||
|
||||
const { Footer, Sider } = Layout; |
||||
export default function App() { |
||||
const [sidebarCollapsed, setSidebarCollapsed] = useState(false); |
||||
|
||||
const onCollapse = (collapsed) => { |
||||
setSidebarCollapsed(collapsed); |
||||
}; |
||||
|
||||
return ( |
||||
<Router> |
||||
<Layout style={{ minWidth: "100vw", minHeight: "100vh" }}> |
||||
<Sider collapsible collapsed={sidebarCollapsed} onCollapse={onCollapse}> |
||||
<div |
||||
style={{ |
||||
height: "32px", |
||||
background: "rgba(255, 255, 255, 0.2)", |
||||
margin: "16px", |
||||
}} |
||||
/> |
||||
<Sidebar /> |
||||
</Sider> |
||||
<Layout> |
||||
<Header /> |
||||
<Breadcrumbs /> |
||||
<Layout.Content |
||||
style={{ |
||||
background: "#fff", |
||||
margin: "24px 16px", |
||||
padding: 24, |
||||
minHeight: 280, |
||||
}} |
||||
> |
||||
<Switch> |
||||
<Route exact path="/"> |
||||
<Empty /> |
||||
</Route> |
||||
<Route exact path="/clients"> |
||||
<ClientsListPage /> |
||||
</Route> |
||||
<Route exact path="/projects"> |
||||
<ProjectsListPage /> |
||||
</Route> |
||||
<Route exact path="/clients/new"> |
||||
<NewClientPage /> |
||||
</Route> |
||||
<Route |
||||
path="/clients/:id" |
||||
render={({ match }) => <ClientPage id={match.params.id} />} |
||||
/> |
||||
<Route exact path="/login"> |
||||
<LoginPage /> |
||||
</Route> |
||||
<Route path="/register"> |
||||
<RegisterPage /> |
||||
</Route> |
||||
</Switch> |
||||
</Layout.Content> |
||||
<Footer style={{ textAlign: "center" }}> |
||||
Omega CRM ©2020 Created by Garrit Franke |
||||
</Footer> |
||||
</Layout> |
||||
</Layout> |
||||
</Router> |
||||
); |
||||
} |
@ -0,0 +1,35 @@
|
||||
import React from "react"; |
||||
import { Breadcrumb } from "antd"; |
||||
import { useLocation, Link } from "react-router-dom"; |
||||
|
||||
export default function Breadcrumbs() { |
||||
const location = useLocation(); |
||||
const breadcrumbNameMap = { |
||||
"/": "Home", |
||||
"/clients": "Clients", |
||||
"/clients/new": "New", |
||||
"/clients/*": "Detail", |
||||
"/projects": "Projects", |
||||
}; |
||||
|
||||
const pathSnippets = location.pathname.split("/").filter((i) => i); |
||||
const extraBreadcrumbItems = pathSnippets.map((_, index) => { |
||||
const url = `/${pathSnippets.slice(0, index + 1).join("/")}`; |
||||
return ( |
||||
<Breadcrumb.Item key={url}> |
||||
<Link to={url}>{breadcrumbNameMap[url]}</Link> |
||||
</Breadcrumb.Item> |
||||
); |
||||
}); |
||||
const breadcrumbItems = [ |
||||
<Breadcrumb.Item key="home"> |
||||
<Link to="/">Home</Link> |
||||
</Breadcrumb.Item>, |
||||
].concat(extraBreadcrumbItems); |
||||
|
||||
return ( |
||||
<Breadcrumb style={{ marginLeft: "16px", marginTop: "24px" }}> |
||||
{breadcrumbItems} |
||||
</Breadcrumb> |
||||
); |
||||
} |
@ -0,0 +1,47 @@
|
||||
import React, { useState, useEffect } from "react"; |
||||
import { Layout, Menu, notification } from "antd"; |
||||
|
||||
import UserService from "../service/UserService"; |
||||
|
||||
const { Header } = Layout; |
||||
export default function Head() { |
||||
const [username, setUsername] = useState(""); |
||||
const token = UserService.getToken(); |
||||
|
||||
useEffect(() => { |
||||
if (token) { |
||||
UserService.getUser().then((user) => setUsername(user.fullName)); |
||||
} |
||||
}, []); |
||||
|
||||
const onLogout = () => { |
||||
notification.error({ |
||||
message: "Not yet implemented", |
||||
description: "To log out, please clear the cookies.", |
||||
}); |
||||
}; |
||||
|
||||
return ( |
||||
<Header style={{ background: "#fff" }}> |
||||
<Menu mode="horizontal" style={{ float: "right" }}> |
||||
{token ? ( |
||||
<> |
||||
<Menu.Item> |
||||
<a href="/profile">{username}</a> |
||||
</Menu.Item> |
||||
<Menu.Item onClick={onLogout}>Log Out</Menu.Item> |
||||
</> |
||||
) : ( |
||||
<> |
||||
<Menu.Item> |
||||
<a href="/login">Login</a> |
||||
</Menu.Item> |
||||
<Menu.Item> |
||||
<a href="/register">Register</a> |
||||
</Menu.Item> |
||||
</> |
||||
)} |
||||
</Menu> |
||||
</Header> |
||||
); |
||||
} |
@ -0,0 +1,28 @@
|
||||
import { Menu } from "antd"; |
||||
import React, { useEffect } from "react"; |
||||
import { Link, useLocation } from "react-router-dom"; |
||||
|
||||
/** |
||||
* |
||||
* @param {{activeItem: string}} activeItem |
||||
*/ |
||||
export default function Sidebar() { |
||||
const location = useLocation(); |
||||
return ( |
||||
<Menu |
||||
defaultSelectedKeys={[location.pathname.split("/")[1] || "home"]} |
||||
mode="inline" |
||||
theme="dark" |
||||
> |
||||
<Menu.Item key="home"> |
||||
<Link to="/">Home</Link> |
||||
</Menu.Item> |
||||
<Menu.Item key="clients"> |
||||
<Link to="/clients">Clients</Link> |
||||
</Menu.Item> |
||||
<Menu.Item key="projects"> |
||||
<Link to="/projects">Projects</Link> |
||||
</Menu.Item> |
||||
</Menu> |
||||
); |
||||
} |
@ -0,0 +1,28 @@
|
||||
import React from "react"; |
||||
import { Timeline, Tag } from "antd"; |
||||
import statusTagMap from "../util/statusTagMap.json"; |
||||
|
||||
export default function StatusTimeline({ events }) { |
||||
console.log(events); |
||||
const eventItems = events.reverse().map((event) => { |
||||
switch (event.eventType) { |
||||
case "status_changed": |
||||
return ( |
||||
<Timeline.Item label={new Date(event.createdAt).toUTCString()}> |
||||
Status:{" "} |
||||
<Tag color={statusTagMap[event.value].color}>{event.value}</Tag> |
||||
</Timeline.Item> |
||||
); |
||||
case "created": |
||||
return ( |
||||
<Timeline.Item label={new Date(event.createdAt).toUTCString()}> |
||||
Created |
||||
</Timeline.Item> |
||||
); |
||||
default: |
||||
break; |
||||
} |
||||
}); |
||||
|
||||
return <Timeline mode="left">{eventItems}</Timeline>; |
||||
} |
@ -1,5 +1,8 @@
|
||||
import React, { Component } from "react"; |
||||
import React from "react"; |
||||
import ReactDOM from "react-dom"; |
||||
import App from "../src/components/App"; |
||||
import "antd/dist/antd.css"; |
||||
|
||||
require("dotenv").config(); |
||||
|
||||
ReactDOM.render(<App />, document.querySelector("#root")); |
@ -0,0 +1,72 @@
|
||||
import React, { useState, useEffect } from "react"; |
||||
import { Select, Tag, Space, List, Typography, Row, Col } from "antd"; |
||||
import { useHistory } from "react-router"; |
||||
|
||||
import ClientService from "../service/ClientService"; |
||||
import StatusTimeline from "../components/StatusTimeline"; |
||||
|
||||
export default function ClientPage({ id }) { |
||||
const [client, setClient] = useState({}); |
||||
const history = useHistory(); |
||||
|
||||
useEffect(() => { |
||||
ClientService.getClientById(id).then((client) => { |
||||
console.log(client); |
||||
setClient(client); |
||||
}); |
||||
}, []); |
||||
|
||||
const updateStatus = (value) => { |
||||
ClientService.updateStatus(client.id, value).then(() => { |
||||
setClient({ ...client, status: value }); |
||||
history.go(0); |
||||
}); |
||||
}; |
||||
|
||||
return ( |
||||
<> |
||||
<Space direction="vertical" size="large"> |
||||
<Typography.Title level={4}>Client Info</Typography.Title> |
||||
<Row gutter={16}> |
||||
<Col> |
||||
<List bordered split="true"> |
||||
<List.Item actions={[client.name]}>Name:</List.Item> |
||||
<List.Item actions={[client.id]}>Identifier:</List.Item> |
||||
<List.Item |
||||
actions={[ |
||||
(() => ( |
||||
<Select value={client.status} onSelect={updateStatus}> |
||||
<Select.Option value="potential"> |
||||
<Tag color="default">Potential</Tag> |
||||
</Select.Option> |
||||
<Select.Option value="active"> |
||||
<Tag color="success">Active</Tag> |
||||
</Select.Option> |
||||
<Select.Option value="on_hold"> |
||||
<Tag color="purple">On Hold</Tag> |
||||
</Select.Option> |
||||
<Select.Option value="inactive"> |
||||
<Tag color="error">Inactive</Tag> |
||||
</Select.Option> |
||||
</Select> |
||||
))(), |
||||
]} |
||||
> |
||||
Status: |
||||
</List.Item> |
||||
<List.Item actions={[client.email]}>Email:</List.Item> |
||||
<List.Item actions={[client.address]}>Address:</List.Item> |
||||
<List.Item actions={[client.telephone]}>Telephone:</List.Item> |
||||
</List> |
||||
</Col> |
||||
</Row> |
||||
<Row> |
||||
<Col span={24}> |
||||
{client.events ? <StatusTimeline events={client.events} /> : <></>} |
||||
</Col> |
||||
<Col span={8}></Col> |
||||
</Row> |
||||
</Space> |
||||
</> |
||||
); |
||||
} |
@ -0,0 +1,76 @@
|
||||
import React, { useState, useEffect } from "react"; |
||||
import { Table, Button, Space } from "antd"; |
||||
import { Link, useHistory } from "react-router-dom"; |
||||
import { UserAddOutlined } from "@ant-design/icons"; |
||||
import ClientService from "../service/ClientService"; |
||||
|
||||
export default function ClientsPage() { |
||||
const history = useHistory(); |
||||
const [clients, setClients] = useState([]); |
||||
const [selectedClients, setSelectedClients] = useState([]); |
||||
const [actionsVisible, setActionsVisible] = useState(false); |
||||
|
||||
useEffect(() => { |
||||
ClientService.getClients().then(setClients); |
||||
}, []); |
||||
|
||||
const onSelectChange = (selectedRowKeys) => { |
||||
setSelectedClients(selectedRowKeys); |
||||
if (selectedRowKeys.length >= 1) { |
||||
setActionsVisible(true); |
||||
} else { |
||||
setActionsVisible(false); |
||||
} |
||||
}; |
||||
|
||||
const columns = [ |
||||
{ |
||||
title: "Name", |
||||
dataIndex: "id", |
||||
render: (id) => ( |
||||
<Link to={"/clients/" + id}> |
||||
{ |
||||
/* TODO: is there a simpler way? */ |
||||
clients.filter((c) => c.id == id)[0].name |
||||
} |
||||
</Link> |
||||
), |
||||
}, |
||||
]; |
||||
|
||||
return ( |
||||
<div> |
||||
<Space direction="horizontal" style={{ marginBottom: 16 }}> |
||||
<Button |
||||
onClick={() => history.push("/clients/new")} |
||||
type="primary" |
||||
icon={<UserAddOutlined />} |
||||
> |
||||
Add |
||||
</Button> |
||||
<Button |
||||
type="primary" |
||||
danger |
||||
disabled={!actionsVisible} |
||||
onClick={() => { |
||||
ClientService.deleteMany(selectedClients).then(() => |
||||
window.location.reload() |
||||
); |
||||
}} |
||||
> |
||||
Delete |
||||
</Button> |
||||
</Space> |
||||
<Table |
||||
rowSelection={{ |
||||
type: "checkbox", |
||||
onChange: onSelectChange, |
||||
}} |
||||
columns={columns} |
||||
dataSource={clients.map((client) => { |
||||
return { ...client, key: client.id }; |
||||
})} |
||||
/> |
||||
</div> |
||||
); |
||||
} |
@ -0,0 +1,46 @@
|
||||
import React, { useState } from "react"; |
||||
import { Form, Input, Button, Alert } from "antd"; |
||||
import UserService from "../service/UserService"; |
||||
import ErrorBoundary from "antd/lib/alert/ErrorBoundary"; |
||||
import { useHistory } from "react-router-dom"; |
||||
|
||||
export default function LoginPage() { |
||||
const [error, setError] = useState(); |
||||
const history = useHistory(); |
||||
|
||||
const onSubmit = ({ email, password }) => { |
||||
UserService.login(email, password) |
||||
.then(() => history.push("/profile")) |
||||
.catch((err) => { |
||||
setError(err); |
||||
}); |
||||
}; |
||||
|
||||
const layout = { |
||||
labelCol: { span: 8 }, |
||||
wrapperCol: { span: 4 }, |
||||
}; |
||||
const tailLayout = { |
||||
wrapperCol: { offset: 8, span: 4 }, |
||||
}; |
||||
|
||||
return ( |
||||
<> |
||||
{error && <Alert message={"Login failed:" + error} type="error" />} |
||||
<br /> |
||||
<Form onFinish={onSubmit} {...layout}> |
||||
<Form.Item label="Email" name="email"> |
||||
<Input type="email"></Input> |
||||
</Form.Item> |
||||
<Form.Item label="Password" name="password"> |
||||
<Input type="password"></Input> |
||||
</Form.Item> |
||||
<Form.Item {...tailLayout}> |
||||
<Button type="primary" htmlType="submit"> |
||||
Submit |
||||
</Button> |
||||
</Form.Item> |
||||
</Form> |
||||
</> |
||||
); |
||||
} |
@ -0,0 +1,73 @@
|
||||
import React from "react"; |
||||
import { Form, Input, Button, Row, Col, Select, Tag } from "antd"; |
||||
import ClientService from "../service/ClientService"; |
||||
import { useHistory } from "react-router-dom"; |
||||
|
||||
const { Option } = Select; |
||||
|
||||
export default function NewClientPage() { |
||||
const history = useHistory(); |
||||
const onSubmit = (values) => { |
||||
ClientService.addClient(values).then((client) => |
||||
history.push("/clients/" + client.id) |
||||
); |
||||
}; |
||||
const tailLayout = { |
||||
wrapperCol: { offset: 8, span: 4 }, |
||||
}; |
||||
|
||||
return ( |
||||
<> |
||||
<Form onFinish={onSubmit}> |
||||
<Row gutter={16}> |
||||
<Col> |
||||
<Form.Item label="Name" name="name" required="true"> |
||||
<Input type="name"></Input> |
||||
</Form.Item> |
||||
</Col> |
||||
<Col> |
||||
<Form.Item label="Email" name="email"> |
||||
<Input type="email"></Input> |
||||
</Form.Item> |
||||
</Col> |
||||
<Col> |
||||
<Form.Item label="status" name="status"> |
||||
<Select defaultValue=""> |
||||
<Option value="">Pick</Option> |
||||
<Option value="potential"> |
||||
<Tag color="default">Potential</Tag> |
||||
</Option> |
||||
<Option value="active"> |
||||
<Tag color="success">Active</Tag> |
||||
</Option> |
||||
<Option value="on_hold"> |
||||
<Tag color="purple">On Hold</Tag> |
||||
</Option> |
||||
<Option value="inactive"> |
||||
<Tag color="error">Inactive</Tag> |
||||
</Option> |
||||
</Select> |
||||
</Form.Item> |
||||
</Col> |
||||
</Row> |
||||
<Row gutter={16}> |
||||
<Col> |
||||
<Form.Item label="Address" name="address"> |
||||
<Input.TextArea></Input.TextArea> |
||||
</Form.Item> |
||||
</Col> |
||||
<Col> |
||||
<Form.Item label="Telephone" name="telephone"> |
||||
<Input type="tel"></Input> |
||||
</Form.Item> |
||||
</Col> |
||||
</Row> |
||||
<Form.Item {...tailLayout}> |
||||
<Button type="primary" htmlType="submit"> |
||||
Submit |
||||
</Button> |
||||
</Form.Item> |
||||
</Form> |
||||
</> |
||||
); |
||||
} |
@ -0,0 +1,5 @@
|
||||
import React from "react"; |
||||
|
||||
export default function ProjectsListPage() { |
||||
return <p>Projects...</p>; |
||||
} |
@ -0,0 +1,49 @@
|
||||
import React, { useState } from "react"; |
||||
import { Form, Alert, Button, Input } from "antd"; |
||||
import { useHistory } from "react-router-dom"; |
||||
|
||||
import UserService from "../service/UserService"; |
||||
|
||||
export default function RegisterPage() { |
||||
const [error, setError] = useState(); |
||||
const history = useHistory(); |
||||
|
||||
const onSubmit = ({ email, password, fullName }) => { |
||||
UserService.register(email, password, fullName) |
||||
.then(() => history.push("/login")) |
||||
.catch((err) => { |
||||
setError(err); |
||||
}); |
||||
}; |
||||
|
||||
const layout = { |
||||
labelCol: { span: 8 }, |
||||
wrapperCol: { span: 4 }, |
||||
}; |
||||
const tailLayout = { |
||||
wrapperCol: { offset: 8, span: 4 }, |
||||
}; |
||||
|
||||
return ( |
||||
<> |
||||
{error && <Alert message="Registration failed" type="error" />} |
||||
<br /> |
||||
<Form onFinish={onSubmit} {...layout}> |
||||
<Form.Item label="Email" name="email"> |
||||
<Input type="email"></Input> |
||||
</Form.Item> |
||||
<Form.Item label="Password" name="password"> |
||||
<Input type="password"></Input> |
||||
</Form.Item> |
||||
<Form.Item label="Full Name" name="fullName"> |
||||
<Input type="name"></Input> |
||||
</Form.Item> |
||||
<Form.Item {...tailLayout}> |
||||
<Button type="primary" htmlType="submit"> |
||||
Submit |
||||
</Button> |
||||
</Form.Item> |
||||
</Form> |
||||
</> |
||||
); |
||||
} |
@ -0,0 +1,61 @@
|
||||
import axios from "./api-client"; |
||||
|
||||
const basepath = process.env.API_BASE_PATH; |
||||
|
||||
export interface Client { |
||||
id: string; |
||||
name: string; |
||||
} |
||||
|
||||
export interface NewClient { |
||||
name: string; |
||||
} |
||||
|
||||
export default { |
||||
getClients(): Promise<Client[]> { |
||||
return axios |
||||
.get(basepath + "/clients") |
||||
.then((res) => res.data) |
||||
.then((data) => |
||||
data.map((client) => { |
||||
return { id: client._id, name: client.name }; |
||||
}) |
||||
); |
||||
}, |
||||
|
||||
addClient(client: NewClient): Promise<Client> { |
||||
return axios |
||||
.post(basepath + "/clients", client) |
||||
.then((res) => res.data) |
||||
.then((client) => { |
||||
return { ...client, id: client._id }; |
||||
}) |
||||
.then((data) => data as Client); |
||||
}, |
||||
|
||||
getClientById(id: String): Promise<Client> { |
||||
return axios |
||||
.get(basepath + "/clients/" + id) |
||||
.then((res) => res.data) |
||||
.then((client) => { |
||||
return { ...client, id: client._id }; |
||||
}) |
||||
.then((client) => client as Client); |
||||
}, |
||||
|
||||
updateStatus(id: String, status: String): Promise<String> { |
||||
return axios.post(basepath + "/clients/" + id + "/events", { |
||||
eventType: "status_changed", |
||||
value: status, |
||||
}); |
||||
}, |
||||
|
||||
deleteMany(ids: String[]): Promise<any> { |
||||
console.log("To delete:", ids); |
||||
return axios({ |
||||
method: "delete", |
||||
url: basepath + "/clients", |
||||
data: ids, |
||||
}); |
||||
}, |
||||
}; |
@ -0,0 +1,57 @@
|
||||
import axios from "axios"; |
||||
|
||||
const basepath = process.env.API_BASE_PATH; |
||||
|
||||
export interface User { |
||||
id: String; |
||||
fullName: String; |
||||
email: String; |
||||
} |
||||
|
||||
export default { |
||||
async getUser(): Promise<User> { |
||||
console.debug("Getting user"); |
||||
const response = await axios.get(basepath + "/auth/profile", { |
||||
headers: { Authorization: "Bearer " + document.cookie }, |
||||
}); |
||||
const data = response.data; |
||||
|
||||
return { |
||||
id: data._id, |
||||
fullName: data.full_name, |
||||
email: data.email, |
||||
}; |
||||
}, |
||||
|
||||
async login(email: String, password: String): Promise<String> { |
||||
const response = await axios.post(basepath + "/auth/login", { |
||||
email, |
||||
password, |
||||
}); |
||||
const token = response.data.token; |
||||
document.cookie = "token=" + token; |
||||
return token; |
||||
}, |
||||
|
||||
async register( |
||||
email: string, |
||||
password: string, |
||||
fullName: string |
||||
): Promise<User> { |
||||
const response = await axios.post(basepath + "/auth/register", { |
||||
email, |
||||
password, |
||||
full_name: fullName, |
||||
}); |
||||
|
||||
const user = response.data; |
||||
return { id: user._id, fullName: user.full_name, email: user.email }; |
||||
}, |
||||
getToken(): string | undefined { |
||||
const cookie = document.cookie |
||||
.split(";") |
||||
.filter((cookie) => cookie.startsWith("token="))[0]; |
||||
const token = cookie ? cookie.replace("token=", "") : undefined; |
||||
return token; |
||||
}, |
||||
}; |
@ -0,0 +1,14 @@
|
||||
/* Custom axios instance that adds the token to the headers, if existent */ |
||||
import axios from "axios"; |
||||
import UserManager from "./UserService"; |
||||
|
||||
axios.interceptors.request.use(function (config) { |
||||
const token = UserManager.getToken(); |
||||
|
||||
if (token) { |
||||
config.headers.Authorization = "Bearer " + token; |
||||
} |
||||
return config; |
||||
}); |
||||
|
||||
export default axios; |
@ -0,0 +1,6 @@
|
||||
{ |
||||
"potential": { "color": "default", "text": "Potential" }, |
||||
"active": { "color": "success", "text": "Active" }, |
||||
"on_hold": { "color": "purple", "text": "On Hold" }, |
||||
"inactive": { "color": "error", "text": "Inactive" } |
||||
} |
@ -0,0 +1,13 @@
|
||||
import React from "react"; |
||||
import Layout from "./layouts/Main"; |
||||
|
||||
export default function Index() { |
||||
return ( |
||||
<Layout> |
||||
<div className="jumbotron"> |
||||
<h1 className="display-4">404</h1> |
||||
<p className="lead">This page was not found.</p> |
||||
</div> |
||||
</Layout> |
||||
); |
||||
} |
@ -0,0 +1,47 @@
|
||||
import React from "react"; |
||||
import Layout from "./layouts/Main"; |
||||
|
||||
export default function Index({ user }) { |
||||
return ( |
||||
<Layout user={user}> |
||||
<div className="jumbotron"> |
||||
<h1 className="display-4">Welcome back, {user.name?.split(" ")[0]}!</h1> |
||||
<p className="lead">Thanks for testing out the Ωmega alpha.</p> |
||||
<p className="lead"> |
||||
Please keep in mind that this is an unfinished product. If you have |
||||
any thoughts or encounter problems, I would encourage you to share it |
||||
on the <a href="https://lists.sr.ht/~garritfra/omega">mailing list</a>{" "} |
||||
of this project. |
||||
</p> |
||||
<hr className="my-4"></hr> |
||||
<div className="d-flex flex-column"> |
||||
<a |
||||
className="btn btn-primary btn-sm mb-2" |
||||
href="/clients" |
||||
role="button" |
||||
> |
||||
Manage Clients |
||||
</a> |
||||
<a |
||||
className="btn btn-light btn-sm" |
||||
href="https://git.sr.ht/~garritfra/omega" |
||||
> |
||||
Source Code |
||||
</a> |
||||
<a |
||||
className="btn btn-light btn-sm mt-2" |
||||
href="https://lists.sr.ht/~garritfra/omega" |
||||
> |
||||
Thoughts, questions, ideas? |
||||
</a> |
||||
<a |
||||
className="btn btn-light btn-sm mt-2" |
||||
href="https://todo.sr.ht/~garritfra/omega" |
||||
> |
||||
File a bug |
||||
</a> |
||||
</div> |
||||
</div> |
||||
</Layout> |
||||
); |
||||
} |
@ -0,0 +1,30 @@
|
||||
import React from "react"; |
||||
import Layout from "./layouts/Main"; |
||||
|
||||
export default function Index() { |
||||
return ( |
||||
<Layout> |
||||
<div className="jumbotron"> |
||||
<h1 className="display-4">Ωmega</h1> |
||||
<p className="lead">The last CRM you will ever need.</p> |
||||
<hr className="my-4"></hr> |
||||
<div className="d-flex flex-column"> |
||||
<a |
||||
className="btn btn-primary btn-sm mb-2" |
||||
href="/auth/register" |
||||
role="button" |
||||
> |
||||
Try out the Alpha |
||||
</a> |
||||
<a |
||||
className="btn btn-light btn-sm mb-2" |
||||
href="/auth/login" |
||||
role="button" |
||||
> |
||||
Already have an account? Log in here |
||||
</a> |
||||
</div> |
||||
</div> |
||||
</Layout> |
||||
); |
||||
} |
@ -0,0 +1,44 @@
|
||||
import React, { useEffect } from "react"; |
||||
import Layout from "./layouts/Main"; |
||||
|
||||
const basePath = process.env.API_BASE_PATH; |
||||
const frontendBasePath = process.env.FRONTEND_BASE_PATH; |
||||
|
||||
export default function Index() { |
||||
return ( |
||||
<Layout> |
||||
<form |
||||
action={ |
||||
basePath + "/auth/login" + "?redirect=" + frontendBasePath + "/" |
||||
} |
||||
method="POST" |
||||
> |
||||
<div className="form-group"> |
||||
<label for="email">Email address</label> |
||||
<input |
||||
type="email" |
||||
name="email" |
||||
className="form-control" |
||||
id="email" |
||||
aria-describedby="emailHelp" |
||||
/> |
||||
<small id="emailHelp" className="form-text text-muted"> |
||||
We'll never share your email with anyone else. |
||||
</small> |
||||
</div> |
||||
<div className="form-group"> |
||||
<label for="password">Password</label> |
||||
<input |
||||
type="password" |
||||
name="password" |
||||
className="form-control" |
||||
id="password" |
||||
/> |
||||
</div> |
||||
<button type="submit" className="btn btn-primary"> |
||||
Submit |
||||
</button> |
||||
</form> |
||||
</Layout> |
||||
); |
||||
} |
@ -0,0 +1,53 @@
|
||||
import React from "react"; |
||||
import Layout from "./layouts/Main"; |
||||
|
||||
const basePath = process.env.API_BASE_PATH; |
||||
const frontendBasePath = process.env.FRONTEND_BASE_PATH; |
||||
|
||||
export default function Index() { |
||||
return ( |
||||
<Layout> |
||||
<form |
||||
action={ |
||||
basePath + "/auth/register" + "?redirect=" + frontendBasePath + "/" |
||||
} |
||||
method="POST" |
||||
> |
||||
<div className="form-group"> |
||||
<label for="email">Email address</label> |
||||
<input |
||||
type="email" |
||||
name="email" |
||||
className="form-control" |
||||
id="email" |
||||
aria-describedby="emailHelp" |
||||
/> |
||||
<small id="emailHelp" className="form-text text-muted"> |
||||
We'll never share your email with anyone else. |
||||
</small> |
||||
</div> |
||||
<div className="form-group"> |
||||
<label for="password">Password</label> |
||||
<input |
||||
type="password" |
||||
name="password" |
||||
className="form-control" |
||||
id="password" |
||||
/> |
||||
</div> |
||||
<div className="form-group"> |
||||
<label for="name">Full Name</label> |
||||
<input |
||||
type="name" |
||||
name="full_name" |
||||
className="form-control" |
||||
id="name" |
||||
/> |
||||
</div> |
||||
<button type="submit" className="btn btn-primary"> |
||||
Submit |
||||
</button> |
||||
</form> |
||||
</Layout> |
||||
); |
||||
} |
@ -0,0 +1,46 @@
|
||||
import React from "react"; |
||||
import Layout from "../layouts/Main"; |
||||
import moment from "moment"; |
||||
import ClientDetailHeader from "../components/ClientDetailHeader"; |
||||
|
||||
export default function Detail(props = { client, user }) { |
||||
const timelineComponent = props.client.events |
||||
.reverse() |
||||
.slice(0, 2) |
||||
.map((event) => { |
||||
return ( |
||||
<div className="col-sm-5 my-1"> |
||||
<div className="card h-100"> |
||||
<div className="card-body"> |
||||
<h5 className="card-title text-capitalize"> |
||||
{event.eventType.replace("_", " ")} |
||||
</h5> |
||||
<h6 className="card-subtitle mb-2 text-muted"> |
||||
{moment(event.createdAt).fromNow()} |
||||
</h6> |
||||
<p className="card-text text-capitalize"> |
||||
{event.value?.replace("_", " ")} |
||||
</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
); |
||||
}); |
||||
return ( |
||||
<Layout user={props.user}> |
||||
<ClientDetailHeader {...props} /> |
||||
|
||||
<div className="jumbotron jumbotron-fluid row mt-4 py-1 mx-0"> |
||||
{timelineComponent} |
||||
<div className="col-sm-2 d-flex align-items-center"> |
||||
<a |
||||
className="btn btn-light my-2" |
||||
href={`/clients/${props.client._id}/timeline`} |
||||
> |
||||
View Full Timeline |
||||
</a> |
||||
</div> |
||||
</div> |
||||
</Layout> |
||||
); |
||||
} |
@ -0,0 +1,39 @@
|
||||
import React from "react"; |
||||
import Layout from "../layouts/Main"; |
||||
|
||||
export default function Clients({ clients, user }) { |
||||
const clientViews = clients.map((client) => { |
||||
return ( |
||||
<a |
||||
href={"/clients/" + client.id} |
||||
className="list-group-item list-group-item-action" |
||||
> |
||||
<div className="d-flex w-100 justify-content-between"> |
||||
<h5 className="mb-1">{client.name}</h5> |
||||
<small className="text-capitalize"> |
||||
{client.status.replace("_", " ")} |
||||
</small> |
||||
</div> |
||||
<p className="mb-1">{client.email}</p> |
||||
</a> |
||||
); |
||||
}); |
||||
|
||||
return ( |
||||
<Layout user={user}> |
||||
<div className="row"> |
||||
<div className="col-md-4"> |
||||
<a |
||||
href="/clients/new" |
||||
className="btn btn-outline-dark btn-block mb-3" |
||||
> |
||||
New Client |
||||
</a> |
||||
</div> |
||||
<div className="col-md-8"> |
||||
<div className="list-group">{clientViews}</div> |
||||
</div> |
||||
</div> |
||||
</Layout> |
||||
); |
||||
} |
@ -0,0 +1,74 @@
|
||||
import React from "react"; |
||||
import Layout from "../layouts/Main"; |
||||
|
||||
const basePath = process.env.API_BASE_PATH; |
||||
const frontendBasePath = process.env.FRONTEND_BASE_PATH; |
||||
|
||||
export default function Clients({ user }) { |
||||
return ( |
||||
<Layout user={user}> |
||||
<form |
||||
action={ |
||||
basePath + |
||||
"/clients" + |
||||
"?token=" + |
||||
user.token + |
||||
"&redirect=" + |
||||
encodeURIComponent(frontendBasePath) + |
||||
"/clients" |
||||
} |
||||
method="POST" |
||||
> |
||||
<div className="row"> |
||||
<div className="col-lg-6"> |
||||
<div className="form-group"> |
||||
<label for="name">Name</label> |
||||
<input |
||||
type="name" |
||||
name="name" |
||||
className="form-control" |
||||
id="name" |
||||
/> |
||||
</div> |
||||
<div className="form-group"> |
||||
<label for="email">E-Mail</label> |
||||
<input |
||||
type="email" |
||||
name="email" |
||||
className="form-control" |
||||
id="email" |
||||
/> |
||||
</div> |
||||
<div className="form-group"> |
||||
<label for="status">Current Status</label> |
||||
<select className="form-control" id="status" name="status"> |
||||
<option value="potential">Potential</option> |
||||
<option value="active">Active</option> |
||||
<option value="on_hold">On Hold</option> |
||||
<option value="inactive">Inactive</option> |
||||
</select> |
||||
</div> |
||||
</div> |
||||
<div className="col-lg-6"> |
||||
<div className="form-group"> |
||||
<label for="address">Address</label> |
||||
<textarea name="address" className="form-control" id="address" /> |
||||
</div> |
||||
<div className="form-group"> |
||||
<label for="telephone">Phone</label> |
||||
<input |
||||
type="tel" |
||||
name="telephone" |
||||
className="form-control" |
||||
id="telephone" |
||||
/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<button type="submit" className="btn btn-primary"> |
||||
Submit |
||||
</button> |
||||
</form> |
||||
</Layout> |
||||
); |
||||
} |
@ -0,0 +1,29 @@
|
||||
import React from "react"; |
||||
import Layout from "../layouts/Main"; |
||||
import moment from "moment"; |
||||
import ClientDetailHeader from "../components/ClientDetailHeader"; |
||||
|
||||
export default function Timeline(props = { client, events, user }) { |
||||
const eventViews = props.events.reverse().map((event) => { |
||||
return ( |
||||
<li className="list-group-item"> |
||||
<h5 className="card-title text-capitalize"> |
||||
{event.eventType.replace("_", " ")} |
||||
</h5> |
||||
<h6 className="card-subtitle mb-2 text-muted"> |
||||
{moment(event.createdAt).fromNow()} |
||||
</h6> |
||||
<p className="card-text text-capitalize"> |
||||
{event.value?.replace("_", " ")} |
||||
</p> |
||||
</li> |
||||
); |
||||
}); |
||||
|
||||
return ( |
||||
<Layout user={props.user}> |
||||
<ClientDetailHeader {...props} /> |
||||
<ul className="list-group my-5">{eventViews}</ul> |
||||
</Layout> |
||||
); |
||||
} |
@ -0,0 +1,73 @@
|
||||
import React from "react"; |
||||
import Layout from "../layouts/Main"; |
||||
import moment from "moment"; |
||||
|
||||
const basePath = process.env.API_BASE_PATH; |
||||
const frontendBasePath = process.env.FRONTEND_BASE_PATH; |
||||
|
||||
export default function ClientDetailHeader({ client, user }) { |
||||
return ( |
||||
<div className="row"> |
||||
<div className="col col-md-8"> |
||||
<h4 className="display-4">{client.name}</h4> |
||||
<h4 className="lead text-muted">{client.email}</h4> |
||||
</div> |
||||
<div className="col col-md-4"> |
||||
<div class="card border-dark"> |
||||
<div class="card-body d-flex flex-column"> |
||||
<div className="d-flex justify-content-between"> |
||||
<span>Address</span> |
||||
<span className="text-right">{client.address || "-"}</span> |
||||
</div> |
||||
<div className="d-flex justify-content-between"> |
||||
<span>Tel.</span> |
||||
<span>{client.telephone || "-"}</span> |
||||
</div> |
||||
<form |
||||
method="post" |
||||
action={ |
||||
basePath + |
||||
"/clients/" + |
||||
client._id + |
||||
"/events" + |
||||
"?token=" + |
||||
user.token + |
||||
"&redirect=" + |
||||
frontendBasePath + |
||||
"/clients/" + |
||||
client._id |
||||
} |
||||
class="inline" |
||||
> |
||||
<div className="d-flex justify-content-between"> |
||||
<span>Status</span> |
||||
<select |
||||
className="card-text text-capitalize" |
||||
name="value" |
||||
defaultValue={client.status} |
||||
> |
||||
<option value="potential" className="card-text"> |
||||
Potential |
||||
</option> |
||||
<option value="active" className="card-text"> |
||||
Active |
||||
</option> |
||||
<option value="inactive" className="card-text"> |
||||
Inactive |
||||
</option> |
||||
<option value="on_hold" className="card-text"> |
||||
On Hold |
||||
</option> |
||||
</select> |
||||
</div> |
||||
<button type="submit" class="badge badge-primary align-self-end"> |
||||
Update |
||||
</button> |
||||
<input type="hidden" name="eventType" value="status_changed" /> |
||||
</form> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
@ -0,0 +1,57 @@
|
||||
import React, { useContext } from "react"; |
||||
import UserContext from "../../contexts/UserContext"; |
||||
|
||||
export default function Head() { |
||||
const user = useContext(UserContext); |
||||
|
||||
return ( |
||||
<nav className="navbar navbar-expand-md navbar-light container"> |
||||
<a className="navbar-brand" href="/"> |
||||
Ωmega |
||||
</a> |
||||
<button |
||||
className="navbar-toggler" |
||||
type="button" |
||||
data-toggle="collapse" |
||||
data-target="#navbarNav" |
||||
aria-controls="navbarNav" |
||||
aria-expanded="false" |
||||
aria-label="Toggle navigation" |
||||
> |
||||
<span className="navbar-toggler-icon"></span> |
||||
</button> |
||||
<div className="collapse navbar-collapse" id="navbarNav"> |
||||
<ul className="navbar-nav"> |
||||
<li className="nav-item active"> |
||||
<a className="nav-link" href="/clients"> |
||||
Clients <span className="sr-only">(current)</span> |
||||
</a> |
||||
</li> |
||||
</ul> |
||||
<ul className="navbar-nav ml-auto"> |
||||
{user ? ( |
||||
<li className="nav-item"> |
||||
<a className="nav-link" href="/auth/logout"> |
||||
Logged in as {user.name} - Log Out{" "} |
||||
<span className="sr-only">(current)</span> |
||||
</a> |
||||
</li> |
||||
) : ( |
||||
<> |
||||
<li className="nav-item"> |
||||
<a className="nav-link" href="/auth/login"> |
||||
Login <span className="sr-only">(current)</span> |
||||
</a> |
||||
</li> |
||||
<li className="nav-item"> |
||||
<a className="nav-link" href="/auth/register"> |
||||
Register <span className="sr-only">(current)</span> |
||||
</a> |
||||
</li> |
||||
</> |
||||
)} |
||||
</ul> |
||||
</div> |
||||
</nav> |
||||
); |
||||
} |
@ -0,0 +1,25 @@
|
||||
import React from "react"; |
||||
import Header from "./Header"; |
||||
import UserContext from "../../contexts/UserContext"; |
||||
|
||||
export default function ({ user, children }) { |
||||
return ( |
||||
<UserContext.Provider value={user}> |
||||
<head> |
||||
<title>Ωmega</title> |
||||
<link rel="stylesheet" href="/bootstrap.min.css"></link> |
||||
<link rel="stylesheet" href="/styles.css"></link> |
||||
<meta |
||||
name="viewport" |
||||
content="width=device-width, initial-scale=1.0" |
||||
></meta> |
||||
<script src="/jquery.min.js"></script> |
||||
<script src="/bootstrap.min.js"></script> |
||||
</head> |
||||
<body> |
||||
<Header></Header> |
||||
<div className="container mt-3">{children}</div> |
||||
</body> |
||||
</UserContext.Provider> |
||||
); |
||||
} |
@ -0,0 +1,25 @@
|
||||
# Can be used as a testing environment |
||||
version: "3.7" |
||||
|
||||
services: |
||||
server: |
||||
build: ./server |
||||
restart: always |
||||
ports: |
||||
- 8080:8080 |
||||
environment: |
||||
AUTH_SECRET: mysecretl |
||||
networks: |
||||
- shapecamp |
||||
|
||||
client: |
||||
build: ./client |
||||
restart: always |
||||
ports: |
||||
- 80:80 |
||||
environment: |
||||
API_BASE_PATH: http://localhost:8080 |
||||
networks: |
||||
- shapecamp |
||||
networks: |
||||
shapecamp: |
@ -1,31 +0,0 @@
|
||||
{ |
||||
"name": "react-parcel-boilerplate", |
||||
"version": "1.0.0", |
||||
"description": "React Parcel Boilerplate", |
||||
"main": "index.js", |
||||
"scripts": { |
||||
"start": "parcel public/index.html", |
||||
"build": "npm test && parcel build public/index.html", |
||||
"test": "jest --coverage" |
||||
}, |
||||
"author": "Garrit Franke", |
||||
"license": "MIT", |
||||
"dependencies": { |
||||
"@types/jest": "^24.0.22", |
||||
"react": "^17.0.2", |
||||
"react-dom": "^17.0.2", |
||||
"react-p5": "^1.3.19", |
||||
"styled-components": "^5.3.0" |
||||
}, |
||||
"devDependencies": { |
||||
"@babel/core": "^7.14.6", |
||||
"@babel/preset-env": "^7.14.7", |
||||
"@babel/preset-react": "^7.14.5", |
||||
"@wojtekmaj/enzyme-adapter-react-17": "^0.6.2", |
||||
"babel-jest": "^27.0.5", |
||||
"enzyme": "^3.10.0", |
||||
"jest": "^27.0.5", |
||||
"node-sass": "^6.0.1", |
||||
"parcel": "^2.0.0-beta.2" |
||||
} |
||||
} |
@ -1,16 +0,0 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
|
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge"> |
||||
<title>My React App</title> |
||||
</head> |
||||
|
||||
<body> |
||||
<div id="root" /> |
||||
<script type="module" src="../src/index.js"></script> |
||||
</body> |
||||
|
||||
</html> |
@ -0,0 +1,18 @@
|
||||
FROM node:15.0.1-alpine3.11 |
||||
|
||||
# Create app directory |
||||
WORKDIR /usr/src/app |
||||
|
||||
RUN apk add g++ make python |
||||
|
||||
# Install app dependencies |
||||
# A wildcard is used to ensure both package.json AND package-lock.json are copied |
||||
COPY package*.json ./ |
||||
|
||||
RUN npm ci |
||||
|
||||
# Bundle app source |
||||
COPY . . |
||||
|
||||
EXPOSE 8080 |
||||
CMD [ "node", "app.js" ] |
@ -0,0 +1,6 @@
|
||||
## Configuration |
||||
|
||||
To configure the server, you need these fields in your `.env` file: |
||||
|
||||
* AUTH_SECRET - Secret used to sign JWTs |
||||
* DATABASE_URL - Database path |
@ -0,0 +1,59 @@
|
||||
const express = require("express"); |
||||
const jwt = require("jsonwebtoken"); |
||||
const bodyParser = require("body-parser"); |
||||
|
||||
require("dotenv").config(); |
||||
|
||||
const app = express(); |
||||
|
||||
app.use(bodyParser.json()); |
||||
app.use(bodyParser.urlencoded({ extended: true })); |
||||
|
||||
app.use(require("express-form-data").parse()); |
||||
|
||||
app.use(require("cors")()); |
||||
|
||||
app.use((req, res, next) => { |
||||
req.body = { ...req.body, ...req.query }; |
||||
next(); |
||||
}); |
||||
|
||||
// Logging Middleware
|
||||
app.use((req, res, next) => { |
||||
console.log(new Date().toUTCString(), req.method, req.path); |
||||
next(); |
||||
}); |
||||
|
||||
// Authorization middleware
|
||||
app.use((req, res, next) => { |
||||
if (req.path === "/auth/register" || req.path === "/auth/login") |
||||
return next(); |
||||
|
||||
const authHeader = req.header("Authorization"); |
||||
|
||||
let token = authHeader?.replace("Bearer ", ""); |
||||
|
||||
// Try to get token if request is from frontend
|
||||
if (!token) { |
||||
token = req.cookies?.token; |
||||
} |
||||
|
||||
// Try to get token from body
|
||||
if (!token) { |
||||
token = req.body.token; |
||||
} |
||||
|
||||
if (!token) return res.status(401).send("Invalid token"); |
||||
|
||||
try { |
||||
const verified = jwt.verify(token, process.env.AUTH_SECRET); |
||||
req.userId = verified._id; |
||||
next(); |
||||
} catch (err) { |
||||
res.status(401).json(err); |
||||
} |
||||
}); |
||||
|
||||
app.use("/auth", require("./routes/auth")); |
||||
|
||||
app.listen(8080); |
@ -0,0 +1,8 @@
|
||||
module.exports = { |
||||
client: 'sqlite3', |
||||
useNullAsDefault: true, |
||||
connection: { |
||||
filename: 'sqlite.db' |
||||
} |
||||
}; |
||||
|
@ -0,0 +1,12 @@
|
||||
const { Model } = require('objection'); |
||||
const Knex = require("knex"); |
||||
const knexConfig = require("../knexfile"); |
||||
|
||||
class User extends Model { |
||||
static get tableName() { |
||||
return "users"; |
||||
} |
||||
} |
||||
|
||||
module.exports = User; |
||||
|
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,25 @@
|
||||
{ |
||||
"main": "app.js", |
||||
"scripts": { |
||||
"start": "nodemon app.js" |
||||
}, |
||||
"author": "", |
||||
"license": "ISC", |
||||
"dependencies": { |
||||
"@types/node": "^14.11.8", |
||||
"bcryptjs": "^2.4.3", |
||||
"body-parser": "^1.19.0", |
||||
"cors": "^2.8.5", |
||||
"dotenv": "^8.2.0", |
||||
"express": "^4.17.1", |
||||
"express-form-data": "^2.0.14", |
||||
"jsonwebtoken": "^8.5.1", |
||||
"knex": "^0.21.19", |
||||
"moment": "^2.29.1", |
||||
"objection": "^2.2.15", |
||||
"sqlite3": "^5.0.2" |
||||
}, |
||||
"devDependencies": { |
||||
"nodemon": "^2.0.4" |
||||
} |
||||
} |
@ -0,0 +1,72 @@
|
||||
const bcrypt = require("bcryptjs"); |
||||
const jwt = require("jsonwebtoken"); |
||||
|
||||
const router = require("express").Router(); |
||||
const User = require("../model/User"); |
||||
|
||||
router.post("/register", async (req, res) => { |
||||
const { email, full_name, password } = req.body; |
||||
console.debug("Registering user:", email); |
||||
|
||||
if (await User.findOne({ email })) { |
||||
res.status(400).send("Email already taken"); |
||||
return; |
||||
} |
||||
|
||||
const salt = await bcrypt.genSalt(10); |
||||
const hashedPassword = await bcrypt.hash(password, salt); |
||||
|
||||
const user = new User({ email, full_name, password: hashedPassword }); |
||||
|
||||
const result = await user |
||||
.save() |
||||
.then((user) => { |
||||
user.password = undefined; |
||||
}) |
||||
.catch((err) => { |
||||
console.log(err); |
||||
}); |
||||
|
||||
if (req.query.redirect) return res.redirect(req.query.redirect); |
||||
else return res.json({ status: "success", token, id: result.id }); |
||||
}); |
||||
|
||||
router.post("/login", async (req, res) => { |
||||
console.debug("New login attempt:", req.body.email); |
||||
const { email, password } = req.body; |
||||
const user = await User.findOne({ email }); |
||||
|
||||
if (!user) { |
||||
console.debug("User not found"); |
||||
return res.status(400).send("Email or password incorrect"); |
||||
} |
||||
|
||||
const validPass = await bcrypt.compare(password, user.password); |
||||
if (!validPass) return res.status(400).send("Email or password incorrect"); |
||||
|
||||
const token = jwt.sign( |
||||
{ _id: user.id, name: user.full_name, email: user.email }, |
||||
process.env.AUTH_SECRET |
||||
); |
||||
|
||||
console.debug("Login success for userId:", user.id); |
||||
if (req.query.redirect) |
||||
return res.cookie("token", token).redirect(req.query.redirect); |
||||
else return res.json({ status: "success", token, id: user.id }); |
||||
}); |
||||
|
||||
router.get("/profile", async (req, res) => { |
||||
console.debug("Fetching profile for:", req.userId); |
||||
let user = await User.findOne({ _id: req.userId }); |
||||
|
||||
if (user) { |
||||
user.password = undefined; |
||||
return res.json(user); |
||||
} else { |
||||
const message = "User not found"; |
||||
console.debug(message); |
||||
return res.status(404).send(message); |
||||
} |
||||
}); |
||||
|
||||
module.exports = router; |
@ -0,0 +1,46 @@
|
||||
const router = require("express").Router(); |
||||
|
||||
const User = require("../model/User"); |
||||
const Client = require("../model/Client"); |
||||
|
||||
router.get("/", async (req, res) => { |
||||
const user = await User.find(); |
||||
res.json(user); |
||||
}); |
||||
|
||||
router.post("/", async (req, res) => { |
||||
console.log("POSTing user"); |
||||
const { email, full_name } = req.body; |
||||
|
||||
// Don't accept duplicate emails
|
||||
if (await User.findOne({ email })) { |
||||
res.status(400).send("Email already taken"); |
||||
return; |
||||
} |
||||
|
||||
const user = new User({ email, full_name }); |
||||
const savedUser = await user.save(); |
||||
res.json(savedUser); |
||||
}); |
||||
|
||||
router.get("/:id", async (req, res) => { |
||||
const id = req.params.id; |
||||
|
||||
const result = await User.findById(id); |
||||
res.send(result); |
||||
}); |
||||
|
||||
router.delete("/:id", async (req, res) => { |
||||
const id = req.params.id; |
||||
|
||||
const result = await User.deleteOne({ _id: id }); |
||||
res.send(result); |
||||
}); |
||||
|
||||
router.get("/:id/clients", async (req, res) => { |
||||
const id = req.params.id; |
||||
|
||||
Client.find({ created_by: id }); |
||||
}); |
||||
|
||||
module.exports = router; |
@ -1,16 +0,0 @@
|
||||
import React from "react"; |
||||
import styled from "styled-components"; |
||||
|
||||
import Game from "./Game"; |
||||
|
||||
const Container = styled.div` |
||||
text-align: center; |
||||
`;
|
||||
|
||||
export default function App() { |
||||
return ( |
||||
<Container> |
||||
<Game /> |
||||
</Container> |
||||
); |
||||
} |
@ -1,101 +0,0 @@
|
||||
import React from "react"; |
||||
import Sketch from "react-p5"; |
||||
|
||||
let positions = []; |
||||
|
||||
let initialPos; |
||||
let playerPath = []; |
||||
|
||||
let stepX; |
||||
let stepY; |
||||
let numCols = 50; |
||||
let numRows = 25; |
||||
|
||||
export default (props) => { |
||||
const setup = (p5, canvasParentRef) => { |
||||
p5.createCanvas(1000, 500).parent(canvasParentRef); |
||||
|
||||
const setupGrid = () => { |
||||
stepX = p5.width / numCols; //to make sure they are evenly spaced, we divide the width and height by numberOfColumns
|
||||
stepY = p5.height / numRows; //and numberOfRows respectively
|
||||
|
||||
for (let x = 0; x < p5.width; x += stepX) { |
||||
//start at the first column, where x = 0
|
||||
|
||||
for (let y = 0; y < p5.height; y += stepY) { |
||||
//go through all the rows (y = 0, y = yStep * 1, y = yStep * 2, etc.)
|
||||
|
||||
const p = p5.createVector(x, y); //we create a vector at this location
|
||||
|
||||
positions.push(p); // and then we put the vector into the array
|
||||
} |
||||
//at the end of the inner for loop, we go back to the first loop, and we increment x
|
||||
//now our column is going to b x = xStep*1, and we populate all the rows with the inner for loop
|
||||
//and again, and again until x > width
|
||||
} |
||||
}; |
||||
|
||||
const setupPlayer = () => { |
||||
initialPos = p5.createVector(5, 5); |
||||
playerPath.push(p5.createVector(1, 0)); |
||||
playerPath.push(p5.createVector(1, 1)); |
||||
playerPath.push(p5.createVector(1, 1)); |
||||
playerPath.push(p5.createVector(0, 1)); |
||||
}; |
||||
|
||||
setupGrid(); |
||||
setupPlayer(); |
||||
}; |
||||
|
||||
const draw = (p5) => { |
||||
const drawGrid = () => { |
||||
p5.push(); |
||||
|
||||
p5.fill(100, 100, 100); |
||||
p5.noStroke(); |
||||
|
||||
for (let i = 0; i < positions.length; i++) { |
||||
//go through all our positions
|
||||
p5.ellipse(positions[i].x, positions[i].y, 2, 2); //put a circle at each of them
|
||||
} |
||||
|
||||
p5.pop(); |
||||
}; |
||||
|
||||
const drawPlayer = () => { |
||||
p5.push(); |
||||
|
||||
p5.fill(255, 0, 0); // Red
|
||||
|
||||
p5.noStroke(); |
||||
|
||||
// Need to clone here to not override initial position
|
||||
let currentPos = { ...initialPos }; |
||||
|
||||
// Draw initial position
|
||||
p5.ellipse(currentPos.x * stepX, currentPos.y * stepY, 5, 5); |
||||
|
||||
for (let pos of playerPath) { |
||||
|
||||
const previous = { ...currentPos }; |
||||
|
||||
currentPos.x += pos.x; |
||||
currentPos.y += pos.y; |
||||
|
||||
p5.push(); |
||||
p5.stroke(150); |
||||
p5.line(previous.x * stepX, previous.y * stepY, currentPos.x * stepX, currentPos.y * stepY); |
||||
p5.pop(); |
||||
|
||||
p5.ellipse(currentPos.x * stepX, currentPos.y * stepY, 5, 5); |
||||
} |
||||
|
||||
p5.pop(); |
||||
}; |
||||
|
||||
drawGrid(); |
||||
drawPlayer(); |
||||
}; |
||||
|
||||
return <Sketch setup={setup} draw={draw} />; |
||||
}; |
Loading…
Reference in new issue