Add icon for some service providers

api/service_specs.go

@@ -48,6 +48,7 @@ import (
 func init() {
 	router.GET("/api/service_specs", ApiHandler(getServiceSpecs))
 	router.GET("/api/service_specs/:ssid", ApiHandler(getServiceSpec))
+	router.GET("/api/service_specs/:ssid/icon.png", ApiHandler(getServiceSpecIcon))
 }
 
 type service_field struct {
@@ -75,7 +76,9 @@ func getServiceSpecs(_ *config.Options, p httprouter.Params, body io.Reader) Res
 	}
 }
 
-func getServiceSpecImg(ssid string) Response {
+func getServiceSpecIcon(_ *config.Options, p httprouter.Params, body io.Reader) Response {
+	ssid := string(p.ByName("ssid"))
+
 	if cnt, ok := svcs.Icons[strings.TrimSuffix(ssid, ".png")]; ok {
 		return &FileResponse{
 			contentType: "image/png",

htdocs/src/components/hFamilyTabs.vue

@@ -35,35 +35,55 @@
   <b-tabs :content-class="contentClass">
     <b-tab title="All" active>
       <b-list-group>
-        <b-list-group-item v-for="(svc, idx) in availableNewServices()" :key="idx" :active="value === idx" button @click="$emit('input', idx)">
-          {{ svc.name }}
-          <small class="text-muted">{{ svc.description }}</small>
-          <b-badge v-for="(categorie, idcat) in svc.categories" :key="idcat" variant="gray" class="float-right ml-1">
-            {{ categorie }}
-          </b-badge>
+        <b-list-group-item v-for="(svc, idx) in availableNewServices()" :key="idx" :active="value === idx" button class="d-flex" @click="$emit('input', idx)">
+          <div v-if="svc._svcicon" class="d-inline-block align-self-center text-center" style="width: 75px;">
+            <img :src="svc._svcicon" :alt="svc.name" style="max-width: 100%; max-height: 2.5em; margin: -.6em .4em -.6em -.6em">
+          </div>
+          <div>
+            {{ svc.name }}
+            <small class="text-muted">{{ svc.description }}</small>
+            <b-badge v-for="(categorie, idcat) in svc.categories" :key="idcat" variant="gray" class="float-right ml-1">
+              {{ categorie }}
+            </b-badge>
+          </div>
         </b-list-group-item>
-        <b-list-group-item v-for="(svc, idx) in disabledNewServices()" :key="idx" :active="value === idx" disabled @click="$emit('input', idx)">
-          <span :title="svc.description">{{ svc.name }}</span> <small class="font-italic text-danger">{{ filteredNewServices[idx] }}</small>
-          <b-badge v-for="(categorie, idcat) in svc.categories" :key="idcat" variant="gray" class="float-right ml-1">
-            {{ categorie }}
-          </b-badge>
+        <b-list-group-item v-for="(svc, idx) in disabledNewServices()" :key="idx" :active="value === idx" class="d-flex" disabled @click="$emit('input', idx)">
+          <div v-if="svc._svcicon" class="d-inline-block align-self-center text-center" style="width: 75px;">
+            <img :src="svc._svcicon" :alt="svc.name" style="max-width: 100%; max-height: 2.5em; margin: -.6em .4em -.6em -.6em">
+          </div>
+          <div>
+            <span :title="svc.description">{{ svc.name }}</span> <small class="font-italic text-danger">{{ filteredNewServices[idx] }}</small>
+            <b-badge v-for="(categorie, idcat) in svc.categories" :key="idcat" variant="gray" class="float-right ml-1">
+              {{ categorie }}
+            </b-badge>
+          </div>
         </b-list-group-item>
       </b-list-group>
     </b-tab>
     <b-tab v-for="(family, idxf) in families" :key="idxf" :title="family.label">
       <b-list-group>
-        <b-list-group-item v-for="(svc, idx) in availableNewServices(family.family)" :key="idx" :active="value === idx" button @click="$emit('input', idx)">
-          {{ svc.name }}
-          <small class="text-muted">{{ svc.description }}</small>
-          <b-badge v-for="(categorie, idcat) in svc.categories" :key="idcat" variant="gray" class="float-right ml-1">
-            {{ categorie }}
-          </b-badge>
+        <b-list-group-item v-for="(svc, idx) in availableNewServices(family.family)" :key="idx" :active="value === idx" button class="d-flex" @click="$emit('input', idx)">
+          <div v-if="svc._svcicon" class="d-inline-block align-self-center text-center" style="width: 75px;">
+            <img :src="svc._svcicon" :alt="svc.name" style="max-width: 100%; max-height: 2.5em; margin: -.6em .4em -.6em -.6em">
+          </div>
+          <div>
+            {{ svc.name }}
+            <small class="text-muted">{{ svc.description }}</small>
+            <b-badge v-for="(categorie, idcat) in svc.categories" :key="idcat" variant="gray" class="float-right ml-1">
+              {{ categorie }}
+            </b-badge>
+          </div>
         </b-list-group-item>
-        <b-list-group-item v-for="(svc, idx) in disabledNewServices(family.family)" :key="idx" :active="value === idx" disabled @click="$emit('input', idx)">
-          <span :title="svc.description">{{ svc.name }}</span> <small class="font-italic text-danger">{{ filteredNewServices[idx] }}</small>
-          <b-badge v-for="(categorie, idcat) in svc.categories" :key="idcat" variant="gray" class="float-right ml-1">
-            {{ categorie }}
-          </b-badge>
+        <b-list-group-item v-for="(svc, idx) in disabledNewServices(family.family)" :key="idx" :active="value === idx" class="d-flex" disabled @click="$emit('input', idx)">
+          <div v-if="svc._svcicon" class="d-inline-block align-self-center text-center" style="width: 75px;">
+            <img :src="svc._svcicon" :alt="svc.name" style="max-width: 100%; max-height: 2.5em; margin: -.6em .4em -.6em -.6em">
+          </div>
+          <div>
+            <span :title="svc.description">{{ svc.name }}</span> <small class="font-italic text-danger">{{ filteredNewServices[idx] }}</small>
+            <b-badge v-for="(categorie, idcat) in svc.categories" :key="idcat" variant="gray" class="float-right ml-1">
+              {{ categorie }}
+            </b-badge>
+          </div>
         </b-list-group-item>
       </b-list-group>
     </b-tab>

services/decode.go

@@ -78,7 +78,11 @@ func RegisterService(creator ServiceCreator, analyzer ServiceAnalyzer, infos Ser
 	name := baseType.String()
 	log.Println("Registering new service:", name)
 
+	// Override given parameters by true one
 	infos.Type = name
+	if _, ok := Icons[name]; ok {
+		infos.Icon = "/api/service_specs/" + name + "/icon.png"
+	}
 
 	svc := &Svc{
 		creator,

services/interfaces.go

@@ -67,6 +67,7 @@ type ServiceRestrictions struct {
 type ServiceInfos struct {
 	Name         string              `json:"name"`
 	Type         string              `json:"_svctype"`
+	Icon         string              `json:"_svcicon,omitempty"`
 	Description  string              `json:"description"`
 	Family       string              `json:"family"`
 	Categories   []string            `json:"categories"`