jukebox-web/README.md

---
<div style="display:flex;align-items:center;justify-content:center;flex-direction:column;" align="center">
  <img style="width:10px;" src="https://www.digikey.com/-/media/Images/Vendors/B/web-belden.png?la=en-US&ts=db9a9e88-b1c7-415a-a252-934462927b19&w=200&h=100">
</div>

---

<div style="display:flex;align-items:center;justify-content:center;flex-direction:column;" align="center">
  <h3><b>Belden Jukebox Front/Back Specification: </b></h3>
  <p><b>This document outlines how data will be transmitted between the frontend and the backend.</b></p>
</div>


### Standard Object
All objects sent between the frontend and backend will follow this format.

```json
{
    type: "name_of_request"
    call: "send, request"
    data: {
    }
}
```

---

## CABLE_MAP Object

### Front:
> Front -> Back 
```json
{
    type: "cable_map"
    call: "request"
    data: {
    }
}
```

### Back:
> Back -> Front
```json
{
    type: "cable_map"
    call: "send"
    data: {
        map: [
            item {
                part_number: 12345
                position: 0-53
                name: "Fancy Displayable Name"
                brand: "Belden"
                description: "This is a good cable!"
                short_description: "Good cable!"
            }
             ... many more items
        ]
    }
}
``` 


## CABLE_DETAILS Object
### Front:
> Front -> Back 
```json
{
    type: "cable_details"
    call: "request"
    data: {
        part_number: [
            12345,
            67890,
            ...
        ]
        position: [
            0,
            1,
            2,
            ... 53
        ]
    }
}
```

### Back:
> Back -> Front
```json
{
    type: "cable_details"
    call: "send"
    data: {
        cables: [
            {
                part_number: 12345
                position: 0-53
                part_image_url: "https://belden.com"
                brand_image_url: "https://belden.com"
                extracted_object: {
                    ....... #brand will be in here
                }
            },
            .....
        ]
    }
}
```

---
## CABLE_SEARCH Object
### Front:
> Front -> Back 
```json
{
    type: "cable_search"
    call: "request"
    data: {
        string: "name/part_number/type/category/etc"
    }
}
```

### Back:
> Back -> Front
```json
{
    type: "cable_search"
    call: "send"
    data: {
        cables: [
            {
                part_number: 12345
                position: 0-53
                part_image_url: "https://belden.com"
                brand_image_url: "https://belden.com"
                extracted_object: {
                    ....... #brand will be in here
                }
            },
            ....
        ]
    }
}
```

---
## KEYBOARD Object
### Front:
> Front -> Back 
```json
{
    type: "keyboard"
    call: "request"
    data: {
        enabled: True / False
    }
}
```

---
## MACHINE_SETTINGS Object
### Front:
> Front -> Back 
```json
{
    type: "machine_settings"
    call: "request"
    data: {
    }
}
```

### Back:
> Back -> Front
```json
{
    type: "machine_settings"
    call: "send"
    data: {
        settings: [
            {
                setting_name: "text field"
                type: "text"
                advanced: True
                current_value: "current value of seting"
            },
            {
                setting_name: "radio button"
                type: "radio"
                advanced: True
                current_value: "option 1"
                radio_values: [
                    "option 1",
                    "option 2",
                    "option 3"
                ]
            },
            {
                setting_name: "check box"
                type: "check"
                advanced: True
                current_value: ["option 1", "option 2"]
                radio_values: [
                    "option 1",
                    "option 2",
                    "option 3"
                ]
            },
            {
                setting_name: "enabled or disabled"
                type: "boolean"
                advanced: True
                current_value: True
            },
            {
                setting_name: "slider bar"
                type: "slider"
                advanced: True
                current_value: 50.0 #Float
                min: -100.0 #Float
                max: 100.0 #Float
            },
            {
                setting_name: "button"
                advanced: True
                type: "button"
            }
        ]
    }
}
```

### Front:
> Front -> Back
```json
{
    type: "machine_settings"
    call: "send"
    data: {
        settings: [
            {
                setting_name: "text field"
                type: "text"
                new_value: "current value of seting"
            },
            {
                setting_name: "radio button"
                type: "radio"
                new_value: [
                    "option 1",
                    "option 2",
                    "option 3"
                ]
            },
            {
                setting_name: "check box"
                type: "check"
                new_value: [
                    "option 1",
                    "option 2",
                    "option 3"
                ]
            },
            {
                setting_name: "enabled or disabled"
                type: "boolean"
                new_value: False
            },
            {
                setting_name: "slider bar"
                type: "slider"
                new_value: 100.0 #Float
            },
            {
                setting_name: "button"
                type: "button"
                new_value: True
            }
        ]
    }
}
```

---