rinminase / anidb

📝🚀 Rin Minase's Anime Database using Angular deployed to Netlify using Circle CI

Rin Minase's Anime Database

Introduction

Add info here

Getting Started

Running the project

Installations Required:

• Node
• Yarn

1. Clone the project and copy the ENV template file to a new ENV file.

   git clone https://github.com/RinMinase/anidb.git
   cd anidb
   cp .env.example .env
   

2. Modify the created ENV file based on your Firebase configuration

3. Install the dependencies then run the project

   yarn install
   yarn start
   

4. Fire up your browser and go to localhost:3000

Building the project

Installations Required:

• Node
• Yarn

1. Fire up your terminal inside the project folder.

2. Build the project by running:

   yarn build
   

3. This should generate a dist/ folder inside the project folder.

Code Scaffolding

This is using yarn ng generate <schematic> <name> command. This can be shortened to yarn ng g <schematic> <name>.

Schematics

• component or c - Creates a new component
• module or m - Creates a new NgModule
• service or s - Creates a new service

Project Structure

.
├── .circleci/                          # Circle CI configuration folder
├── assets/                             # Project assets
│   ├── config/                         # Project configurations
│   │   ├── manifest.json               # Web manifest file
│   │   ├── ngsw-config.json            # PWA Service Worker configuration file
│   │   ├── webpack.ts                  # Extended webpack configuration file
│   │   └── ...                         # Other configuration files
│   ├── res/                            # Platform-specific resources folder
│   └── ...                             # Other assets
├── dist/                               # Compiled production code
├── src/                                # Project source code
│   ├──<module-name>/                   # Project module
│   │   ├── <name>.component.html       # Component template
│   │   ├── <name>.component.scss       # Component stylesheet
│   │   ├── <name>.component.ts         # Module component
│   │   └── <name>.module.ts            # Module
│   ├── core/                           # Project-wide reusable classes
│   │   ├── builders/                   # Project builders
│   │   ├── components/                 # Project components
│   │   └── services/                   # Project services
│   ├── app.module.ts                   # Main module and project routes
│   ├── index.html                      # Main HTML file
│   ├── index.scss                      # Main Stylesheet (SCSS) file
│   └── index.ts                        # Main TypeScript file
├── .editorconfig                       # IDE / Editor configuration
├── .env                                # Environment file
├── angular.json                        # Angular CLI configuration
├── tsconfig.json                       # Main TypeScript configuration file
└── ...                                 # Other project files

Project tasks

Task automation is based on Yarn scripts or NPM scripts.

Task	Description
yarn start	Run development server on http://localhost:3000/ with file watching on changes
yarn start --prod	Run production server on http://localhost:3000/ with file watching on changes
yarn build	Build production code and add service worker to built code

Other tasks included in package.json that should not be executed manually:

Task	Description
yarn deploy	Build production code without displaying progress and add service worker to built code

Testing the project

Add info here

Built with

• Angular - Web Framework
• TypeScript - Language syntax
• Sassy CSS (SCSS) - CSS pre-processor
• Bootstrap 5 - HTML Framework (layout)
• Firebase - Database
• Webpack - Project bundler
• Circle CI - Continuous Integration (CI) service
• Netlify - Hosting Platform

Deployed to

• Netlify

anidb's Issues

Use Travis-CI for deployment

Todo:

• Add a branch for development (dev)
• Only push master branch (deploy on push)

References:

• Deploy to Firebase Hosting from GitHub

Use $digest instead of $apply for performance

scope.$digest() will fire watchers on the current scope, and on all of its children, too. scope.$apply will evaluate passed function and run $rootScope.$digest().
— Google

The second one is slower, as it needs to evaluate watchers for $rootScope and all it's child scopes
— Google

Add per date basis in the chart in about page

Selectors would somewhat be like this:

Episodes	Titles

Week	Month	Year

Possible selections of chart are:

• Episodes per Week
• Episodes per Month
• Episodes per Year
• Titles per Week
• Titles per Month
• Titles per Year

Swipe navbar from left on mobile browser

Use angular-hammer

Todo:

• Option for the menu to slide in from the left and/or right side of the screen
• Touch/swipe support to open and close with left/right swipe
• Ability to click anywhere in the 'content' area to close the menu

Sample Codes:

• Fiddle: hammer test
• Sample Website

References:

• Bootstrap - How to slide nav bar from left instead from top
  
• Codeply: Bootstrap Navbar Slide Left
• NPM: angular-hammer
• Github: angular-hammer
• angular-hammer
• SO: hammer test
• Hammer Vertical swipe interfering

Possible Problems:

• Problems with CSS 3D Transform

Use angular-datepicker for optional date picking

Notes:

• The input field could be appended with a calendar picker button which pops out a date picker but can still fill the fields with date-like strings "jan 1" or "1/1/18"

Angular Moment Picker Setup:

var myApp = angular.module('myApp', ['moment-picker']);

<div moment-picker="ctrl.myInput"
     format="MMM DD, YYYY"
     max-view="month"
     start-view="month"
     min-date="'Jan 01, 1995'"
     keyboard="true">
    {{ ctrl.myInput }}
</div>

Created by Angular-Moment-Picker Builder

Or use the provider:

angular
    .module('myApp', ['moment-picker'])
    .config(['momentPickerProvider', function (momentPickerProvider) {
        momentPickerProvider.options({
            locale:        'en',
            format:        'MMM DD, YYYY',
            minView:       'decade',
            maxView:       'month',
            startView:     'month',
            autoclose:     true,
            today:         false,
            keyboard:      true,
            
            /* Extra: Views properties */
            leftArrow:     '←',
            rightArrow:    '→',
            yearsFormat:   'YYYY',
            monthsFormat:  'MMM',
            daysFormat:    'DD',
            hoursFormat:   'HH:[00]',
            minutesFormat: moment.localeData().longDateFormat('LT').replace(/[aA]/, ''),
            secondsFormat: 'ss',
            minutesStep:   5,
            secondsStep:   1
        });
    }]);

References:

• Angular Moment Picker
• NPM Angular Moment Picker

Other References:

• NPM Bootstrap-datepicker
• Bootstrap-datepicker Documentation
• Inspinia bootstrap-datepicker Demo

Create testing scenarios for login module

Testing Scenarios:

• spinner test
  • test with wrong credentials
    • spinner must be shown
    • after a while, username and password inputs must be shown
• wrong credentials login
  • test with wrong credentials
    • span message box must be shown
• correct credentials login
  • login
    • whenever #anime-table is shown

Fuzzy search in home table

Add splash screen

References:

• Cordova Plugin: Splashscreen

Add Mocha+Chai Testing Suite

• Could possibly use Nightwatch+Chai instead of Mocha+Chai test suite

NPM Packages:

• mocha
• chai
• nightwatch
• chai-nightwatch

References:

• Testing Node.js with Mocha and Chai
• Unit Test Your JavaScript Using Mocha And Chai
• Run Mocha/Chai unit tests on Node.js apps

Add "last date counted" in last watch statistics

Changelog not displayed

• Problem exists in Safari 11.1 in MacOS Sierra (10.2)
  [Optional since not a supported platform]

Add debounce to ng-models for performance

Feasible Debounce Values:

• 250ms
• 200ms

<element ng-model="vm.test" 
  ng-model-options="{debounce: 250}"></element>

Improve badge layout of changelog

Pull to refresh feature on android

Move to UI-Bootstrap 4

UI-Bootstrap 4
NPM UI-Bootstrap 4

Functional future changes list

Functional forgot password option in login page

Make or use a duration picker

Edit functionality in home

Scrolling in home is cut-off

Add chart layout in byname module

Add android bundling capabilities

• Using Cordova setup
• Merge current setup (avoid multiple codebases)
• Use "Rin AniDB" as Application name
• Target Android 4.4.0 (Kitkat)
• Reduce android assets

References:

• Convert your angular project to mobile app using Cordova
• Cordova Documentation
• Android Icon Sizes Made Simple

Prefilter search in home before displaying

Note:
This is to not use the " | filter " directive

Todo:

• Migrate from " | filter " directive
• Pre-filter from controller
• Remove ng-filter package (if possible or if unused)

References:

• Tuning AngularJS, 4th Item

Unblock any actions on spinner loading

Export Excel (.xlsx) file

References:

• npm xlsx package
• github xlsx
• xlsx

Functional rating component

Remove footer from login page

Year date parsing on adding

If current date is July 08, 2018:
| Input | Output |

| 12/1 | 12/1/2017 |
| 7/9 | 7/9/2017 |
| 7/8 | 7/9/2018 |
| 7/7 | 7/7/2018 |

Notes:

• Make today the cutoff date
• If date is before current date, make year this year
• if date is after current date, make year last year

Use tags for search in landing page

Books (Manga / LNs) functionality

Functional Summer list

Display invalid login credentials

Upload image to data

Viewable in:
Landing > View

Notes

• Use dropzone for image drag and drop
• Preferrably in image divider, but it can be a popup if necessary
• If the image divider is used:
  • Upon dropping images, add a button below the image for saving
  • Use sweetalert to confirm image upload

Add marks in download table

Marks:

• Watched
• Marked
• Queued

Use ng-if for removing or hiding spinners

ng-if is better in performance than ng-class / ng-show

Fuzzy search for download page table

Add Readme.md file

Layout:

• Badges
  • Travis-CI
  • DavidDM
  • Node Badge (Shields.io)
  • NPM / Yarn Badge (Shields.io)
• Icon / Brand Logo
• Small Description
  • Description written here
• Getting Started
  • Creating / Cloning the project
  • Building the project
  • Bundling the project for Android
  • Testing the project
• Built with
  • Framework
    • AngularJS 1.7
  • Framework Syntax
    • Babel ES8 / ES2017 Preset
  • Stylesheet / CSS Preprocessor
    • Sassy CSS (SCSS)
  • HTML Framework
    • Bootstrap 4
  • Database
    • Firebase
  • Project Bundler
    • Webpack 4
  • APK / Android Bundler
    • Cordova
  • Testing Framework
    • NightwatchJS
  • Deployment Tool
    • Travis-CI

Un-selectable active page in menu bar

Create testing scenarios for home module

Testing Scenarios:

• navbar must be shown
  • check for navbar
• footer must be shown
  • check for footer
• add modal
  • click on add button
    • must open modal
      • must have "Add Title" on title
      • must have close button on top
      • must have save button below
      • must have another close button below
      • must have fields for:
        • status
          • check if it contains the necessary options
        • quality
          • check if it contains the necessary options
        • title
          • check if it is type of text
        • episodes
          • check if it is type of number
        • ovas
          • check if it is type of number
        • specials
          • check if it is type of number
        • datefinished
          • check if it is type of text
        • filesize
          • check if it is type of text
        • season number
          • check if it is type of number
        • first season title
          • check if it is type of text
        • release season & title (must be two)
          • check if it is has two parts
          • check if it contains the necessary options
        • hdd checkbox
          • check if it is type of checkbox
        • duration
          • check if it is type of text
        • encoder
          • check if it is type of text
        • remarks
          • check if it is type of text
        • variants
          • check if it is type of text
        • prequel
          • check if it is type of text
        • sequel
          • check if it is type of text
        • offquel (read-only field)
          • check if it is type of text and is readonly
        • offquel + add button
          • check if it is type of text
          • check if it has a button beside it
• search field
  • search any very specific query (which would return only one value)
    • must return one value on table
• view
  • search for specific
    • url should point to specific url

Export CSV file

Cache firebase requests

Note:

• use $cacheFactory of AngularJS

Setup proper development branching

Todo:

• Setup dev branch for non-deployment of Travis
• On push of master branch
  • Run test scripts
  • Build master branch -- deploying to firebase

Offquel selection on adding entries

Local JSON database

References:

• Angularjs: load contents from local json file
• How to load a JSON file from local machine to a variable using Angularjs?
  

Reminders:

• Make sure that json files are stored / collected in a separate subfolder
• Make sure that this storage folder is added in the .gitignore file

Fields missing on Home > View

• Filesize
• Date Finished

Add functionality in home

Use rounded rectangle icons for android

follow android standards on rounding

Use service in retrieving data in Github

Add slide out animations on Home

Slide Out (Left)

• (Manage)
• Click a link (title) on the table
• Slide out left
• (View)

Recommendations:

• Trigger an ng-change to a certain variable to trigger "animate slideOutLeft"

Use infinite scrolling in home

Sample Code:

• ngInfiniteScroll Demo

References:

• NPM ng-infinite-scroll
• Docu ngInifiniteScroll