Enhancement/feeder refactoring

.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

.github/ISSUE_TEMPLATE/bug_report.md

@@ -27,7 +27,8 @@ If applicable, add screenshots to help explain your problem.
  - server OS: [Windows, Raspbian OS]
  - server hardware [PC, Raspberry Pi 3B+, ....]
  - serial device firmware [Marling, Grbl, ...] + version
- - Version [use `git rev-parse --short HEAD`]
+ - Version hash [can be seen from the settings page in the web interface]
+ - Branch [if different than the main stable branch]
 
 **Additional context**
 Add any other context about the problem here.

.github/workflows/python-app.yml

@@ -39,4 +39,4 @@ jobs:
         flask db upgrade
     - name: Test with pytest
       run: |
-        python -m pytest server/tests
+        python -m pytest -s -v server/tests

docs/old_troubleshooting.md

@@ -11,7 +11,7 @@ $> source env/bin/activate
 (env) $> python3 -m pip install pyserial
 ```
 
-## "Serial not available. Will use fake device"
+## "Serial not available. Will use virtual device"
 
 The previous message may appear on the command line while running the program.
 This is a normal behaviour on the first run because it is necessary to select the serial device to connect from the UI.

docs/troubleshooting.md

@@ -24,3 +24,4 @@ Please specify:
 * firmware (Marlin, Grbl, ...)
 * The issue
 * add a copy of the terminal result you get during the installation and when after running the software in orded to analyze better the problem
+* if the UI is working, you can download a diagnostic zip file that can be uploaded together with the issue. This can be done with the button located at the bottom of the settings page.

frontend/src/structure/TopBar.js

@@ -12,7 +12,7 @@ import { showLEDs, systemIsLinux, updateDockerComposeLatest } from './tabs/setti
 import { settingsRebootSystem, settingsShutdownSystem } from '../sockets/sEmits';
 
 const mapStateToProps = (state) => {
-    return { 
+    return {
         showBack: showBack(state),
         isLinux: systemIsLinux(state),
         showLEDs: showLEDs(state),
@@ -22,34 +22,34 @@ const mapStateToProps = (state) => {
 }
 
 const mapDispatchToProps = (dispatch) => {
-    return { 
+    return {
         handleTab: (name) => dispatch(setTab(name)),
         handleTabBack: () => dispatch(tabBack())
     }
 }
 
-class TopBar extends Component{
+class TopBar extends Component {
 
-    renderBack(){
+    renderBack() {
         if (this.props.showBack)
-            return <Nav.Link key={20} className="text-bold" onClick={()=>{this.props.handleTabBack()}}><ChevronCompactLeft/>Back</Nav.Link>
+            return <Nav.Link key={20} className="text-bold" onClick={() => { this.props.handleTabBack() }}><ChevronCompactLeft />Back</Nav.Link>
         else return "";
     }
 
-    renderSettingsButton(){
+    renderSettingsButton() {
         let notificationCounter = 0;
         let renderedCounter = "";
         if (!this.props.dockerComposeUpdateAvailable)
             notificationCounter++;
-        if (notificationCounter>0){
-            renderedCounter = <span class="badge badge-danger ml-2">{notificationCounter}</span>
+        if (notificationCounter > 0) {
+            renderedCounter = <span className="badge badge-danger ml-2">{notificationCounter}</span>
         }
         if (this.props.isLinux)
             return <Dropdown as={ButtonGroup}>
-                <IconButton className="btn btn-dark mr-0" 
-                    onClick={()=>{this.props.handleTab("settings")}}
+                <IconButton className="btn btn-dark mr-0"
+                    onClick={() => { this.props.handleTab("settings") }}
                     icon={Sliders}>
-                        Settings{renderedCounter}
+                    Settings{renderedCounter}
                 </IconButton>
 
                 <Dropdown.Toggle split className="btn btn-dark ml-0" id="dropdown-split-basic" />
@@ -60,59 +60,59 @@ class TopBar extends Component{
                         onClick={() => settingsRebootSystem()}>Reboot</Dropdown.Item>
                 </Dropdown.Menu>
             </Dropdown>
-        else return <IconButton className="btn btn-dark" 
-                onClick={()=>{this.props.handleTab("settings")}}
-                icon={Sliders}>
-                    Settings{renderedCounter}
-            </IconButton>
+        else return <IconButton className="btn btn-dark"
+            onClick={() => { this.props.handleTab("settings") }}
+            icon={Sliders}>
+            Settings{renderedCounter}
+        </IconButton>
     }
 
-    renderLEDsTab(){
+    renderLEDsTab() {
         if (this.props.showLEDs.value)
             return <Nav.Link className={"h5" + (this.props.selectedTab === "leds" ? " highlight-tab" : "")}
-                key={5} 
-                onClick={()=>{this.props.handleTab("leds")}}>
-                    LEDs
+                key={5}
+                onClick={() => { this.props.handleTab("leds") }}>
+                LEDs
             </Nav.Link>
         else return "";
     }
 
-    render(){
+    render() {
         return <div>
-            
+
             <Navbar bg="primary" collapseOnSelect expand="lg" sticky="top" className="center">
-                    <Navbar.Brand href="#home" onClick={()=>{this.props.handleTab("home")}}>
-                        <h1 className="logo">Sandypi</h1>
-                    </Navbar.Brand>
-                    <Navbar.Toggle aria-controls="topbar-nav" />
-                    <Navbar.Collapse id="topbar-nav" className="max-width">
-                        <Nav className="mr-auto">
-                            <Nav.Link className={"h5" + (this.props.selectedTab === "home" ? " highlight-tab" : "")} 
-                                key={1} 
-                                onClick={()=>{this.props.handleTab("home")}}>
-                                    Home
-                            </Nav.Link>
-                            <Nav.Link className={"h5" + (this.props.selectedTab === "drawings" ? " highlight-tab" : "")} 
-                                key={2} 
-                                onClick={()=>{this.props.handleTab("drawings")}}>
-                                    Drawings
-                            </Nav.Link>
-                            <Nav.Link className={"h5" + (this.props.selectedTab === "playlists" ? " highlight-tab" : "")} 
-                                key={3} 
-                                onClick={()=>{this.props.handleTab("playlists")}}>
-                                    Playlists
-                            </Nav.Link>
-                            <Nav.Link className={"h5" + (this.props.selectedTab === "manual" ? " highlight-tab" : "")}
-                                key={4} 
-                                onClick={()=>{this.props.handleTab("manual")}}>
-                                    Manual control
-                            </Nav.Link>
-                            {this.renderLEDsTab()}
-                            {this.renderBack()}
-                        </Nav>
-                        <QueueControls/>
-                        {this.renderSettingsButton()}
-                    </Navbar.Collapse>
+                <Navbar.Brand href="#home" onClick={() => { this.props.handleTab("home") }}>
+                    <h1 className="logo">Sandypi</h1>
+                </Navbar.Brand>
+                <Navbar.Toggle aria-controls="topbar-nav" />
+                <Navbar.Collapse id="topbar-nav" className="max-width">
+                    <Nav className="mr-auto">
+                        <Nav.Link className={"h5" + (this.props.selectedTab === "home" ? " highlight-tab" : "")}
+                            key={1}
+                            onClick={() => { this.props.handleTab("home") }}>
+                            Home
+                        </Nav.Link>
+                        <Nav.Link className={"h5" + (this.props.selectedTab === "drawings" ? " highlight-tab" : "")}
+                            key={2}
+                            onClick={() => { this.props.handleTab("drawings") }}>
+                            Drawings
+                        </Nav.Link>
+                        <Nav.Link className={"h5" + (this.props.selectedTab === "playlists" ? " highlight-tab" : "")}
+                            key={3}
+                            onClick={() => { this.props.handleTab("playlists") }}>
+                            Playlists
+                        </Nav.Link>
+                        <Nav.Link className={"h5" + (this.props.selectedTab === "manual" ? " highlight-tab" : "")}
+                            key={4}
+                            onClick={() => { this.props.handleTab("manual") }}>
+                            Manual control
+                        </Nav.Link>
+                        {this.renderLEDsTab()}
+                        {this.renderBack()}
+                    </Nav>
+                    <QueueControls />
+                    {this.renderSettingsButton()}
+                </Navbar.Collapse>
             </Navbar>
         </div>
     }

frontend/src/structure/tabs/playlists/Playlists.slice.js

@@ -17,13 +17,13 @@ const playlistsSlice = createSlice({
             let elements = action.payload.elements;
             const playlistId = action.payload.playlistId;
             let pls = state.playlists.map((pl) => {
-                pl = {...pl};
-                if (pl.id === playlistId){
+                pl = { ...pl };
+                if (pl.id === playlistId) {
                     let maxId = 1;
                     if (Array.isArray(pl.elements))
-                    // looking for the highest element id to add a higher value to the elements that are being added (this avoid the creation of a new element when the element with id is sent back from the server)
-                        maxId = Math.max(pl.elements.map(el => {return el.id}), 1) + 1;
-                    for (let e in elements){
+                        // looking for the highest element id to add a higher value to the elements that are being added (this avoid the creation of a new element when the element with id is sent back from the server)
+                        maxId = Math.max(pl.elements.map(el => { return el.id }), 1) + 1;
+                    for (let e in elements) {
                         elements[e].id = maxId++;
                     }
                     pl.elements = [...pl.elements];
@@ -33,34 +33,35 @@ const playlistsSlice = createSlice({
                 }
                 return pl;
             });
-            return {...state, playlists: pls, mandatoryRefresh: true, playlistAddedNewElement: true };
+            return { ...state, playlists: pls, mandatoryRefresh: true, playlistAddedNewElement: true };
         },
         deletePlaylist: (state, action) => {
-            return { ...state, playlists: state.playlists.filter((item) => {
-                return item.id !== action.payload;
-            })}
+            return {
+                ...state, playlists: state.playlists.filter((item) => {
+                    return item.id !== action.payload;
+                })
+            }
         },
         resetPlaylistDeletedFlag: (state, action) => {
-            return {...state, playlistDeleted: false };
+            return { ...state, playlistDeleted: false };
         },
         resetMandatoryRefresh: (state, action) => {
-            return {...state, mandatoryRefresh: false};
+            return { ...state, mandatoryRefresh: false };
         },
         setPlaylists: (state, action) => {
             let playlistDeleted = true;                // to check if the playlist has been deleted from someone else
-            let pls = action.payload.map((pl)=>{
-                if (pl.id === state.playlistId){
+            let pls = action.payload.map((pl) => {
+                if (pl.id === state.playlistId) {
                     playlistDeleted = false;
                 }
-                pl.elements = JSON.parse(pl.elements);
                 return pl;
             });
-            return { 
-                ...state, 
-                playlists: pls, 
-                playlistDeleted: playlistDeleted, 
+            return {
+                ...state,
+                playlists: pls,
+                playlistDeleted: playlistDeleted,
                 mandatoryRefresh: true
-            }; 
+            };
         },
         setSinglePlaylistId: (state, action) => {
             return { ...state, playlistId: action.payload, mandatoryRefresh: true, showNewPlaylist: false };
@@ -70,11 +71,11 @@ const playlistsSlice = createSlice({
             let version = 0;
             let isNew = true;
             let res = state.playlists.map((pl) => {
-                if (pl.id === playlist.id){
+                if (pl.id === playlist.id) {
                     version = pl.version;
                     isNew = false;
                     return playlist;
-                }else{
+                } else {
                     return pl;
                 }
             });
@@ -87,9 +88,9 @@ const playlistsSlice = createSlice({
                 res.push(playlist)
             // check if it is necessary to refresh the playlist view
             let mustRefresh = (playlist.id === state.playlistId) && ((playlist.version > version) || state.playlistAddedNewElement);
-            return { ...state, playlists: res, playlistDeleted: false, mandatoryRefresh: mustRefresh, playlistAddedNewElement: false};
+            return { ...state, playlists: res, playlistDeleted: false, mandatoryRefresh: mustRefresh, playlistAddedNewElement: false };
         },
-        setShowNewPlaylist(state, action){
+        setShowNewPlaylist(state, action) {
             return { ...state, showNewPlaylist: action.payload }
         }
     }

frontend/src/structure/tabs/queue/Queue.slice.js

@@ -8,49 +8,49 @@ const queueSlice = createSlice({
         repeat: false,
         shuffle: false,
         interval: 0,
-        status: {eta: -1}
+        status: { eta: -1 }
     },
     reducers: {
-        setInterval(state, action){
+        setInterval(state, action) {
             return {
-                ...state, 
+                ...state,
                 interval: action.payload
             }
         },
-        setQueueElements(state, action){
+        setQueueElements(state, action) {
             return {
                 ...state,
                 elements: action.payload
             }
         },
-        setQueueStatus(state, action){
+        setQueueStatus(state, action) {
             let res = action.payload;
             res.current_element = res.current_element === "None" ? undefined : JSON.parse(res.current_element);
             return {
-                elements:       res.elements,
+                elements: res.elements,
                 currentElement: res.current_element,
-                interval:       res.interval,
-                status:         res.status,
-                repeat:         res.repeat,
-                shuffle:        res.shuffle
+                interval: res.interval,
+                status: res.status,
+                repeat: res.repeat,
+                shuffle: res.shuffle
             }
         },
-        toggleQueueShuffle(state, action){
+        toggleQueueShuffle(state, action) {
             return {
                 ...state,
                 shuffle: !state.shuffle
             }
         },
-        toggleQueueRepeat(state, action){
+        toggleQueueRepeat(state, action) {
             return {
-                ...state, 
+                ...state,
                 repeat: !state.repeat
             }
         }
     }
 });
 
-export const{
+export const {
     setInterval,
     setQueueElements,
     setQueueStatus,