Commit 116142b3 authored by Jakob Moser's avatar Jakob Moser
Browse files

Track current view via routes

parent 6e224755

frontend/TabBar.mjs

+5 −1
Changes for frontend/TabBar.mjs: 5 added lines, 1 removed line.
Original line number Diff line number Diff line 
// TabBar.mjs

const TabBar = {

    view: function (vnode) {

        const { currentView, onViewChange } = vnode.attrs

        const { currentView } = vnode.attrs

        const tabs = [

            { id: "all", label: "Alle" },

            { id: "favorites", label: "Favoriten" },

            // { id: 'popular', label: 'Beliebt' } // 'Beliebt' als Option

        ]



        function onViewChange(id) {

            m.route.set("/" + id)

        }



        return m(

            "div.tab-bar-container",

            tabs.map(tab => {

frontend/app.mjs

+4 −9
Changes for frontend/app.mjs: 4 added lines, 9 removed lines.
Original line number Diff line number Diff line
@@ -5,14 +5,8 @@ import SongList from "./SongList.mjs" 


// Die Haupt-Layout-Komponente der Anwendung.

export const AppLayout = {

    currentView: "all", // Aktuell ausgewählter Tab (z.B. 'all', 'favorites', 'popular')

    searchTerm: "", // Aktueller Suchbegriff aus der Suchleiste



    // Wird aufgerufen, wenn der Benutzer einen anderen Tab auswählt.

    onViewChange: function (view) {

        this.currentView = view // Aktualisiere den Zustand für den aktuellen Tab.

    },



    // Wird aufgerufen, wenn sich der Text in der Suchleiste ändert oder zurückgesetzt wird.

    onSearchTermChange: function (term) {

        this.searchTerm = term // Aktualisiere den Zustand für den Suchbegriff.
@@ -20,19 +14,20 @@ export const AppLayout = { 


    // Die View-Methode, die das Layout der gesamten Anwendung rendert.

    view: function () {

        const currentView = m.route.get().replace(/^\//, "")



        return [

            m(SearchBar, {

                searchTerm: this.searchTerm,

                onSearchTermChange: this.onSearchTermChange.bind(this),

            }),

            m(TabBar, {

                currentView: this.currentView,

                onViewChange: this.onViewChange.bind(this),

                currentView,

            }),

            // Rendere die Song-Liste-Komponente.

            // Übergib den aktuellen Tab, den Suchbegriff UND den Callback zum Ändern des Suchbegriffs.

            m(SongList, {

                currentView: this.currentView,

                currentView,

                searchTerm: this.searchTerm,

                onSearchTermChange: this.onSearchTermChange.bind(this), // NEU: Callback hier übergeben

            }),

frontend/karaokatalog.mjs

+2 −2
Changes for frontend/karaokatalog.mjs: 2 added lines, 2 removed lines.
Original line number Diff line number Diff line
@@ -5,7 +5,7 @@ import { Base } from "./components/pages/Base.mjs"; 


// See https://mithril.js.org/route.html#routing-strategies

// TODO m.route.prefix = ""

m.route(document.body, "/", {

    "/": AppLayout,

m.route(document.body, "/all", {

    "/all": AppLayout,

    "/favorites": AppLayout,

})