borbad.s5l.ru/vue/app/temp.coffee

# обязательно подключение глобальных массивов
globalThis.renderFns = require 'pug.json'
globalThis.stylFns   = require 'styl.json'

# подключение мета информации (строго в данном фиде)
document.head.insertAdjacentHTML 'beforeend','<meta charset="UTF-8">'
document.head.insertAdjacentHTML 'beforeend','<meta name="viewport" content="width=device-width, initial-scale=1.0">'
document.head.insertAdjacentHTML('beforeend','<title>Кохи Борбад - Концертный зал Душанбе</title>')

# Настройка tailwind
tailwind.config = require 'tailwind.config.js'

# подключение основных стилей
## tailwind
document.head.insertAdjacentHTML('beforeend','<style  type="text/tailwindcss"  page="main">'+stylFns['main.css']+'</style>')
## базовой стиль приложения
document.head.insertAdjacentHTML('beforeend','<style  type="text/tailwindcss"  page="root">'+stylFns['app/temp.styl']+'</style>')

# Подключаем ядро системы
CouchDBService = require 'app/core/CouchdbClass'

# Маршруты
routes = [
    { path: '/', component: require 'app/pages/Home' }
    { path: '/events', component: require 'app/pages/Events' }
    { path: '/events/:id', component: require 'app/pages/EventDetail' }
    { path: '/about', component: require 'app/pages/About' }
    { path: '/contacts', component: require 'app/pages/Contacts' }
]

# Глобальное определение vuejs приложения
app = Vue.createApp
    name: 'app'
    data: ()->
        return  
            theme: 'light'
            appState:
                events: []
                featuredEvents: []
                sliderEvents: []
                loading: true
                error: null
            modalState: 
                isVisible: false
                component: null
                props: {}
            couchDBService: new CouchDBService()
    beforeMount: ()->
        debug.log "start beforeMount"
        # определение контекста vuejs приложения как глобальной переменной _
        globalThis._ = @
    render: (new Function '_ctx', '_cache', renderFns['app/temp.pug'])()
    mounted: ->
        # Предзагрузка темы
        if localStorage.theme == 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
            @theme = 'dark'
            document.documentElement.classList.add('dark')
        else
            @theme = 'light'
            document.documentElement.classList.remove('dark')
        
        # Загрузка данных из CouchDB
        @loadEventsData()
    methods:
        toggleTheme: ->
            @theme = if @theme == 'light' then 'dark' else 'light'
            localStorage.setItem 'theme', @theme
            document.documentElement.classList.toggle 'dark'
        
        openModal: (component, props = {}) ->
            @modalState.component = component
            @modalState.props = props
            @modalState.isVisible = true
        
        closeModal: ->
            @modalState.isVisible = false
            @modalState.component = null
            @modalState.props = {}
        
        loadEventsData: ->
            @appState.loading = true
            @couchDBService.getAllEvents()
            .then (events) =>
                @appState.events = events
                @appState.featuredEvents = events.filter((event) -> event.isFeatured).slice(0, 6)
                @appState.sliderEvents = events.filter((event) -> event.inSlider).map (event) ->
                    id: event._id
                    image: event.image || '/images/default-event.jpg'
                    title: event.title
                    description: event.shortDescription || event.description
                    cta: event.cta || 'Подробнее'
                    category: event.category
                @appState.error = null
            .catch (error) =>
                debug.log "Ошибка загрузки данных: "+error
                @appState.error = 'Не удалось загрузить данные мероприятий'
            .finally =>
                @appState.loading = false
        
        getEvents: -> @appState.events
        getFeaturedEvents: -> @appState.featuredEvents
        getSliderEvents: -> @appState.sliderEvents
        isLoading: -> @appState.loading
        hasError: -> @appState.error
    components:
        'themetoggle':      require 'app/shared/ThemeToggle'
        'multilevelmenu':   require 'app/shared/MultiLevelMenu'
        'imageslider':      require 'app/shared/ImageSlider'
        'modalwindow':      require 'app/shared/ModalWindow'
        'formvalidator':    require 'app/shared/FormValidator'
        'filtersort':       require 'app/shared/FilterSort'
        'eventdetailmodal': require 'app/shared/EventDetailModal'
        'successmodal':     require 'app/shared/SuccessModal'
        'app-link':         require 'app/shared/AppLink'

app.use(VueRouter.createRouter({
    routes: routes
    history: VueRouter.createWebHistory()
    scrollBehavior: (to, from, savedPosition) ->
        if savedPosition
            return savedPosition
        else
            return { x: 0, y: 0 }
}))

# подключаем в body ОБЯЗАТЕЛЬНО!!!
app.mount('body')

debug.log "Vue application initialized successfully"