Two gray/brown tabby kittens on the floor in a veterinary exam room. One of the kittens is on his back and keeps flipping over and over while batting at the other kitten, who finally pounces right at the end of the video.
Gert V 🇵🇸 and 1 other boosted
Screenshot of code (the <${TeamSchedule.connectedTo(this)} /> line is highlighted):

export default class InterviewsPage extends kitten.Page {
  html () {
    const today = db.calendar.today
    const futureDays = db.calendar.futureDays
    const pastDays = db.calendar.pastDays

    return kitten.html`
      <${MainLayout} page='/admin/interviews/'>
        <h2>Interviews</h2>

        <${SignUpsSwitch.connectedTo(this)} />
        <${InternalNav} />
        <${TeamSchedule.connectedTo(this)} />

        <h3 id='today'>Today</h3>
        <if ${today !== undefined}>
          <then>
Screenshot of code (the <${TeamSchedule.connectedTo(this)} /> line is highlighted): export default class InterviewsPage extends kitten.Page { html () { const today = db.calendar.today const futureDays = db.calendar.futureDays const pastDays = db.calendar.pastDays return kitten.html` <${MainLayout} page='/admin/interviews/'> <h2>Interviews</h2> <${SignUpsSwitch.connectedTo(this)} /> <${InternalNav} /> <${TeamSchedule.connectedTo(this)} /> <h3 id='today'>Today</h3> <if ${today !== undefined}> <then>
Screenshot of code, continuation of the same class, starting with the end of the html() method from the previous screenshot and going till the end of the class (the table[inert] style and the onToggle() method are highlighted:

          <style>
            table[inert] {
              opacity: 0.9;
              filter: grayscale(100%);
            }
          </style>
        </table>
      </section>
    `
  }

  onToggle () {
    this.editable = !this.editable
    console.log(this.editable)
    this.update()
  }
}
Screenshot of code, continuation of the same class, starting with the end of the html() method from the previous screenshot and going till the end of the class (the table[inert] style and the onToggle() method are highlighted: <style> table[inert] { opacity: 0.9; filter: grayscale(100%); } </style> </table> </section> ` } onToggle () { this.editable = !this.editable console.log(this.editable) this.update() } }
Screenshot of code (the lines editable=false and the button tag code are highlighted):

class TeamSchedule extends kitten.Component {
  editable = false

  html () {
    return kitten.html`
      <section>
        <h3>Team schedule</h3>
        <button
          name='toggle'
          connect
        >${this.editable ? 'Lock' : 'Unlock to edit'}</button>
        <table id='team-schedule' ${this.editable ? '' : 'inert'}>
          <caption id='caption'>
            <markdown>
              Shows which team members will be present on calls on which days.
            </markdown>
Screenshot of code (the lines editable=false and the button tag code are highlighted): class TeamSchedule extends kitten.Component { editable = false html () { return kitten.html` <section> <h3>Team schedule</h3> <button name='toggle' connect >${this.editable ? 'Lock' : 'Unlock to edit'}</button> <table id='team-schedule' ${this.editable ? '' : 'inert'}> <caption id='caption'> <markdown> Shows which team members will be present on calls on which days. </markdown>