menu

components.d.ts

@@ -9,7 +9,10 @@ declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     Footer: typeof import('./src/components/Footer.vue')['default']
     Header: typeof import('./src/components/Header.vue')['default']
+    Header2: typeof import('./src/components/Header2.vue')['default']
     MainMenu: typeof import('./src/components/MainMenu.vue')['default']
+    Menu: typeof import('./src/components/Menu.vue')['default']
+    Nav: typeof import('./src/components/Nav.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col h-screen justify-between">
-   <Header />
+   <Menu />
     <main>
       <router-view />
     </main>

src/components/Header.vue

@@ -14,11 +14,10 @@
             <br />(Arts and Science)
             <br />Prafullanagar, Habra, 24Pgs(N) Pin-743268, W.B
         </div>
-        <MainMenu />
+        <Menu />
 
     </header>
 </template>
 
 <script setup>
 </script> 
-lg:hidden

src/components/MainMenu.vue

@@ -392,6 +392,16 @@
                     >NAAC</router-link
                   >
                 </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <router-link
+                    to="/nirf-data"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >NIRF </router-link
+                  >
+                </MenuItem>
                 <MenuItem v-slot="{ active }">
                   <router-link
                     to="/aqar"
@@ -402,19 +412,7 @@
                     >AQAR</router-link
                   >
                 </MenuItem>
-                <!-- <MenuItem v-slot="{ active }">
-                  <router-link
-                    to="/icc"
-                    :class="[
-                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
-                      'block px-1 py-2 text-sm',
-                    ]"
-                    >ICC</router-link
-                  >
-                </MenuItem> -->
-                <!-- <MenuItem v-slot="{ active }">
-                                  <router-link to="/Teacher's-Council":class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-1 py-2 text-sm']">Teacher's Council</router-link>
-                              </MenuItem> -->
+
                 <MenuItem v-slot="{ active }">
                   <router-link
                     to="/students-union"
@@ -699,6 +697,12 @@
         </Menu>
   
       </div>
+
+
+
+
+
+      
       <div class="w-full h-8 bg-blue-700 fixed bottom-0" id="hidden_large">
         <div>
           <p></p>
@@ -720,7 +724,15 @@
           >
           <input class="hidden" type="checkbox" id="mobile_mnu" />
           <div class="mobile_menu bg-cyan-200 transition duration-150">
-            <!-- mobile_menu_item -->
+            
+            
+            
+            
+
+
+
+
+
             <div class="bg-white">
               <div class="text-center">
                 <button class="text-sm font-medium py-2 px-4 rounded">
@@ -1037,9 +1049,36 @@
                           >IQAC</router-link
                         >
                       </MenuItem>
-                      <!-- <MenuItem v-slot="{ active }">
-                                              <router-link to="/Teacher's-Council":class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-1 py-2 text-sm']">Teacher's Council</router-link>
-                                          </MenuItem> -->
+                      <MenuItem v-slot="{ active }">
+                  <router-link
+                    to="/naac"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >NAAC</router-link
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <router-link
+                    to="/nirf-data"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >NIRF</router-link
+                  >
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <router-link
+                    to="/aqar"
+                    :class="[
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+                      'block px-1 py-2 text-sm',
+                    ]"
+                    >AQAR</router-link
+                  >
+                </MenuItem>
                       <MenuItem v-slot="{ active }">
                         <router-link
                           to="/students-union"

src/components/Menu.vue

@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <header  class="header">
+        <div class="lg:hidden grid grid-cols-6 bg-blue-700 place-items-center text-white">
+            <div class="grid col-span-1 "> <img class="w-16" src="/img/logo3.png" alt=""></div>
+            <div class="grid col-span-4 ">SREE CHAITANYA COLLEGE</div>
+            <div class="grid col-span-1 "><button class="hover:bg-white hover:text-blue-700 rounded-md p-1">Log In</button></div>
+        </div>
+        <div
+            class="hidden lg:block flex flex-cols bg-blue-600 h-48 text-right justify-end text-white text-3xl pt-5 font-semibold pr-12">
+            <img src="/img/logo3.png" alt="Sreechaitanya College " class="absolute left-0 top-0 h-44 w-44 mt-2 ml-14"
+            />
+            Estd.-1956
+            <br />Sree Chaitanya College,Habra
+            <br />(Arts and Science)
+            <br />Prafullanagar, Habra, 24Pgs(N) Pin-743268, W.B
+        </div>
+    </header>
+
+    <Nav />
+  </div>
+
+<!-- <div id="navbar">
+  <a class="active" href="#">Home</a>
+  <a href="#">News</a>
+  <a href="#">Contact</a>
+</div> -->
+<!-- 
+<div class="content">
+  <h3>Sticky Navigation Example</h3>
+  <p>The navbar will stick to the top when you reach its scroll position.</p>
+  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
+  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
+  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
+  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
+  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
+  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
+  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
+</div> -->
+</template>
+
+<script>
+export default {
+    mounted () {
+      window.addEventListener('scroll', this.stickyMenu);
+    },
+    // created () {
+    //   window.addEventListener('scroll', this.stickyMenu);
+    // },
+    unmounted () {
+      window.removeEventListener('scroll', this.stickyMenu);
+    },
+    methods: {
+      stickyMenu (event) {
+        
+      var navbar = document.getElementById("navbar");
+      var sticky = navbar.offsetTop;
+        if (window.pageYOffset >= sticky) {
+          navbar.classList.add("sticky")
+          console.log(window.pageYOffset)
+        } else {
+          navbar.classList.remove("sticky");
+        }
+      }
+    }
+  }
+  // window.onscroll = function() {myFunction()};
+  
+  // var navbar = document.getElementById("navbar");
+  // var sticky = navbar.offsetTop;
+  
+  // function myFunction() {
+  //   if (window.pageYOffset >= sticky) {
+  //     navbar.classList.add("sticky")
+  //   } else {
+  //     navbar.classList.remove("sticky");
+  //   }
+  // }
+  </script>

src/components/Nav.vue

@@ -0,0 +1,98 @@
+<template>
+    <div class="hidden md:flex container-fluid" id="navbar" >
+        <div class="container mx-auto px-4" >
+            <a class="active" href="/">Home</a>
+            <a class="active" href="/about-us">About</a>
+            <a class="active" href="/notice">Notice</a>
+            <a class="active" href="/library">Library</a>
+            <a class="active" href="/administration">Administration</a>
+            <a class="active" href="/academics">Academics</a>
+            <a class="active" href="/organizations">Organizations</a>
+            <a class="active" href="/students">Students</a>
+        </div>
+    </div>
+</template>
+<script>
+
+export default {
+//   created () {
+//     window.addEventListener('scroll', this.stickyMenu);
+//   },
+//   unmounted () {
+//     window.removeEventListener('scroll', this.stickyMenu);
+//   },
+//   methods: {
+//     stickyMenu (event) {
+//     var navbar = document.getElementById("navbar");
+//     var sticky = navbar.offsetTop;
+//       if (window.pageYOffset >= sticky) {
+//         navbar.classList.add("sticky")
+//       } else {
+//         navbar.classList.remove("sticky");
+//       }
+//     }
+//   }
+}
+// window.onscroll = function() {myFunction()};
+
+// var navbar = document.getElementById("navbar");
+// var sticky = navbar.offsetTop;
+
+// function myFunction() {
+//   if (window.pageYOffset >= sticky) {
+//     navbar.classList.add("sticky")
+//   } else {
+//     navbar.classList.remove("sticky");
+//   }
+// }
+</script>
+<style>
+body {
+  margin: 0;
+
+}
+
+.header {
+  background-color: #ffffff;
+  text-align: center;
+}
+
+#navbar {
+  overflow: hidden;
+  background-color: #1d4ed8;
+}
+
+#navbar a {
+  float: left;
+  display: block;
+  color: #ffffff;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+  font-size: 16px;
+}
+
+#navbar a:hover {
+  background-color: #1e40af;
+  color: rgb(255, 255, 255);
+}
+
+/* #navbar a.active {
+  background-color: #1e40af;
+  color: white;
+} */
+
+.content {
+  padding: 16px;
+}
+
+.sticky {
+  position: fixed;
+  top: 0;
+  width: 100%;
+}
+
+.sticky + .content {
+  padding-top: 60px;
+}
+</style>

src/pages/[id].vue

@@ -1,33 +1,89 @@
 <template>
-<div class="container-fluid bg-white mx-auto mt-3  p-0">
-    <div v-if="isLoading">
-        <h2 class="ml-28 text-4xl">Loading ...</h2>
-    </div>
-    <div v-else>
-        <div v-html="page[0].content" class="container mx-auto">
+    <div class="container bg-white mx-auto mt-3  p-4">
+        <div v-if="isLoading">
+            <h2>Loading ...</h2>
+        </div>
+        <div v-else>
+            <!-- <h2>{{page[0].title}}</h2> -->
+            <div v-html="page[0].content" ></div>
+            <div v-if="fileAttached">
+                <h2>Attachments.</h2>
+                <ul>
+                    <li v-for="(file, index) in files">
+                        {{index+1}}. 
+                        <a class="text-blue-600" :href="`https://api8.siliconpin.com/assets/` + file.id+'?download' "  :download="file.filename_download">
+                          {{ file.filename_download }}
+                        </a>
+                    </li>
 
+                </ul>
+
+            </div>
         </div>
     </div>
-</div>
 </template>
-
+    
 <script>
 export default {
     data() {
         return {
             page: null,
+            fileAttached:false,
+            files: [],
             isLoading: true
         }
     },
     mounted: function () {
         fetch('https://api8.siliconpin.com/items/scc22?filter[slug][_eq]=' + this.$route.params.id)
-        // fetch('https://api8.siliconpin.com/items/scc22?slug=about-us')
-            .then(response => response.json())
-            .then(data => {
-          this.page = data.data
-          console.log(data)
-          this.isLoading = false
-        })
+        .then((response) => {
+            if (response.ok) {
+                return response.json();
+            }
+            throw new Error('Something went wrong');
+            })
+            .then(jsonPageData => {
+                this.page = jsonPageData.data
+                console.log(this.page)
+                this.isLoading = false
+                return jsonPageData.data[0].id
+                }
+            )
+            .then((pageID) => {
+                fetch('https://api8.siliconpin.com/items/scc22_files_1?filter[scc22_id][_in]=' + pageID)
+                .then(resp => resp.json())
+                    .then(file => {
+                            let attIDs = ''
+                            let t = 0
+                            file.data.forEach(ids => {
+                                if (t == 0) attIDs = ids.directus_files_id
+                                else attIDs = attIDs + ',' + ids.directus_files_id
+                                t++
+                            });
+                            if(t>0) this.fileAttached=true
+                        return attIDs
+                    })
+                        .then((attIDs) => {
+                            fetch('https://api8.siliconpin.com/files?filter[id][_in]=' + attIDs)
+                            .then(resp => resp.json())
+                                .then(file => {
+                                    this.files = file.data
+                                })
+                        })
+            })
+            .catch((error) => {
+                console.log(error)
+                });
+    },
+    methods: {
+        // getAttachments(att) {
+
+        //     console.log(att)
+        //     // fetch('https://api8.siliconpin.com/items/ecom55?filter[slug][_eq]=' + this.$route.params.id)
+        //     //     .then(response => response.json())
+        //     //     .then(data => this.itemByCategory = data)
+        //     // console.log(this.itemByCategory)
+
+        // }
     }
 }
-</script>
+</script> 

src/pages/js.vue

@@ -1,12 +0,0 @@
-<template>
-    <div class="container mx-auto">
-        <h3> This is an example of using onclick attribute in HTML. </h3>
-<p> Click the following button to see the effect. </p>
-<button onclick = "fun()">Click me</button>
-    </div>
-</template>
-<script>
-function fun() {
-alert("Welcome to the javaTpoint.com");
-}
-</script>

src/pages/student-grievance.vue

@@ -1,96 +0,0 @@
-<template>
-    <div>
-        <section class="container mx-auto p-4 mb-48">
-            <h1 class="text-center text-4xl py-16 font-semibold text-blue-700">Students Suggestions/Grievance Form</h1>
-            <div class=" bg-blue-100  rounded-3xl">
-                <h1 class="p-2 text-red-800">All fields are Mandatory*</h1>
-                <div v-if="sccQry">
-                    <div class="grid grid-cols-1 lg:grid-cols-2 place-items-center gap-4 lg:gap-32 p-10">
-                        <div class="grid gap-6 w-full">
-                            <input v-model="name" type="text" placeholder="Your Name*" class="input input-bordered input-primary w-full rounded-md" />
-                            <input v-model="phone_number" type="number" placeholder="Phone Number*" class="input input-bordered input-primary w-full rounded-md" />
-                            <input v-model="student_id" type="text" placeholder="Student ID*" class="input input-bordered input-primary w-full rounded-md" />
-                            <input v-model="semester" type="text" placeholder="Semester*" class="input input-bordered input-primary w-full rounded-md" />
-                            <input v-model="department" type="text" placeholder="Department" class="input input-bordered input-primary w-full rounded-md" />
-                        </div>
-                        <div class="grid w-full h-full">
-                            <textarea v-model="message" class="textarea textarea-bordered rounded-md p-4" placeholder="Write your Suggestions/Grievance here........ "></textarea>
-                        </div>
-                    </div>
-                    <div class="flex justify-center pb-8">
-                        <button @click="savesccQry" class="bg-blue-700 p-2 px-8 text-xl text-white rounded-lg">Send Now</button>
-                    </div>
-                </div>
-                <div v-else>Thank You!</div>
-            </div>
-        </section>
-    </div>
-</template>
-<script>
-export default {
-    setup(){
-    // const route = useRoute();
-    useHead({
-        title: 'Teenybeans Preschool Curriculum - Administrators',
-        meta: [
-            {
-                name: `title`,
-                content: `Complete Preschool Business Solutions for Smart Operation`
-            },
-            {
-                name: `description`,
-                content: `Discover the best preschool solution for managing your preschool and digitizing the teaching process. Contact us for further assistance.`
-            },
-        ],
-    })
-},
-  data() {
-    return {
-      isLoading: true,
-      name:null,
-      phone_number:null,
-      student_id:null,
-      department: null,
-      message: null,
-      sccQry:true,
-      
-    //   contact_form:{}
-    }
-  },
-  mounted: function () {
-    // this.getItemByCategory()
-    // console.log(this.smProducts)
-    // console.log(this.$route.query.cat)
-    // console.log(this.fruits)
-    
-  },
-  methods: {
-    savesccQry() {
-        let formData = new FormData();
-        formData.append('Name', this.name);
-        formData.append('Phone', this.phone_number);
-        formData.append('Student_ID', this.student_id);
-        fromData.append('department', this.department)
-        fromData.append('message', this.message)
-        formData.append('formName', 'scc-Students_Suggestions/Grievance_Form');
-        fetch('https://api8.siliconpin.com/admin/content/scc_grievance_form', 
-            {
-                method: 'POST',
-                // headers: { 
-                // 'Content-Type': 'multipart/form-data',
-                // // 'Authorization': 'Bearer my-token',
-                // // 'My-Custom-Header': 'foobar'
-                // },
-                body: formData,
-            }
-        )
-        .then(response => response.json())
-        .then(data => {
-            // console.log(data)
-        });
-        // formData=""
-        this.sccQry=false
-    },
-  }
-}
-</script>

typed-router.d.ts

@@ -44,12 +44,10 @@ declare module 'vue-router/auto/routes' {
     '/documents/[id]': RouteRecordInfo<'/documents/[id]', '/documents/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     '/gallery': RouteRecordInfo<'/gallery', '/gallery', Record<never, never>, Record<never, never>>,
     '/index2': RouteRecordInfo<'/index2', '/index2', Record<never, never>, Record<never, never>>,
-    '/js': RouteRecordInfo<'/js', '/js', Record<never, never>, Record<never, never>>,
     '/nn/': RouteRecordInfo<'/nn/', '/nn', Record<never, never>, Record<never, never>>,
     '/nn/[id]': RouteRecordInfo<'/nn/[id]', '/nn/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     '/notice/': RouteRecordInfo<'/notice/', '/notice', Record<never, never>, Record<never, never>>,
     '/notice/[id]': RouteRecordInfo<'/notice/[id]', '/notice/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
-    '/student-grievance': RouteRecordInfo<'/student-grievance', '/student-grievance', Record<never, never>, Record<never, never>>,
     '/temp/google': RouteRecordInfo<'/temp/google', '/temp/google', Record<never, never>, Record<never, never>>,
   }
 }