client template

app/Http/Controllers/ClientController.php

@@ -0,0 +1,16 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Auth;
+
+class ClientController extends Controller
+{
+
+	// GET /care_months
+	public function entrance(Request $request) {
+		return view('client/index');
+	}
+}

public/js/appClient.js

@@ -0,0 +1,114 @@
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "/";
+/******/
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 1);
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ "./resources/js/appClient.js":
+/*!***********************************!*\
+  !*** ./resources/js/appClient.js ***!
+  \***********************************/
+/*! no exports provided */
+/*! all exports used */
+/***/ (function(module, exports) {
+
+throw new Error("Module build failed (from ./node_modules/babel-loader/lib/index.js):\nError: ENOENT: no such file or directory, open 'C:\\Users\\Flavionel\\Desktop\\Work\\Programing\\Sal_Projects\\Java_Stag\\frontend\\resources\\js\\appClient.js'");
+
+/***/ }),
+
+/***/ 1:
+/*!*****************************************!*\
+  !*** multi ./resources/js/appClient.js ***!
+  \*****************************************/
+/*! no static exports found */
+/*! all exports used */
+/***/ (function(module, exports, __webpack_require__) {
+
+module.exports = __webpack_require__(/*! C:\Users\Flavionel\Desktop\Work\Programing\Sal_Projects\Java_Stag\frontend\resources\js\appClient.js */"./resources/js/appClient.js");
+
+
+/***/ })
+
+/******/ });

resources/js/components/pages/ClientEntrance.vue

@@ -0,0 +1,146 @@
+<template>
+    <div class="login-box">
+        <div class="login-logo auth-branding text-center border-0">
+            <span class="brand-text font-weight-light text-white">Welcome to <b>Dr. Smith & Dr. Brown's Office</b>!</span>
+        </div>
+            <v-stepper v-model="stepper">
+                <v-stepper-header>
+                    <v-stepper-step :complete="stepper > 1" step="1">Check In</v-stepper-step>
+
+                    <v-divider></v-divider>
+
+                    <v-stepper-step :complete="stepper > 2" step="2">Test your webcam</v-stepper-step>
+
+                    <v-divider></v-divider>
+
+                    <v-stepper-step step="3">Meet your Doctor</v-stepper-step>
+                </v-stepper-header>
+
+                <v-stepper-items>
+                    <v-stepper-content step="1">
+
+                        <v-card
+                        class="mb-12"
+                        color="grey lighten-1"
+                        height="200px"
+                        >
+                        <div class="checkin-form d-flex justify-content-center align-items-center">
+                            <form action="/post-to-api"
+                                method="post"
+                                enctype="multipart/form-data">
+
+                                <input type="hidden" name="lobbyUid" value=""/>
+                                <input type="hidden" name="_api" value="/api/session/proRequestSmsTokenToLogIn">
+                                <input type="hidden" name="_success" value="/pro/login">
+                                <input type="hidden" name="_return" value="/">
+
+                                <div class="input-group mb-3">
+                                    <input type="text" name="name" class="form-control" placeholder="Full Name" required>
+                                </div>
+
+                                <div class="input-group mb-3">
+                                    <input type="date" name="dob" class="form-control" placeholder="Date of Birth" required>
+                                </div>
+                            </form>
+                        </div>
+                        </v-card>
+
+                        <v-btn
+                        color="primary"
+                        @click="checkIn"
+                        :loading="loading"
+                        >
+                        Continue
+                        </v-btn>
+
+                    </v-stepper-content>
+
+                    <v-stepper-content step="2">
+                        <p>
+                            Please make sure your webcam is working. Accept the access request to your hardware on the top left to continue.
+                            <br>
+                            Then, someone should be with you shortly.
+                        </p>
+
+                        <v-card
+                        class="mb-12"
+                        color="grey lighten-1"
+                        height="200px"
+                        ></v-card>
+
+                        <v-btn
+                        color="primary"
+                        @click="stepper = 3"
+                        :disabled="!cameraWorkingConfirmed"
+                        >
+                        Continue
+                        </v-btn>
+
+                        <v-btn text @click="stepper = 1">Cancel</v-btn>
+                    </v-stepper-content>
+
+                    <v-stepper-content step="3">
+                        <p>
+                            Great!
+                        </p>
+
+                        <v-card
+                        class="mb-12"
+                        color="grey lighten-1"
+                        height="200px"
+                        ></v-card>
+
+                        <v-btn
+                        color="primary"
+                        @click="stepper = 1"
+                        >
+                        Continue
+                        </v-btn>
+
+                        <v-btn text @click="stepper = 2">Cancel</v-btn>
+                    </v-stepper-content>
+                </v-stepper-items>
+            </v-stepper>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        lobby_uid: {
+            type: String,
+            required: true
+        }
+    },
+    data() {
+        return {
+            stepper: 1,
+            cameraWorkingConfirmed: false,
+            loading: false
+        }
+    },
+    methods: {
+        checkIn(){
+            //ajax logic
+
+            this.stepper = 2
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+
+.login-box {
+    width: 100%;
+}
+
+.checkin-form {
+    height: 200px;
+
+    form {
+        width: 75%;
+    }
+}
+
+</style>

resources/js/components/partials/MeetingRoom.vue

@@ -373,51 +373,51 @@ export default {
     shareScreen() {
         if (this.screenPublisher) return;
         this.screenPublisher = OT.initPublisher(
-            this.$refs.otContainer,
-            {
-              insertMode: "append",
-              width: "100%",
-              height: "100%",
-              resolution: "1280x720",
-              frameRate: 30,
-              videoSource: "screen",
-              name: this.user.name,
-              style: {
-                nameDisplayMode: "on",
-                archiveStatusDisplayMode: "off"
-              }
-            },
-            error => {
-                if (error) {
-                  console.error(error);
-                  if (error.code !== 1500) alert(error.message);
-                  this.screenPublisher = null;
-                } else {
-                  const cont = this.createVideoContainer();
-                  this.$nextTick(() => {
-                    cont.el = $(`#${cont.id}`)[0];
-                    cont.el.appendChild(this.screenPublisher.element);
-                    cont.obj = this.screenPublisher;
-                    // cont.self = true;
-
-                    this.$set(cont, "self", true);
-                  });
-                  this.screenPublisher.on("streamDestroyed", event => {
-                    cont.el.remove();
-                    const index = this.videos.findIndex(v => v.id == cont.id);
-                    if (index >= 0) this.videos.splice(index, 1);
-                    this.adjustVideoContainers();
-                    this.screenPublisher = null;
-                    this.$store.commit("setScreenShareState", false);
-                  });
-                  this.openTokSession.publish(this.screenPublisher, error => {
-                    if (error) {
-                      alert(error.message);
-                    }
-                  });
-                  this.$store.commit("setScreenShareState", true);
-                }
+          this.$refs.otContainer,
+          {
+            insertMode: "append",
+            width: "100%",
+            height: "100%",
+            resolution: "1280x720",
+            frameRate: 30,
+            videoSource: "screen",
+            name: this.user.name,
+            style: {
+              nameDisplayMode: "on",
+              archiveStatusDisplayMode: "off"
             }
+          },
+          error => {
+              if (error) {
+                console.error(error);
+                if (error.code !== 1500) alert(error.message);
+                this.screenPublisher = null;
+              } else {
+                const cont = this.createVideoContainer();
+                this.$nextTick(() => {
+                  cont.el = $(`#${cont.id}`)[0];
+                  cont.el.appendChild(this.screenPublisher.element);
+                  cont.obj = this.screenPublisher;
+                  // cont.self = true;
+
+                  this.$set(cont, "self", true);
+                });
+                this.screenPublisher.on("streamDestroyed", event => {
+                  cont.el.remove();
+                  const index = this.videos.findIndex(v => v.id == cont.id);
+                  if (index >= 0) this.videos.splice(index, 1);
+                  this.adjustVideoContainers();
+                  this.screenPublisher = null;
+                  this.$store.commit("setScreenShareState", false);
+                });
+                this.openTokSession.publish(this.screenPublisher, error => {
+                  if (error) {
+                    alert(error.message);
+                  }
+                });
+                this.$store.commit("setScreenShareState", true);
+              }
+          }
         );
     },
     kickParcitipantContinue(participant) {

resources/sass/app.scss

@@ -37,4 +37,16 @@ $orange: #F08322;
             background-color: $darker-green;
         }
 	}
+}
+
+/* Client App */
+
+#meetingsApp.client {
+    width: 75%;
+    height: 75%;
+    background: #e9ecef;
+
+    .v-application--wrap {
+        min-height: 0;
+    }
 }

resources/views/client/index.blade.php

@@ -0,0 +1,6 @@
+@extends('layouts.client')
+@section('content')
+<v-app id="meetingsApp" class="client">
+    <client-entrance lobby_uid="cc2fd3ed-3279-4453-959c-d9908b4946cc"></client-entrance>
+</v-app>
+@endsection

resources/views/layouts/client.blade.php

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Stag | Pro</title>
+    <!-- Tell the browser to be responsive to screen width -->
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="/AdminLTE-3.0.5/plugins/fontawesome-free/css/all.min.css">
+    <!-- Ionicons -->
+    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
+    <!-- icheck bootstrap -->
+    <link rel="stylesheet"
+          href="/AdminLTE-3.0.5/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
+    <!-- Theme style -->
+    <link rel="stylesheet" href="/AdminLTE-3.0.5/dist/css/adminlte.css">
+    <!-- Google Font: Source Sans Pro -->
+    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
+    <script src="{{ mix('js/app.js') }}" defer></script>
+    <link href="{{ mix('css/app.css') }}" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
+</head>
+<body class="hold-transition login-page">
+
+<style>
+    .auth-branding {
+        background: #444343 !important;
+        box-shadow: none !important;
+        border-bottom: 1px solid #262626;
+        padding: 0.5rem 0;
+        margin: 0;
+        border-top-left-radius: 8px;
+        border-top-right-radius: 8px;
+        font-size: 1.4rem;
+    }
+
+    .auth-branding img {
+        line-height: .8;
+        margin-left: 0;
+        margin-right: .5rem;
+        margin-top: -3px;
+        max-height: 33px;
+    }
+
+    .login-card-body {
+        border-bottom-left-radius: 8px;
+        border-bottom-right-radius: 8px;
+    }
+</style>
+
+@yield('content')
+
+<!-- jQuery -->
+<script src="/AdminLTE-3.0.5/plugins/jquery/jquery.min.js"></script>
+<!-- Bootstrap 4 -->
+<script src="/AdminLTE-3.0.5/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+<!-- AdminLTE App -->
+<script src="/AdminLTE-3.0.5/dist/js/adminlte.js"></script>
+
+</body>
+</html>

resources/views/public/pro-request-sms-login-token.blade.php

@@ -25,4 +25,4 @@
         </div>
         <button type="submit" class="btn btn-primary btn-block mx-auto w-50 mt-4 mb-2">Submit</button>
     </form>
-@endsection
+@endsection

routes/web.php

@@ -56,4 +56,6 @@ Route::middleware('ensureValidSession')->group(function(){
 
 });
 
+Route::get('/client', 'ClientController@entrance')->name('client-entrance');
+
 Route::post('/post-to-api', 'AppSessionController@postToAPI')->name('post-to-api');