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.

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);
      });
    }
  }