From a4488b6a560ceb8baa09afd87524f25f882cc4e5 Mon Sep 17 00:00:00 2001
From: cv <34649812+cpvalente@users.noreply.github.com>
Date: Tue, 11 May 2021 15:49:47 +0200
Subject: [PATCH] feat: goto with osc

---
 client/src/features/editors/list/EventBlock.jsx  |  3 +++
 .../features/editors/list/EventBlock.module.css  | 11 ++++++++---
 client/src/features/modals/SettingsModal.jsx     |  6 +-----
 server/classes/EventTimer.js                     | 16 ++++++++++++++++
 server/controllers/OscController.js              |  1 +
 server/controllers/eventsController.js           |  5 +++--
 6 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/client/src/features/editors/list/EventBlock.jsx b/client/src/features/editors/list/EventBlock.jsx
index e9cba4876..2d0aa1042 100644
--- a/client/src/features/editors/list/EventBlock.jsx
+++ b/client/src/features/editors/list/EventBlock.jsx
@@ -14,6 +14,8 @@ import style from './EventBlock.module.css';
 const ExpandedBlock = (props) => {
   const { provided, data, next, delay, delayValue, actionHandler } = props;
 
+  const oscid = data.id.length > 4 ? '...' : data.id;
+
   return (
     <>
       <span className={style.drag} {...provided.dragHandleProps}>
@@ -69,6 +71,7 @@ const ExpandedBlock = (props) => {
             actionHandler('update', { field: 'note', value: v })
           }
         />
+        <span className={style.oscLabel}>{`OSC ID: ${oscid}`}</span>
       </div>
       <Icon
         className={style.more}
diff --git a/client/src/features/editors/list/EventBlock.module.css b/client/src/features/editors/list/EventBlock.module.css
index afe089a21..26ddbecf0 100644
--- a/client/src/features/editors/list/EventBlock.module.css
+++ b/client/src/features/editors/list/EventBlock.module.css
@@ -138,9 +138,6 @@
 
 .titleContainer {
   grid-area: text;
-  display: inline-flex;
-  position: relative;
-  align-self: flex-start;
   height: 100%;
 
   background-color: rgba(255, 255, 255, 0.03);
@@ -149,6 +146,14 @@
   width: 100%;
   display: block;
 }
+
+.oscLabel {
+  color: #4bffabcc;
+  font-size: 0.8em;
+  float: right;
+  padding-right: 1em;
+}
+
 /* ================ MORE ================ */
 
 .more {
diff --git a/client/src/features/modals/SettingsModal.jsx b/client/src/features/modals/SettingsModal.jsx
index 504192d79..68e51b7d3 100644
--- a/client/src/features/modals/SettingsModal.jsx
+++ b/client/src/features/modals/SettingsModal.jsx
@@ -14,11 +14,7 @@ import {
   Button,
   Textarea,
 } from '@chakra-ui/react';
-import {
-  fetchEvent,
-  postEvent,
-  eventNamespace,
-} from '../../app/api/eventApi';
+import { fetchEvent, postEvent, eventNamespace } from '../../app/api/eventApi';
 import { useEffect, useState } from 'react';
 import { useFetch } from '../../app/hooks/useFetch';
 
diff --git a/server/classes/EventTimer.js b/server/classes/EventTimer.js
index dd9dc3c80..658636fb2 100644
--- a/server/classes/EventTimer.js
+++ b/server/classes/EventTimer.js
@@ -424,6 +424,22 @@ class EventTimer extends Timer {
     this.broadcastState();
   }
 
+  loadEventById(eventId) {
+    let eventIndex = this._eventlist.findIndex((e) => e.id === eventId);
+
+    console.log(
+      eventId,
+      this.selectedEventId,
+      eventIndex === this.selectedEventId
+    );
+
+    if (eventIndex === -1) return;
+    this.pause();
+    this.loadEvent(eventIndex);
+
+    this.broadcastState();
+  }
+
   // Loads a given event
   // load timers
   // load selectedEvent
diff --git a/server/controllers/OscController.js b/server/controllers/OscController.js
index d10b1c2c4..aca04e662 100644
--- a/server/controllers/OscController.js
+++ b/server/controllers/OscController.js
@@ -56,6 +56,7 @@ const initiateOSC = (config) => {
         break;
       case 'goto':
         console.log('calling goto with', args);
+        global.timer.loadEventById(args.toLowerCase());
         break;
 
       default:
diff --git a/server/controllers/eventsController.js b/server/controllers/eventsController.js
index e9ab335c3..6fbc41551 100644
--- a/server/controllers/eventsController.js
+++ b/server/controllers/eventsController.js
@@ -2,7 +2,8 @@
 const db = require('../app.js').db;
 
 // utils
-const { nanoid } = require('nanoid');
+const customAlphabet = require('nanoid').customAlphabet;
+const nanoid = customAlphabet('1234567890abcdef', 4);
 const eventDefs = require('../data/eventsDefinition.js');
 
 function _getEventsCount() {
@@ -85,7 +86,7 @@ exports.eventsPost = async (req, res) => {
 
   // ensure structure
   let newEvent = {};
-  req.body.id = nanoid(6);
+  req.body.id = nanoid();
 
   switch (req.body.type) {
     case 'event':