code4recovery / tsml-ui

Embeddable recovery meeting finder
https://tsml-ui.code4recovery.org/
MIT License
23 stars 17 forks source link

tsml ui default display #359

Closed iloveaaservice closed 8 months ago

iloveaaservice commented 8 months ago

I have embedded tsml ui on a custom php page. I followed the documentation and it works quite well -- except it loads all meetings instead of just todays meetings. How do I change the data-src line from ".../wordpress/wp-admin/admin-ajax.php?action=meetings" to show this days meetings and have the "Anyday" dropdown show this days name?

Thanks for your help.

joshreisner commented 8 months ago

hi @iloveaaservice - TSML UI shows all meetings starting at "now" - we don't recommend trying to limit to a specific day because then the list starts at the beginning of the day, forcing users to scroll down past meetings they already missed. this is how the 12 Step Meeting List "legacy UI" works, but it's not a great experience especially for mobile users. it's better to be able to see the upcoming meetings at the top of the screen

however there are two ways you can accomplish this:

  1. you can link to a specific day by linking to /meetings?weekday=monday eg https://aasanjose.org/meetings?weekday=monday
  2. you can add the following javascript code to your embed:
      var tsml_react_config = {
        defaults: { weekday: ['1'] },
      };

you can replace the 1 in the example above with PHP code to make it dynamic: <?php echo date('w')?>

(this will use your server's time zone to determine the weekday, you may need to make sure that's set to your local tz)

iloveaaservice commented 8 months ago

Hi Josh,

Thanks for the suggestions. But I can't get them to work.

My website is custom php code. I installed wordpress and the tsml plugin in the document root directory. Unfortunately, I am not a wordpress or javascript programmer. I am self-taught in php, html, css, and some javascript to a sufficient extent to create and maintain our website.

The area41.org menu item "Meeting Locator" displays the tsml "Where's My Info?" public meetings page. But I do not know how to add our standard header, menu, and footer to that wordpress page.

So I created a custom php page with the code: echo '<div id="tsml-ui" data-src=" https://www.area41.org/wordpress/wp-admin/admin-ajax.php?action=meetings '" data-mapbox="pk.eyJ1IjoiYXJlYTQxd2VibWFzd.............." data-timezone="America/Chicago"

'; and

This works well except that it takes several seconds to load ALL 1262 meetings before displaying any meetings. I am hoping to just load today to speed up the display and let the rest load in the background.

I tired changing the "data-src" to: data-src="https://www.area41.org/meetings?weekday=thursday https://www.area41.org/wordpress/meetings?weekday='thursday'" like your example for aasanjose but, using Firefox, this returns a pink bar with the text " TypeError: NetworkError when attempting to fetch resource." Using Chrome, the text is "TypeError: Failed to Fetch."

Any further suggestions? I attached a screenshot of the Firefox debugger network errors.

I appreciate your help. Charlie

On Mon, Feb 12, 2024 at 4:36 PM Josh Reisner @.***> wrote:

hi @iloveaaservice https://github.com/iloveaaservice - TSML UI shows all meetings starting at "now" - we don't recommend trying to limit to a specific day because then the list starts at the beginning of the day, forcing users to scroll down past meetings they already missed. this is how the 12 Step Meeting List "legacy UI" works, but it's not a great experience especially for mobile users. it's better to be able to see the upcoming meetings at the top of the screen

however there are two ways you can accomplish this:

  1. you can link to a specific day by linking to /meetings?weekday=monday eg https://aasanjose.org/meetings?weekday=monday
  2. you can add the following javascript code to your embed:

    var tsml_react_config = { defaults: { weekday: ['1'] }, };

you can replace the 1 in the example above with PHP code to make it dynamic: <?php echo date('w')?>

— Reply to this email directly, view it on GitHub https://github.com/code4recovery/tsml-ui/issues/359#issuecomment-1939723962, or unsubscribe https://github.com/notifications/unsubscribe-auth/A5FZZBE5JWXO3CDHLANSIATYTKKO3AVCNFSM6AAAAABDFODWT6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMZZG4ZDGOJWGI . You are receiving this because you were mentioned.Message ID: @.***>

joshreisner commented 8 months ago

ah ok @iloveaaservice thanks for the additional context, i understand your question better now. unfortunately changing the data URL won't work, TSML UI needs to load all the meetings on initial load. could you set it back to loading all meetings and give us the link? i'd like to see how slow that is. i think most users are willing to accept a little bit of loading

we do have an appearance update coming shortly that should improve TSML UI's appearance in your Twenty Twenty Two theme

iloveaaservice commented 8 months ago

Hi Josh,

The url is testing.area41.org. It is htaccess protected. I added a login for you to use. Login is Josh-TSML and the password is thank54y0urHeLp. It is "y-zero-ur".

Page load time is usually about 5 seconds but can be longer.

This is my testing/development site so not everything is working and the code is full of debug statements. I commented the debug on the index.php and the newmeetinglist.php files so they display clean.

Again, thanks for your help.

On Wed, Feb 14, 2024 at 3:25 PM Josh Reisner @.***> wrote:

ah ok @iloveaaservice https://github.com/iloveaaservice thanks for the additional context, i understand your question better now. unfortunately changing the data URL won't work, TSML UI needs to load all the meetings on initial load. could you set it back to loading all meetings and give us the link? i'd like to see how slow that is. i think most users are willing to accept a little bit of loading

we do have an appearance update coming shortly that should improve TSML UI's appearance in your Twenty Twenty Two theme

— Reply to this email directly, view it on GitHub https://github.com/code4recovery/tsml-ui/issues/359#issuecomment-1944644994, or unsubscribe https://github.com/notifications/unsubscribe-auth/A5FZZBGFZNNDBZNSB4UPN63YTUTUZAVCNFSM6AAAAABDFODWT6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNBUGY2DIOJZGQ . You are receiving this because you were mentioned.Message ID: @.***>

joshreisner commented 8 months ago

Login is Josh-TSML and the password is thank54y0urHeLp.

couldn't get in with this. tried also "y-zero-ur" as the password

could you confirm?

iloveaaservice commented 8 months ago

Hi Josh,

Since the login and password were in plain text on the github discussion, I disabled it this morning. It should work again now. I guess I got impatient.

On Sat, Feb 17, 2024 at 12:32 PM Josh Reisner @.***> wrote:

Login is Josh-TSML and the password is thank54y0urHeLp.

couldn't get in with this. tried also "y-zero-ur" as the password

could you confirm?

— Reply to this email directly, view it on GitHub https://github.com/code4recovery/tsml-ui/issues/359#issuecomment-1950278185, or unsubscribe https://github.com/notifications/unsubscribe-auth/A5FZZBFUOAKA3GT2ZURY2K3YUDZUBAVCNFSM6AAAAABDFODWT6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNJQGI3TQMJYGU . You are receiving this because you were mentioned.Message ID: @.***>

joshreisner commented 8 months ago

still can't get in…

iloveaaservice commented 8 months ago

I am sorry. There must be a cached copy of the htpassword.

try login: sarahr

password: sarahr-in-recovery

On Sat, Feb 17, 2024 at 1:12 PM Josh Reisner @.***> wrote:

still can't get in…

— Reply to this email directly, view it on GitHub https://github.com/code4recovery/tsml-ui/issues/359#issuecomment-1950286501, or unsubscribe https://github.com/notifications/unsubscribe-auth/A5FZZBCKQEQE6ZHPRKS2FRLYUD6JDAVCNFSM6AAAAABDFODWT6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNJQGI4DMNJQGE . You are receiving this because you were mentioned.Message ID: @.***>

joshreisner commented 8 months ago

ok that works

loading doesn't seem that bad to me, json loaded in just over half a second (526ms). tried a few more times, 995, 1136, 1463, 1252, seemsl ike the average is around 1 second. i think most people would be ok with that!

Screenshot 2024-02-17 at 11 20 13 AM

with TSML UI on TSML we do actually have a static file cache that might help. could you create a new hidden page on your wp site and use the [tsml_ui] shortcode? we can see how fast that would be. i bet it's a little faster because PHP doesn't have to do any work

iloveaaservice commented 8 months ago

I went to our wordpress admin dashboard and created a new page. I selected the "shortcode" block and typed "[tsml-ui]", published the page, and viewed it. I saw "[tsml-ui]" displayed. I tried without the square brackets and the display is without the square brackets.

I am not sure what you mean by "a new hidden page" other than don't add it to the navigation menu.

As I said, I am not a wordpress developer.

On Sat, Feb 17, 2024 at 1:26 PM Josh Reisner @.***> wrote:

ok that works

loading doesn't seem that bad to me, json loaded in just over half a second (526ms). tried a few more times, 995, 1136, 1463, 1252, seemsl ike the average is around 1 second. i think most people would be ok with that! Screenshot.2024-02-17.at.11.20.13.AM.png (view on web) https://github.com/code4recovery/tsml-ui/assets/1551689/782c4c08-5b43-4670-864a-ab29dc4792ba

with TSML UI on TSML we do actually have a static file cache that might help. could you create a new hidden page on your wp site and use the [tsml_ui] shortcode? we can see how fast that would be. i bet it's a little faster because PHP doesn't have to do any work

— Reply to this email directly, view it on GitHub https://github.com/code4recovery/tsml-ui/issues/359#issuecomment-1950289145, or unsubscribe https://github.com/notifications/unsubscribe-auth/A5FZZBCQM75AT3NKRVYANSLYUD76NAVCNFSM6AAAAABDFODWT6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNJQGI4DSMJUGU . You are receiving this because you were mentioned.Message ID: @.***>

joshreisner commented 8 months ago

[tsml_ui] (underscore not hyphen)

iloveaaservice commented 8 months ago

That worked. Now what?

On Sat, Feb 17, 2024 at 1:49 PM Josh Reisner @.***> wrote:

[tsml_ui] (underscore not hyphen)

— Reply to this email directly, view it on GitHub https://github.com/code4recovery/tsml-ui/issues/359#issuecomment-1950293826, or unsubscribe https://github.com/notifications/unsubscribe-auth/A5FZZBH5VCGCL7E7U4JOZE3YUECVHAVCNFSM6AAAAABDFODWT6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNJQGI4TGOBSGY . You are receiving this because you were mentioned.Message ID: @.***>

joshreisner commented 8 months ago

share the link to the page so we can compare how fast it loads?

iloveaaservice commented 8 months ago

It did load a little faster.

https://www.area41.org/wordpress/test-tsml-ui-load/

On Sat, Feb 17, 2024 at 1:53 PM Josh Reisner @.***> wrote:

share the link to the page so we can compare how fast it loads?

— Reply to this email directly, view it on GitHub https://github.com/code4recovery/tsml-ui/issues/359#issuecomment-1950294537, or unsubscribe https://github.com/notifications/unsubscribe-auth/A5FZZBDTBMM2Q6D7MXCIULLYUEDEDAVCNFSM6AAAAABDFODWT6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNJQGI4TINJTG4 . You are receiving this because you were mentioned.Message ID: @.***>

joshreisner commented 8 months ago

i hard-refreshed the page five times and got 721, 542, 602, 623, 520 (milliseconds) so it looks like it cuts the load time down by about half. you can remove this page now

this performance is what you can expect if you were to go into wordpress > meetings > settings and change the appearance to TSML UI, which is what we recommend and is inline with what other large optimized sites experience, eg https://aasanjose.org/meetings

if you wanted to move the meeting finder to a HTML / PHP page outside of wordpress you should be able to do it by using this embed code:

<div id="tsml-ui" data-src="/wordpress/wp-content/tsml-cache-423ffaf743.json" data-timezone="America/Chicago" data-mapbox="pk.eyJ1IjoiYXJlYTQxd2VibWFzdGVyIiwiYSI6ImNrbjR0azFqNjF1a2wyd284c3hicDdheTcifQ.d4oCa9rL2Ns3LdRMpS_tJg"></div>
<script src="https://tsml-ui.code4recovery.org/app.js" async></script>

at any rate, im going to close the issue, doesn't seem to be a bug or feature to add here. good luck!

iloveaaservice commented 8 months ago

Thank you for your time and help. I will try your suggestion.

On Sat, Feb 17, 2024 at 2:02 PM Josh Reisner @.***> wrote:

i hard-refreshed the page five times and got 721, 542, 602, 623, 520 (milliseconds) so it looks like it cuts the load time down by about half. you can remove this page now

this performance is what you can expect if you were to go into wordpress > meetings > settings and change the appearance to TSML UI, which is what we recommend and is inline with what other large optimized sites experience, eg https://aasanjose.org/meetings

if you wanted to move the meeting finder to a HTML / PHP page outside of wordpress you should be able to do it by using this embed code:

at any rate, im going to close the issue, doesn't seem to be a bug or feature to add here. good luck!

— Reply to this email directly, view it on GitHub https://github.com/code4recovery/tsml-ui/issues/359#issuecomment-1950296087, or unsubscribe https://github.com/notifications/unsubscribe-auth/A5FZZBEZ4CEJLATONLV2LFTYUEEGDAVCNFSM6AAAAABDFODWT6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNJQGI4TMMBYG4 . You are receiving this because you were mentioned.Message ID: @.***>