viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 06d0b653370af2de3a23507408d23c02c1739379

Authored by Amber Dev
1 parent 2d3a8e9c37
Exists in master and in 2 other branches amber-development, ui-design

added pdf link

Showing 2 changed files with 24 additions and 17 deletions   Show diff stats
src/pages/Common/UploadFiles.vue
Diff comments   View file @06d0b65
1 <template> 1 <template>
2 <div> 2 <div>
3 <v-text-field 3 <v-text-field
4 :label="label" 4 :label="label"
5 @click="clickInputTag" 5 @click="clickInputTag"
6 v-model="fileName" 6 v-model="fileName"
7 append-icon="attach_file" 7 append-icon="attach_file"
8 ></v-text-field> 8 ></v-text-field>
9 <input 9 <input
10 type="file" 10 type="file"
11 style="display: none" 11 style="display: none"
12 :id="id" 12 :id="id"
13 :ref="reference" 13 :ref="reference"
14 accept="image/*" 14 accept="image/*"
15 @change="convertToBase64()" 15 @change="convertToBase64()"
16 /> 16 />
17 </div> 17 </div>
18 </template> 18 </template>
19 <script > 19 <script >
20 export default { 20 export default {
21 props: ["label", "reference", "id", "trigger"], 21 props: ["label", "reference", "id", "trigger"],
22 data() { 22 data() {
23 return { 23 return {
24 fileToLoad: "", 24 fileToLoad: "",
25 fileName: "", 25 fileName: "",
26 fileInBase64: "" 26 fileInBase64: ""
27 }; 27 };
28 }, 28 },
29 methods: { 29 methods: {
30 clickInputTag() { 30 clickInputTag() {
31 this.$refs[this.reference].click(); 31 this.$refs[this.reference].click();
32 }, 32 },
33 convertToBase64(e) { 33 convertToBase64(e) {
34 //Read File 34 //Read File
35 var selectedFile = document.getElementById(this.id).files; 35 var selectedFile = document.getElementById(this.id).files;
36 //Check File is not Empty 36 //Check File is not Empty
37 37
38 if (selectedFile.length > 0) { 38 if (selectedFile.length > 0) {
39 // Select the very first file from list 39 // Select the very first file from list
40 this.fileToLoad = selectedFile[0]; 40 this.fileToLoad = selectedFile[0];
41 this.fileName = selectedFile[0].name; 41 this.fileName = selectedFile[0].name;
42 // FileReader function for read the file. 42 // FileReader function for read the file.
43 var fileReader = new FileReader(); 43 var fileReader = new FileReader();
44 // Onload of file read the file content 44 // Onload of file read the file content
45 let vm = this; 45 let vm = this;
46 fileReader.onload = function(fileLoadedEvent) { 46 fileReader.onload = function(fileLoadedEvent) {
47 vm.fileInBase64 = fileLoadedEvent.target.result; 47 vm.fileInBase64 = fileLoadedEvent.target.result;
48 // Print data in console 48 // Print data in console
49 console.log(vm.fileInBase64); 49 console.log(vm.fileInBase64);
50 50
51 var str = vm.fileInBase64; 51 var str = vm.fileInBase64;
52 const [baseUrl, requiredUrl] = str.split(/,/); 52 const [baseUrl, requiredUrl] = str.split(/,/);
53 console.log("required - ", requiredUrl); 53 console.log("required - ", requiredUrl);
54 54
55 let fileData = { 55 let fileData = {
56 fileName: this.fileName, 56 fileName: this.fileName,
57 fileInBase64: requiredUrl 57 fileInBase64: requiredUrl
58 }; 58 };
59 vm.$emit("fileSelected", fileData); 59 vm.$emit("fileSelected", fileData);
60 }; 60 };
61 61
62 // Convert data to base64 62 // Convert data to base64
63 fileReader.readAsDataURL(this.fileToLoad); 63 fileReader.readAsDataURL(this.fileToLoad);
64 } 64 }
65 }, 65 },
66 resetInput(params) { 66 resetInput(params) {
67 // RESET INPUT ELEMENT,fileName and selectedfile array 67 // RESET INPUT ELEMENT,fileName and selectedfile array
68 console.log("reference is - ", this.reference); 68 console.log("reference is - ", this.reference);
69 this.$refs[this.reference].type = "text"; 69 this.$refs[this.reference].type = "text";
70 this.$refs[this.reference].type = "file"; 70 this.$refs[this.reference].type = "file";
71 this.fileName = ""; 71 this.fileName = "";
72 this.fileToLoad; 72 this.fileToLoad;
73 this.fileInBase64 = null; 73 this.fileInBase64 = null;
74 let fileData = { 74 let fileData = {
75 fileName: this.fileName, 75 fileName: this.fileName,
76 fileInBase64: this.fileInBase64 76 fileInBase64: this.fileInBase64
77 }; 77 };
78 vm.$emit("fileSelected", fileData); 78 vm.$emit("fileSelected", fileData);
79 } 79 }
80 }, 80 },
81 beforeDestroy() { 81 beforeDestroy() {
82 this.resetInput(); 82 this.resetInput();
83 },
84 computed: {
85 respondToTrigger() {
86 this.respondToTrigger = this.trigger;
87 if ((this.respondToTrigger = "reset")) {
88 this.resetInput;
89 }
90 }
91 } 83 }
84 // computed: {
85 // respondToTrigger() {
86 // this.respondToTrigger = this.trigger;
87 // if ((this.respondToTrigger = "reset")) {
src/pages/Dashboard/ChapterInfo.vue
Diff comments   View file @06d0b65
1 <template> 1 <template>
2 <div> 2 <div>
3 <!-- LOADER --> 3 <!-- LOADER -->
4 <div class="loader" v-if="showLoader"> 4 <div class="loader" v-if="showLoader">
5 <v-progress-circular indeterminate color="white"></v-progress-circular> 5 <v-progress-circular indeterminate color="white"></v-progress-circular>
6 </div> 6 </div>
7 7
8 <!-- SNACKBAR --> 8 <!-- SNACKBAR -->
9 <v-snackbar 9 <v-snackbar
10 :timeout="timeout" 10 :timeout="timeout"
11 :top="y === 'top'" 11 :top="y === 'top'"
12 :right="x === 'right'" 12 :right="x === 'right'"
13 :vertical="mode === 'vertical'" 13 :vertical="mode === 'vertical'"
14 v-model="snackbar" 14 v-model="snackbar"
15 :color="snackbarColor" 15 :color="snackbarColor"
16 > 16 >
17 {{ text }} 17 {{ text }}
18 <v-spacer></v-spacer> 18 <v-spacer></v-spacer>
19 <v-btn flat text @click="snackbar = false">X</v-btn> 19 <v-btn flat text @click="snackbar = false">X</v-btn>
20 </v-snackbar> 20 </v-snackbar>
21 21
22 <v-container class="pt-0"> 22 <v-container class="pt-0">
23 <v-layout row class="mt-1"> 23 <v-layout row class="mt-1">
24 <v-flex xs8> 24 <v-flex xs8>
25 <!-- CHAPTER INFO --> 25 <!-- CHAPTER INFO -->
26 <div class="title side-bar-color font-weight-bold">{{chapter.chapters[0].chapterName}}</div> 26 <div class="title side-bar-color font-weight-bold">{{chapter.chapters[0].chapterName}}</div>
27 <div class="subheading grey--text lighten-1">{{chapter.chapters[0].description}}</div> 27 <div class="subheading grey--text lighten-1">{{chapter.chapters[0].description}}</div>
28 <div 28 <div
29 v-for="(point,index) in chapter.chapters[0].chapterPoints" 29 v-for="(point,index) in chapter.chapters[0].chapterPoints"
30 :key="index" 30 :key="index"
31 class="ml-2 mt-2" 31 class="ml-2 mt-2"
32 > 32 >
33 <span class="subheading grey--text lighten-1">{{index +1}}. {{point}}</span> 33 <span class="subheading grey--text lighten-1">{{index +1}}. {{point}}</span>
34 </div> 34 </div>
35 <!-- ACTIVITIES --> 35 <!-- ACTIVITIES -->
36 <div class="mt-5"> 36 <div class="mt-5">
37 <v-icon>library_books</v-icon> 37 <v-icon>library_books</v-icon>
38 <span class="subheading font-weight-bold">Activities</span> 38 <span class="subheading font-weight-bold">Activities</span>
39 </div> 39 </div>
40 <!-- OTHER OPTIONS --> 40 <!-- OTHER OPTIONS -->
41 <div class="mt-5"> 41 <div class="mt-5">
42 <ul class="subheading" style="cursor: pointer"> 42 <ul class="subheading">
43 <li 43 <!-- LIVE ONLINE CLASSES -->
44 @click="$router.push({name: 'Live Online Class', query: {chapterId: $route.query.selectedChapterId, chapterName: chapter.chapters[0].chapterName, courseId: $route.query.courseId, classId: localStorage.getItem('parentClassId') } })" 44 <div>
45 > 45 <v-btn flat class="px-4">
46 <v-btn flat>Live online classes</v-btn> 46 <li
47 </li> 47 @click="$router.push({name: 'Live Online Class', query: {chapterId: $route.query.selectedChapterId, chapterName: chapter.chapters[0].chapterName, courseId: $route.query.courseId, classId: localStorage.getItem('parentClassId') } })"
48 <li> 48 >Live online classes</li>
49 </v-btn>
50 </div>
51 <!-- OPEN PDF IN NEW TAB -->
52 <div>
49 <a 53 <a
50 :href="chapter.chapters[0].pdfFileUrl" 54 :href="chapter.chapters[0].pdfFileUrl"
51 target="_blank" 55 target="_blank"
52 style="text-decoration: none!important;" 56 style="text-decoration: none!important;"
53 > 57 >
54 <v-btn flat>Open PDF</v-btn> 58 <v-btn flat class="px-4">
59 <li>Open PDF</li>
60 </v-btn>
55 </a> 61 </a>
56 </li> 62 </div>
63
57 <!-- <li> 64 <!-- <li>
58 <v-btn flat>HSP Interactive content</v-btn> 65 <v-btn flat>HSP Interactive content</v-btn>
59 </li> 66 </li>
60 <li> 67 <li>
61 <v-btn flat>Assessment</v-btn> 68 <v-btn flat>Assessment</v-btn>
62 </li>--> 69 </li>-->
63 </ul> 70 </ul>
64 </div> 71 </div>
65 72
66 <!-- SELECT CHAPTERS --> 73 <!-- SELECT CHAPTERS -->
67 <v-layout row class="mt-5"> 74 <v-layout row class="mt-5">
68 <!-- PREVIOUS CHAPTER --> 75 <!-- PREVIOUS CHAPTER -->
69 <v-flex 76 <v-flex
70 style="cursor: pointer;" 77 style="cursor: pointer;"
71 class="subheading font-weight-bold text-xs-left" 78 class="subheading font-weight-bold text-xs-left"
72 v-if="indexSelectedChapter > 0" 79 v-if="indexSelectedChapter > 0"
73 @click="showSelectedChapter('back')" 80 @click="showSelectedChapter('back')"
74 > 81 >
75 <v-icon class="black--text" style="position:relative; top: 4px;">chevron_left</v-icon> 82 <v-icon class="black--text" style="position:relative; top: 4px;">chevron_left</v-icon>
76 {{chapterNames[indexSelectedChapter - 1]}} 83 {{chapterNames[indexSelectedChapter - 1]}}
77 </v-flex> 84 </v-flex>
78 <v-spacer></v-spacer> 85 <v-spacer></v-spacer>
79 <!-- NEXT CHAPTER --> 86 <!-- NEXT CHAPTER -->
80 <v-flex 87 <v-flex
81 style="cursor: pointer;" 88 style="cursor: pointer;"
82 class="subheading font-weight-bold text-xs-right" 89 class="subheading font-weight-bold text-xs-right"
83 v-if="indexSelectedChapter < chapterNames.length -1" 90 v-if="indexSelectedChapter < chapterNames.length -1"
84 @click="showSelectedChapter('forward')" 91 @click="showSelectedChapter('forward')"
85 > 92 >
86 {{chapterNames[indexSelectedChapter + 1]}} 93 {{chapterNames[indexSelectedChapter + 1]}}
87 <v-icon class="black--text" style="position:relative; top: 4px;">chevron_right</v-icon> 94 <v-icon class="black--text" style="position:relative; top: 4px;">chevron_right</v-icon>
88 </v-flex> 95 </v-flex>
89 </v-layout> 96 </v-layout>
90 <!-- <v-flex class="text-xs-right mt-5" v-else> 97 <!-- <v-flex class="text-xs-right mt-5" v-else>
91 <span class="subheading font-weight-bold">Return to chapter one</span> 98 <span class="subheading font-weight-bold">Return to chapter one</span>
92 </v-flex>--> 99 </v-flex>-->
93 </v-flex> 100 </v-flex>
94 101
95 <v-spacer></v-spacer> 102 <v-spacer></v-spacer>
96 103
97 <!-- COURSES SIDE BAR- positioned to the right of the page --> 104 <!-- COURSES SIDE BAR- positioned to the right of the page -->
98 <v-flex xs3> 105 <v-flex xs3>
99 <v-card class="elevation-0 card-border" height="100%"> 106 <v-card class="elevation-0 card-border" height="100%">
100 <CoursesSideBar></CoursesSideBar> 107 <CoursesSideBar></CoursesSideBar>
101 </v-card> 108 </v-card>
102 </v-flex> 109 </v-flex>
103 </v-layout> 110 </v-layout>
104 </v-container> 111 </v-container>
105 </div> 112 </div>
106 </template> 113 </template>
107 <script> 114 <script>
108 import http from "@/Services/http.js"; 115 import http from "@/Services/http.js";
109 import AllApiCalls from "@/Services/AllApiCalls.js"; 116 import AllApiCalls from "@/Services/AllApiCalls.js";
110 import CoursesSideBar from "@/pages/Common/CoursesSideBar.vue"; 117 import CoursesSideBar from "@/pages/Common/CoursesSideBar.vue";
111 export default { 118 export default {
112 mixins: [AllApiCalls], 119 mixins: [AllApiCalls],
113 components: { 120 components: {
114 CoursesSideBar 121 CoursesSideBar
115 }, 122 },
116 data() { 123 data() {
117 return { 124 return {
118 // courseData: [], 125 // courseData: [],
119 localStorage: localStorage, 126 localStorage: localStorage,
120 showLoader: false, 127 showLoader: false,
121 chapter: { chapters: [{}] }, 128 chapter: { chapters: [{}] },
122 chapterNames: [], 129 chapterNames: [],
123 chapterIds: [], 130 chapterIds: [],
124 selectedChapterId: "", 131 selectedChapterId: "",
125 indexSelectedChapter: "", 132 indexSelectedChapter: "",
126 pdfLink: "" 133 pdfLink: ""
127 }; 134 };
128 }, 135 },
129 methods: { 136 methods: {
130 showSelectedChapter(newChapter) { 137 showSelectedChapter(newChapter) {
131 if (newChapter == "forward") { 138 if (newChapter == "forward") {
132 this.indexSelectedChapter += 1; 139 this.indexSelectedChapter += 1;
133 this.selectedChapterId = this.chapterIds[this.indexSelectedChapter]; 140 this.selectedChapterId = this.chapterIds[this.indexSelectedChapter];
134 this.getParticularChapterDetail(); 141 this.getParticularChapterDetail();
135 } 142 }
136 if (newChapter == "back") { 143 if (newChapter == "back") {
137 this.indexSelectedChapter -= 1; 144 this.indexSelectedChapter -= 1;
138 this.selectedChapterId = this.chapterIds[this.indexSelectedChapter]; 145 this.selectedChapterId = this.chapterIds[this.indexSelectedChapter];
139 this.getParticularChapterDetail(); 146 this.getParticularChapterDetail();
140 } 147 }
141 }, 148 },
142 getParticularChapterDetail() { 149 getParticularChapterDetail() {
143 http() 150 http()
144 .get("/getParticularChapterDetail", { 151 .get("/getParticularChapterDetail", {
145 params: { 152 params: {
146 courseDetailId: this.$route.query.courseDetailId, 153 courseDetailId: this.$route.query.courseDetailId,
147 chapterId: this.selectedChapterId 154 chapterId: this.selectedChapterId
148 } 155 }
149 }) 156 })
150 .then(response => { 157 .then(response => {
151 this.chapter = response.data.data; 158 this.chapter = response.data.data;
152 this.showLoader = false; 159 this.showLoader = false;
153 }) 160 })
154 .catch(err => { 161 .catch(err => {
155 console.log("err in getParticularChapterDetail====>", err); 162 console.log("err in getParticularChapterDetail====>", err);
156 this.showLoader = false; 163 this.showLoader = false;
157 }); 164 });
158 } 165 }
159 }, 166 },
160 // computed:{ 167 // computed:{
161 // nextChapterIndex(){ 168 // nextChapterIndex(){
162 169
163 // } 170 // }
164 // } 171 // }
165 async created() { 172 async created() {
166 console.log("route query - ", this.$route.query); 173 console.log("route query - ", this.$route.query);
167 174
168 this.selectedChapterId = this.$route.query.selectedChapterId; 175 this.selectedChapterId = this.$route.query.selectedChapterId;
169 176
170 /* set chapterNames array */ 177 /* set chapterNames array */
171 this.chapterNames = Object.keys(this.$route.query); 178 this.chapterNames = Object.keys(this.$route.query);
172 this.chapterNames.pop(); 179 this.chapterNames.pop();
173 this.chapterNames.pop(); 180 this.chapterNames.pop();
174 this.chapterNames.pop(); 181 this.chapterNames.pop();
175 182
176 /* set chapter Ids */ 183 /* set chapter Ids */
177 this.chapterIds = Object.values(this.$route.query); 184 this.chapterIds = Object.values(this.$route.query);
178 this.chapterIds.pop(); 185 this.chapterIds.pop();
179 this.chapterIds.pop(); 186 this.chapterIds.pop();
180 this.chapterIds.pop(); 187 this.chapterIds.pop();
181 188
182 this.indexSelectedChapter = this.chapterIds.findIndex(id => { 189 this.indexSelectedChapter = this.chapterIds.findIndex(id => {
183 return id == this.selectedChapterId; 190 return id == this.selectedChapterId;
184 }); 191 });
185 192
186 /* get chapter clicked on using the id */ 193 /* get chapter clicked on using the id */
187 await this.getParticularChapterDetail(this.selectedChapterId); 194 await this.getParticularChapterDetail(this.selectedChapterId);
188 } 195 }
189 }; 196 };
190 </script> 197 </script>
191 <style scoped> 198 <style scoped>
192 .side-bar-color { 199 .side-bar-color {
193 color: #827bfa !important; 200 color: #827bfa !important;
194 /* border-top-right-radius: 74px !important; */ 201 /* border-top-right-radius: 74px !important; */
195 } 202 }
196 .card-border { 203 .card-border {
197 border: 1px #bdbdbd solid; 204 border: 1px #bdbdbd solid;
198 border-radius: 3px; 205 border-radius: 3px;
199 } 206 }
200 </style> 207 </style>
201 208