sheddy1010/remote-task-execution-system-rtes
0
1// Main Application Script2class RTESApp {3 constructor() {4 this.currentProgress = {5 applications: 0,6 tasks: 0,7 earnings: 08 };9 10 this.platforms = [11 'telus',12 'datanotation',13 'utest',14 'usertesting',15 'prolific',16 'outlier',17 'oneforma',18 'dscout'19 ];20 21 this.init();22 }23 24 init() {25 this.loadProgress();26 this.setupEventListeners();27 this.updateDashboard();28 this.setupPlatformNavigation();29 }30 31 loadProgress() {32 const saved = localStorage.getItem('rtes-progress');33 if (saved) {34 this.currentProgress = JSON.parse(saved);35 }36 }37 38 saveProgress() {39 localStorage.setItem('rtes-progress', JSON.stringify(this.currentProgress));40 }41 42 setupEventListeners() {43 // Update progress button44 const updateBtn = document.getElementById('update-progress');45 if (updateBtn) {46 updateBtn.addEventListener('click', () => this.showProgressModal());47 }48 49 // Platform navigation50 document.addEventListener('click', (e) => {51 const platformLink = e.target.closest('[data-platform]');52 if (platformLink) {53 e.preventDefault();54 const platform = platformLink.dataset.platform;55 this.navigateToPlatform(platform);56 }57 });58 59 // Checklist items60 document.addEventListener('change', (e) => {61 if (e.target.type === 'checkbox' && e.target.closest('.checklist-item')) {62 const item = e.target.closest('.checklist-item');63 if (e.target.checked) {64 item.classList.add('checked');65 this.currentProgress.tasks++;66 this.saveProgress();67 this.updateDashboard();68 } else {69 item.classList.remove('checked');70 this.currentProgress.tasks = Math.max(0, this.currentProgress.tasks - 1);71 this.saveProgress();72 this.updateDashboard();73 }74 }75 });76 }77 78 updateDashboard() {79 // Update progress bars80 const appProgress = document.getElementById('app-progress');81 const taskProgress = document.getElementById('task-progress');82 const appCount = document.getElementById('app-count');83 const taskCount = document.getElementById('task-count');84 85 if (appProgress && taskProgress && appCount && taskCount) {86 const appPercentage = Math.min((this.currentProgress.applications / 10) * 100, 100);87 const taskPercentage = Math.min((this.currentProgress.tasks / 15) * 100, 100);88 89 appProgress.style.width = `${appPercentage}%`;90 taskProgress.style.width = `${taskPercentage}%`;91 92 appCount.textContent = `${this.currentProgress.applications}/10`;93 taskCount.textContent = `${this.currentProgress.tasks}/15`;94 }95 }96 97 showProgressModal() {98 const modal = document.createElement('div');99 modal.className = 'fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4';100 modal.innerHTML = `101 <div class="bg-secondary-800 rounded-xl p-6 max-w-md w-full border border-secondary-700 fade-in">102 <div class="flex justify-between items-center mb-6">103 <h3 class="text-xl font-semibold">Update Weekly Progress</h3>104 <button class="text-secondary-400 hover:text-secondary-300" onclick="this.closest('.fixed').remove()">105 <i data-feather="x"></i>106 </button>107 </div>108 109 <div class="space-y-4">110 <div>111 <label class="block text-sm font-medium mb-2">Applications Submitted</label>112 <input type="number" id="app-input" min="0" max="20" value="${this.currentProgress.applications}"113 class="w-full bg-secondary-700 border border-secondary-600 rounded-lg px-4 py-2 focus:ring-2 focus:ring-primary-500 focus:border-transparent">114 </div>115 116 <div>117 <label class="block text-sm font-medium mb-2">Tasks Completed</label>118 <input type="number" id="task-input" min="0" max="30" value="${this.currentProgress.tasks}"119 class="w-full bg-secondary-700 border border-secondary-600 rounded-lg px-4 py-2 focus:ring-2 focus:ring-primary-500 focus:border-transparent">120 </div>121 122 <div>123 <label class="block text-sm font-medium mb-2">Earnings (USD)</label>124 <input type="number" id="earnings-input" min="0" step="0.01" value="${this.currentProgress.earnings}"125 class="w-full bg-secondary-700 border border-secondary-600 rounded-lg px-4 py-2 focus:ring-2 focus:ring-primary-500 focus:border-transparent">126 </div>127 </div>128 129 <div class="flex gap-3 mt-8">130 <button onclick="this.closest('.fixed').remove()"131 class="flex-1 py-2 px-4 border border-secondary-600 text-secondary-300 rounded-lg hover:bg-secondary-700 transition duration-200">132 Cancel133 </button>134 <button id="save-progress-btn"135 class="flex-1 py-2 px-4 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition duration-200">136 Save Progress137 </button>138 </div>139 </div>140 `;141 142 document.body.appendChild(modal);143 feather.replace();144 145 modal.querySelector('#save-progress-btn').addEventListener('click', () => {146 this.currentProgress.applications = parseInt(document.getElementById('app-input').value) || 0;147 this.currentProgress.tasks = parseInt(document.getElementById('task-input').value) || 0;148 this.currentProgress.earnings = parseFloat(document.getElementById('earnings-input').value) || 0;149 150 this.saveProgress();151 this.updateDashboard();152 modal.remove();153 154 this.showToast('Progress updated successfully', 'success');155 });156 }157 158 setupPlatformNavigation() {159 // Set active platform based on URL parameter160 const urlParams = new URLSearchParams(window.location.search);161 const platform = urlParams.get('platform');162 163 if (platform && this.platforms.includes(platform)) {164 this.highlightActivePlatform(platform);165 }166 }167 168 highlightActivePlatform(platform) {169 document.querySelectorAll('[data-platform]').forEach(el => {170 el.classList.remove('active');171 });172 173 const activeEl = document.querySelector(`[data-platform="${platform}"]`);174 if (activeEl) {175 activeEl.classList.add('active');176 }177 }178 179 navigateToPlatform(platform) {180 if (this.platforms.includes(platform)) {181 window.location.href = `/profile-vault.html?platform=${platform}`;182 }183 }184 185 showToast(message, type = 'info') {186 const toast = document.createElement('div');187 toast.className = `fixed top-4 right-4 px-6 py-3 rounded-lg shadow-lg z-50 fade-in ${188 type === 'success' ? 'bg-green-500/20 border border-green-500/30 text-green-300' :189 type === 'error' ? 'bg-red-500/20 border border-red-500/30 text-red-300' :190 'bg-primary-500/20 border border-primary-500/30 text-primary-300'191 }`;192 toast.textContent = message;193 194 document.body.appendChild(toast);195 196 setTimeout(() => {197 toast.classList.add('opacity-0', 'transition-opacity', 'duration-300');198 setTimeout(() => toast.remove(), 300);199 }, 3000);200 }201 202 // Platform-specific content loader203 async loadPlatformContent(platform) {204 try {205 // In a real app, this would fetch from an API206 const content = this.getPlatformTemplate(platform);207 return content;208 } catch (error) {209 console.error('Error loading platform content:', error);210 return this.getErrorTemplate();211 }212 }213 214 getPlatformTemplate(platform) {215 const templates = {216 telus: {217 name: 'TELUS International',218 description: 'AI Training Specialist and Data Annotation',219 roles: ['AI Training Specialist', 'Data Annotation Analyst', 'Search Engine Evaluator', 'Social Media Evaluator', 'Linguistic Specialist']220 },221 utest: {222 name: 'uTest',223 description: 'Software Testing and Quality Assurance',224 roles: ['Functional Tester', 'Usability Tester', 'Security Tester', 'Performance Tester', 'Localization Tester']225 }226 // Add more templates for other platforms227 };228 229 return templates[platform] || templates.telus;230 }231 232 getErrorTemplate() {233 return {234 name: 'Platform Not Found',235 description: 'The requested platform information is not available.',236 roles: []237 };238 }239}240 241// Initialize app when DOM is loaded242document.addEventListener('DOMContentLoaded', () => {243 window.app = new RTESApp();244});245 246// Utility functions247function formatCurrency(amount) {248 return new Intl.NumberFormat('en-US', {249 style: 'currency',250 currency: 'USD'251 }).format(amount);252}253 254function formatDate(date) {255 return new Intl.DateTimeFormat('en-US', {256 year: 'numeric',257 month: 'short',258 day: 'numeric'259 }).format(new Date(date));260}261 262// Platform data263const platformData = {264 telus: {265 earningsRange: '$14-20/hour',266 approvalTime: '2-4 weeks',267 payoutMethod: 'PayPal, Payoneer',268 minPayout: '$10'269 },270 utest: {271 earningsRange: '$5-50/task',272 approvalTime: '1-2 weeks',273 payoutMethod: 'PayPal, Skrill',274 minPayout: '$10'275 },276 datanotation: {277 earningsRange: '$15-25/hour',278 approvalTime: '1-3 weeks',279 payoutMethod: 'PayPal',280 minPayout: '$20'281 },282 usertesting: {283 earningsRange: '$10-60/test',284 approvalTime: '1-2 weeks',285 payoutMethod: 'PayPal',286 minPayout: '$10'287 }288};289 290// Export for use in other files291if (typeof module !== 'undefined' && module.exports) {292 module.exports = { RTESApp, platformData, formatCurrency, formatDate };293}