src/core/config.py

@@ -25,7 +25,7 @@ class Config(object):
     SECRET_KEY = secrets.token_hex(32)
 
     PERMANENT_SESSION_LIFETIME     = timedelta(days = 7).total_seconds()
-    SQLALCHEMY_DATABASE_URI        = "sqlite:///static/db/database.db"
+    SQLALCHEMY_DATABASE_URI        = "sqlite:///static/db/webfm.db"
     SQLALCHEMY_TRACK_MODIFICATIONS = False
 
     LOGIN_PATH                     = "FLASK_LOGIN"  # Value can be OIDC or FLASK_LOGIN

src/core/routes/Routes.py

@@ -44,7 +44,7 @@ def home():
 
 
 @app.route('/api/list-files/<_hash>', methods=['GET', 'POST'])
-def listFilesRoute(_hash = None):
+def listFiles(_hash = None):
     if request.method == 'POST':
         view     = get_window_controller().get_window(1).get_view(0)
         dot_dots = view.get_dot_dots()
@@ -78,7 +78,7 @@ def listFilesRoute(_hash = None):
         return msgHandler.createMessageJSON("danger", msg)
 
 @app.route('/api/file-manager-action/<_type>/<_hash>')
-def file_manager_action(_type, _hash = None):
+def fileManagerAction(_type, _hash = None):
     view = get_window_controller().get_window(1).get_view(0)
 
     if _type == "reset-path" and _hash == None:
@@ -103,8 +103,8 @@ def file_manager_action(_type, _hash = None):
         return msgHandler.createMessageJSON("success", msg)
 
 
-@app.route('/api/get-favorites', methods=['GET', 'POST'])
+@app.route('/api/list-favorites', methods=['GET', 'POST'])
-def getAllFavoritesRoute():
+def listFavorites():
     if request.method == 'POST':
         list  = db.session.query(Favorites).all()
         faves = []
@@ -121,7 +121,7 @@ def loadFavorite(_id):
     if request.method == 'POST':
         try:
             ID   = int(_id)
-            fave = db.session.query(Favorites).filter_by(id=ID).first()
+            fave = db.session.query(Favorites).filter_by(id = ID).first()
             view = get_window_controller().get_window(1).get_view(0)
             view.set_path(fave.link)
             return '{"refresh": "true"}'
@@ -135,7 +135,7 @@ def loadFavorite(_id):
 
 
 @app.route('/api/manage-favorites/<_action>', methods=['GET', 'POST'])
-def manageFavoritesRoute(_action):
+def manageFavorites(_action):
     if request.method == 'POST':
         ACTION = _action.strip()
         view   = get_window_controller().get_window(1).get_view(0)
@@ -146,7 +146,7 @@ def manageFavoritesRoute(_action):
             db.session.add(fave)
             msg  = "Added to Favorites successfully..."
         else:
-            fave = db.session.query(Favorites).filter_by(link=path).first()
+            fave = db.session.query(Favorites).filter_by(link = path).first()
             db.session.delete(fave)
             msg  = "Deleted from Favorites successfully..."
 

src/core/static/js/ajax.js

@@ -5,7 +5,7 @@ const listFilesAjax = async (hash) => {
 
 const getFavesAjax = async () => {
     const data = "empty=NULL";
-    doAjax("api/get-favorites", data, "favorites");
+    doAjax("api/list-favorites", data, "favorites");
 }
 
 const loadFavoriteLink = async (id) => {

src/core/static/js/post-ajax.js

@@ -5,8 +5,9 @@ const postAjaxController = (data, action) => {
         return ;
     }
 
+    console.log(data);
     if (data.hasOwnProperty('path_head'))
-        console.log(data);
+        console.log();
         // updateHTMLDirList(data);
     if (data.hasOwnProperty('faves_list'))
         // generateFavesList(data.faves_list);

src/core/static/js/react-ui-logic.js

@@ -0,0 +1,44 @@
+// Create a ES6 class component
+class FilesList extends React.Component {
+    // Use the render function to return JSX component
+    render() {
+        let final = [];
+        let files = this.props.files;
+
+        for (let file of files) {
+            final.push(
+                <div class="col-sm-12 col-md-6 col-lg-4">
+                    <div class="card">
+                        <div class="card-header">{file}</div>
+                        <div class="card-body">
+                            <img class="image-style" src="/api/files/file" alt="{file}" />
+                        </div>
+                        <div class="card-footer">
+                            <input app="{file}" class="btn btn-secondary btn-sm" type="button" value="Launch"/>
+                            <input app="{file}" class="btn btn-secondary btn-sm" type="button" value="Launch Locally"/>
+                        </div>
+                    </div>
+                </div>
+            );
+        }
+
+        return (
+            <div class="row">
+                {final}
+            </div>
+        );
+    }
+}
+
+const renderFilesList = (data = {"files": ['Dir 1', 'Dir 2', 'Dir 3', 'Dir 4', 'Dir 5']}) => {
+    // Obtain the root
+    const filesListElm = document.getElementById('files')
+
+    // Use the ReactDOM.render to show our component on the browser
+    ReactDOM.render(
+        React.createElement(FilesList, data),
+        filesListElm
+    )
+}
+
+renderFilesList()

src/core/static/js/ui-logic.js

@@ -1,20 +1,3 @@
-// {% for file in files['files'] %}
-// <div class="col-sm-12 col-md-6 col-lg-4">
-//     <div class="card">
-//         <div class="card-header">{{file[0]}}</div>
-//         <div class="card-body">
-//             <img class="image-style" src="/api/files/{{file[1]}}" alt="{{file[0]}}" />
-//         </div>
-//         <div class="card-footer">
-//             <input app="{{file[1]}}" class="btn btn-secondary btn-sm" type="button" value="Launch"/>
-//             <input app="{{file[1]}}" class="btn btn-secondary btn-sm" type="button" value="Launch Locally"/>
-//         </div>
-//     </div>
-// </div>
-// {% endfor %}
-
-
-
 const reloadDirectory = () => {
     let target = document.getElementById('refresh-btn')
     const hash = target.getAttribute("hash");

src/core/templates/layout.html

@@ -111,6 +111,7 @@
         <!-- For React -->
         <script src="{{ url_for('static', filename='js/libs/react/react.production.min-17-0-1.js')}}"></script>
         <script src="{{ url_for('static', filename='js/libs/react/react-dom.production.min-17-0-1.js')}}"></script>
+        <script src="{{ url_for('static', filename='js/libs/react/babel.js')}}"></script>
 
         <!-- Application Imports -->
         {% block body_scripts_additional %}

src/core/templates/pages/index.html

@@ -14,8 +14,8 @@
 {% endblock body_header_additional %}
 
 {% block body_content_additional %}
-<div id="files" class="row">
+    <div id="files">
-</div>
+    </div>
 {% endblock body_content_additional %}
 
 {% block body_footer_additional %}
@@ -23,7 +23,7 @@
 
 
 {% block body_scripts_additional %}
-    <script src="{{ url_for('static', filename='js/react-ui-logic.js')}}"></script>
+    <script type="text/babel" src="{{ url_for('static', filename='js/react-ui-logic.js')}}"></script>
     <script src="{{ url_for('static', filename='js/ui-logic.js')}}"></script>
     <script src="{{ url_for('static', filename='js/post-ajax.js')}}"></script>
     <script src="{{ url_for('static', filename='js/ajax.js')}}"></script>