File size: 4,712 Bytes
66e3a81
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
/**
 * Settings Tab Logic
 * Handles interaction within the Settings tab.
 */

const settingsTab = {
    init: function () {
        console.log("Settings Tab Initialized");
        this.cacheDOM();
        this.bindEvents();
        this.loadPresets();
    },

    cacheDOM: function () {
        this.creativitySlider = document.getElementById('creativity');
        this.creativityValue = document.getElementById('creativity-val');
        this.presetSelect = document.getElementById('preset-select');
        this.presetDesc = document.getElementById('preset-description');
        this.tagsInput = document.getElementById('tags-input');
    },

    bindEvents: function () {
        if (this.creativitySlider) {
            this.creativitySlider.addEventListener('input', (e) => {
                this.creativityValue.textContent = e.target.value;
                // Optional: Save on change
                // this.saveSettings();
            });
            this.creativitySlider.addEventListener('change', () => this.saveSettings());
        }

        if (this.presetSelect) {
            this.presetSelect.addEventListener('change', (e) => {
                this.updateDescription(e.target.value);
                // updateDescription calls saveSettings, so we are good.
            });
        }

        if (this.tagsInput) {
            this.tagsInput.addEventListener('change', () => {
                this.saveSettings();
            });
            // Also save on blur to be safe
            this.tagsInput.addEventListener('blur', () => {
                this.saveSettings();
            });
        }
    },

    loadPresets: function () {
        // Load presets from the shared global variable (loaded via script tag)
        if (typeof window.stylePresets === 'undefined') {
            console.error("Error: stylePresets not loaded. Ensure stylePresets.js is included.");
            this.presetSelect.innerHTML = '<option disabled>Presets not available</option>';
            return;
        }

        const presets = window.stylePresets;

        // Clear existing options
        this.presetSelect.innerHTML = '';

        presets.forEach(preset => {
            const option = document.createElement('option');
            // Using preset_name as value.
            option.value = preset.preset_name;
            option.textContent = preset.preset_name.replace(/_/g, ' '); // Beautify display name
            option.dataset.description = preset.description;
            this.presetSelect.appendChild(option);
        });

        // Trigger change to set initial description
        if (presets.length > 0) {
            this.updateDescription(presets[0].preset_name);
        }
    },

    updateDescription: function (presetId) {
        const selectedOption = this.presetSelect.querySelector(`option[value="${presetId}"]`);
        if (selectedOption) {
            this.presetDesc.value = selectedOption.dataset.description;
            this.saveSettings();
        } else {
            this.presetDesc.value = "";
        }
    },

    saveSettings: function () {
        // Get user ID from Telegram WebApp
        if (!window.Telegram || !window.Telegram.WebApp || !window.Telegram.WebApp.initDataUnsafe.user) {
            console.warn("Settings not saved: Not running inside Telegram or user info missing.");
            return;
        }

        const userId = window.Telegram.WebApp.initDataUnsafe.user.id;

        // Gather all settings from DOM
        const presetName = this.presetSelect.value;
        const creativity = this.creativitySlider.value;
        const tags = this.tagsInput.value;

        console.log(`Saving settings for user ${userId}: Preset=${presetName}, Creativity=${creativity}, Tags=${tags}`);

        fetch('/api/settings', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                userId,
                presetName,
                creativity,
                tags
            })
        })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    console.log("Settings saved successfully");
                } else {
                    console.error("Failed to save settings:", data.error);
                }
            })
            .catch(err => {
                console.error("Error saving settings:", err);
            });
    }
};

// Export for use in app.js if using modules, or just global if simple script inclusion.
// For simple usage without bundlers, we can attach to window or just leave it available.
window.settingsTab = settingsTab;