fossasia / open-event-frontend

The frontend for the Open Event API Server https://test.eventyay.com

Open Event Frontend

The front end for the Open Event Server

API Documentation:

• Every installation of the Open Event Server project includes API docs
• A hosted version of the API docs is available in the gh-pages branch of the Open Event Server repository at http://api.eventyay.com

Communication

Please join our Mailing list or chat channel to get in touch with the developers.

Installation

The Open Event Frontend can be easily deployed on a variety of platforms. Detailed platform specific instructions have been provided below.

1. Local Installation
2. Publish to GitHub Pages
3. Running in Docker

Running / Development

Click to see installation video

Note: Please follow installation steps listed above carefully before running

Unfortunately, no one reads the note above, so please just run the following commands when setting up for the first time:

• yarn
• cp .env.example .env
• yarn l10n:generate

Running:

• yarn start
• Visit your app at http://localhost:4200.

Code Generators

Make use of the many generators for code, try ember help generate for more details.

Running Tests

This project has acceptance, integration and unit tests located inside the tests/ folder.

• yarn test - CLI output
• yarn test --server - Live browser preview and console access

Building

• yarn build (development)
• yarn build -prod (production)

Deployments, Docker images and Releases

Deployments

Master branch

The master branch of open-event-frontend gets deployed in a production environment at https://eventyay.com It consumes the API exposed by master branch deployment of open event server, hosted at https://api.eventyay.com

Development branch

The development branch of open-event-frontend gets deployed at https://open-event-frontend.now.sh/ It consumes the API exposed by development branch of open event server, hosted at https://test.eventyay.com

Release Cycle

Stable versions will be released periodically, starting from version 1.0.0 when open-event-frontend went into production. Version names will follow semantic versioning

Docker Hub Images

Docker images hosted on open-event-frontend repository under eventyay organisation on docker hub are updated for each push on master and development branch. Separate tags for each version release are also maintained. They are as follows:

Branch/Release	Image
Master	eventyay/open-event-frontend:latest
Development	eventyay/open-event-frontend:development
Version(vx.y.z)	eventyay/open-event-frontend:vx.y.z

Further Reading / Useful Links

• ember.js

• ember-cli

• Semantic UI

• Semantic-UI-Ember

• Development Browser Extensions

  • ember inspector for chrome
  • ember inspector for firefox

Contributions Best Practices

Commits

• Write clear meaningful git commit messages (Do read https://chris.beams.io/posts/git-commit/)
• Make sure your PR's description contains GitHub's special keyword references that automatically close the related issue when the PR is merged. (More info at https://github.com/blog/1506-closing-issues-via-pull-requests )
• When you make very minor changes to a PR of yours (like for example fixing a failing Travis build or some small style corrections or minor changes requested by reviewers) make sure you squash your commits afterward so that you don't have an absurd number of commits for a very small fix. (Learn how to squash at https://davidwalsh.name/squash-commits-git )
• When you're submitting a PR for a UI-related issue, it would be really awesome if you add a screenshot of your change or a link to a deployment where it can be tested out along with your PR. It makes it very easy for the reviewers and you'll also get reviews quicker.

Feature Requests and Bug Reports

When you file a feature request or when you are submitting a bug report to the issue tracker, make sure you add steps to reproduce it. Especially if that bug is some weird/rare one.

Join the development

• Before you join development, please set up the project on your local machine, run it and go through the application completely. Press on any button you can find and see where it leads to. Explore. (Don't worry ... Nothing will happen to the app or to you due to the exploring 😉 Only thing that will happen is, you'll be more familiar with what is where and might even get some cool ideas on how to improve various aspects of the app.)
• If you would like to work on an issue, drop in a comment with the estimated completion date at the issue. If it is already assigned to someone, but there is no sign of any work being done, please feel free to drop in a comment.

License

This project is currently licensed under the Apache License version 2.0.

To obtain the software under a different license, Please contact FOSSASIA.

open-event-frontend's Issues

Scroll to top on public event page when active tab on side menu changes

I'm submitting a ... (check one with "x")

• bug report
• feature request
• support request => Please do not submit support requests here, instead ask your query in out Gitter channel at https://gitter.im/fossasia/open-event-frontend

Current behavior:

Right now, when the active tab on side menu changes, the scroll position is retained. Since the side menu is sticky, it may be further down and clicking on the tab my result in a blank sceen with the cursor scrolled way down.
For eg :
This is the current scroll position and the active tab is info

Now on clicking the call for speakers tab, this is the result

Expected behavior:

It should have scrolled to top while navigating through different tabs.

Steps to reproduce:

Scroll to bottom of the info tab, and then go to call for speakers or sessions tab.

I will work on this.

Add export to events route(UI only)

• feature request

Add export UI to events route.

• Located at events/<event_id>/export
• Create common component for Download Event as Pentabarf XML, Download Event as iCalendar & Download Event as iCalendar XML (xCal).
• Everything must be in a separate component.

Add Gemnasium button

Add Gemnasium button to Readme.md

Display the event location on a map and show the event address in the public event page

What is expected ?

• Map and address as a single component added to the public event page (the component should accept attributes that can allow us to either render just the map or just the address or both side by side.
• The width of it should be fluid. (that is, it should take up the width of it's parent)
• Data provided by the API should be used. (latitude, longitude, locationName)

References:

• https://guides.emberjs.com/v2.12.0/components/defining-a-component/
• https://semantic-ui.com/collections/grid.html
• https://github.com/asennikov/ember-g-map

Add auto scroll on public events page

• feature request

Current behavior:
If a tab is selected form the side bar the does not scroll to the particular section.

Expected behavior:
If a tab is clicked from the side bar the page should auto scroll to the particular section eg.
After clicking Speakers the page should scroll to the speakers section.

Reference : https://eventyay.com/e/5642d9a1/

Add tickets to event route(UI only)

• feature request

Add tickets to events route.

• Located at events/<event_id>/tickets
• Create a common component for orders, sales & tickets sold in completed orders

Add public event Call for Speakers page (UI Only)

• Located at /events/<event_identifier/cfs - route already exisits
• Should be a separate call for speakers component.
• Should support two states. (Call for speakers open and closed)
• Dummy data to be used
• The submit proposal button need not do anything

An in-range update of ember-cli-moment-shim is breaking the build 🚨

Version 3.2.0 of ember-cli-moment-shim just got published.

Branch	Build failing 🚨
Dependency	ember-cli-moment-shim
Current Version	3.1.0
Type	devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As ember-cli-moment-shim is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Status Details

• ❌ continuous-integration/travis-ci/push The Travis CI build failed Details

---

Commits

The new version differs by 3 commits.

• 9993ad4 3.2.0
• 170327e Initial commit to support rc changes (#137)
• 07ef2c3 Add updateLocale test

See the full diff

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

---

Your Greenkeeper Bot 🌴

Add Settings > Contact Info Page

• A contact info page located at /settings/contact-info/.
• Use a tab navigation layout instead of the existing side-bar style layout.
• The tab navigation should be common to all the other pages password, email preferences, applications. (Only a contact-info page is required in this issue. But ensure the tab navigation will be common to other pages when they are implemented in the future)
• Should contain form validation on submit
• Let the whole form inside a component just like login form. So that we get scoped jquery selection capabilities and we can use the FormMixin. (See reference below).

References:

• app/components/forms/login-form.js - for validation. (Note FormMixin and getValidationRules)
• app/templates/components/forms/login-form.hbs - for form submit. Note {{action 'submit' on='submit'}}
• https://semantic-ui.com/modules/tab.html
• https://semantic-ui.com/collections/form.html
• https://semantic-ui.com/collections/grid.html

Adding search bar with event name, location & date (UI only)

** I am submitting a **

• feature request

ScreenShot

• Located at "/"
• The button "search" need not be actionable
• Reference for button: https://semantic-ui.com/elements/button.html
  for dropdown: https://semantic-ui.com/modules/dropdown.html

I want to work on this. Also, @niranjan94 can we divert this to "/explore" ?

Add event overview to events route (UI only)

• feature request

implement Overview(UI) to event/view/index.hbs

• Located at events/<event_id>/
• Event Sponsors, Manage Roles, General Info and Event setup checklist should be implemented as separate components.

Adding sponsors to public events

Add sponsors to the public events page like on eventyay.com.

Add Featured speakers to the public event page (UI Only)

Add the features speaker UI to the public event page as shown above.

What is expected ?

• Featured speakers with each speaker as a component added to the public event page.
• UI Only for now. Dummy data to be used.

References:

• https://guides.emberjs.com/v2.12.0/components/defining-a-component/
• https://semantic-ui.com/views/card.html
• https://semantic-ui.com/collections/grid.html

CSS: Overflow of order now button in ticket component on small screens

I'm submitting a ... (check one with "x")

• bug report
• feature request
• support request => Please do not submit support requests here, instead ask your query in out Gitter channel at https://gitter.im/fossasia/open-event-frontend

Current behavior:

Expected behavior:

Steps to reproduce:

View the ticketing section of events in mobile portrait mode.

Add scheduler to events route (UI only)

• feature request

Add session scheduler UI to events route.

• Located at events/<event_id>/scheduler
• Create a component for listing all the sessions.
• Create a component for sessions.

Add location auto complete to explore location search box

• Located at /explore
• To use the widgets/forms/location-input component. The component has to be slightly modified to allow hiding of the 'Enter Address' button if and when needed.

Show event license info at the bottom of the public event page

What is expected ?

• Show license info as shown
• Data provided by the API has to be used (licenceDetails)

Create ticket purchase page (UI Only)

---

• For now, can be located at /orders/new. (In future, it will be at /orders/<order_identifier>
• Form validation required
• Autofill feature not required now. Just radio button should be enough.
• 3 components
  • Order summary
  • When and where (event quick info)
  • Order form
• Payment option images -> (Paypal Payment logo, Stripe Payment logo)

Add events listing > Import Page (UI Only)

• Located at /events/import
• Should have two different components as indicated.
• The table need not have any filtering, pagination and search capability and UI now. Those will be implemented later in a different manner.
• Dummy data can be used now.

Add notifications dropdown to the nav-bar (UI Only)

We need a similar dropdown to display notifications.

What is expected ?

• Notifications dropdown as a separate component added to the nav-bar.
• UI Only for now.

References:

• https://guides.emberjs.com/v2.12.0/components/defining-a-component/
• https://semantic-ui.com/collections/menu.html

Add discounts to tickets route(UI only)

I'm submitting a ... (check one with "x")

• bug report
• feature request
• support request => Please do not submit support requests here, instead ask your query in out Gitter channel at https://gitter.im/fossasia/open-event-frontend

Add discounts as sub route of tickets.

• Located at tickets/discounts

Please have a look at #97, before starting the work on the issue.

Add access codes to tickets route(UI only)

I'm submitting a ... (check one with "x")

• bug report
• feature request
• support request => Please do not submit support requests here, instead ask your query in out Gitter channel at https://gitter.im/fossasia/open-event-frontend

Add access as sub route of tickets.

• Located at tickets/access-codes

Please have a look at #97, before starting the work on the issue.

An in-range update of ember-source is breaking the build 🚨

Version 2.13.1 of ember-source just got published.

Branch	Build failing 🚨
Dependency	ember-source
Current Version	2.13.0
Type	devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As ember-source is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Status Details

• ❌ continuous-integration/travis-ci/push The Travis CI build failed Details

---

Commits

The new version differs by 15 commits.

• 57b6b82 Release v2.13.1.
• 637c0a4 Add 2.13.1 to CHANGELOG.
• 566f5a8 Lock down testem version.
• 0e51ff3 Lock down route-recognizer to 0.3.0.
• a8931d1 [BUGFIX release] Ensure debug statements are no-ops in production builds.
• 1cd162d fixup! [BUGFIX release] MODEL_FACTORY_INJECTIONS is now always false.
• 20e0ba6 [BUGFIX release] Ensure nested custom elements render properly.
• 005cff8 [BUGFIX release] MODEL_FACTORY_INJECTIONS is now always false.
• c736afc [BUGFIX release] Remove reference to dist/ember.js file.
• 2c23df8 [BUGFIX release] Fix EmberError import in system/router
• d8c1641 [DOC release] correct casing of _routermicrolib deprecation url
• bb57294 [BUGFIX Release]fix mocha blueprint service test filename
• a4bfeea [BUGFIX beta] Fix double container destroy
• b64ce22 [BUGFIX release] Ensure that it is possible to experiment with syntax.
• c4e4415 Fix access to service:-document in engines

See the full diff

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

---

Your Greenkeeper Bot 🌴

Avoid overflow of the pagination item on event imports page.

I'm submitting a ... (check one with "x")

• bug report
• feature request
• support request => Please do not submit support requests here, instead ask your query in out Gitter channel at https://gitter.im/fossasia/open-event-frontend

Current :

Expected :
Overflow of pagination component to be avoided on small screens.

Use semantic image headers to display logo and event name in events table

• https://semantic-ui.com/elements/header.html
• As a result Image and name will be in a single column instead of two
• The logo need not be big

Add translation helpers to Routes' Titles

I'm submitting a ... (check one with "x")

• bug report

Current behavior:
In the js files of the following routes, the translation helper is missing while returning the titles, breaking uniformity across the codebase.

• events/draft
• events/import
• events/live
• events/past
• events
• explore
• profile
• register

Expected behavior:
Titles should be returned via this.i18n.t('title')
I will send a fix for these as well as for any other files which should be on this list.

Add a small button on the top which toggles left side rail on event description page.

The left side rail on the event description page hides from the screen and is not visible in case of mobile screens( < 768px ).

Current behaviour :

Expected behaviour :

Above picture shows the sample thing we want to do. Add a small button at the page wherever suitable which acts as a dropdown to the menu on the event description page.

Map component on public event page overflows

I'm submitting a ... (check one with "x")

• bug report
• feature request
• support request => Please do not submit support requests here, instead ask your query in out Gitter channel at https://gitter.im/fossasia/open-event-frontend

Current behavior:

The Map overflows and adress disappears with the address heading coming onto the map itself.

Expected behavior:

It should be a stackable grid so that the address does not flow in to the map component on smaller screens

Steps to reproduce:

View it on mobile(both landscape and portrait)

I will work on this.

Add notifications page

---

• The above image is just representative. We don't want an exact clone of it since the above UI doesn't look very good.
• Unread located at /notifications
• All located at notifications/all
• The all/unread buttons should be common to both routes
• The mark all as read should only be visible on the unread page

Implement search page (UI Only)

Can be previewed at https://eventyay.com/explore/india/events

---

• Located at /explore
• The sidebar with maps + filters will be a component (search this area button on the map not required)
• Events list will be a component.
• For each event item, re-use the event-card component. Modify the event-card component such that it can have two layouts. A simple card layout (like in the home page) and a wide card layout like in the search page.
• For filter category use the data from utils/dictionary/event.js -> eventTopics
• For filter Event Type use the data from utils/dictionary/event.js -> eventTypes

Improve the image resolution in event card component

I'm submitting a ... (check one with "x")

• bug report

Current behavior:

The image is stretched, on small sceens
Expected behavior:

After changing the image size to cover.
Steps to reproduce:
View it on a small screen (landscape mode)

I will send a fix for this.

Make nav-bar mobile friendly

The nav-bar right now overflows on smaller screens. Make it mobile friendly.

What is expected ?

• Show only key elements on the nav-bar depending on space available
• Bonus points: Also show an expandable side bar on mobile with options that were removed from the nav-bar

References:

• https://semantic-ui.com/collections/menu.html
• https://semantic-ui.com/collections/grid.html

Make quick-filter component responsive and remove side bar search for mobile

I'm submitting a ... (check one with "x")

• bug report
• feature request
• support request => Please do not submit support requests here, instead ask your query in out Gitter channel at https://gitter.im/fossasia/open-event-frontend

Current behavior:

Expected behavior:

Also the placeholder text should be location, not united states (suggestion)
@niranjan94 On orga server, only one of the three fields is visible on mobile screens (the main Field), Is that the right way to go?

Steps to reproduce:

View it on portrait mode on mobile.
I will send a fix for it.

Add user tickets page

---

• Located at /my-tickets
• Three tabs (hence three routes). But make them all use a common template since only data is gonna vary.
  • Upcoming events - /my-tickets
  • Saved events - /my-tickets/save
  • Past events - /my-tickets/past
• Use the event card component (wide mode). But instead of the hashtags at the bottom, use that place to display order ID, order date and ticket name. (make it such that any data can be passed in to the component to display instead of the hashtags. Will be useful later) (ie. make data yieldable in place of the hashtag)

Social Site Login is not working

I'm submitting a ... (check one with "x")

• bug report
• feature request
• support request => Please do not submit support requests here, instead ask your query in out Gitter channel at https://gitter.im/fossasia/open-event-frontend

Current behavior:
The Login with Facebook / Twitter / Google Button are not working.

Expected behavior:
The Buttons should initiate login with social accounts.

Steps to reproduce:
Ex for Facebook. You may register on https://developers.facebook.com/docs/facebook-login/web and follow the documentation

Your operating system
Windows 10

I would like to work on this feature

Add tabs and buttons to events. (UI Only)

• feature request

Add buttons & tabs to events/view.hbs

Screenshot

• Located at events/view.hbs
• The buttons need not be actionable.
• Reference for tabs https://semantic-ui.com/modules/tab.html.

Create ticketing component (Functional UI)

• A ticket component shown at /e/<event_identifier>. (Visit eventyay.com to see current implementation)
• The tickets should be passed in from app/controllers/public/index just like how speakers are. (Dummy data can be used.)
• The sub-total and total should update on change of ticket quantity. (quantity can be a parameter on the dummy ticket object for now)
• Promo code support not required now.
• The order now button should be clickable only if any ticket's quantity is more than zero.

Add orders to tickets route (UI only)

I'm submitting a ... (check one with "x")

• bug report
• feature request
• support request => Please do not submit support requests here, instead ask your query in out Gitter channel at https://gitter.im/fossasia/open-event-frontend

Add Orders as sub route of tickets.

• Located at tickets/orders

Please have a look at #97, before starting the work on the issue.

Events Listing > Live Events (UI Only)

• Live events listing page located at /events/live
• Tabs - Live, Draft, Past, Import
  • Tabs should be common to future pages /events/draft, /events/past etc. (Clue: Make use of events.hbs for this.)
  • Current page should be highlighted in the tab. (Checkout {{#link-to}} {{/link-to}} helper of ember.)
• A basic table. No sorting/searching features necessary now. Table should be a component so that it can be re-used for the other pages.
• Dummy data to be used. Checkout https://open-event-dev.herokuapp.com to see what data is being displayed how.
• Bonus: (Need not be done in this issue) Auto redirect /events to /events/live

Improve UI and avoid overflow of tweets on event page.

I'm submitting a ... (check one with "x")

• bug report
• feature request
• support request => Please do not submit support requests here, instead ask your query in out Gitter channel at https://gitter.im/fossasia/open-event-frontend

Current behavior:

Expected behavior:

1. The tweets should be visible thoroughly.
2. For medium screen sizes, the images of speakers are not centered.

Issue with CSS (overflow) in event public page

Current behavior:
Page at http://nextgen.eventyay.com/e/42cf5943 has issues with CSS where both the left (navigation) and right (tweets) segments overflow (no scroll) on a 1440x900p resolution.

Expected behavior:
Limit width of center section such as both left (navigation) and right (tweets) section are visible without overflow.

Add add-order to ticket route(UI only)

I'm submitting a ... (check one with "x")

• bug report
• feature request
• support request => Please do not submit support requests here, instead ask your query in out Gitter channel at https://gitter.im/fossasia/open-event-frontend

Add add-order as sub route of tickets.

• Located at tickets/add-order

Please have a look at #97, before starting the work on the issue.

Add filtering option to the home page (UI Only)

We need similar filtering options on the landing page.

What is expected ?

• Filtering options as a separate component added to the home page.
• UI Only for now. So you need not worry about filtering the data yet.

References:

• https://guides.emberjs.com/v2.12.0/components/defining-a-component/
• https://semantic-ui.com/elements/input.html
• https://semantic-ui.com/collections/form.html
• https://semantic-org.github.io/Semantic-UI-Ember/#/modules/dropdown

Add sessions to events route (UI only)

I'm submitting a ... (check one with "x")

• feature request

• Located at events/<event_id>/sessions
• Implement session-table component.

Convert events table to use ember-models-table

We want all tables to supporting sorting, filtering, searching. And for that we'll be using ember-models-table

The library by default supports bootstrap. But we can customise the classes used so it can be made to support semantic UI.

Let's start this on the events table located at /events/live

Add speakers to the public event page (UI Only)

Add speakers UI to the public event page as shown above.

What is expected ?

• speakers list with each speaker as a component added to the public event page.
• UI Only for now. Dummy data to be used.

References:

• https://guides.emberjs.com/v2.13.0/components/defining-a-component/
• https://semantic-ui.com/elements/image.html
• https://semantic-ui.com/collections/grid.html

Adding translation helper for text in HTML

Actual
Some HBS files are missing the translation helper. eg events-table.hbs.

Expected
All HTML should use the translation helper for text.

I will be sending a patch soon.

Add a simple user profile page (UI Only)

Add a simple user profile page located at /profile.

• Should contain the image upload component (already present in the project.)
• Should contain the rich text editor component for the Details section
• Should contain form validation on submit
• Let the whole profile page be inside a component just like login form. So that we get scopped jquery selection capabilities and we can use the FormMixin. (See reference below).

References:

• app/components/forms/login-form.js - for validation. (Note FormMixin and getValidationRules)
• app/templates/components/forms/login-form.hbs - for form submit. Note {{action 'submit' on='submit'}}
• app/templates/components/forms/wizard/basic-details-step.hbs:L77 - for image upload component
• app/templates/components/forms/wizard/basic-details-step.hbs:L72 - for rich text editor component
• https://semantic-ui.com/collections/form.html
• https://semantic-ui.com/collections/grid.html

Propose fonts and improved design

The front-end version also offers an opportunity to update the font, sizes and design.
There is also the question about a design framework.

The current open event server design has some issues at points, e.g. the font is often very small.

What are our options?

Implementing sessions layout for public events(UI)

• feature request

Currently the sessions layout is missing from the public events. Add sessions to the public events as shown in the screenshot.

@niranjan94 I will be working on this.