lines-num lines-num-new"> 72 
 const mat = ref()
36 73 
 const name = ref()
74 
+const mats = ref()
75 
+
76 
+
37 77 
 onIonViewWillEnter(async () => {
38 78 
   mat.value = await getMat(id)
79 
+  console.log(mat.value)
39 80 
   name.value = mat.value.vimeo_name || mat.value.course_name
81 
+  mats.value  = await listMats(mat.value.related_mats)
40 82 
 })
41 83 
 </script>

+ 77 - 0
src/views/PostDetailPage.vue
查看文件 

@@ -0,0 +1,77 @@
1 
+
2 
+<template>
3 
+  <ion-page>
4 
+    <ion-header>
5 
+      <ion-toolbar>
6 
+        <ion-buttons slot="start">
7 
+          <ion-back-button></ion-back-button>
8 
+          </ion-buttons>
9 
+          <ion-title v-if="obj">{{ obj.name }}</ion-title>
10 
+      </ion-toolbar>
11 
+    </ion-header>
12 
+    <ion-content :fullscreen="true">
13 
+      <ion-header collapse="condense">
14 
+        <ion-toolbar>
15 
+          <ion-title size="large" v-if="obj">{{ obj.name }}</ion-title>
16 
+        </ion-toolbar>
17 
+      </ion-header>
18 
+      <div v-html="render_body" class='ion-padding'></div>
19 
+
20 
+       <ion-fab slot="fixed" vertical="bottom" horizontal="end">
21 
+      <ion-fab-button>
22 
+        <ion-icon :icon="shareSocial" @click="socShare"></ion-icon>
23 
+      </ion-fab-button>
24 
+    </ion-fab>
25 
+    </ion-content>
26 
+  </ion-page>
27 
+</template>
28 
+
29 
+<script setup lang="ts">
30 
+
31 
+import { marked } from 'marked';
32 
+import { Share } from '@capacitor/share';
33 
+
34 
+import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent,   IonNavLink,
35 
+    IonButton,
36 
+    IonButtons,
37 
+    IonIcon,
38 
+    IonBackButton, onIonViewWillEnter, IonRow, IonGrid, IonCol,
39 
+    IonFab, IonFabButton } from '@ionic/vue';
40 
+import {
41 
+    chevronDownCircle,
42 
+    chevronForwardCircle,
43 
+    chevronUpCircle,
44 
+    colorPalette,
45 
+    shareSocial,
46 
+    document,
47 
+    globe,
48 
+  } from 'ionicons/icons';
49 
+
50 
+import { useRoute } from 'vue-router';
51 
+import { listCourseMats, getCourse, getPost} from '@/composable/settings';
52 
+import { ref } from 'vue';
53 
+import CourseMat from '@/components/CourseMat.vue'
54 
+
55 
+const route = useRoute();
56 
+const { id } = route.params;
57 
+
58 
+const obj = ref()
59 
+const render_body = ref()
60 
+
61 
+onIonViewWillEnter(async () => {
62 
+  const post  = await getPost(id)
63 
+  console.log(" post ", post)
64 
+  obj.value = post
65 
+  render_body.value = marked(post.body)
66 
+
67 
+})
68 
+const socShare = async () => {
69 
+  console.log('share social')
70 
+  await Share.share({
71 
+    title: 'See cool stuff',
72 
+    text: 'Really awesome thing you need to see right meow',
73 
+    url: 'http://ionicframework.com/',
74 
+    dialogTitle: 'Share with buddies',
75 
+  });
76 
+}
77 
+</script>

+ 68 - 0
src/views/SearchPage.vue
查看文件 

@@ -0,0 +1,68 @@
1 
+<template>
2 
+  <ion-page>
3 
+    <ion-header>
4 
+      <ion-toolbar>
5 
+        <ion-buttons slot="start">
6 
+          <ion-back-button></ion-back-button>
7 
+        </ion-buttons>
8 
+        <ion-title>
9 
+          Search
10 
+        </ion-title>
11 
+      </ion-toolbar>
12 
+    </ion-header>
13 
+    <ion-content class='ion-padding'>
14 
+      <ion-searchbar :debounce="1000" @ionInput="handleInput($event)"></ion-searchbar>
15 
+      <ion-list>
16 
+        <template v-for="result in results">
17 
+          <SearchItem :obj="result" />
18 
+        </template>
19 
+        <template v-if="processing">
20 
+            <ion-progress-bar type="indeterminate"></ion-progress-bar>
21 
+
22 
+        </template>
23 
+        <template v-if="is_empty">
24 
+          <h1 class='ion-text-center'>Search not found</h1>
25 
+        </template>
26 
+      </ion-list>
27 
+    </ion-content>
28 
+  </ion-page>
29 
+</template>
30 
+
31 
+<script setup lang="ts">
32 
+import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonButton, onIonViewWillEnter, IonList, IonSearchbar, IonLabel,
33 
+IonItem, IonBackButton, IonProgressBar } from '@ionic/vue';
34 
+import ExploreContainer from '@/components/ExploreContainer.vue';
35 
+import { defineComponent, onMounted } from 'vue';
36 
+import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth';
37 
+import { searchMat } from '@/composable/settings';
38 
+
39 
+import { ref } from 'vue';
40 
+import SearchItem from '@/components/SearchItem.vue';
41 
+
42 
+const results = ref();
43 
+const is_empty = ref(false);
44 
+const processing = ref(false)
45 
+const handleInput = async (event) => {
46 
+  console.log("handleInput")
47 
+  console.log(event)
48 
+  const query = event.target.value.toLowerCase();
49 
+  console.log("query = ", query)
50 
+  is_empty.value = false;
51 
+  if(query == "") {
52 
+    results.value = []
53 
+  }else {
54 
+    //results.value = data.filter((d) => d.toLowerCase().indexOf(query) > -1);
55 
+    processing.value = true;
56 
+    const r = await searchMat(query)
57 
+    processing.value = false;
58 
+
59 
+    results.value = r.results
60 
+    if(r.count == 0 ) {
61 
+      is_empty.value = true;
62 
+    }else {
63 
+      is_empty.value = false;
64 
+    }
65 
+  }
66 
+  //test
67 
+}
68 
+</script>

+ 104 - 66
src/views/Tab1Page.vue
查看文件 

@@ -2,84 +2,95 @@
2 2 
   <ion-page>
3 3 
     <ion-header>
4 4 
       <ion-toolbar>
5 
-        <ion-title>Tab 1</ion-title>
5 
+        <ion-title>TMTLive</ion-title>
6 
+       <ion-buttons slot="end">
7 
+          <ion-button :router-link="'/tabs/search_page/'">
8 
+            <ion-icon slot="icon-only" :icon="search"></ion-icon>
9 
+          </ion-button>
10 
+        </ion-buttons>
6 11 
       </ion-toolbar>
7 12 
     </ion-header>
8 13 
     <ion-content>
9 14 
       <ion-header collapse="condense">
10 15 
         <ion-toolbar>
11 
-          <ion-title size="large">Tab 1</ion-title>
16 
+          <ion-title size="large">TMTLive</ion-title>
12 17 
         </ion-toolbar>
13 18 
       </ion-header>
19 
+      <template v-if="liveObj && liveObj.result">
20 
+        <div v-html="liveObj.result.embed_html"></div>
21 
+      </template>
22 
+      <div class='ion-padding'>
23 
+      <h2>Today Programs</h2>
24 
+      <swiper :slides-per-view="2" :loop="true" v-if="todays" class='ion-no-margin'>
25 
+      <swiper-slide v-for="m in todays">
26 
+        <CourseSchedule :course-obj="m.course_level.course" :from-time="m.from_time" :to-time='m.to_time'  />
27 
+      </swiper-slide>
28 
+      </swiper>
29 
+      </div>
30 
+      <template v-if="posts">
31 
+        <div class='ion-padding'>
32 
+          <h2>Muaythai Techniques</h2>
33 
+          <swiper :slides-per-view="2"  :loop="true"  class='ion-no-margin'>
34 
+          <swiper-slide v-for="m in posts">
35 
+            <Post :obj="m" />
36 
+          </swiper-slide>
37 
+          </swiper>
38 
+        </div>
39 
+      </template>
40 
+      <template v-if="mats">
41 
+        <h2>Trainings</h2>
14 42 
       <ion-grid>
43 
+
15 44 
         <ion-row>
16 
-          <ion-col size="12" size-md="4" size-lg="2">
17 
-            <ion-card>
18 
-              <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/card-media.png" />
19 
-              <ion-card-header>
20 
-                <ion-card-title>Card Title</ion-card-title>
21 
-                <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
22 
-              </ion-card-header>
23 
-
24 
-              <ion-card-content>
25 
-                Here's a small text description for the card content. Nothing more, nothing less.
26 
-              </ion-card-content>
27 
-            </ion-card>
28 
-          </ion-col>
29 
-          <ion-col size="12" size-md="4" size-lg="2">
30 
-            <ion-card>
31 
-              <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/card-media.png" />
32 
-              <ion-card-header>
33 
-                <ion-card-title>Card Title</ion-card-title>
34 
-                <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
35 
-              </ion-card-header>
36 
-
37 
-              <ion-card-content>
38 
-                Here's a small text description for the card content. Nothing more, nothing less.
39 
-              </ion-card-content>
40 
-            </ion-card>
45 
+          <ion-col size="12" size-md="4" size-lg="2" v-for="c in mats">
46 
+            <CourseMat :obj="c" :course-name="c.course_name" class='ion-no-margin' />
41 47 
           </ion-col>
42 48 
         </ion-row>
43 49 
       </ion-grid>
44 
-      {{ token }}
50 
+      </template>
45 51 
       <ion-button router-link="/tabs/detail/3/" router-direction="forward">Click Me</ion-button>
46 
-      {{ safeUrl }}
47 
-
52 
+
48 53 
       <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/880005259?badge=0&amp;autopause=0&amp;quality_selector=1&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Muay Thai Advance"></iframe></div>
49 
-<!--
50 
-<vue-core-video-player src="https://player.vimeo.com/progressive_redirect/playback/880005259/rendition/720p/file.mp4?loc=external&signature=5ddad1430211b33f65824444a3137fc0ec6fe61183d39997036d2dd3b78654f9"></vue-core-video-player> -->
51 
-
52 
-      Video
53 
-
54 
-
55 
-<div id="made-in-ny" ref='video'></div>
56 
-
57 
-      <ul>
58 
-        <li v-for="(item, index) in items">
59 
-          {{ item.msg }}
60 
-        </li>
61 
-      </ul>
62 
-      <ion-item v-for="t in trainers" :router-link="'/detail/'+t.id">
63 
-        <ion-thumbnail slot="start" v-if="t.photo">
64 
-          <img alt="Silhouette of mountains" :src="t.photo" />
65 
-        </ion-thumbnail>
66 
-        <ion-label class='ion-text-wrap'>{{ t.name }}</ion-label>
67 
-      </ion-item>
68 
-      <ion-icon icon="heart"></ion-icon>
69 
-      <ion-button @click="scrollToBottom">Scroll to Bottom</ion-button>
70 
-      {{ mats }}
54 
+      <!--
55 
+        <vue-core-video-player src="https://player.vimeo.com/progressive_redirect/playback/880005259/rendition/720p/file.mp4?loc=external&signature=5ddad1430211b33f65824444a3137fc0ec6fe61183d39997036d2dd3b78654f9"></vue-core-video-player> -->
56 
+
57 
+        Video
58 
+
59 
+
60 
+        <div id="made-in-ny" ref='video'></div>
61 
+
62 
+        <ul>
63 
+          <li v-for="(item, index) in items">
64 
+            {{ item.msg }}
65 
+          </li>
66 
+        </ul>
67 
+        <ion-item v-for="t in trainers" :router-link="'/detail/'+t.id">
68 
+          <ion-thumbnail slot="start" v-if="t.photo">
69 
+            <img alt="Silhouette of mountains" :src="t.photo" />
70 
+          </ion-thumbnail>
71 
+          <ion-label class='ion-text-wrap'>{{ t.name }}</ion-label>
72 
+        </ion-item>
73 
+        <ion-icon icon="heart"></ion-icon>
74 
+        <ion-button @click="scrollToBottom">Scroll to Bottom</ion-button>
71 75 
     </ion-content>
72 76 
   </ion-page>
73 77 
 </template>
74 78
75 79 
 <script setup lang="ts">
76 80
77 
-import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonIcon, onIonViewWillEnter, IonButton,
78 
-  onIonViewWillLeave, IonItem, IonLabel, IonThumbnail, IonCol, IonGrid, IonRow, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle  } from '@ionic/vue';
81 
+  import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonIcon, onIonViewWillEnter, IonButton,
82 
+  onIonViewWillLeave, IonItem, IonLabel, IonThumbnail, IonCol, IonGrid, IonRow, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, onIonViewDidEnter,  IonButtons } from '@ionic/vue';
83 
+
79 84 
 import ExploreContainer  from '@/components/ExploreContainer.vue';
85 
+import CourseSchedule from '@/components/CourseSchedule.vue'
86 
+import Post from '@/components/Post.vue'
87 
+import CourseMat from '@/components/CourseMat.vue'
88 
+import SearchEngine from '@/components/SearchEngine.vue'
89 
+
80 90 
 import { CapacitorHttp } from '@capacitor/core';
81 91 
 import { ref } from 'vue';
82 
-import { TOKEN, getProducts, setToken, getObject, getToken, getTrainers, listMats, storeAPNToken } from '@/settings';
92 
+import { TOKEN, getProducts, setToken, getObject, getToken, getTrainers, listMats, storeAPNToken,
93 
+getTodayProgs, getLive, getPosts} from '@/composable/settings';
83 94 
 //import VueCoreVideoPlayer from 'vue-core-video-player'
84 95 
 import { vueVimeoPlayer } from 'vue-vimeo-player'
85 96 
 
@@ -89,25 +100,39 @@ import { PushNotifications } from '@capacitor/push-notifications';
89 100
90 101 
 import Player from '@vimeo/player';
91 102
103 
+import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
104 
+import { Swiper, SwiperSlide } from 'swiper/vue';
105 
+import 'swiper/css';
106 
+import 'swiper/css/autoplay';
107 
+import 'swiper/css/keyboard';
108 
+import 'swiper/css/pagination';
109 
+import 'swiper/css/scrollbar';
110 
+import 'swiper/css/zoom';
111 
+import '@ionic/vue/css/ionic-swiper.css';
112 
+import { search } from 'ionicons/icons';
113 
+
92 114 
 const safeUrl = "https://vimeo.com/880005259?share=copy"
93 115 
 const token = ref()
94 116 
 const trainers = ref([])
95 117 
 const mats = ref()
96 
- const scrollToBottom = () => {
97 
-    console.log("scroll")
98 
-    //content.value.$el.scrollToBottom(300);
118 
+const todays = ref()
119 
+const posts = ref()
120 
+const scrollToBottom = () => {
121 
+  console.log("scroll")
122 
+  //content.value.$el.scrollToBottom(300);
123 
+};
124 
+const items = ref([{msg: 'foo'}, {msg: 'bar2'}])
125 
+
126 
+const options = {
127 
+      id: 59777392,
128 
+      width: 640,
129 
+      loop: true
99 130 
   };
100 
-  const items = ref([{msg: 'foo'}, {msg: 'bar2'}])
101 
-
102 
-  const options = {
103 
-        id: 59777392,
104 
-        width: 640,
105 
-        loop: true
106 
-    };
107 131 
  //const video = ref(null)
108 132
109 133 
   //const player = new Player(video, options);
110 134
135 
+const modules =  [Autoplay, Keyboard, Pagination, Scrollbar, Zoom]
111 136 
   onIonViewWillEnter(async () => {
112 137 
     //console.log("video " ,video)
113 138 
     //console.log("video id", video.value.id)
 
@@ -128,16 +153,29 @@ const mats = ref()
128 153 
     token.value = await getToken()
129 154 
     trainers.value = await getTrainers()
130 155 
     mats.value = await listMats()
156 
+    posts.value = await getPosts("muaythai-techniques")
131 157 
     console.log(" trainers => ", trainers)
132 158
133 159 
     GoogleAuth.initialize();
134 160 
     registerNotifications()
135 161 
     addListeners()
162 
+
163 
+    todays.value = await getTodayProgs()
136 164 
   })
137 165
138 166 
   onIonViewWillLeave(() => {
139 167 
     console.log("view will leave")
140 
-
168 
+
169 
+  })
170 
+
171 
+const liveObj = ref()
172 
+  onIonViewDidEnter(async() => {
173 
+    setInterval( async () => {
174 
+      console.log("did enter")
175 
+      if( liveObj.value == null ||  liveObj.value.result == false ) {
176 
+        liveObj.value = await getLive()
177 
+      }
178 
+    }, 1000)
141 179 
   })
142 180
143 181 
   const doGet = async () => {

+ 3 - 3
src/views/Tab2Page.vue
查看文件 

@@ -13,8 +13,8 @@
13 13 
       </ion-header>
14 14 
       <ion-grid>
15 15 
         <ion-row>
16 
-          <ion-col size="12" size-md="4" size-lg="2" v-for="c in courses">
17 
-            <Course :course-obj="c" />
16 
+          <ion-col size="6" size-md="4" size-lg="2" v-for="c in courses">
17 
+            <Course :course-obj="c" class="ion-no-margin" />
18 18 
           </ion-col>
19 19 
         </ion-row>
20 20 
       </ion-grid>
 
@@ -27,7 +27,7 @@ import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonGrid, IonRow,
27 27 
 import Course from '@/components/Course.vue';
28 28 
 import { ref } from 'vue';
29 29
30 
-import {listCourses} from '@/settings';
30 
+import {listCourses} from '@/composable/settings';
31 31 
 const courses = ref([])
32 32
33 33 
 onIonViewWillEnter(async () => {

tum/network_report_server - Gogs: Simplico Git Service
Home Explore Help
Sign In
tum
/
network_report_server
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Commits 11 Releases 0 Wiki

No Description

Tree: 75cb3e719b
Branches Tags
network_report_server
/
app
/
node_modules
/
web-resource...
tum 30f7226d9a first commit 2 years ago
..
node_modules 30f7226d9a first commit 2 years ago
src 30f7226d9a first commit 2 years ago
README.md 30f7226d9a first commit 2 years ago
package.json 30f7226d9a first commit 2 years ago

README.md

web-resource-inliner build status

Brings externally referenced resources, such as js, css and images, into a single file.

For example:

<link href="css/style.css" rel="stylesheet" data-inline >

is replaced with

<style>
/* contents of css/style.css */
</style>

Javascript references are brought inline, and images in the html and css blocks are converted to base-64 data: urls.

By default, all links and scripts are inlined, plus any images under 8KB, however this behavior can be overrided via several options.

Getting Started

npm install web-resource-inliner

Usage Examples

For a number of usage examples, see ./test/spec.js and the associated test.* and test_out.* files in ./test/cases/

Methods

html( options, callback )

Expects options.fileContent to be HTML and creates a new HTML document. callback will be called on completion or error with arguments ( error, result ).

css( options, callback )

Expects options.fileContent to be CSS and creates a new CSS document. callback will be called on completion or error with arguments ( error, result ).

Options

fileContent, required

This is the HTML or CSS content to be inlined, you should provide HTML to the html() method and CSS to the css() method or you will get errors or garbage output.

inlineAttribute, string, default data-inline

Sets the attribute that is used to include/exclude specific resources based on the default behavior for the resource type. For example, if scripts is set to false, an individual script can be inlined by adding the attribute to the script tag like <script src="myscript.js" data-inline ></script>. On the other hand, if images are set to be inlined by default, a specific image can be excluded by adding -ignore to the end of the inlineAttribute like <img src="myimg.png" data-inline-ignore >. In CSS, a comment is required at the end of the line to perform the same thing, such as /*data-inline*/ or /*data-inline-ignore*/.

images, Boolean or Number, default 8

When true, inline images unless they have an exclusion attribute (see inlineAttribute option). When false, exclude images unless they have an inclusion attribute (see inlineAttribute option). When a number, inline images only when the base64 content size is less than the number of KBs. For example, the default is to only inline images less than 8KB.

svgs, Boolean or Number, default 8

When true, inline SVG <use> unless they have an exclusion attribute (see inlineAttribute option). When false, exclude SVG <use> unless they have an inclusion attribute (see inlineAttribute option). When a number, inline SVG <use> only when the content size is less than the number of KBs. For example, the default is to only inline SVGs less than 8KB.

scripts, Boolean or Number, default true

When true, inline scripts unless they have an exclusion attribute (see inlineAttribute option). When false, exclude scripts unless they have an inclusion attribute (see inlineAttribute option). When a number, inline scripts only when the base64 content size is less than the number of KBs.

links, Boolean or Number, default true

When true, inline stylesheet links unless they have an exclusion attribute (see inlineAttribute option). When false, exclude stylesheet links unless they have an inclusion attribute (see inlineAttribute option). When a number, inline stylesheet links only when the base64 content size is less than the number of KBs.

relativeTo, string, default empty string

Describes the path relationship between where web-resource-inliner is running and what the relative paths in fileContent or href/src urls refer to. For example, the tests cases in this package are in test/cases/ so their relative paths start by referring to that folder, but the root of this project and where npm test runs from is 2 folders up, so relativeTo is set to test/cases/ in test/spec.js. Likewise, with href="content.css" and a relativeTo of http://github.com/ the resource retrieved would be http://github.com/content.css.

rebaseRelativeTo, string, default empty string

Describes the path relationship between CSS content and the context it will be loaded in. For example, when a CSS file contains url(some-file.png) and the file is moved from a location in a folder like /css to / then the path to the image needs to be changed to url(css/some-file.png). In this case, rebaseRelativeTo would be css. You probably don't want to set this when you are using html().

strict, Boolean, default false

When strict is true, a missing resource will cause the inliner to halt and return an error in the callback. The default behavior is to log a warning to the console and continue inlining with the available resources, which is more similar to how a web page behaves.

requestResource, Function, default undefined

Allows to adjust issued requests. E.g., add authentication tokens to requested URLs. The function is called with { uri, encoding, gzip } object as its parameter. It can replace builtin node-fetch with your own solution.

scriptTransform, Function( content, callback ), default undefined

Allows to make changes to scripts before they are inlined, such as minifying. Callback is standard node error first, second argument is transformed value.

linkTransform, Function( content, callback ), default undefined

Allows to make changes to links before they are inlined, such as CSS pre-and-post-processors. Callback is standard node error first, second argument is transformed value.

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Run tests with npm test.