|
|
@@ -21,7 +21,7 @@ if($patient->rtm_msk_protocol_detail_json) {
|
|
|
</div>
|
|
|
<div class="d-flex align-items-baseline mb-2">
|
|
|
<b>Exercises</b>
|
|
|
- <div class="ml-2 position-relative">
|
|
|
+ <div class="ml-3 position-relative">
|
|
|
<a href="#" v-on:click.prevent="toggleLibrary()">Add From Library</a>
|
|
|
<div v-if="showLibrary" class="position-absolute px-2 pt-2 border bg-white min-width-500px">
|
|
|
<p class="mb-2 text-nowrap text-secondary d-flex align-items-baseline">
|
|
|
@@ -46,6 +46,65 @@ if($patient->rtm_msk_protocol_detail_json) {
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <span class="mx-2 text-secondary">|</span>
|
|
|
+ <div class="position-relative">
|
|
|
+ <a href="#" v-on:click.prevent="showCustomAdd = !showCustomAdd">Add Custom</a>
|
|
|
+ <div v-if="showCustomAdd" class="position-absolute px-2 pt-2 border bg-white min-width-500px">
|
|
|
+ <p class="mb-2 text-nowrap text-secondary d-flex align-items-baseline">
|
|
|
+ <span class="font-weight-bold">Add Exercise</span>
|
|
|
+ <a href="#" class="ml-auto text-secondary" v-on:click.prevent="showCustomAdd = !showCustomAdd"><i class="fa fa-times-circle"></i></a>
|
|
|
+ </p>
|
|
|
+ <div class="mb-2">
|
|
|
+ <label class="text-sm text-secondary mb-1">Name</label>
|
|
|
+ <input type="text" class="form-control form-control-sm" v-model="customExercise.name">
|
|
|
+ </div>
|
|
|
+ <div class="mb-2">
|
|
|
+ <label class="text-sm text-secondary mb-1">Description</label>
|
|
|
+ <textarea class="form-control form-control-sm" rows="2" v-model="customExercise.description"></textarea>
|
|
|
+ </div>
|
|
|
+ <div class="mb-2">
|
|
|
+ <label class="text-sm text-secondary mb-1">Image URL:</label>
|
|
|
+ <input type="text" class="form-control form-control-sm" v-model="customExercise.image">
|
|
|
+ </div>
|
|
|
+ <div class="mb-2">
|
|
|
+ <label class="text-sm text-secondary mb-1">Video URL:</label>
|
|
|
+ <input type="text" class="form-control form-control-sm" v-model="customExercise.video">
|
|
|
+ </div>
|
|
|
+ <div class="d-flex align-items-baseline mb-2 pt-1">
|
|
|
+ <b class="text-secondary">Properties</b>
|
|
|
+ <a href="#" class="ml-3" v-on:click.prevent="addNewProperty()">Add</a>
|
|
|
+ </div>
|
|
|
+ <table class="table table-sm mb-2 table-bordered">
|
|
|
+ <thead>
|
|
|
+ <tr class="bg-light">
|
|
|
+ <th class="w-50 border-bottom-0 text-sm">Property</th>
|
|
|
+ <th class="w-50 border-bottom-0 text-sm">Value</th>
|
|
|
+ <th class="border-bottom-0 text-sm"></th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ <tr v-if="customExercise.props.length" v-for="(prop, propIndex) in customExercise.props">
|
|
|
+ <td class="p-0">
|
|
|
+ <input type="text" class="form-control form-control-sm border-0 rounded-0" v-model="prop.name">
|
|
|
+ </td>
|
|
|
+ <td class="p-0">
|
|
|
+ <input type="text" class="form-control form-control-sm border-0 rounded-0" v-model="prop.value">
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <a href="#" class="text-danger on-hover-opaque" v-on:click.prevent="customExercise.props.splice(propIndex, 1)">Remove</a>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr v-else>
|
|
|
+ <td colspan="3">No properties defined.</td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ <div class="d-flex align-items-baseline my-3">
|
|
|
+ <button class="btn btn-sm btn-primary font-weight-bold" v-on:click.prevent="addCustomExercise()">Save</button>
|
|
|
+ <button class="btn btn-sm btn-default border bg-white text-dark ml-2" v-on:click.prevent="showCustomAdd = !showCustomAdd">Close</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div v-if="!protocol.activities || !protocol.activities.length" class="text-secondary min-height-300px">No exercises defined yet!</div>
|
|
|
<div v-else class="min-height-300px">
|
|
|
@@ -89,6 +148,35 @@ if($patient->rtm_msk_protocol_detail_json) {
|
|
|
filter: '',
|
|
|
programNotesEditMode: false,
|
|
|
showLibrary: false,
|
|
|
+ showCustomAdd: false,
|
|
|
+ customExercise: {
|
|
|
+ name: '',
|
|
|
+ description: '',
|
|
|
+ image: '',
|
|
|
+ video: '',
|
|
|
+ props: [
|
|
|
+ {
|
|
|
+ name: 'Weekly',
|
|
|
+ value: '',
|
|
|
+ include: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'Daily',
|
|
|
+ value: '',
|
|
|
+ include: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'Sets',
|
|
|
+ value: '',
|
|
|
+ include: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'Reps',
|
|
|
+ value: '',
|
|
|
+ include: true,
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ },
|
|
|
protocol: {!! json_encode($data) !!},
|
|
|
library: {!! json_encode(config('rtm.exercises')) !!}
|
|
|
},
|
|
|
@@ -99,6 +187,50 @@ if($patient->rtm_msk_protocol_detail_json) {
|
|
|
this.filter = '';
|
|
|
}
|
|
|
},
|
|
|
+ toggleCustomAdd: function() {
|
|
|
+ if(!this.showCustomAdd) {
|
|
|
+ this.customExercise = {
|
|
|
+ name: '',
|
|
|
+ description: '',
|
|
|
+ image: '',
|
|
|
+ video: '',
|
|
|
+ props: [
|
|
|
+ {
|
|
|
+ name: 'Weekly',
|
|
|
+ value: '',
|
|
|
+ include: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'Daily',
|
|
|
+ value: '',
|
|
|
+ include: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'Sets',
|
|
|
+ value: '',
|
|
|
+ include: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'Reps',
|
|
|
+ value: '',
|
|
|
+ include: true,
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ }
|
|
|
+ this.showCustomAdd = !this.showCustomAdd;
|
|
|
+ },
|
|
|
+ addNewProperty: function() {
|
|
|
+ this.customExercise.props.push({
|
|
|
+ name: '',
|
|
|
+ value: '',
|
|
|
+ include: true,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ addCustomExercise: function() {
|
|
|
+ this.protocol.activities.push(JSON.parse(JSON.stringify(this.customExercise)));
|
|
|
+ this.showCustomAdd = !this.showCustomAdd;
|
|
|
+ },
|
|
|
addActivity: function(_exercise) {
|
|
|
let activity = {
|
|
|
name: _exercise.name,
|
