├── README.md
├── SQL-queries.txt
├── app
    ├── __init__.py
    ├── database.py
    ├── routes.py
    ├── static
    │   ├── img
    │   │   └── cs.ico
    │   ├── script
    │   │   └── modal.js
    │   └── styles
    │   │   └── custom.css
    └── templates
    │   └── index.html
├── gitignore
└── requirements.txt


/README.md:
--------------------------------------------------------------------------------
 1 | # A Todo App
 2 | 
 3 | This is a todo list App designed for Worshop.
 4 | 
 5 | NOTE: Rename the gitignore file name as .gitignore after you clone the repo to you local system.
 6 | 
 7 | ## Requirements
 8 | 
 9 | ```
10 | python >= 3.5
11 | ```
12 | 
13 | ## Getting started
14 | 
15 | ```bash
16 | ### open Git bash in any working directory and run the following commands
17 | git init
18 | git clone
19 | cd
20 | python -m venv .venv
21 | .venv/bin/activate
22 | pip install -r requirements.txt
23 | flask run
24 | ```
25 | 
26 | handlers:
27 | 
28 | # Static files to /images/... to files in static/images/... 
29 | 
30 | - url: /img
31 |   static_dir: static/img
32 | 
33 | - url: /script
34 |   static_dir: static/script
35 | 
36 | - url: /styles
37 |   static_dir: static/styles
38 | 
39 | 
40 | 


--------------------------------------------------------------------------------
/SQL-queries.txt:
--------------------------------------------------------------------------------
1 | CREATE TABLE tasks (
2 |     id SERIAL PRIMARY KEY,
3 |     task varchar(255) NOT NULL,
4 |     status varchar(30))
5 | INSERT INTO tasks (task, status) VALUES ("task no.1" , "Todo");
6 | INSERT INTO tasks (task, status) VALUES ("task no.2" , "Todo");
7 | INSERT INTO tasks (task, status) VALUES ("task no.3" , "Todo");
8 | 


--------------------------------------------------------------------------------
/app/__init__.py:
--------------------------------------------------------------------------------
 1 | """Setup at app startup"""
 2 | from flask import Flask
 3 | import psycopg2
 4 | 
 5 | 
 6 | app = Flask(__name__)
 7 | postgres = psycopg2.connect(
 8 |         host="######################################",
 9 |         database="######",
10 |         user="#######",
11 |         password="################")
12 | # To prevent from using a blueprint, we use a cyclic import
13 | # This also means that we need to place this import here
14 | # pylint: disable=cyclic-import, wrong-import-position
15 | from app import routes
16 | 


--------------------------------------------------------------------------------
/app/database.py:
--------------------------------------------------------------------------------
  1 | """Defines all the functions related to the database"""
  2 | from app import postgres
  3 | 
  4 | 
  5 | def fetch_todo() -> dict:
  6 |     """Reads all tasks listed in the todo table
  7 |     Returns:
  8 |         A list of dictionaries
  9 |     """
 10 |     cursor = postgres.cursor()
 11 |     cursor.execute("Select * from tasks ORDER BY id ASC;")
 12 |     data = cursor.fetchall()
 13 |     postgres.commit()
 14 |     cursor.close()
 15 |     todo_list = []
 16 |     print(data)
 17 |     for result in data:
 18 |         item = {
 19 |             "id": result[0],
 20 |             "task": result[1],
 21 |             "status": result[2]
 22 |         }
 23 |         todo_list.append(item)
 24 |     return todo_list
 25 | 
 26 | 
 27 | """Assignment 2
 28 |     Updates task description based on given `task_id`
 29 |     Args:
 30 |         task_id (int): Targeted task_id
 31 |         text (str): Updated description
 32 |     Returns:
 33 |         None
 34 | """
 35 | 
 36 | 
 37 | def update_task_entry(task_id: int , text: str):
 38 |     cursor = postgres.cursor()
 39 |     query = "Update tasks set task = '{}' where id = {};".format(text,task_id)
 40 |     cursor.execute(query)
 41 |     postgres.commit()
 42 |     cursor.close()
 43 | 
 44 | 
 45 | def insert_new_task(text: str , id: int) -> int:
 46 |     """Insert new task to todo table.
 47 |     Args:
 48 |         text (str): Task description
 49 |     Returns: The task ID for the inserted entry
 50 |     """
 51 |     cursor = postgres.cursor()
 52 |     query = "Insert Into tasks (id,task, status) VALUES ({},'{}', '{}');".format(id,
 53 |         text, 'Todo')
 54 |     cursor.execute(query)
 55 |     postgres.commit()
 56 |     cursor.close()
 57 | 
 58 |     return query
 59 | 
 60 | 
 61 | def remove_task_by_id(task_id: int) -> None:
 62 |     """ remove entries based on task ID """
 63 |     try:
 64 |         cursor = postgres.cursor()
 65 |         query = 'Delete From tasks where id={}'.format(task_id)
 66 |         cursor.execute(query)
 67 |         postgres.commit()
 68 |         cursor.close()
 69 |     except:
 70 |         print("test")
 71 | 
 72 | 
 73 | def fetch_max_id() -> int:
 74 |     try:
 75 |         cursor = postgres.cursor()
 76 |         query = "SELECT MAX(id) from tasks"
 77 |         cursor.execute(query)
 78 |         data = cursor.fetchall()
 79 |         postgres.commit()
 80 |         cursor.close()
 81 | 
 82 |         return data
 83 |     except:
 84 |         print("Failed")
 85 | 
 86 |     
 87 | 
 88 | 
 89 | # #Creating a connection cursor
 90 | # cursor = postgres.cursor()
 91 | 
 92 | # #Executing SQL Statements
 93 | # cursor.execute(''' CREATE TABLE table_name(field1, field2...) ''')
 94 | # cursor.execute(''' INSERT INTO table_name VALUES(v1,v2...) ''')
 95 | # cursor.execute(''' DELETE FROM table_name WHERE condition ''')
 96 | 
 97 | # #Saving the Actions performed on the DB
 98 | # postgres.commit()
 99 | 
100 | # #Closing the cursor
101 | # cursor.close()
102 | 


--------------------------------------------------------------------------------
/app/routes.py:
--------------------------------------------------------------------------------
 1 | """ Specifies routing for the application"""
 2 | from flask import render_template, request, jsonify
 3 | from app import app
 4 | from app import database as db_helper
 5 | 
 6 | 
 7 | @app.route("/delete/<int:task_id>", methods=['DELETE'])
 8 | def delete(task_id):
 9 |     """ recieved post requests for entry delete """
10 | 
11 |     try:
12 |         db_helper.remove_task_by_id(task_id)
13 |         result = {'success': True, 'response': 'Removed task'}
14 |     except:
15 |         result = {'success': False, 'response': 'Something went wrong'}
16 |     return jsonify(result)
17 | 
18 | 
19 | @app.route("/edit-status/<int:task_id>", methods=['PATCH'])
20 | def update_status(task_id):
21 |     """ recieved post requests for entry updates """
22 | 
23 |     data = request.get_json()
24 | 
25 |     try:
26 |         if "status" in data:
27 |             db_helper.update_status_entry(task_id, data["status"])
28 |             result = {'success': True, 'response': 'Status Updated'}
29 |         else:
30 |             result = {'success': True, 'response': 'Nothing Updated'}
31 |     except:
32 |         result = {'success': False, 'response': 'Something went wrong'}
33 | 
34 |     return jsonify(result)
35 | 
36 | 
37 | 
38 | 
39 | 
40 | 
41 | @app.route("/create", methods=['POST'])
42 | def create():
43 |     """ recieves post requests to add new task """
44 |     data = request.get_json()
45 |     db_helper.insert_new_task(data['description'],data['id'])
46 |     result = {'success': True, 'response': 'Done'}
47 |     return jsonify(result)
48 | 
49 | 
50 | @app.route("/fetch-max-id",methods=['GET'])
51 | def fetch_max_id():
52 |     data = request.get_json()
53 |     result= db_helper.fetch_max_id()
54 |     return jsonify(result)
55 | 
56 | 
57 | @app.route("/")
58 | def homepage():
59 |     """ returns rendered homepage """
60 |     items = db_helper.fetch_todo()
61 |     return render_template("index.html", items=items)
62 | 
63 | 
64 | 


--------------------------------------------------------------------------------
/app/static/img/cs.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ebytom/campusworkshop/0626660ec12c3810db282219ca731e7e3d263d3b/app/static/img/cs.ico


--------------------------------------------------------------------------------
/app/static/script/modal.js:
--------------------------------------------------------------------------------
  1 | $(document).ready(function () {
  2 |     // example: https://getbootstrap.com/docs/4.2/components/modal/
  3 |     // show modal
  4 |     $('#task-modal').on('show.bs.modal', function (event) {
  5 |         const modal = $(this)
  6 |           modal.find('.form-control').val('');
  7 |         
  8 |     })
  9 | 
 10 | 
 11 |     $('#edit-task-modal').on('show.bs.modal', function (event) {
 12 |         const button = $(event.relatedTarget) // Button that triggered the modal
 13 |         const taskID = button.data('source') // Extract info from data-* attributes
 14 |         const content = button.data('content') // Extract info from data-* attributes
 15 | 
 16 |         const modal = $(this)
 17 |             modal.find('.modal-title').text('Edit Task ' + taskID)
 18 |             $('#task-form-display').attr('taskID', taskID)
 19 |         if (content) {
 20 |             modal.find('.form-control').val(content);
 21 |         } else {
 22 |             modal.find('.form-control').val('');
 23 |         }
 24 |     })
 25 | 
 26 |     $('#submit-task').click(function () {
 27 |         const tID = $('#task-form-display').attr('taskID');
 28 |         console.log($('#task-modal').find('.form-control').val())
 29 |         $.ajax({
 30 |             type:'GET',
 31 |             url:'/fetch-max-id',
 32 |             success: function(res){
 33 |                 let id=0;
 34 |                 if(res.length==0){
 35 |                     id = 1;
 36 |                 }else{
 37 |                     id = res;
 38 |                     id++;
 39 |                     console.log(id);
 40 | 
 41 |                 }
 42 | 
 43 |                 $.ajax({
 44 |                     type: 'POST',
 45 |                     url: '/create',
 46 |                     contentType: 'application/json;charset=UTF-8',
 47 |                     data: JSON.stringify({
 48 |                         'description': $('#task-modal').find('.form-control').val(),
 49 |                         'id': id
 50 |                     }),
 51 |                     success: function (res) {
 52 |                         console.log(res.response)
 53 |                         location.reload();
 54 |                     },
 55 |                     error: function () {
 56 |                         console.log('Error');
 57 |                     }
 58 |                 });
 59 | 
 60 |             },error: function(){
 61 |                 console.log('Error');
 62 |             }
 63 |         })
 64 |        
 65 |     });
 66 |     
 67 | 
 68 |    
 69 |     
 70 |     
 71 |     $('.remove').click(function () {
 72 |         const remove = $(this)
 73 |         $.ajax({
 74 |             type: 'DELETE',
 75 |             url: '/delete/' + remove.data('source'),
 76 |             success: function (res) {
 77 |                 console.log(res.response)
 78 |                 location.reload();
 79 |             },
 80 |             error: function () {
 81 |                 console.log('Error');
 82 |             }
 83 |         });
 84 |     });
 85 | 
 86 | 
 87 |  $('.state').click(function () {
 88 |         let state = $(this)
 89 |         let tID = state.data('source')
 90 |         let new_state;
 91 | 
 92 |         if (state.text() === "Todo") {
 93 |             new_state = "In Progress"
 94 |         }
 95 |        
 96 |         console.log(new_state)
 97 |     
 98 |         $.ajax({
 99 |             type: 'PATCH',
100 |             url: '/edit-status/' + tID,
101 |             contentType: 'application/json;charset=UTF-8',
102 |             data: JSON.stringify({
103 |                 'status': new_state
104 |             }),
105 |             success: function (res) {
106 |                 
107 |                 console.log(res)
108 |                 location.reload();
109 |             }, 
110 |             error: function () {
111 |                 console.log('Error');
112 |             }
113 |         });
114 |     });
115 |     
116 | });


--------------------------------------------------------------------------------
/app/static/styles/custom.css:
--------------------------------------------------------------------------------
 1 | /* Basic setup */
 2 | /* Some code modified from bootstrap official guide */
 3 | /* ref: https://getbootstrap.com/docs/4.0/examples/sticky-footer/ */
 4 | 
 5 | html {
 6 |     position: relative;
 7 |     min-height: 100%;
 8 | }
 9 | 
10 | body {
11 |     /* Margin bottom by footer height */
12 |     margin-bottom: 2em;
13 | }
14 | 
15 | .footer {
16 |     position: absolute;
17 |     bottom: 0;
18 |     width: 100%;
19 |     height: 2em;
20 |     /* Set the fixed height of the footer here */
21 |     line-height: 1.5em;
22 |     /* Vertically center the text there */
23 |     background-color: #f5f5f5;
24 | }
25 | 
26 | hr {
27 |     width: 50%;
28 |     margin: auto;
29 | }
30 | 
31 | .table td {
32 |     text-align: center;
33 |     vertical-align: middle;
34 | }
35 | 
36 | .table tr {
37 |     text-align: center;
38 |     vertical-align: middle;
39 | }
40 | 
41 | /* bootstrap modifications */
42 | .container {
43 |     width: auto;
44 |     max-width: 680px;
45 |     padding: 0 15px;
46 | }
47 | 
48 | .extra-bottom {
49 |     padding-bottom: 2em;
50 | }
51 | 
52 | .task {
53 |     width: 50%;
54 | }
55 | 
56 | .task-id {
57 |     width: 10%;
58 | }
59 | 
60 | .status {
61 |     width: 20%;
62 | }
63 | 
64 | .update {
65 |     width: 10%;
66 | }


--------------------------------------------------------------------------------
/app/templates/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | 
  3 | <html>
  4 | 
  5 | <head>
  6 |     <title>To Do</title>
  7 | 
  8 |     <meta charset="utf-8">
  9 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 10 | 
 11 |     <link rel="icon" href="{{ url_for('static', filename='img/cs.ico') }}">
 12 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
 13 |         integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
 14 | 
 15 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.css">
 16 |     <link rel="stylesheet" href="{{ url_for('static', filename='styles/custom.css') }}">
 17 | 
 18 | </head>
 19 | 
 20 | <body>
 21 |     <main role="main" class="container extra-bottom">
 22 |         <h1 class="mt-5 text-center text-primary">Betsol To Do </h1>
 23 |         <p class="text-muted">BETSOL To-Do makes it easier for you to plan your work by using online to-do list App.</p>
 24 |     </main>
 25 |     <div class="container">
 26 |         <!-- Button trigger modal -->
 27 |         <div style="text-align: right;">
 28 |             <button type="button" class="btn btn-outline-info btn-lg" data-bs-toggle="modal"
 29 |                 data-bs-target="#task-modal" data-source="New Task">Add Task</button>
 30 |         </div>
 31 | 
 32 |         <div class="modal fade" id="task-modal" tabindex="-1" aria-labelledby="Label" aria-hidden="true">
 33 |             <div class="modal-dialog">
 34 |                 <div class="modal-content">
 35 |                     <div class="modal-header">
 36 |                         <h5 class="modal-title" id="Label">Add a task</h5>
 37 |                         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 38 |                     </div>
 39 | 
 40 |                     <div class="modal-body">
 41 |                         <div class="input-group mb-3">
 42 |                             <span class="input-group-text" id="task-form-display">Task</span>
 43 |                             <input type="text" class="form-control" placeholder="Description of task"
 44 |                                 aria-label="task-name" aria-describedby="basic-addon1">
 45 |                         </div>
 46 |                     </div>
 47 |                     <div class="modal-footer">
 48 |                         <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
 49 |                         <button id="submit-task" type="button" class="btn btn-primary">Add</button>
 50 |                     </div>
 51 |                 </div>
 52 |             </div>
 53 |         </div>
 54 |     </div>
 55 | 
 56 | 
 57 | 
 58 |     <div class="modal fade" id="edit-task-modal" tabindex="-1" aria-labelledby="Label" aria-hidden="true">
 59 |         <div class="modal-dialog">
 60 |             <div class="modal-content">
 61 |                 <div class="modal-header">
 62 |                     <h5 class="modal-title" id="Label">Edit task</h5>
 63 |                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 64 |                 </div>
 65 | 
 66 |                 <div class="modal-body">
 67 |                     <div class="input-group mb-3">
 68 |                         <span class="input-group-text" id="task-form-display">Task</span>
 69 |                         <input type="text" class="form-control" placeholder="Description of task"
 70 |                             aria-label="task-name" aria-describedby="basic-addon1">
 71 |                     </div>
 72 |                 </div>
 73 |                 <div class="modal-footer">
 74 |                     <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
 75 |                     <button id="edit-task-btn" type="button" class="btn btn-primary">Save </button>
 76 |                 </div>
 77 |             </div>
 78 |         </div>
 79 |     </div>
 80 | 
 81 | 
 82 |     
 83 |     <!--Todo Table-->
 84 |     <div class="container table-responsive">
 85 |         <table class="table table-hover caption-top">
 86 |             <caption>Task Details </caption>
 87 |             <thead class="table-light">
 88 |                 <tr>
 89 |                     <th class="task-id">Sl No</th>
 90 |                     <th class="task">Task Name</th>
 91 |                     <th class="status">Status</th>
 92 |                     <th class="update">Edit</th>
 93 |                     <th class="update">Remove</th>
 94 |                 </tr>
 95 |             </thead>
 96 | 
 97 |             <tbody>
 98 |                 {% for item in items %}
 99 |                 <tr>
100 |                     <td>{{item.id}}</td>
101 |                     <td>{{item.task}}</td>
102 |                     {% if item.status == "Todo" %}
103 |                     <td><button type="button" class="btn btn-outline-primary btn-sm state"
104 |                             data-source="{{item.id}}">{{item.status}}</button></td>
105 |                     {%endif%}
106 |                     {% if item.status == "In Progress" %}
107 |                     <td><button type="button" class="btn btn-outline-success btn-sm state"
108 |                             data-source="{{item.id}}">{{item.status}}</button></td>
109 |                     {%endif%}
110 |                     {% if item.status == "Completed" %}
111 |                     <td><button type="button" class="btn btn-outline-danger btn-sm state" disabled
112 |                             data-source="{{item.id}}">{{item.status}}</button></td>
113 |                     {%endif%}
114 | 
115 |                     <td><button type="button" class="btn btn-outline-info btn-sm" data-bs-toggle="modal"
116 |                             data-bs-target="#edit-task-modal" data-source="{{item.id}}" data-content="{{item.task}}"><i
117 |                                 class="fa fa-pen fa-1" aria-hidden="true"></i></button></td>
118 | 
119 |                     <td><button class="btn btn-outline-secondary btn-sm remove" data-source="{{item.id}}"
120 |                             type="button">Delete</button></td>
121 |                 </tr>
122 |                 {% endfor %}
123 | 
124 |             </tbody>
125 |         </table>
126 |     </div>
127 | 
128 | 
129 | 
130 |     <footer class="footer">
131 |         <div class="container">
132 |             <p class="text-muted"><small>BETSOL Copyright © 2022. ® All Rights Reserved.`</small></p>
133 |         </div>
134 |     </footer>
135 | </body>
136 | 
137 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
138 | <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
139 |     integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
140 |     crossorigin="anonymous"></script>
141 | <script src="{{ url_for('static', filename='script/modal.js') }}"></script>
142 | </html>


--------------------------------------------------------------------------------
/gitignore:
--------------------------------------------------------------------------------
  1 | env/
  2 | 
  3 | 
  4 | # system
  5 | .vscode
  6 | .venv
  7 | 
  8 | # sensitive
  9 | app.yaml
 10 | 
 11 | # Byte-compiled / optimized / DLL files
 12 | __pycache__/
 13 | *.py[cod]
 14 | *$py.class
 15 | 
 16 | # C extensions
 17 | *.so
 18 | 
 19 | # Distribution / packaging
 20 | .Python
 21 | build/
 22 | develop-eggs/
 23 | dist/
 24 | downloads/
 25 | eggs/
 26 | .eggs/
 27 | lib/
 28 | lib64/
 29 | parts/
 30 | sdist/
 31 | var/
 32 | wheels/
 33 | pip-wheel-metadata/
 34 | share/python-wheels/
 35 | *.egg-info/
 36 | .installed.cfg
 37 | *.egg
 38 | MANIFEST
 39 | 
 40 | # PyInstaller
 41 | #  Usually these files are written by a python script from a template
 42 | #  before PyInstaller builds the exe, so as to inject date/other infos into it.
 43 | *.manifest
 44 | *.spec
 45 | 
 46 | # Installer logs
 47 | pip-log.txt
 48 | pip-delete-this-directory.txt
 49 | 
 50 | # Unit test / coverage reports
 51 | htmlcov/
 52 | .tox/
 53 | .nox/
 54 | .coverage
 55 | .coverage.*
 56 | .cache
 57 | nosetests.xml
 58 | coverage.xml
 59 | *.cover
 60 | *.py,cover
 61 | .hypothesis/
 62 | .pytest_cache/
 63 | 
 64 | # Translations
 65 | *.mo
 66 | *.pot
 67 | 
 68 | # Django stuff:
 69 | *.log
 70 | local_settings.py
 71 | db.sqlite3
 72 | db.sqlite3-journal
 73 | 
 74 | # Flask stuff:
 75 | instance/
 76 | .webassets-cache
 77 | 
 78 | # Scrapy stuff:
 79 | .scrapy
 80 | 
 81 | # Sphinx documentation
 82 | docs/_build/
 83 | 
 84 | # PyBuilder
 85 | target/
 86 | 
 87 | # Jupyter Notebook
 88 | .ipynb_checkpoints
 89 | 
 90 | # IPython
 91 | profile_default/
 92 | ipython_config.py
 93 | 
 94 | # pyenv
 95 | .python-version
 96 | 
 97 | # pipenv
 98 | #   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
 99 | #   However, in case of collaboration, if having platform-specific dependencies or dependencies
100 | #   having no cross-platform support, pipenv may install dependencies that don't work, or not
101 | #   install all needed dependencies.
102 | #Pipfile.lock
103 | 
104 | # PEP 582; used by e.g. github.com/David-OConnor/pyflow
105 | __pypackages__/
106 | 
107 | # Celery stuff
108 | celerybeat-schedule
109 | celerybeat.pid
110 | 
111 | # SageMath parsed files
112 | *.sage.py
113 | 
114 | # Environments
115 | .env
116 | .venv
117 | env/
118 | venv/
119 | ENV/
120 | env.bak/
121 | venv.bak/
122 | 
123 | # Spyder project settings
124 | .spyderproject
125 | .spyproject
126 | 
127 | # Rope project settings
128 | .ropeproject
129 | 
130 | # mkdocs documentation
131 | /site
132 | 
133 | # mypy
134 | .mypy_cache/
135 | .dmypy.json
136 | dmypy.json
137 | 
138 | # Pyre type checker
139 | .pyre/
140 | 


--------------------------------------------------------------------------------
/requirements.txt:
--------------------------------------------------------------------------------
1 | click==7.1.2
2 | Flask==1.1.2
3 | itsdangerous==1.1.0
4 | Jinja2==2.11.3
5 | MarkupSafe==1.1.1
6 | Werkzeug==1.0.1
7 | gunicorn==20.1.0
8 | psycopg2==2.9.5
9 | 


--------------------------------------------------------------------------------