|
1 | | -<h1>CS-Queue-Message-Maker📋</h1> |
2 | | -<p> |
3 | | - Hello! A year ago, I was in the queue for a web development course for |
4 | | - <a href="https://github.com/cs-internship" target="_blank" |
5 | | - >CS Internship</a |
6 | | - > |
7 | | - program, observing the group admins sending updates to the queue every week. |
8 | | - I always thought there must be a professional tool to organize and arrange |
9 | | - the queue efficiently. I joined the mentors' group, and now I was the admin |
10 | | - sending queue updates. It seemed strange to me that this process was |
11 | | - entirely manual, with no tool available for it. I realized that if I were |
12 | | - asked to move someone from the front to the end of the queue, I would need |
13 | | - to manually adjust the numbers of everyone behind them, ensuring no mistakes |
14 | | - are made, and the spacing is consistent. |
15 | | -</p> |
16 | | -<p> |
17 | | - A few weeks ago, I dedicated time to developing a solution for this issue, |
18 | | - and now the project is complete. The program is named |
19 | | - CS-Queue-Message-Maker, designed to streamline the process of creating queue |
20 | | - updates. The program has a simple interface, and you can easily understand |
21 | | - how to use it by reading the included "How to use" guide within the program. |
22 | | -</p> |
23 | | -<img src="./Assets/imgs/README-GIF.gif" alt="how-to-use-gif" style="width: 100%" /> |
24 | | -<h2>How to Use CS-Queue-Message-Maker:</h2> |
25 | | -<ol> |
26 | | - <li> |
27 | | - <p><strong>Access the live version of the program:</strong></p> |
28 | | - <ul> |
29 | | - <li> |
30 | | - To start, access the live version of the program using |
31 | | - <a |
32 | | - target="_new" |
33 | | - href="https://cs-internship.github.io/CS-Queue-Message-Maker/" |
34 | | - >this link</a |
35 | | - >. |
36 | | - </li> |
37 | | - </ul> |
38 | | - </li> |
39 | | - <li> |
40 | | - <p><strong>Copy the desired queue:</strong></p> |
41 | | - <ul> |
42 | | - <li> |
43 | | - Copy your desired queue from the "CS Internship - Queue" group. |
44 | | - </li> |
45 | | - </ul> |
46 | | - </li> |
47 | | - <li> |
48 | | - <p><strong>Paste into the Input box:</strong></p> |
49 | | - <ul> |
50 | | - <li> |
51 | | - Paste the copied content into the Input box and click the Submit |
52 | | - button. |
53 | | - </li> |
54 | | - </ul> |
55 | | - </li> |
56 | | - <li> |
57 | | - <p><strong>Edit List Features:</strong></p> |
58 | | - <ul> |
59 | | - <li> |
60 | | - In the Edit List box, each member has a row containing their |
61 | | - queue number, full name, Telegram ID, and two buttons to change |
62 | | - the person's position in the queue. |
63 | | - </li> |
64 | | - </ul> |
65 | | - </li> |
66 | | - <li> |
67 | | - <p><strong>Change Member Positions:</strong></p> |
68 | | - <ul> |
69 | | - <li> |
70 | | - Downward arrow button: Moves the member to the end of the queue. |
71 | | - </li> |
72 | | - <li>X button: Removes the member from the queue.</li> |
73 | | - </ul> |
74 | | - </li> |
75 | | - <li> |
76 | | - <p><strong>Add a New Member:</strong></p> |
77 | | - <ul> |
78 | | - <li> |
79 | | - In the green box at the bottom of the Edit List, enter the name |
80 | | - and Telegram ID of the new member and click the Add button to |
81 | | - add them to the end of the queue. |
82 | | - </li> |
83 | | - </ul> |
84 | | - </li> |
85 | | - <li> |
86 | | - <p><strong>Click the Copy button and Save the Update:</strong></p> |
87 | | - <ul> |
88 | | - <li> |
89 | | - After making changes, click the Copy button in the Output box to |
90 | | - save the updated queue text to the clipboard. |
91 | | - </li> |
92 | | - </ul> |
93 | | - </li> |
94 | | - <li> |
95 | | - <p><strong>Paste into the Queue Group:</strong></p> |
96 | | - <ul> |
97 | | - <li> |
98 | | - Paste the updated queue text into the "CS Internship - Queue" |
99 | | - group. |
100 | | - </li> |
101 | | - </ul> |
102 | | - </li> |
103 | | -</ol> |
104 | | -<div>Happy queuing! 🚀✨</div> |
| 1 | +# CS-Queue-Message-Maker |
| 2 | + |
| 3 | +**CS-Queue-Message-Maker** is a specialized tool designed for the CS Internship program to manage and update queue messages efficiently. It provides a simple and intuitive interface for creating, editing, and exporting queue messages, ensuring consistent formatting and error-free ordering. |
| 4 | + |
| 5 | +> For background on the motivation behind this tool, see [this Telegram post](https://t.me/mentor_world/438). |
| 6 | +
|
| 7 | + |
| 8 | + |
| 9 | +## Project Overview |
| 10 | + |
| 11 | +CS-Queue-Message-Maker streamlines queue management for the CS Internship program. It allows admins to maintain an ordered list of participants, customize message formats, preview updates in real time, and export them for sending to groups. The tool ensures that queue updates are accurate and consistent, reducing manual effort and mistakes. |
| 12 | + |
| 13 | +## Features |
| 14 | + |
| 15 | +- Add, edit, and remove queue members |
| 16 | +- Customize message formats for output |
| 17 | +- Real-time preview of queue messages |
| 18 | +- Export messages to various formats |
| 19 | +- Responsive and user-friendly interface |
| 20 | +- Supports Persian fonts and RTL layouts |
| 21 | +- Backup and restore queue data |
| 22 | + |
| 23 | +## Technologies Used |
| 24 | + |
| 25 | +- **TypeScript** |
| 26 | +- **JavaScript (ES6)** |
| 27 | +- **HTML5** |
| 28 | +- **SCSS/CSS** |
| 29 | + |
| 30 | +## Installation Instructions |
| 31 | + |
| 32 | +> **Prerequisites:** |
| 33 | +> - A modern web browser |
| 34 | +
|
| 35 | +Clone the repository: |
| 36 | + |
| 37 | +```bash |
| 38 | +git clone https://github.com/Ali-Sdg90/CS-Queue-message-maker.git |
| 39 | +cd CS-Queue-message-maker |
| 40 | +``` |
| 41 | + |
| 42 | +Open `index.html` in your browser to start using the tool. |
| 43 | +No server setup is required; open the index.html directly in your browser. |
| 44 | + |
| 45 | +## Folder/File Structure |
| 46 | + |
| 47 | +``` |
| 48 | +CS-Queue-message-maker/ |
| 49 | +│ |
| 50 | +├── Assets/ |
| 51 | +│ ├── backup/ # Backup files for queue data |
| 52 | +│ ├── fonts/ # Font files (Vazirmatn) |
| 53 | +│ └── imgs/ # Images and icons |
| 54 | +│ |
| 55 | +├── JS/ # Compiled JavaScript files |
| 56 | +├── TS/ # TypeScript source files |
| 57 | +│ ├── addNewMember.ts # Add new members to the queue |
| 58 | +│ ├── convertInput.ts # Parse and convert input data |
| 59 | +│ ├── customScaleCalc.ts # UI scaling calculations |
| 60 | +│ ├── demoList.ts # Demo/sample queue data |
| 61 | +│ ├── index.ts # App entry point and main logic |
| 62 | +│ ├── memberActionBtns.ts # Member action button logic |
| 63 | +│ └── output.ts # Generate and format queue output |
| 64 | +├── Style/ # SCSS and CSS stylesheets |
| 65 | +├── index.html # Main HTML entry point |
| 66 | +├── LICENSE # License file |
| 67 | +└── README.md # Project documentation |
| 68 | +``` |
| 69 | + |
| 70 | +## Contribution Guidelines |
| 71 | + |
| 72 | +1. Fork the repository |
| 73 | +2. Create a new branch (`git checkout -b feature/your-feature`) |
| 74 | +3. Commit your changes (`git commit -am 'Add new feature'`) |
| 75 | +4. Push to your branch (`git push origin feature/your-feature`) |
| 76 | +5. Open a Pull Request describing your changes |
| 77 | + |
| 78 | +> Follow the existing code style and include tests or demos if applicable. |
| 79 | +
|
| 80 | +## License |
| 81 | + |
| 82 | +This project is licensed under the [MIT License](LICENSE). |
| 83 | + |
| 84 | +## Contact / Author Info |
| 85 | + |
| 86 | +- **Author:** [Ali Sadeghi](https://github.com/AliSdg90) |
| 87 | +- **Developed for:** [CS Internship Program](https://github.com/cs-internship) |
| 88 | + |
0 commit comments