event cucle (#76)

* install sass
* refact: integration settings
- OSC in its own HTTP endpoint
- OSC settings have own object in db
* refact: simplify event cycle
* refact: restructure external triggers http
* refact: restructure external triggers osc+socket
* refact: restructure data updates
* feat: osc integration class
* IO improvements
- timer uses osc integration
- create trigger handler to manage external triggers
* refact: refract state machine update
* Integration: simple HTTP Client
* Integration: http options in datamodel
* Integration: call http send on life cycle
* feat/62-logging: fix issue #71

client/src/features/info/Info.module.scss

@@ -0,0 +1,124 @@
+.container {
+  margin-top: 1em;
+  display: flex;
+  flex-direction: column;
+  background-color: rgba(0, 0, 0, 0.05);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 4px;
+  padding: 8px;
+}
+
+.main {
+  font-size: 0.9em;
+  color: #ff7597;
+  display: flex;
+  justify-content: space-between;
+}
+
+.header,
+.headerRoll {
+  padding: 0;
+  margin: 0;
+  font-size: 0.9em;
+  color: #ccc;
+  display: flex;
+  justify-content: space-between;
+}
+
+.header {
+  color: #ccc;
+}
+
+.headerRoll {
+  color: #2b6cb0;
+}
+
+.collapsedTitle {
+  font-size: inherit;
+
+  padding-left: 1em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.labelContainer {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.label,
+.emptyLabel {
+  padding: 0;
+  margin: 0;
+  font-size: 0.9em;
+}
+
+.label {
+  font-size: 0.9em;
+  color: #aaa;
+}
+
+.label::after {
+  content: ': ';
+}
+
+.emptyLabel {
+  font-size: 0.8em;
+  color: #555;
+}
+
+.notes {
+  color: #d69e2e;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.if {
+  font-size: 0.8em;
+  color: #4bffabcc;
+  background-color: rgba(0, 0, 0, 0.13);
+  border-radius: 2px;
+  padding: 0 0.5em;
+  margin: 0 0.5em;
+}
+
+.log {
+  overflow-y: scroll;
+  height: 30vh;
+
+    ul > li {
+    font-size: 0.9em;
+    color: #fff;
+  }
+
+}
+
+.info {
+  color: #fff;
+}
+
+.error {
+  color: red;
+}
+
+.client {
+  color: lightblue;
+}
+
+.moreExpanded,
+.moreCollapsed {
+  cursor: pointer;
+  color: #fff;
+}
+
+.moreExpanded {
+  transform: scaleY(-1);
+  transition: transform 0.3s;
+}
+
+.moreCollapsed {
+  transform: scaleY(1);
+  transition: transform 0.3s;
+}