👼 🏙️ ✅ साप्ताहिक अनुसूची संपादक 🌈 🈹 🔍

मैं लिख रहा हूं क्योंकि एक साल में तीसरी बार मैं इस काम के लिए आया हूं। हर बार, यह सब आश्चर्यजनक रूप से रचनात्मक समाधान के साथ शुरू होता है, और अंत में उस सिस्टम पर आता है जिसके बारे में मैं बात करता हूं।

लक्ष्य एक साप्ताहिक शेड्यूल बनाना और बनाए रखना है, जैसे कि स्कूल सबक अनुसूची या डॉक्टरों और अधिकारियों का शेड्यूल। स्लॉट का एक सेट है, प्रत्येक स्लॉट साप्ताहिक शेड्यूल में एक जगह है जिसमें विभिन्न अतिरिक्त पैरामीटर हैं, जैसे कि कैबिनेट नंबर, कर्मचारी का नाम। एक पूर्ण इतिहास के साथ एक लचीली प्रणाली का निर्माण करना आवश्यक है जो समस्याओं को हल कर सकती है जैसे: गर्मी की शुरुआत से एक अलग शेड्यूल बनाना, अगले 3 हफ्तों के लिए शिक्षक को बदलें, छुट्टी के कारण शुक्रवार से शनिवार तक शेड्यूल को स्थानांतरित करें।

मैं इस बारे में लिखूंगा कि वे आमतौर पर क्या ठोकर खाते हैं और इसे कैसे हल करते हैं, मैं पट्टी को पेंट करने की समस्या को हल करूंगा, और फिर मैं नोड / सीक्वेल पर एक साधारण बैकएंड का उदाहरण दूंगा और vue / vxx / vuetify / nuxt पर एक साधारण फ्रंटेंड के साथ समाप्त करूंगा, जहां आप एक माउस के साथ यह सब खींच सकते हैं और देख सकते हैं। यह कैसे काम करता है

कोड गिथब पर पोस्ट किए गए हैं , यहां तैनात हैं ।

दानेदार परिवर्तन

एक स्लॉट है, किसी तरह डेटाबेस में प्रस्तुत किया गया है। संपादन की आवश्यकता है। तो आपको खेतों के साथ कुछ फॉर्म निकालना होगा, और बटन "सेव" के नीचे। आखिरकार, सब कुछ आमतौर पर उसी तरह व्यवस्थित होता है। हालांकि, इस मामले में नहीं। फॉर्म पर विचार करें:

सहेजते समय, स्लॉट के सभी डेटा को अपडेट किया जाता है, इतिहास खो जाता है। आइए ऐसे तत्व को जोड़ने का प्रयास करें:

फिर से उदाहरण के लिए, 4 जून को, सोमवार को, पहले कार्यालय से दूसरे में कक्षाओं का एक दिन का स्थानांतरण दर्ज किया गया था। फिर एक नई मांग आती है - 28 मई से, सबक हमेशा 19:00 के बजाय 20:00 बजे शुरू होगा। हम फॉर्म को खोलते हैं, समय बदलते हैं, 28 तारीख से और हमेशा के लिए इंगित करते हैं और ... सभी फ़ील्ड, कैबिनेट नंबर के साथ, सर्वर पर जाते हैं। 4 जून को अस्थायी परिवर्तन की अनुमति है। इस फ़ॉर्म का उपयोग करना, यह निर्धारित करना असंभव है कि उपयोगकर्ता किन क्षेत्रों में अंतराल बदलना चाहता है, क्योंकि सभी फ़ील्ड सभी पर भेजे जाते हैं।

विचार यह है कि प्रत्येक नियम अपने स्वयं के अंतराल के साथ दूसरों के स्वतंत्र रूप से बदलता है। स्लॉट को एक-आयामी मापदंडों के एक सेट द्वारा परिभाषित किया गया है, प्रत्येक पैरामीटर में नियमों के एक सेट द्वारा परिवर्तित इतिहास है। प्रत्येक नियम में एक मूल्य, एक शुरुआत और समाप्ति तिथि होती है। चूंकि यह एक साप्ताहिक कैलेंडर है, तारीखें एक सप्ताह तक इंगित करने के लिए पर्याप्त हैं, YYYYWW।

ऐसा लग सकता है कि स्लॉट को संपादित करना अब बहुत जटिल है - कई क्षेत्रों को बदलने के लिए, आपको प्रत्येक फ़ील्ड का चयन करने, फ़ॉर्म खोलने, एक मान और अंतराल डालने की आवश्यकता है। हालांकि, व्यवहार में, कई क्षेत्रों को बदलना एक दुर्लभ स्थिति साबित हुई है। बहुत अधिक लगातार एक बार में कई स्लॉट का बल्क-अपडेट है। उदाहरण के लिए, बीमारी के कारण शिक्षक की अनुपस्थिति को कम करने के लिए, आपको उसके सभी ब्लॉकों का चयन करने की आवश्यकता है, कर्मचारियों के काम की स्थिति को चिकित्सा अवकाश में रखें, और फिर उसी ब्लॉकों के लिए एक प्रतिस्थापन शिक्षक का चयन करें। मामले में एन स्लॉट्स के लिए एन क्रियाओं के बजाय केवल 2 क्रियाएं, जैसे कि वे पारंपरिक रूप के माध्यम से निर्दिष्ट किए गए थे। मैं वर्तमान में काम कर रहा हूँ, इस पर इस तरह दिखता है:

पेंटिंग स्ट्रिप्स का कार्य

विभिन्न रंगों में चित्रित कोशिकाओं से मिलकर एक पट्टी पर विचार करें। प्रत्येक कोशिका एक सप्ताह है, प्रत्येक रंग एक अर्थ है। एक नया रंग आता है और अंतराल जिसमें इसे लागू करने के लिए, उन्हें शीर्ष पर पुनरावृत्ति करने की आवश्यकता होती है। डेटा स्तर पर, इसका मतलब है कि आपको पूरी तरह से ओवरलैप किए गए अंतराल को हटाने की जरूरत है, आंशिक रूप से ओवरलैप किए गए अंतराल को बदलें, एक नया अंतराल जोड़ें, आसन्न एक-रंग अंतराल को एक में मिलाएं। अंतिम परिणाम में अंतराल शामिल होना चाहिए जो ओवरलैप नहीं होते हैं।

परिणाम: [{हटाएं, आईडी: 2}, {अपडेट, आईडी: 1, डेटा: {से: 5}}, {अपडेट, आईडी: 3, डेटा: {से: 16}}, {डालें, डेटा: {से : 6, से: 15, मान: wed}}]

यह एक सरल कार्य है, लेकिन यहाँ कुछ अनदेखा करना आसान है। यहां एक समाधान और परीक्षणों के साथ एक अलग भंडार है। http://timeblock-rules.rag.lt - यहां आप जांच सकते हैं कि यह कैसे काम करता है और छायांकन के साथ खेलता है।

बैकएंड

नियम ओवरलैप नहीं करते हैं, इसलिए नियमों में से सबसे सरल `चयन * जहां से = = सप्ताह और (शून्य या से = = सप्ताह) है` `निर्दिष्ट सप्ताह के लिए आवश्यक नियमों का चयन करने के लिए पर्याप्त है। यहाँ नोड / सीक्वल पर एक सरल उदाहरण बैकएंड है। यह c वादों और async / प्रतीक्षा की संयुक्त शैली का उपयोग करता है, जिसके बारे में आप मेरे एक अन्य लेख में पढ़ सकते हैं।

यहां वह क्रिया है जो निर्दिष्ट सप्ताह के लिए नियमों का चयन करती है:

routes.get('/timeblocks', async (req, res) => { try { ... validation ... await Rule .findAll({ where: { from: {$or: [{$lte: req.query.week}, null]}, to: {$or: [{$gte: req.query.week}, null]} } }) .then( sendSuccess(res, 'Calendar data extracted.'), throwError(500, 'sequelize error') ) } catch (error) { catchError(res, error) } })

और नियम बदलने के लिए यहाँ PATCH है:

 routes.patch('/timeblocks/:id(\\d+)', async (req, res) => { try { ... validation ... const initialRules = await Rule .findAll({ where: { timeblock_id: req.params.id, type: {$in: req.params.rules.map(rule => rule.type)} } }).catch(throwError(500, 'sequelize error')) const promises = [] req.params.rules.forEach(rule => { // This function defined in stripe coloring repo, https://github.com/Kasheftin/timeblock-rules/blob/master/src/fn/rules.js; const actions = processNewRule(rule, initialRules[rule.type] || []) actions.forEach(action => { if (action.type === 'delete') { promises.push(Rule.destroy({where: {id: action.id}})) } else if (action.type === 'update') { promises.push(Rule.update(action.data, {where: {id: action.id}})) } else if (action.type === 'insert') { promises.push(Rule.build({...action.data, timeblock_id: rule.timeblock_id, type: rule.type}).save()) } }) }) Promise.all(promises).then( result => sendSuccess(res, 'Timeblock rules updated.')() ) } catch (error) { catchError(res, error) } })

यह बैकएंड का सबसे कठिन वैचारिक हिस्सा है, बाकी भी सरल है।

सवाल यह है कि स्लॉट्स को कैसे हटाया जाए। इस मामले में, पूरा इतिहास संग्रहीत किया जाता है, कुछ भी नहीं हटाया जाता है। एक स्थिति फ़ील्ड है जिसे खोला जा सकता है, अस्थायी रूप से बंद और बंद किया जा सकता है। आगंतुक सक्रिय स्लॉट और अस्थायी रूप से निष्क्रिय देखते हैं, उत्तरार्द्ध में आमतौर पर व्यवस्थापक इस बारे में एक टिप्पणी लिखते हैं कि कोई गतिविधि क्यों नहीं है। समय के साथ, बहुत सारे बंद स्लॉट हैं, और स्थिति को सरल बनाने के लिए, यह एक और संपत्ति जैसे कि एक स्कूल वर्ष और स्लॉट्स को संपादित करते समय केवल वर्तमान स्कूल वर्ष दिखाने के लिए उपयोगी है।

दृश्यपटल

कोड इस रिपॉजिटरी में है , यह nuxt पर एक साधारण एक-पृष्ठ साइट है। वास्तव में, ssr के साथ कुछ परेशानियां हैं (उदाहरण के लिए, मैं विस्तार से विश्लेषण करता हूं कि कैसे nuxt पर प्रमाणीकरण लिखना है), लेकिन इस पर सरल अनुप्रयोग बहुत जल्दी लिखे जाते हैं।

यहाँ एक पृष्ठ के लिए कोड है:

 export default { components: {...}, fetch ({app, route, redirect, store}) { if (!route.query.week) { const newRoute = app.router.resolve({query: {...route.query, week: moment().format('YYYYWW')}}, route) return redirect(newRoute.href) } return Promise.resolve() .then(() => store.dispatch('calendar/set', {week: route.query.week})) .then(() => store.dispatch('calendar/fetch')) }, computed: { week () { return this.$store.state.calendar.week } }, watch: { week (week) { this.$router.push({ query: { ...this.$route.query, week } }) this.$store.dispatch('calendar/fetch') } } }

भ्रूण विधि सर्वर और क्लाइंट पर काम करती है, वर्तमान सप्ताह में पुनर्निर्देशित करती है और एक कैलेंडर का अनुरोध करती है। जब सप्ताह बदलता है, तो डेटा फिर से अनुरोध किया जाता है।

ओवरलैपिंग स्लॉट्स के साथ क्या करना है? उत्तर व्यावसायिक तर्क पर निर्भर करता है, उदाहरण के लिए, आपको सर्वर सत्यापन की आवश्यकता हो सकती है जो ओवरले को प्रतिबंधित करता है। इस मामले में, ओवरले की अनुमति है, और एक सुंदर चित्र प्राप्त करने के लिए, इस तरह के स्लॉट को एक दूसरे के बगल में आधी चौड़ाई खींची जाती है। लेआउट जोड़ें और यह देखो:

बाकी सब कुछ नहीं विचारों के साथ सादे जावास्क्रिप्ट है। ब्लॉक पर मूसडाउन करके, खींचें और ड्रॉप शुरू होता है। मूसमव और माउसअप इवेंट्स को पूरी विंडो पर लटका दिया जाता है। ड्रैग एंड ड्रॉप 200ms की देरी से शुरू होता है ताकि क्लिक से ड्रैग को अलग किया जा सके। कंटेनर के पैरामीटर जिसमें ड्रॉप को ट्रैक किया जाता है, अग्रिम में गणना की जाती है, क्योंकि getBoundingClientRect प्रत्येक मूसमोव के लिए एक ऑपरेशन करने के लिए बहुत भारी है। मुझे दो रूपों को बनाना था - एक बनाने के लिए (वर्तमान सप्ताह से शुरू होने वाले समय में सभी नियमों को स्थापित करना), दूसरे में स्लॉट के लिए दानेदार परिवर्तन।

http://calendar.rag.lt - यहां आप जांच सकते हैं कि सब कुछ कैसे काम करता है।

लेख के लिंक

http://calendar.rag.lt - तैनात nuxt अनुप्रयोग;
http://calendar-api.rag.lt - विस्तृत बैकेंड;
http://timeblock-rules.rag.lt - पट्टी को भरने के कार्य के लिए विस्तृत परीक्षण;
https://github.com/Kasheftin/calendar-demo-frontend - frontend source;
https://github.com/Kasheftin/calendar-demo-backend - बैकेंड स्रोत
https://github.com/Kasheftin/timeblock-rules - कार्य का स्रोत कोड;
https://codeburst.io/nuxt-authentication-from-scratch-a7a024c7201b - खरोंच से nuxt पर प्राधिकरण ट्यूटोरियल;
https://codeburst.io/node-express-async-code-and-error-handling-121b1f0e44ba - नोड / एक्सप्रेस पर एसिंक्रोनस बैकेंड कोड में त्रुटि से निपटने;
https://codeburst.io/weekly-schedule-editor-concept-8df79ab83305 - अंग्रेजी में एक ही लेख।

साप्ताहिक अनुसूची संपादक

दानेदार परिवर्तन

पेंटिंग स्ट्रिप्स का कार्य

बैकएंड

दृश्यपटल

लेख के लिंक

More articles: