Use Bootstrap npm starter

.browserslistrc

@@ -0,0 +1,13 @@
+# https://github.com/browserslist/browserslist#readme
+
+>= 1%
+last 1 major version
+not dead
+Chrome >= 45
+Firefox >= 38
+Edge >= 12
+Explorer >= 10
+iOS >= 9
+Safari >= 9
+Android >= 4.4
+Opera >= 30

.eslintrc.json

@@ -3,27 +3,35 @@
         "browser": true,
         "es2021": true
     },
-    "extends": [
-        "airbnb-base",
-        "prettier"
-    ],
+    "extends": ["airbnb-base", "prettier"],
     "parserOptions": {
         "ecmaVersion": 12,
         "sourceType": "module"
     },
     "plugins": ["only-warn"],
-    "ignorePatterns": ["/node_modules", "/external"],
+    "ignorePatterns": ["/node_modules", "/external", "/assets/css/dist"],
     "rules": {
-        "no-console": ["error", { "allow": ["warn", "error"] }],
+        "no-console": [
+            "error",
+            {
+                "allow": ["warn", "error"]
+            }
+        ],
         "camelcase": "off",
         "import/extensions": "off",
         "object-shorthand": "off",
-        "no-underscore-dangle": [2, {
-            "allowAfterThis": true,
-            "allowAfterSuper": true
-        }],
-        "no-plusplus": [2, {
-            "allowForLoopAfterthoughts": true
-        }]
+        "no-underscore-dangle": [
+            2,
+            {
+                "allowAfterThis": true,
+                "allowAfterSuper": true
+            }
+        ],
+        "no-plusplus": [
+            2,
+            {
+                "allowForLoopAfterthoughts": true
+            }
+        ]
     }
 }

.github/ISSUE_TEMPLATE/bug-report.md

@@ -1,33 +1,39 @@
 ---
 name: Bug report
 about: Create a report to help us improve
-title: "[BUG] Bug-Title"
+title: '[BUG] Bug-Title'
 labels: Bug
 assignees: ''
-
 ---
 
 ### Describe the bug
+
 A clear and concise description of what the bug is.
 
 ### Screenshots
+
 If applicable, add screenshots to help explain your problem.
 
 ### To Reproduce
+
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
 4. See error
 
 ### Expected behavior
+
 A clear and concise description of what you expected to happen.
 
 ### Desktop (please complete the following information):
- - **OS:** [e.g. iOS]
- - **Browser:** [e.g. chrome, safari]
- - **JS IDE:** [e.g. VS Code, Atom] 
- - (**Version:** [e.g. 22])
+
+-   **OS:** [e.g. iOS]
+-   **Browser:** [e.g. chrome, safari]
+-   **JS IDE:** [e.g. VS Code, Atom]
+-   (**Version:** [e.g. 22])
 
 ### Additional context
+
 Add any other context about the problem here.

.github/ISSUE_TEMPLATE/user-story.md

@@ -4,7 +4,6 @@ about: A normal user story as feature request.
 title: ''
 labels: ''
 assignees: ''
-
 ---
 
 As a ‹role›, I'd like to ‹feature short description› [ , in order to ‹value it adds›. ]
@@ -19,5 +18,5 @@ As a ‹role›, I'd like to ‹feature short description› [ , in order to ‹
 
 ## :white_check_mark:   Conditions of satisfaction
 
-- [ ] Should ‹testable condition that should be satisfied›
-- [ ] Should ‹testable condition that should be satisfied›
+-   [ ] Should ‹testable condition that should be satisfied›
+-   [ ] Should ‹testable condition that should be satisfied›

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,21 +1,24 @@
 !Please link the completed Issue to this Pull Request!
 
 ## Changes
+
 **What does this PR change? What was the problem? What is the solution?**
 
-*describe problem here*
-- *enter change here*
+_describe problem here_
+
+-   _enter change here_
 
 ## Screenshots
-*If the frontend has been changed, please add a screenshot of before and after the changes have been made*
 
+_If the frontend has been changed, please add a screenshot of before and after the changes have been made_
 
 ## Checklist before merge
 
 **Developer's responsibilities**
-* [ ] **Assign** one or two developers
-* [ ] **Change code** if reviewer(s) has/have requested it
-* [ ] **Pull request build** has passed
-* [ ] **tested locally** (in at least chrome & firefox if frontend)
-* [ ] updated the **documentation**
-* [ ] added **tests** where necessary
+
+-   [ ] **Assign** one or two developers
+-   [ ] **Change code** if reviewer(s) has/have requested it
+-   [ ] **Pull request build** has passed
+-   [ ] **tested locally** (in at least chrome & firefox if frontend)
+-   [ ] updated the **documentation**
+-   [ ] added **tests** where necessary

.gitignore

@@ -1,2 +1,4 @@
 .idea/
 node_modules
+assets/css/dist/*
+!assets/css/dist/.gitkeep 

.prettierrc.json

@@ -1,11 +1,11 @@
 {
-  "tabWidth": 4,
-  "bracketSpacing": true,
-  "endOfLine": "crlf",
-  "jsxSingleQuote": true,
-  "semi": false,
-  "singleQuote": true,
-  "trailingComma": "none",
-  "printWidth": 100,
-  "useTabs": false
-}
+    "tabWidth": 4,
+    "bracketSpacing": true,
+    "endOfLine": "crlf",
+    "jsxSingleQuote": true,
+    "semi": false,
+    "singleQuote": true,
+    "trailingComma": "none",
+    "printWidth": 100,
+    "useTabs": false
+}

.stylelintignore

@@ -0,0 +1,4 @@
+**/*.min.css
+**/dist/
+node_modules
+.idea/

.stylelintrc

@@ -0,0 +1,5 @@
+{
+  "extends": [
+    "stylelint-config-twbs-bootstrap/scss"
+  ]
+}

README.md

@@ -4,24 +4,34 @@ An application that helps with analyzing your team's GitHub repository
 
 ## Installation
 
-1. Clone the repository: ```[email protected]:hpi-epic/repositoryguide.git``` and go into the repository folder
-2. Make sure you've installed node. If not download and install it from [here](https://nodejs.org/en/download/)
+1. Make sure you've installed node. If not download and install it from [here](https://nodejs.org/en/download/)
+2. Clone the repository: `[email protected]:hpi-epic/repositoryguide.git` and go into the repository folder
 3. Run `npm install` in the root of the repository
-4. generate a personal access token for GitHub using [these instructions](https://docs.github.com/en/github/authenticating-to-github/keeping-your-account-and-data-secure/creating-a-personal-access-token)
-5. Host the project on a local server, opening `index.html` directly won't work. The WebStorm IDE offers a local development server, or run one using `python3 -m http.server`. 
-6. Download the config to have an empty version of a `config.json file`. Replace ```"github_access_token": ""``` with ```"github_access_token": "<your token>"```
-7. Load the edited config into the application.
-8. The preparations are now done. Enjoy your metrics. :-)
+4. Run `npm start` to compile the scss and start a server
+5. Open the home page in a browser (default address is `localhost:3000/views/home`)
+
+## Configuration
+
+1. Generate a personal access token for GitHub
+   using [these instructions](https://docs.github.com/en/github/authenticating-to-github/keeping-your-account-and-data-secure/creating-a-personal-access-token)
+2. On the settings page, download the config to have an empty version of a `config.json file`. Replace `"github_access_token": ""`
+   with `"github_access_token": "<your token>"`
+3. Load the edited config into the application.
 
 ## Codestyle
-To follow the codestyle used in this repository you need Prettier and Eslint. After having setup the project you need to setup these tools. For Webstorm follow the following tutorials:
-- ESLint
-    - Follow the following steps from [this tutorial](https://www.jetbrains.com/help/webstorm/eslint.html)
-        - [Before you start](https://www.jetbrains.com/help/webstorm/eslint.html#ws_js_linters_eslint_before_you_start) 1&2
-        - [Configure ESLint automatically](https://www.jetbrains.com/help/webstorm/eslint.html#ws_js_eslint_automatic_configuration)
-        - [Recommended to run ESLint on save](https://www.jetbrains.com/help/webstorm/eslint.html#ws_eslint_configure_run_eslint_on_save)
-- Prettier
-    - Follow the following steps from [this tutorial](https://www.jetbrains.com/help/webstorm/prettier.html)
-        - [Before you start](https://www.jetbrains.com/help/webstorm/prettier.html#prettier_before_you_start) 1,2 and 3 
-        - [Configure PRettier 2,3, & 4](https://www.jetbrains.com/help/webstorm/prettier.html#ws_prettier_install)
-        - [Recommended to run Prettier on save](https://www.jetbrains.com/help/webstorm/prettier.html#ws_prettier_run_automatically_in_current_project)
+
+To define a codestyle, we used Prettier and Eslint. Use `npm run prettier-<check|autofix>` or `npm run eslint-<check|autofix>` to apply these rules.
+
+Alternatively, you can set these up for your IDE. For Webstorm follow the following tutorials:
+
+-   ESLint
+    -   Follow the following steps from [this tutorial](https://www.jetbrains.com/help/webstorm/eslint.html)
+        -   [Before you start](https://www.jetbrains.com/help/webstorm/eslint.html#ws_js_linters_eslint_before_you_start)
+            1&2
+        -   [Configure ESLint automatically](https://www.jetbrains.com/help/webstorm/eslint.html#ws_js_eslint_automatic_configuration)
+        -   [Recommended to run ESLint on save](https://www.jetbrains.com/help/webstorm/eslint.html#ws_eslint_configure_run_eslint_on_save)
+-   Prettier
+    -   Follow the following steps from [this tutorial](https://www.jetbrains.com/help/webstorm/prettier.html)
+        -   [Before you start](https://www.jetbrains.com/help/webstorm/prettier.html#prettier_before_you_start) 1,2 and 3
+        -   [Configure Prettier 2,3, & 4](https://www.jetbrains.com/help/webstorm/prettier.html#ws_prettier_install)
+        -   [Recommended to run Prettier on save](https://www.jetbrains.com/help/webstorm/prettier.html#ws_prettier_run_automatically_in_current_project)

assets/components/components.js

@@ -0,0 +1,6 @@
+export async function add_header() {
+    const header = document.createElement('header')
+    const response = await fetch('/assets/components/navigation-header.html')
+    header.innerHTML = await response.text()
+    document.body.prepend(header)
+}

assets/components/navigation-header.html

@@ -0,0 +1,29 @@
+<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4 fixed-top">
+    <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">Repository Guide</a>
+    <div class="collapse navbar-collapse">
+        <ul class="navbar-nav mr-auto">
+            <li class="nav-item">
+                <a class="nav-link" href="/views/home.html" id="button_navigate_home">
+                    <i class="fa fa-home" aria-hidden="true"></i>
+                    Home
+                </a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="/views/team/overview.html" id="button_navigate_teams">
+                    Teams
+                </a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="/views/sprint/overview.html" id="button_navigate_sprint">
+                    Sprints
+                </a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="/views/settings.html" id="button_navigate_settings">
+                    <i class="fa fa-cogs" aria-hidden="true"></i>
+                    Settings
+                </a>
+            </li>
+        </ul>
+    </div>
+</nav>

assets/css/src/_home.scss

@@ -0,0 +1,25 @@
+.chart-container {
+    width: 90%;
+    height: 400px;
+}
+
+.chart-canvas-container {
+    display: inline-block;
+    float: left;
+    width: 80%;
+    height: 90%;
+}
+
+.chart-statistics-container {
+    display: inline-block;
+    float: right;
+    width: 20%;
+    height: 90%;
+}
+
+.metric-explanation {
+}
+
+.sidebar {
+    height: 100%;
+}

assets/css/src/_icon-list.scss

@@ -0,0 +1,21 @@
+// Example of a custom component
+
+.icon-list {
+    padding-left: 0;
+    list-style: none;
+}
+.icon-list li {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 0.25rem;
+}
+.icon-list li::before {
+    display: block;
+    flex-shrink: 0;
+    width: 1.5em;
+    height: 1.5em;
+    margin-right: 0.5rem;
+    content: '';
+    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23212529' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z'/%3E%3C/svg%3E")
+        no-repeat center center / 100% auto;
+}

assets/css/src/_variables.scss

@@ -0,0 +1 @@
+$fa-font-path: '/node_modules/@fortawesome/fontawesome-free/webfonts';

assets/css/src/main.scss

@@ -0,0 +1,51 @@
+// Override Bootstrap's Sass default variables
+//
+// Nearly all variables in Bootstrap are written with the `!default` flag.
+// This allows you to override the default values of those variables before
+// you import Bootstrap's source Sass files.
+//
+// Overriding the default variable values is the best way to customize your
+// CSS without writing _new_ styles. For example, change you can either change
+// `$body-color` or write more CSS that override's Bootstrap's CSS like so:
+// `body { color: red; }`.
+
+//
+// Override defaults
+//
+
+// Toggle global options
+$enable-gradients: false;
+$enable-shadows: true;
+
+// Customize some defaults
+$body-color: #333;
+$body-bg: #fff;
+$border-radius: 0.4rem;
+$success: #7952b3;
+
+//
+// Includes
+//
+
+@import 'variables';
+
+@import '@fortawesome/fontawesome-free/scss/fontawesome';
+@import '@fortawesome/fontawesome-free/scss/solid';
+
+@import 'bootstrap/scss/bootstrap';
+
+//
+// Custom styles
+//
+
+@import 'home';
+@import 'icon-list'; //Bootstrap starter test file
+
+html,
+body {
+    height: 100%;
+}
+
+body {
+    padding-top: 75px;
+}

config.js → assets/js/config.js

@@ -53,7 +53,7 @@ export default class Config {
         return instance
     }
 
-    to_storage_storage() {
+    to_storage() {
         localStorage.setItem('config', this.toString())
     }