mtmanning93 / reach_reports

Condition reports site. Reports written for climbers by climbers.

Matt Manning

Software Developer, Design Enthusiast, Mountain Climber.

Who Am I?

An Englishman living in Switzerland. A software developer, graduating from Code Institute Full Stack Software Development (Advanced Front End) Programme, with interests also in design. If i am not coding im usually in the mountains.

🌐 - View my online CV

📫 - [email protected]

Ready to Connect?

Showcase Projects - Below you can view some of my repositories and projects.

reach_reports's Issues

BUG: 'end_date' Selected Before 'start_date'

Describe the bug

• When a user is creating or editing a report they're currently able to select an end date before their selected start date.

To Reproduce

• Create new report select end date before selected start date
• Submit valid form

Expected behaviour
The report is invalid if the end date selected is before the selected start date.

USER STORY: Navigation

As a user I can easily locate each page of the site so that navigation is smooth and consistant throughout the site

Acceptance Criteria

• Nav Bar:
  Navbar to include brand/logo, and links to home, reports and the log/in and sign-up pages.
• Footer:
  The site footer to include icon links to social media, plus email, address, contact information and more navigation links. Potential to include a friendly message regarding mountain safety.
• Landing Page:
  The home page should be a landing page from where the user can clearly see the sites aim, and the user can quickly recognise the navigation tools

Tasks

• Design UI for navbar footer and landing page
  • When designing keep in mind 'logged in' user logic to switch the navbar links
    #13 #14
• Create basic html and css structure of base.html (Simple placeholder logo)
  • Create a "sign-up" button which clearly stands out enticing users to sign up.
• Include necessary links to relevant pages and external social links
• Create index.html (home)
  • Use large scale header image
  • Include button links to reports.html and log-in/ sign-up pages
  • Use quote box for inspirational quotes as seen in wireframe

USER STORY: Like/ Unlike Reports

As a logged in user I can like or unlike posts so that I can show my appreciation towards good reports.

Acceptance Criteria

• Like Button:
  A logged in user can find a like button in the form of an icon with the number of likes next to it. In order to unlike the icon is simply clicked again.
• Appearance:
  The like button should have an appearance change on click confirmaing to the user whtzher they have liked the report of not.

Tasks

• Create a like button using a fontawesome icon (thumbs-up) and a counter
• Implement the functionality to change the icon color when it is liked vs. unliked

USER STORY: Edit Profile

As a registered user I can edit my profile information so that so it is up-to-date

Acceptance Criteria

• Edit Information:
  When in the account page a user can edit the information provided by clicking an 'edit information' button. Once edited they are able to save the new information.

Tasks

• Implement an 'edit info' button on the account page
  • maintain the style of buttons throughout for 'edit' and 'save/submit'
• Write the logic to give the user the ability to change the input fields
• Provide a save button to submit the new changes
• Implement the ability to reset password or if password forgotten, use allauth built in templates

ADD FEAT: Footer, Nav and button styling update

Is your feature request related to a problem? Please describe.
The contrast in the footer must be improved and the footer must hug the screen bottom on desktop and large monitors. Also main buttons must be improved to create a better contrast.

ADD FEAT: Inspiring Mountain Quotes

Describe the solution you'd like

• On the 'home' page an inspiring mountain quote is visible, potential to select at random from a number of quotes.
• E.G. 'The mountains are calling, and i must go' - John Muir

Describe alternatives you've considered

• Possible quote box visible overlaying the main home images

USER STORY: GPS Url

As a registered user I can assign a gps url when creating/ editing a report so that readers can visualise the route taken

Acceptance Criteria

• GPS Url:
  A user can copy and paste a url into the designated input which if supplied will render in the reports detail view.
• Detail View:
  The display of the GPS should be large and removable in the edit report form.

Tasks

• Create logically space within the report detail template, with UX in mind to display an iframe. (FATMAP/ STRAVA)
  • Potential use of an if statement ie. {% if Fatmap this %} {% elif Strave do this %} ...
• Ensure it is responsive in the design
  • It doesn't affect the placement of the other details

ADD FEAT: Explanation Tooltip on Fatmap field

Is your feature request related to a problem? Please describe.
Not a problem, but users who aren't aware of Fatmap.com may need some explanation to add the correct url.

Describe the solution you'd like
On the field in the 'create report form' (also 'edit report') add the FontAwesome 'i' information icon, and wire up a tooltip to, briefly explaining what Fatmap.com is and a link to Fatmap.com.

Additional context

• Make sure link opens new tab.
• Consider adding more Fatmap.com information (partnership or something) within the footer.

USER STORY: View Reports

As a user I can view a paginated list of condition reports so that I can select one to read

Acceptance Criteria

• Reports List:
  A list of all reports paginated in order to simplify selection.
• Reports List Insight:
  Each report listed should display some simple details so the user understand what each report contains.
• Pagination:
  The pagination links should update according to which page of the reports list the user is on.

Tasks

• Create reports.html template, update views accordingly.
• Create a for loop within the html structure which will display relevant information for each report.
• Use built in django pagination method to paginate reports 10 per page.
• Order reports by date of activity_start as this is most useful to the climbers (user).

ADD FEAT: Email Verification

Is your feature request related to a problem? Please describe.

• Currently users are able to sign up with an email, but what if they input the wrong email at first? This is also related to password resetting

Describe the solution you'd like

• Set up the built in Email verification with django allauth

Describe alternatives you've considered
-To prevent the timely setup of email verification the user can currently alter their email address from inside the 'account_update' view and template.

USER STORY: Login

As a registered user I can login so that I can take advantage of the registered user functions and view my account

Acceptance Criteria

• Login Access:
  From the navigation menu the user can navigate directly to the login page.
• Login Page:
  The login page should contain a user friendly form to fill in. It should be simple and contain a link to register in case of miss navigation.
• Validation:
  The form should validate whether the user already has an account or not.

Tasks

• Design and implement UI for the login form
  • include fields for email and password
  • 'login' button to submit the form
• Implement validation to check if the username matches an existing user account
  • If input is invalid create and display error message
  • Ensure user account information is protected
• Provide feedback for a successful login or if the user must first register
  • Alert message, bootstrap
• Implement logic to switch the navbar links 'login' and 'sign-up' to 'account' and 'logout'
  • #4

USER STORY: Comment On a Report

As a registered user I can comment on reports so that discuss the report further and join the community

Acceptance Criteria

• Comments Section:
  Being a registered user when viewing a report I can scroll down to a comments section, where I can find the discussion and leave my own comment
• Commenting:
  When leaving a coment it should automatically be displayed in chronological order beneath the previous comment.
• Information:
  The comment left should also display the users name and date/ time submitted

Tasks

• Design an input comment section for users who are logged in
• Implement the comment input below the previous comment
• Implement an 'X' to delete own comments if user.is_authenticated / if user = comment author

USER STORY: View Likes

As a user I can view number of likes on a report so that I can identify if it is a popular report or not

Acceptance Criteria

• View Likes:
  When a user opens a report they can see, clearly, the number of likes the report has
• Format:
  Then number of likes should be depicted by the correct icon and total number

Tasks

• Implement the display of total number of likes retrieving correct backend data
  • Need #9 finished before completio.
• Design a visual representation of number of likes (Use fontawesome heart icon)

BUG: GPS iFrame Displays in Console Errors

Describe the bug

• When loading the reports details page, if a report contains the embed iframe link from FATMAP the console shows 3 different AssertionErrors along with many others.

To Reproduce

• The issue can be reproduces by loading the 'Reports' page and selecting 'MÖTORHEAD' report.
• The issue is seen from inside the Devtools console.

Expected behavior
Everything loads correctly however errors are visible, would be good to remove errors.

Screenshots

USER STORY: Delete Comments

As a registered user I can delete my comments so that I can remove my own part of the discussion

Acceptance Criteria

• Delete Button:
  Users should see a delete button clearly visible next to the comments they have posted, no delete button is visible on other users comments.

Tasks

• Create delete button.
• Implement confirmation from the user, use the modal used for deleting reports
• Implement logic to delete the comment from the db entirely

USER STORY: Filter List

As a user I can select from different filters so that the reports list can be narrowed down to suit my search needs

Acceptance Criteria

• Filters:
  A user can select from different filters to narrow down the reports list. When selecting the reports list filters out the relevant reports. The filters should be on conditions and activity.

Tasks

• Update ReportList class based view to include the rendering of forms within the reports list template and the selecting based on the model choices
  • GRADE_CHOICES
  • ACTIVITY_TYPE
• Implement the logic to filter out the reports, providing an 'all' choice in the selection to display all reports

USER STORY: Log Out

As a logged in in user I can **log out ** so that I can protect my account

Acceptance Criteria

• Menu:
  The main navigation menu includes a log out button only visible when a user is logged in.
• Confirmation:
  On log out the user receives a confirmation alert.
• Redirect:
  When logging out the user gets redirected to the 'home' page (landing page)

Tasks

• Design and implement a log out link.
• Implement the logic in order to only display the link when logged in, removing the 'login' and 'signup' links from view
• Implement the alert and redirection when log out is confirmed

BUG: Min Value in 'number_in_group' and 'number_on_route' fields.

Describe the bug

• Currently user can select less than 0 when creating and editing report from within the number_in_group and number_on_route fields.

To Reproduce

• Create new report, fill out form and input an integer less than 0 from inside the 'number_in_group' and 'number_on_route' fields.
• Submit form, view results from inside the reports details.

Expected behaviour

• We must create a min-value for these fields.

Screenshots

USER STORY: Account Registration

As a user I can register for an account so that I can access the functionality to create, comment and like reports myself

Acceptance Criteria

• Registration:
  A user should have access to a registration page where they can provide the necessary information in a form to create an account.
• Validation/ Error Handling:
  The registration form should include validation checks to ensure that users provide valid and information. Error messages should be displayed in the case of incorrect information.
• Registered:
  Once registered the user should be taken to their account information page.
  The nav bar item 'login and sign-up' change to account and logout

Tasks

• Design UI for registration form
• Create Template including structure of html and css
• Develop correct functionality using templating to access the user model, and create a new user within the database.
• Develop validation checks and event handling to capture incorrect inputs
• Design Account/ Profile page containing all relevant information
• Update navbar menu to correct links
  • Use if statement (if user == logged in)

ADD FEAT: User Profile Image

Describe the solution you'd like

• Users have the ability once registered to upload a profile image from the update account page
• The image will then be visible as the icon for the accounts drop down inside the menu, on comments and reports the user has posted.

USER STORY: Create Drafts

As a site admin I can create draft reports so that I can finish them and publish them later

Acceptance Criteria

• Create Draft:
  When creating a report the admin has the ability to check the publish button or not. If it is not checked the report remains unpublished.

• Editing/ Deleting:
  The admin can edit and delete draft posts as they would a published post

Tasks

• Create a field type in the models.py file of the reports app with the arguments of draft or published are the available choices.

USER STORY: View Single Report

As a user I can select a report from the reports list so that I can read its content

Acceptance Criteria

• Open Report:
  Once clicking on the selection, a new page opens with the reports content in detail.
• Back Button:
  Once viewing the report the user can click a clearly visible back button in order to return to the reports list.
• Comments:
  #7

Tasks

• Create report template and view
• Design UI
• Create html and css structure
• Use the correct report model fields to fill the template
• Use a return icon to provide the user with a 'return to reports' option
• Create a comments section underneath each report

BUG: Update account form, update email.

Describe the bug
Now that the email.html page from allauth is setup it's not necessary to have the email update section on the update account form. Adding emails this way makes a strange reaction to the email.html form.

When using the email form we are unable to remove the email used.

To Reproduce

• Navigate to update account page and add a new email in the form, submit the form
• Now navigate to the email management page. Here you are unable to delete the desired email

Expected behaviour
Maybe a dropdown should be available in the update account email section, to change the primary email address of the account?

Screenshots

BUG: Form error message displaying too many times.

Describe the bug
If an invalid report is submitted either in the edit_form or create_form the top 'Invalid Input' message displays too many times. If 3 errors displays 3 times etc.

To Reproduce
Go to edit_form and add an end_date before the start date, also type 'testing' into the 'time taken' field. Submit form to display error prompt.

Expected behaviour
The validation errors should be displayed on the field therefor the top prompt just need to display once.

Screenshots

USER STORY: Add Report Images

As a site admin/ registered user I can add images to reports so that the report is more informative

Acceptance Criteria

• Add Image Files:
  The site admin and registered should be able to add and store image files safely from within each report created
• Update/ Delete:
  It is possible to edit an existing file or delete one

Tasks

• Create a separate Image model where only images are stored with the report FK
• Implement the ability to add, change and delete files from within the report

USER STORY: View Comments

As a user I can view comments on each report so that I can see the conversation/ questions

Acceptance Criteria

• View comments section:
  When the user scrolls down the report they should be able to see existing comments associated with that report.
• Comment Details:
  Each visible comment should also display the author of the comment and date and time of comment
• Comment Order:
  Comments should be order from oldest to newest like a chat conversation

Tasks

• Create comments section within template using templating to select the content, author and date of comment
• Order comments in oldest to newest format

BUG: Time Taken Field

Describe the bug
In the time taken duration field within the create report form it is possible to enter a non-valid format such as '20000'.

To Reproduce

• Create new report, create valid form but type 200000 in time taken as oppose to hh:mm:ss format.

Expected behavior

• It should raise a validation error ad display error message to user regarding the correct format. This should be hh:mm:ss

USER STORY: Manage Posts

As a site admin I can create, read, update and delete reports so that I can manage the site content

Acceptance Criteria

• Create Report:
  The site admin should be able to access a "Create Report" form. After inputting the needed information, submitting will store the new report in the database and make it visible to the site admin.

• Read Report:
  The site admin has the ability to read a report by viewing a list of existing reports and selecting one.

• Update/ Delete:
  The admin should have an option to edit and delete reports. Each field should be editable, and the updates can be saved to the database.

Tasks

• Install Django and other libraries/ dependencies
• Create admin site in Django, updating urls.py in project, include summernote for text field in reports content.
• Create necessary models within app

ADD FEAT: Status Toggle

Describe the solution you'd like
In the accounts page where users can see their reports list the section for status 'published/ draft', could be a toggle button enabling easier posting.

Additional context
Currently users must enter the edit report section of the site in order to alter the status of their report.

BUG: Slug Not saving Correctly

Describe the bug
The slug does not seem to be saving the pk of a report therefore not creating a unique slug

To Reproduce

• Login as mtmatt and create a report titled "eg-eiger-heckmair"

Expected behavior

• It is expected that the slug is created from the objects title author and pk

IMPROVEMENT: Customise Password Verification Email

Current:

• Currently the user receives the standard email template built by Django Allauth

Solution:

• When the user requests a password reset, the email received should be customised to suit the Reach website style.

USER STORY: Share Reports

As a user I can share reports so that they can be accessed from other platforms

Acceptance Criteria

• Share Button:
  On every report a share icon is provided given the user ability to click and copy the link to the report
• Display:
  When clicked the icon simply displays a card or modal which provides the url and a quick copy button, clicking outside of the box closes the card or modal

Tasks

• Design and implement the share icon within the reports page next to the like button (fontawesome share icon, bootstrap modal)
• Implement the logic to display the correct url within the modal
• Implement the logic to ensure quick copy when the copy icon is clicked (font awesome copy)

USER STORY: Manage My Reports (user)

As a registered user I can view a list of the reports I have written so that I can select between them to read, edit or delete them

Acceptance Criteria

• List Reports:
  The user has access to a full list of reports created by them self in their account information / profile.
• Edit/ Delete:
  Each report listed includes 2 buttons to edit or delete the relevant report.
• Opening:
  Clicking on a report opens the view report detailed content page.
• Confirmation:
  When deleting a post the user should be prompted to confirm their decision.

Tasks

• Design and implement the reports list within the account template, using the same layout as in the main reports list template
• Develop 2 separate buttons 'Edit' and 'Delete' and implement them within the reports list of the users account
• Create a link through the edit button to the edit reports page, similar to create report but with prepopulated fields
  • images deletion and addition
• Ensure user confirmation when 'deleting'
• Link the main report to the view report page

USER STORY: Create Report as User

As a registered user I can create my own report so that I can interact with other climbers

Acceptance Criteria

• Create Report Action:
  A 'Create Report' button is available on the account and reports list page easily accessible by the user.
• Create Report Form:
  The user has access to a form page where it is possible to fill out all necessary information to create their own report.
• Post:
  The user can post the report to the site, displaying it in the reports list.

Tasks

• Create and Implement a 'create report' button, linking it to the create report template
• Create the template for the create form
• Using templating implement the correct report model fields to each input
• Provide the post (submit) button at the bottom in order to post the report to the site

USER STORY: Delete Account

As a registered user I can delete my account so that I can delete all my information and reports from the database

Acceptance Criteria

• Delete Account Button:
  The user can click a button triggering a confirmation request to delete their account.
• Confirmation:
  A modal should appear on button click requesting confirmation and providing necessary information regarding the account in question.
• Redirect:
  Once confirmed the user will be returned to the home page and logged out.

Tasks

• Create UI for confirmation modal, use templating to confirm the users information
• Implement the view logic to remove the user from the DB and all subsequent reports they have written
• Redirect the user to the landing page

USER STORY: View Images

As a user I can view thumbnails of the images in a report, and click on them to enlarge so that I can visually see for myself how conditions were

Acceptance Criteria

• Thumbnails:
  When viewing each individual report the user can see a section of images uploaded by the report publisher.
• Enlarged Image:
  As a user click on an image the image should pop out to a bigger size, it is possible to close this and return to the report.
• Validation:
  If no images are added this functionality is not enabled but a placeholder image should be seen with a notice that there arent any images.

Tasks

• Using templating input the correct images from each report into the report details template
  Thumbnails should be 100x100px
• Implement a the templating logic to allow the correct image to open when clicked
• Design and create the pop out image container
  • Use a bootstrap modal for 'pop-out'
  • Create close buttons maybe a 'X' top right
• Create and implement a placeholder image telling the user theres no images available if statement is true
  • Use if statement in template

USER STORY: Approve Comments

As a site admin I can approve or disapprove comments so that I can keep the content specific and non offensive

Acceptance Criteria

• View Comments:
  The site admin should be able to view a list of comments submitted by users
• Approve/ Disapprove Comment:
  The admin should have the ability to approve and disapprove each comment

Tasks

• Create comments model in app, update admin.py file with
• Update actions within admin comment class

USER STORY: Follow Other Accounts

As a registered user I can follow other registered accounts so that I can follow there activities and reports easier

Acceptance Criteria

• Follow Navigation:
  When clicking a username in the report 'author' section or comment 'author' the user is redirected to the profile of this user.
• Follow Button:
  In every account displays a follow icon, when clicked it confirms the follow and changes appearance to further confirm this.
• Protection:
  When displaying the profile to another user ensure confidentiality of important information.

Tasks

• Design the UI and template to display a profile of an account to other users
• Provide a follow button within the template (font awesome users icon)
• Implement the logic necessary to update the buttons appearance and provide an alert confirmation message