Autodesk-Forge · libvarun · Aug 17, 2020 · Aug 21, 2020 · Aug 21, 2020 · Aug 21, 2020
diff --git a/.gitignore b/.gitignore
@@ -31,6 +31,7 @@ build/Release
 # Dependency directories
 node_modules
 jspm_packages
+wipe-dependencies.js
 
 # Optional npm cache directory
 .npm

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,18 +3,19 @@
   "version": "1.0.0",
   "description": "Transparent use of Model Derivative to view Box compatible files.",
   "dependencies": {
-    "body-parser": "*",
-    "bootstrap": "3.4.1",
-    "cookie-parser": "*",
-    "express": "*",
-    "express-session": "*",
-    "forge-apis": "0.4.3",
-    "googleapis": "19.0.0",
-    "jquery": "3.2.1",
-    "jstree": "3.3.7",
-    "moment": "2.19.4",
-    "request": "*",
-    "serve-favicon": "*"
+    "body-parser": "^1.19.0",
+    "bootstrap": "^4.5.2",
+    "cookie-parser": "^1.4.5",
+    "express": "^4.17.1",
+    "express-session": "^1.17.1",
+    "forge-apis": "^0.7.3",
+    "googleapis": "^59.0.0",
+    "jquery": "^3.5.1",
+    "jstree": "^3.3.10",
+    "moment": "^2.27.0",
+    "nodemon": "^2.0.4",
+    "request": "^2.88.2",
+    "serve-favicon": "^2.5.0"
   },
   "repository": {
     "type": "git",
@@ -23,7 +24,8 @@
   "scripts": {
     "start": "NODE_ENV=production node start.js",
     "dev": "node start.js",
-    "nodemon": "nodemon start.js --ignore www/"
+    "nodemon": "nodemon start.js --ignore www/",
+    "update:packages": "node wipe-dependencies.js && rm -rf node_modules && npm update --save-dev && npm update --save"
   },
   "author": "Vadym Kuzin (Forge Partner Development)",
   "license": "MIT"

diff --git a/server/google.drive.tree.js b/server/google.drive.tree.js
@@ -29,9 +29,9 @@ var router = express.Router();
 var config = require('./config');
 
 // google drive sdk: https://developers.google.com/drive/v3/web/quickstart/nodejs
-var google = require('googleapis');
+const {google} = require('googleapis');
 var OAuth2 = google.auth.OAuth2;
-var oauth2Client = new OAuth2(config.google.credentials.client_id, config.google.credentials.client_secret, config.google.callbackURL);
+var oauth2Client = new google.auth.OAuth2(config.google.credentials.client_id, config.google.credentials.client_secret, config.google.callbackURL);
 
 router.get('/google/authenticate', function (req, res) {
 
@@ -102,7 +102,7 @@ function drivePage(res, drive, folderId, npToken, first){
     pageToken: npToken
   }, function (err, lst) {
     if (err) console.log(err);
-    var items = lst.items;
+    var items = lst.data.items;
 
     items.forEach(function(item){
       var treeItem = {

diff --git a/server/model.derivative.google.drive.integration.js b/server/model.derivative.google.drive.integration.js
@@ -31,7 +31,7 @@ var jsonParser = bodyParser.json();
 var config = require('./config');
 
 // google drive sdk: https://developers.google.com/drive/v3/web/quickstart/nodejs
-var google = require('googleapis');
+const {google} = require('googleapis');
 var OAuth2 = google.auth.OAuth2;
 var oauth2Client = new OAuth2(config.google.credentials.client_id, config.google.credentials.client_secret, config.google.callbackURL);
 
@@ -49,39 +49,40 @@ router.post('/integration/sendToTranslation', jsonParser, function (req, res) {
     oauth2Client.setCredentials({
       access_token: tokenSession.getGoogleToken()
     });
-    var drive = google.drive({version: 'v2', auth: oauth2Client});
-
+    var drive = google.drive({version: 'v3', auth: oauth2Client});
 
+    /*
     var people = google.people({version: 'v1', auth: oauth2Client});
     people.people.get({ resourceName: 'people/me', personFields: 'emailAddresses,names' }, function (err, user) {
       if (err || user == null) {
         console.log('model.derivative.google.drive.integration:sentToTranslation:google.user.get => ' + err);
         res.status(500).json({error: 'Cannot get Google user information, please try again.'});
         return;
       }
-
+      */
       // ForgeSDK OSS Bucket Name: username + userId (no spaces, lower case)
       // that way we have one bucket for each Google account using this application
-      var ossBucketKey = 
-          config.credentials.client_id.toLowerCase() + 
-          (
-            user.names[0].displayName.replace(/\W+/g, '') +
-            user.resourceName.split('/')[1]
-          ).toLowerCase();
+      var ossBucketKey = config.credentials.client_id.toLowerCase()
+          //  + 
+          // (
+          //   user.names[0].displayName.replace(/\W+/g, '') +
+          //   user.resourceName.split('/')[1]
+          // ).toLowerCase();
 
       var buckets = new ForgeSDK.BucketsApi();
       var objects = new ForgeSDK.ObjectsApi();
       var postBuckets = new ForgeSDK.PostBucketsPayload();
       postBuckets.bucketKey = ossBucketKey;
       postBuckets.policyKey = "transient"; // expires in 24h
-
+      var ossObjectName;
       buckets.createBucket(postBuckets, {}, null, tokenInternal).catch(function (err) {console.log(err);}).then(function () {
         // need the Google file information to get the name...
         drive.files.get({
           fileId: googleFileId
         }, function (err, fileInfo) {
-          var fileName = fileInfo.title;
-          var ossObjectName = googleFileId + '.' + re.exec(fileName)[1]; // googleId + fileExtension (required)
+          var fileName = fileInfo.data.name;
+          // var ossObjectName = googleFileId + '.' + re.exec(fileName)[1]; // googleId + fileExtension (required)
+          ossObjectName = fileName; // googleId + fileExtension (required)
 
           // at this point the bucket exists (either created or already there)
           objects.getObjects(ossBucketKey, {'limit': 100}, null, tokenInternal).then(function (response) {
@@ -113,7 +114,7 @@ router.post('/integration/sendToTranslation', jsonParser, function (req, res) {
                */
 
               request({
-                url: 'https://www.googleapis.com/drive/v2/files/' + googleFileId + '?alt=media',
+                url: 'https://www.googleapis.com/drive/v3/files/' + googleFileId + '?alt=media',
                 method: "GET",
                 headers: {
                   'Authorization': 'Bearer ' + tokenSession.getGoogleToken(),
@@ -141,7 +142,7 @@ router.post('/integration/sendToTranslation', jsonParser, function (req, res) {
       });
     });
   });
-});
+// });
 
 router.post('/integration/isReadyToShow', jsonParser, function (req, res) {
   var ossUrn = req.body.urn;

diff --git a/www/css/main.css b/www/css/main.css
@@ -1,14 +1,42 @@
-
-html {
-    position: relative;
+html, body{
     min-height: 100%;
-}
-
-body {
-    padding-top: 20px; /* space for the top nav bar */
-    margin-bottom: 60px; /* Margin bottom by footer height */
+    height: 100%;
+  }
+
+  .fill{
+    height: calc(100vh - 100px);
+  }
+
+  body {
+    padding-top: 60px; /* space for the top nav bar */
     margin-right: 30px;
-}
+  }
+
+  #appBuckets {
+    overflow: auto;
+    width: 100%;
+    height: calc(100vh - 150px);
+  }
+
+  #forgeViewer {
+    width: 100%;
+  }
+
+  #dashboard{
+    overflow: auto;
+    height: calc(100vh - 100px);
+  }
+
+  .transition-width {
+    transition: width 1s ease-in-out;
+  }
+
+  .dashboardPanel {
+    width: 100%;
+    padding: 3%;
+    display: block;
+  }
+
 
 .footer {
     position: absolute;
@@ -34,8 +62,4 @@ img.gray:hover {
     filter: none;
     -webkit-filter: grayscale(0);
 }
-
-div.forgeViewer {
-    height: 540px;
-    width: 100%;
-}
+#loginGoogle{font-size: 1.7em;padding: 7px;}
diff --git a/www/index.html b/www/index.html
@@ -1,48 +1,70 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
+
 <head>
-  <meta charset="UTF-8">
-  <title>Autodesk Forge Integration with Google Drive</title>
-  <!-- Common packages: JQuery & Bootstrap -->
-  <link rel="stylesheet" href="/css/bootstrap.min.css">
-  <link rel="stylesheet" href="/css/jstree/style.css"/>
-  <script language="JavaScript" src="/js/jquery.min.js"></script>
-  <script language="JavaScript" src="/js/bootstrap.min.js"></script>
-  <script language="JavaScript" src="/js/jstree.min.js"></script>
+  <title>Autodesk Forge Tutorial</title>
+  <meta charset="utf-8" />
+  <link rel="shortcut icon" href="https://github.com/Autodesk-Forge/learn.forge.viewmodels/raw/master/img/favicon.ico">
+  <!-- Common packages: jQuery, Bootstrap, jsTree -->
+  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.7/jstree.min.js"></script>
   <script language="JavaScript" src="/js/moment.min.js"></script>
   <script language="JavaScript" src="/js/notify.min.js"></script>
-  <!-- Autodesk ForgeSDK Viewer files -->
-  <link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/style.min.css?v=v6.0" type="text/css">
-  <script language="JavaScript" src="https://developer.api.autodesk.com/modelderivative/v2/viewers/viewer3D.js?v=v6.0"></script>
-  <!-- this project main script -->
-  <link rel="shortcut icon" href=/img/favicon.ico type=image/x-icon>
-  <link rel="stylesheet" href="/css/main.css"/>
+  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
+  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.7/themes/default/style.min.css" />
+  <!-- Autodesk Forge Viewer files -->
+  <link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css">
+  <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.min.js"></script>
+  <!-- this project files -->
+  <link href="css/main.css" rel="stylesheet" />
   <script language="JavaScript" src="/js/ForgeViewer.js"></script>
   <script language="JavaScript" src="/js/google.js"></script>
+<!--Chart JS  packages-->
+<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" ></script>
+<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css" />
+
+
 </head>
+
 <body>
-<div class="container-fluid">
-  <div class="row">
-    <div class="col-sm-4">
-      <div class="panel panel-default">
-        <div class="panel-heading" data-toggle="tooltip">Google Drive
-          <button id="loginGoogle" class="btn btn-xs btn-default" style="float:right;">
-            <img src="img/google-logo.png" height="14" sstyle="vertical-align: top;"/> Account
-          </button>
-          <img src="/img/refresh.png" id="refreshGoogleDriveTree" style="vertical-align: top; cursor: pointer" title="Refresh Google Drive files" height="20"/>
-        </div>
-        <div id="myGoogleDriveFiles" class="foldertree">
+  <!-- Fixed navbar by Bootstrap: https://getbootstrap.com/examples/navbar-fixed-top/ -->
+  <nav class="navbar navbar-default navbar-fixed-top">
+    <div class="container-fluid">
+      <ul class="nav navbar-nav left">
+        <li>
+          <a href="http://developer.autodesk.com" target="_blank">
+            <img alt="Autodesk Forge" src="//developer.static.autodesk.com/images/logo_forge-2-line.png" height="20">
+          </a>
+        </li>
+      </ul>
+    </div>
+  </nav>
+  <!-- End of navbar -->
+  <div class="container-fluid fill">
+    <div class="row fill">
+      <div class="col-sm-3 fill">
+        <div class="panel panel-default fill">
+          <div class="panel-heading" data-toggle="tooltip">
+            Google Drive <img src="/img/refresh.png" id="refreshGoogleDriveTree" style="vertical-align: top; cursor: pointer" title="Refresh Google Drive files" height="20"/>
+          </div>
+          <div id="myGoogleDriveFiles" class="foldertree"></div>
         </div>
       </div>
-    </div>
-    <div class="col-sm-8">
-      <div id="forgeViewer" class="forgeViewer"></div>
+      <div class="col-sm-9 fill">
+        <p class="information">This sample uploads your design files from Google Drive to Forge bucket, converts it to SVF format and shown in the forge viewer inside browser. Please grant access to your google drive to proceed.</p>
+        <button id="loginGoogle" class="btn btn-xs btn-default">
+          <img src="img/google-logo.png" height="40" sstyle="vertical-align: top;"/> Account
+        </button>
+        <div id="forgeViewer" class="forgeViewer"></div>
+      </div>
     </div>
   </div>
-</div>
-<footer class="footer">
-  <span><a href="http://developer.autodesk.com"><img src="img/autodesk-logo.png" alt="Autodesk" height="16"> Autodesk <img src="img/autodesk-forge.png" alt="Forge" height="20">Forge</a></span>
-  <div style="float:right;"><img src="/img/github-logo.png" height="20"/> <a href="https://github.com/Autodesk-forge/model.derivative-nodejs-google.drive.viewer">Source code</a></div>
-</footer>
+  <footer class="footer">
+    <a href="./privacy.html">Privacy Policy</a>&nbsp;|&nbsp; <a href="./terms.html">Terms of Service</a>&nbsp;|&nbsp;
+    <span><a href="http://developer.autodesk.com"><img src="img/autodesk-logo.png" alt="Autodesk" height="16"> Autodesk <img src="img/autodesk-forge.png" alt="Forge" height="20">Forge</a></span>
+    <div style="float:right;"><img src="/img/github-logo.png" height="20"/> <a href="https://github.com/Autodesk-forge/model.derivative-nodejs-google.drive.viewer">Source code</a></div>
+  </footer>
 </body>
+
 </html>