Giter VIP home page Giter VIP logo

time-table-creator-reactjs's Introduction

This repository contains frontend codes of the web application.

This UI created using ReactJS and it use some API requests to communicate with backend.

First version of this project is created using HTML, CSS & JS which is available here

Backend Code is created using Java. It use genetic algorithm to create a time table and uses a Browser Compoent to show the UI.

Bowser Component code is avaliable here Backend codes is available here

How to set up the project (without any released version of this app)?

Step 1: First Fork this repositories:
Time-Table-Creator-ReactJS (UI)
TTSBrowserComponent (Browser Component)
TimeTableScheduler-Backend (Bankend Java Code)

Step 2: Then use Intellij IDEA or any other framework to build a jar file of the TTSBrowserComponent.

Step 3: Then copy the jar file of TTSBrowserComponent to Forked TimeTableScheduler-Backend's main directory.

TimeTableScheduler-Backend-Main-Directory

Step 4: Now open forked Time-Table-Creator-ReactJS and build the product using command like npm run build

Step 5: Then Copy the build product to TimeTableScheduler-Backend's web directory. (If web directory is not present in TimeTableScheduler-Backend then create one)

Step 6: Now you just need to run the TimeTableScheduler-Backend's main.java file using Intellij IDEA or any code editor or framework.

How to use this UI?

First you have to add all the subjects on Subjects tab. To add a subject you need to enter all the required values:

  1. Subject Name - the unique subject code or name
  2. Semester - the class or semester in which the subject is taken
  3. Classroom - the room no where the class will be taken (you can add multiple classroom pressing enter key after typing each classroom) (don't forget to press enter after typing the classroom)
  4. Lecture Count - number of classes of that subject is need to take in a week (default value 4)
  5. Subject Type - if the subject is practical or theory (default value theory)
  6. Should be Taken by Teacher or Not - if subject is taken by teacher then make it yes either make it no (default value yes)

Subjects-Tab

After adding all the subject next you have to add Teachers on Teachers tab. To add a teacher you need to enter all the required values:

  1. Teacher Name - teacher name which is have to be a unique
  2. Subjects - type all the subject names pressing enter key after typing each subject (subject must need to be present in subjects tab)
  3. Available Time - when teacher is available to take classes (if you leave it blank means you did't select any time then it will be consider as teacher is available all the time)

Teachers-Tab

After adding all the subjects and teachers you can generate the time table from Time Tables tab. To generate the time table click on Auto fill using AI button. Also you can manually fill the time table.

These are the Constraints that are used in our AI system to generate the time table:

Hard (Mandatory) Constraints include :

  1. One practical subject class per week
  2. All teachers alloted within availability
  3. Subjects alloted their required no. of lectures in all sections
  4. Practical subjects not allocated same room at same time
  5. Two teachers not teaching a semester-section same subject (theory only)
  6. Two teachers/subject not at a semester-section at same time (theory only)
  7. Teachers only teaching one semster-section at a time
  8. Practical subjects assigned consecutive periods
  9. Practical teachers must be available during all practical subjects
  10. All teachers assigned atleast one subject in a section class
  11. All teachers get assigned subjects known to them
  12. Theory teachers also teaching practical
  13. Teachers count for practical class equals lecture count

Soft (Preffered) Constraints include :

  1. Practical Lab in end of second half

How to use fill manually feature

1. You have to click on Fill Manually button then
2. Click on periods after that a popup will appear and
3. From there you can select the subject and teacher for that period (you can select multiple teachers but only one subject can be selected),
you can also use this feature after using the Auto fill using AI method.

TimeTable-Tab

TimeTable-FillManuallyPopUp

After generating the time table you can use the features of Dashboard Tab from here you can see

  1. The time tables for a particular teacher
  2. You can see how many classes a perticular teacher is busy taking classes per day in class unit (for theory the value is 1 and for practical the value is 3).
  3. You can see Total number of
    i. Subjects
    ii. Teachers
    iii. Practical Subjects
    iv. Theory Subjects
    v. Subjects (Taken By Teachers)
    vi. Subjects (Not Taken By Teachers)

Dashboard-Tab

If you want to customize time table more like defining when will be breaks for each semesters, number of periods per day, number of section per semester etc. then you can do that from Time Table Structure Tab.

Time-Table-Structure-Tab

Also we have included files or states by using this feature you can create multiple files of teachers, subjects & time tables you can create a new file also delete a file from Files Tab. You can open or change the files from the top left side of the page and also you can see the currently open or used file. To change a state or file you only have to select that file from the drop down.

Files-Tab

Report a Bug

If you encounter any bug please try to contact us from the contact us tab.
In contact us tab you can find our emails and other platforms links from there you can contact us
(Please try to explain the bug in details and try to provide screenshorts)
Also there might be some cases that UI don't show data at all because of token mismatch (for data security purpose) then you can just wait 4-5 seconds then reload the page using right click,
If this did't solve the problem then try to switch between tabs or restart the application.

ContactUs-Tab

Some pictures to understand some react components and classname (for developers)

Classnames represented using . before the name. (Ex.: .classname)
React Component name is represented using normal manner. (Ex.: ComponentName)

Dashboard-UI-Guide

Horizental-cards-container-component-guide

Basic-Deatils-Component-Guide

WrokingHourBarChart-UI-Component-Guide

Subjects-UI-Guide

Teachers-UI-Guide

TimeTable-UI-Guide

React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

time-table-creator-reactjs's People

Contributors

super7000 avatar srideep-banerjee avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.