Code Monkey home page Code Monkey logo

public-message-board's Introduction

Public Message Board

An embeddable SPA that displays live public message information for a transit organization using Avail Technologies' operations software.

Usage

This application is meant to be embedded statically within websites using <iframe>s, and configurable through url search parameters.

Embedding

<iframe src="https://pvta-public-messages.admin.umass.edu"
        style="display: block; width: 100%; border: none;"
        onload="window.addEventListener('message', (e) => { if (new window.URL(e.origin).origin === new window.URL(this.src).origin) { this.height = e.data.height; } });">
</iframe>

Configuration

Configuration options are passed using url search parameters (query strings) as outlined below.

  • ?infoPoint=https://your-avail-instance/InfoPoint/rest/ will change the avail instance that the application retrieves data from (defaults to the PVTA's instance).
  • ?routes=A1,B2,C3 will provide a list of routes that you want to display messages for (will show all messages by default, and general messages will always be displayed).

A fully configured embedding to show messages for the UMass campus shuttle will look like:

<iframe src="https://pvta-public-messages.admin.umass.edu/?infoPoint=https://bustracker.pvta.com/InfoPoint/rest&routes=34,35"
        style="display: block; width: 100%; border: none;"
        onload="window.addEventListener('message', (e) => { if (new window.URL(e.origin).origin === new window.URL(this.src).origin) { this.height = e.data.height; } });">
</iframe>

Development

This application uses react as a framework and is bundled using vite through node.js + npm. It is recommended that you use nodenv to manage local node installations.

It is entirely clientside and data is fetched remotely from an Avail InfoPoint API instance.

Requirements

  • node.js/npm matching the version in the .node-version file (just run nodenv install if using nodenv)

Setup

npm install # bundle dependencies

Scripts

npm run build    # builds a production bundle.
npm run dev      # starts a local development server.
npm run lint     # runs the js linter.
npm run lint:css # runs the css linter.
npm run preview  # serves a previously built production bundle.

Contributing

Bug reports and pull requests are welcome on GitHub.

License

The application is available as open source under the terms of the MIT License.

public-message-board's People

Contributors

dependabot[bot] avatar benmelz avatar frothedoatmilk avatar sherson avatar dirschn avatar

Watchers

Matt Moretti avatar  avatar James Cloos avatar Metin Yavuz avatar  avatar Karin Eichelman avatar  avatar  avatar  avatar

public-message-board's Issues

Incorporate "Priority" levels in sorting

Originally posted by @sherson in #4 (comment)

...

However, now that I think about it, we ought to sort by Priority too. How about:

  • Group routes together (sort by route within each detour)
  • Sort detours by Priority, then ascending by route (where general messages [ones that aren't associated with any routes] are after route-specific messages at the same priority level, and we use the lowest route number when there are multiple routes associated with a single detour), then descending by the date portion of FromDate, then descending by the time portion of FromTime (so newest detour shows first if route and priority are the same)

Priority values appear to be:

  1. Emergency
  2. High
  3. Medium
  4. Low

No matter what we do, the nature of grouping by route means we may occasionally end up with detours for a specific route not being next to each other in the list (and sorting by priority will affect that as well).

I have a vague recollection of FromTime maybe not being used (or not being used in a way that make sense), and what there's now is weird (explained in this comment):

<Message>
Due to staffing levels, "S" Trips will not operate between 05/27/2023 and 09/03/2023.
</Message>
...
<FromDate>2023-05-28T00:00:00</FromDate>
<FromTime>2023-05-30T00:00:00</FromTime>

But I can't think of harm being caused by sorting by FromDate and then FromTime.

Am open to suggestions.

Links open within the iframe itself

Hey Adam and Ben,

In doing a task for Rob Hendry, I noticed that the iframe on the transportation website home page has a link to an external page on the PVTA website. In the iframe I see the “click here” link. On click, it opens in the same iframe but does not resize – so look slike the last screenshot.

Would you consider making these improvements?

Make the link open in a new window. The iframe is not resizing on click. (last screenshot)
Change “Click here for more info” to good linked text like: See all PVTA bus information.
Clarify the difference between the external page: PVTA bus info page and the transportation page: PVTA Routes. (The header above the iframe is to the PVTA routes page but the click here link is to the PVTA bus info page. Confusing?)

Thank you,
Joanne

image001
image002

Dynamic height

It would be nice to offer/support some sort of way to make the height of a parent iframe dynamic (i.e. grow/shrink with the content of the widget).

I haven't found any css tricks, but there is a way to communicate between the parent and the widget with the postMessage API.

Add tests

Since we're on react, there is a decent testing library available to us, and it works pretty well with vitest.

Haven't yet decided if this is worth it yet, moreso documenting that we could, so hold off for now.

Remove filtered-out routes from shared detours

In #4 I wrote:

I don't think we need to remove filtered-out-routes if they share a detour with routes that we included in our URL parameter

I've changed my mind and now think we should remove filtered-out-routes from shared detours.

There is currently a detour for P20, P21, and P21E along with R29 (that basically doesn't affect UMass). Because it lists 4 routes, it's tall enough that it pushes the detour we care about mostly off the screen (in the iframe on both desktop and mobile).

And even if it didn't push it off the screen, very few (if any) passengers at UMass even know those other routes exist... it's possible that some R29 passenger do, but even so it's probably still better to only show the UMass-area routes (to clean up the public messages list and reduce confusion for the other 99.9+% of our passengers).

I'm open to suggestions if anyone thinks otherwise.

Support HTML message rendering

Bustracker:
b4b83499-bc74-485e-919f-77e17dca1c33

This app:
Screenshot 2023-09-19 at 12 27 45 PM

Since Avail supports it, I guess we don't really have a choice either. Shouldn't be that bad, the two possible pain points I foresee are:

  • picking a good sanitized rendering method
  • getting that rendering method to play nice with react

Convey message priorities

Originally posted by @frothedoatmilk in #6 (comment)

I spoke to @benmelz about this briefly but we wanted to get your opinion @sherson, for each priority level we could add some symbol/color to each message to indicate it's priority level (red for emergency, orange for high, etc). Especially since this would show the order of which the messages are appearing in, rather than it being seemingly random (especially since the sort order doesn't make apparent sense from the front end)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.