Skip to main content

Your privacy settings

We use cookies to help you with journey planning and relevant disruptions, remember your login and show you content you might be interested in. If you’re happy with the use of cookies by West Midlands Combined Authority and our selected partners, click ‘Accept all cookies’. Or click ‘Manage cookies’ to learn more.

Manage Cookies
Beta

This is a new service - your feedback will help us to improve it.

Patterns

Find a timetable

What does it do?

  • Helps users to find a timetable for their chosen service

When to use it?

  • On the homepage

How it works?

  • This will direct users to the timetables page
  • Users can only select one travel mode
  • Users will need to enter a service number if they select bus. If train or tram are selected, then users can go straight to the timetables page through the Call to action button.

Default



HTML markup
<div style="max-width: 448px">
  <div class="wmnds-find-a-timetable-widget ">
    <div class="wmnds-content-card">
      <div class="wmnds-p-md">
        <h2>Find a timetable</h2>
        <div class="wmnds-find-a-timetable__content">
          Select your transport mode
        </div>
        <form class="wmnds-find-a-timetable-widget__form">
          <div class="wmnds-find-a-timetable-widget__travel-modes wmnds-grid wmnds-grid--spacing-3-sm wmnds-m-t-sm">
            <label class="wmnds-col-1-3">
              <input type="checkbox" class="wmnds-find-a-timetable-widget__mode-checkbox wmnds-screenreaders-only" name="mode" value="Bus">
              <div class="wmnds-btn wmnds-btn--mode wmnds-btn--block wmnds-text-align-center">
                <svg class="wmnds-btn__icon ">
                  <use xlink:href="#wmnds-modes-isolated-bus" href="#wmnds-modes-isolated-bus"></use>
                </svg>
                Bus
              </div>
            </label>
            <div class="wmnds-col-1-3">
              <a href="https://legacy.wmnetwork.co.uk/timetables/#/?mode=Train" title="link title" target="_blank" class="wmnds-btn wmnds-col-1 wmnds-m-b-sm wmnds-text-align-center wmnds-btn--mode" rel="">
                <svg class="wmnds-btn__icon">
                  <use xlink:href="#wmnds-modes-isolated-rail" href="#wmnds-modes-isolated-rail"></use>
                </svg>
                Train
              </a>
            </div>
            <div class="wmnds-col-1-3">
              <a href="https://legacy.wmnetwork.co.uk/timetables/#/?mode=Tram&amp;serviceNo=MM1&amp;limit=6" title="link title" target="_blank" class="wmnds-btn wmnds-col-1 wmnds-m-b-sm wmnds-text-align-center wmnds-btn--mode" rel="">
                <svg class="wmnds-btn__icon">
                  <use xlink:href="#wmnds-modes-isolated-metro" href="#wmnds-modes-isolated-metro"></use>
                </svg>
                Tram
              </a>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Nunjucks markup
{% from "wmnds/patterns/find-timetable-widget/_find-timetable-widget.njk" import wmndsFindTimetableWidget %}

{{
   wmndsFindTimetableWidget({
      isOpen: true
    })
}}

Nunjucks properties
NameTypeDescription
isOpenbooleanIf true, find timetable widget will be expanded upon initial load. Defaults to false.

Recommended javascript (browser compatible)
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var findATimetableJS = function findATimetableJS() {
  var findATimetableComponents = document.querySelectorAll('.wmnds-find-a-timetable-widget');
  var toggleOpenClass = function toggleOpenClass(e) {
    e.target.closest('.wmnds-find-a-timetable-widget').classList.toggle('wmnds-is--open');
  };
  var onSubmitForm = function onSubmitForm(e) {
    e.preventDefault();
    var data = new FormData(e.target);
    var queryString = new URLSearchParams(data).toString();
    window.location.href = "https://legacy.wmnetwork.co.uk/timetables/#/?".concat(queryString);
  };
  findATimetableComponents.forEach(function(findATimetableComponent) {
    findATimetableComponent.querySelector('div.wmnds-btn.wmnds-btn--mode').addEventListener('click', toggleOpenClass);
    findATimetableComponent.querySelector('.wmnds-find-a-timetable-widget__form').addEventListener('submit', onSubmitForm);
  });
};
var _default = findATimetableJS;
exports["default"] = _default;

Recommended javascript (ES6)
const findATimetableJS = () => {
  const findATimetableComponents = document.querySelectorAll('.wmnds-find-a-timetable-widget');
  const toggleOpenClass = e => {
    e.target.closest('.wmnds-find-a-timetable-widget').classList.toggle('wmnds-is--open');
  };

  const onSubmitForm = e => {
    e.preventDefault();
    const data = new FormData(e.target);
    const queryString = new URLSearchParams(data).toString();
    window.location.href = `https://legacy.wmnetwork.co.uk/timetables/#/?${queryString}`;
  };

  findATimetableComponents.forEach(findATimetableComponent => {
    findATimetableComponent
      .querySelector('div.wmnds-btn.wmnds-btn--mode')
      .addEventListener('click', toggleOpenClass);
    findATimetableComponent
      .querySelector('.wmnds-find-a-timetable-widget__form')
      .addEventListener('submit', onSubmitForm);
  });
};

export default findATimetableJS;

Expanded (bus)



HTML markup
<div style="max-width: 448px">
  <div class="wmnds-find-a-timetable-widget  wmnds-is--open">
    <div class="wmnds-content-card">
      <div class="wmnds-p-md">
        <h2>Find a timetable</h2>
        <div class="wmnds-find-a-timetable__content">
          Select your transport mode
        </div>
        <form class="wmnds-find-a-timetable-widget__form">
          <div class="wmnds-find-a-timetable-widget__travel-modes wmnds-grid wmnds-grid--spacing-3-sm wmnds-m-t-sm">
            <label class="wmnds-col-1-3">
              <input type="checkbox" class="wmnds-find-a-timetable-widget__mode-checkbox wmnds-screenreaders-only" name="mode" value="Bus" checked>
              <div class="wmnds-btn wmnds-btn--mode wmnds-btn--block wmnds-text-align-center">
                <svg class="wmnds-btn__icon ">
                  <use xlink:href="#wmnds-modes-isolated-bus" href="#wmnds-modes-isolated-bus"></use>
                </svg>
                Bus
              </div>
            </label>
            <div class="wmnds-col-1-3">
              <a href="https://legacy.wmnetwork.co.uk/timetables/#/?mode=Train" title="link title" target="_blank" class="wmnds-btn wmnds-col-1 wmnds-m-b-sm wmnds-text-align-center wmnds-btn--mode" rel="">
                <svg class="wmnds-btn__icon">
                  <use xlink:href="#wmnds-modes-isolated-rail" href="#wmnds-modes-isolated-rail"></use>
                </svg>
                Train
              </a>
            </div>
            <div class="wmnds-col-1-3">
              <a href="https://legacy.wmnetwork.co.uk/timetables/#/?mode=Tram&amp;serviceNo=MM1&amp;limit=6" title="link title" target="_blank" class="wmnds-btn wmnds-col-1 wmnds-m-b-sm wmnds-text-align-center wmnds-btn--mode" rel="">
                <svg class="wmnds-btn__icon">
                  <use xlink:href="#wmnds-modes-isolated-metro" href="#wmnds-modes-isolated-metro"></use>
                </svg>
                Tram
              </a>
            </div>
          </div>
          <div class="wmnds-find-a-timetable-widget__services">
            <div class="wmnds-fe-group wmnds-m-b-md">
              <label class="wmnds-fe-label wmnds-screenreaders-only" for="busServices">Bus Services</label>
              <input class="wmnds-fe-input" id="busServices" name="serviceNo" type="text" value="" placeholder="Enter a service number" required="true" />
            </div>
            <button class="wmnds-btn wmnds-col-1 wmnds-col-sm-1-2 wmnds-btn--align-left" type="submit">
              Find a timetable
              <svg class="wmnds-btn__icon wmnds-btn__icon--right ">
                <use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use>
              </svg>
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Nunjucks markup
{% from "wmnds/patterns/find-timetable-widget/_find-timetable-widget.njk" import wmndsFindTimetableWidget %}

{{
   wmndsFindTimetableWidget({
      isOpen: true
    })
}}

Nunjucks properties
NameTypeDescription
isOpenbooleanIf true, find timetable widget will be expanded upon initial load. Defaults to false.

Recommended javascript (browser compatible)
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var findATimetableJS = function findATimetableJS() {
  var findATimetableComponents = document.querySelectorAll('.wmnds-find-a-timetable-widget');
  var toggleOpenClass = function toggleOpenClass(e) {
    e.target.closest('.wmnds-find-a-timetable-widget').classList.toggle('wmnds-is--open');
  };
  var onSubmitForm = function onSubmitForm(e) {
    e.preventDefault();
    var data = new FormData(e.target);
    var queryString = new URLSearchParams(data).toString();
    window.location.href = "https://legacy.wmnetwork.co.uk/timetables/#/?".concat(queryString);
  };
  findATimetableComponents.forEach(function(findATimetableComponent) {
    findATimetableComponent.querySelector('div.wmnds-btn.wmnds-btn--mode').addEventListener('click', toggleOpenClass);
    findATimetableComponent.querySelector('.wmnds-find-a-timetable-widget__form').addEventListener('submit', onSubmitForm);
  });
};
var _default = findATimetableJS;
exports["default"] = _default;

Recommended javascript (ES6)
const findATimetableJS = () => {
  const findATimetableComponents = document.querySelectorAll('.wmnds-find-a-timetable-widget');
  const toggleOpenClass = e => {
    e.target.closest('.wmnds-find-a-timetable-widget').classList.toggle('wmnds-is--open');
  };

  const onSubmitForm = e => {
    e.preventDefault();
    const data = new FormData(e.target);
    const queryString = new URLSearchParams(data).toString();
    window.location.href = `https://legacy.wmnetwork.co.uk/timetables/#/?${queryString}`;
  };

  findATimetableComponents.forEach(findATimetableComponent => {
    findATimetableComponent
      .querySelector('div.wmnds-btn.wmnds-btn--mode')
      .addEventListener('click', toggleOpenClass);
    findATimetableComponent
      .querySelector('.wmnds-find-a-timetable-widget__form')
      .addEventListener('submit', onSubmitForm);
  });
};

export default findATimetableJS;