# msa-course-map

**Repository Path**: Power_tile/msa-course-map

## Basic Information

- **Project Name**: msa-course-map
- **Description**: My graduation gift to MSA, and an open-source course map for anyone
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2021-07-01
- **Last Updated**: 2021-07-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# MSA Course Map

## Dev Environment Building

1. Install ```nodejs``` and use ```npm``` to install ```yarn```. The version of ```nodejs``` is 14.17.2, and the version of ```yarn``` 1.22.10.
2. ```cd``` into the project directory and run ```yarn```, then ```yarn dev```. You should see a prompt saying the Vite server is hosted on a localhost port. Follow the guidelines to open the link in the browser.

## Tech Stack and Migration warning

1. This project uses Vue 3 and Vite, a lite scaffolding for Vue 3.

2. ```npm```/```yarn``` packages used in this project:

- ```axios```: suggested ```ajax``` library for Vue projects
- ```bootstrap```: lite CSS library
- ```popper.js```: JS library for poppup positioning
- ```vuedraggable```: draggable UI library used in the edit page
- ```bootstrap-icons```: icons add-on for Bootstrap
- ```vue-i18n```: internationalization tool for the project

3. Migration to Vue 2:

- All direct assignments of objects and arrays that need responsive rendering (e.g. ```this.arr1 = arr2```) and all array element assignment using array index (e.g. ```this.arr[i] = x```) need to be replaced by ```this.$set``` or ```Vue.set``` methods. This is a bug that is fixed in Vue 3. See more in [here](https://v3.cn.vuejs.org/guide/change-detection.html). 
- There is a new grammar called ```setup```. This is a feature that simplifies some parts of the originally huge Object used by Vue constructor. See [here](https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md) for more details.
- The ```vuedraggable``` module used is specified for Vue 3. Visit [this webpage](https://github.com/SortableJS/Vue.Draggable) for the Vue 1/2 version of ```vuedraggable``` and change the dependency.

## Data Input for Frontend

### Courses

Every course should be a JSON object:

| Name         | Value Type           | Description                                                  | Example                            |
| ------------ | -------------------- | ------------------------------------------------------------ | ---------------------------------- |
| ```id```     | ```Integer```        | Primary key in SQL database, unique identifier for each course | ```1```                            |
| ```cname```  | ```String```         | Chinese name of course                                       | ```"算法与数据结构"```             |
| ```ename```  | ```String```         | English name of course                                       | ```"Algorithm & Data Structure"``` |
| ```code```   | ```String```         | Course code                                                  | ```"COMP5002"```                   |
| ```prereq``` | ```Array<Integer>``` | All course ```id``` of prerequisite courses*                 | ```[3, 5, 6]```                    |
| ```subseq``` | ```Array<Integer>``` | All course ```id``` for subsequent courses*                  | ```[4]```                          |

*Beware that both the ```subseq``` and ```prereq``` of two courses will be updated when a dependency relationship is added.

### Fields

Every field should be a JSON object:

| Name        | Value Type    | Description                                                  | Example                  |
| ----------- | ------------- | ------------------------------------------------------------ | ------------------------ |
| ```id```    | ```Integer``` | Primary key in SQL database, unique identifier for each field | ```1```                  |
| ```cname``` | ```String```  | Chinese name of field                                        | ```"计算机科学"```       |
| ```ename``` | ```String```  | English name of course                                       | ```"Computer Science"``` |

### Relationships

Every relationship between a field and a suggested course in that field should be a JSON object:

| Name            | Value Type                                | Description                                                  | Example |
| --------------- | ----------------------------------------- | ------------------------------------------------------------ | ------- |
| ```id```        | ```Integer```                             | Primary key in SQL database, unique identifier for each relationship | ```1``` |
| ```field_id```  | ```Integer```                             | ```id``` of field                                            | ```1``` |
| ```course_id``` | ```Integer```                             | ```id``` of suggested course in this field                   | ```5``` |
| ```semester```  | ```Integer``` between ```1``` and ```8``` | Suggested grade of this course **if learning in this field**. ```1``` and ```8``` refers to Grade 9 Fall semester and Grade 12 Autumn semester, respectively. | ```3``` |