Thomas Van Holder

great timing!

Hi Samuel,

I've ended up using vanilla JS. However, you could do the same with Stimulus, that's what I would do when rebuilding it.

Here's roughly the outline of the code that was used.
https://gist.github.com/thomasvanholder/1778df30141e4c47362102518930c043

This might help someone watch the video. The website provided (https://jsonip.org/) didn't work for me. The following error occurred:

SocketError: Failed to open TCP connection to jsonip.org:443 (getaddrinfo: nodename nor servname provided, or not known)

Swapping the website for https://ip.seeip.org/json and all works well.

Hi all,

We're creating an online auction which has a countdown clock on the show page of a listing.
The timer counts down every second, just like this example: https://countingdownto.com/
I've been looking at Stimulus Reflex, classic JS and action cable.
What's the best way to build this with rails?

Thanks for your feedback.

For anyone else looking to implement a contact from.
Mail_form is indeed an easy way to do it.
I followed this guide and got implementation up and running in 20m.
https://medium.com/@Gabriel.Valle/rails-and-mail-form-f4bc4f991c83

Another possibility to add in Trix into your project is following the 2 steps in the installation guide.
https://edgeguides.rubyonrails.org/action_text_overview.html

The dynamic dropdown with Stimulus JS was a feature I spend a lot of time trying to solve, eventually got it working like this.

import { Controller } from "stimulus";

export default class extends Controller {
  static targets = [   
    "property_id",
    "roomId",
    "listRooms",
  ];

updateRooms() {
    const property_id = this.targets.find("property_id").value;
    Rails.ajax({
      type: "GET",
      url: "/get_rooms.json",
      data: "property_id=" + property_id,
      success: (data) => {
        this.updateDropdown(data);
      },
    });
  }

  updateDropdown(data) {
    this.roomIdTarget.innerHTML = "";
    const num_rooms = data;
    if (num_rooms == 0) {
      const option = document.createElement("option");
      option.innerHTML = "Entire place";
      this.roomIdTarget.appendChild(option);
    } else {
      data.forEach((room) => {
        const option = document.createElement("option");
        option.value = room.id;
        option.innerHTML = "Room " + room.name;
        this.roomIdTarget.appendChild(option);
      });
    }
  }