UI-1321: Add family to differetiate the devices

apps/common/views/chooseModel-provisioner.html

@@ -24,11 +24,11 @@
 
 		<div class="model-selection">
 			{{#each brands}}
-				<div class="models-brand" data-brand="{{this.name}}">
+				<div class="models-brand" data-brand="{{toLowerCase this.name}}">
 					{{#each this.families}}
 						{{#each this.models}}
-							<div class="model-box" data-family="{{../name}}" data-model="{{@key}}">
-								<div class="model-image {{../../name}}-{{@key}}"/>
+							<div class="model-box" data-family="{{toLowerCase ../name}}" data-model="{{toLowerCase @key}}">
+								<div class="model-image {{toLowerCase ../../name}}-{{toLowerCase ../name}}-{{toLowerCase @key}}" />
 								<div class="model-name">{{@key}}</div>
 							</div>
 						{{/each}}

css/main.css

@@ -390,212 +390,91 @@ input[type="color"],
 	box-shadow: inset 1px 1px #ddd;
 }
 
-/* Devices Brands */
-.brand-box.polycom {
-	background: url('images/brands/polycom.png') center no-repeat;
-}
-.brand-box.yealink {
-	background: url('images/brands/yealink.png') center no-repeat;
-}
-.brand-box.cisco {
-	background: url('images/brands/cisco.png') center no-repeat;
-}
-.brand-box.mocet {
-	background: url('images/brands/mocet.png') center no-repeat;
-}
-.brand-box.snom {
-	background: url('images/brands/snom.png') center no-repeat;
-}
-.brand-box.audiocodes {
-	background: url('images/brands/audiocodes.png') center no-repeat;
-}
-.brand-box.grandstream {
-	background: url('images/brands/grandstream.png') center no-repeat;
+.brand-box,
+.model-image {
+	background: center no-repeat;
 }
 
+/* Devices Brands */
+.brand-box.polycom { background-image: url('images/brands/polycom.png'); }
+.brand-box.yealink { background-image: url('images/brands/yealink.png'); }
+.brand-box.cisco { background-image: url('images/brands/cisco.png'); }
+/*.brand-box.mocet { background-image: url('images/brands/mocet.png'); }
+.brand-box.snom { background-image: url('images/brands/snom.png'); }
+.brand-box.audiocodes { background-image: url('images/brands/audiocodes.png'); }
+.brand-box.grandstream { background-image: url('images/brands/grandstream.png'); }*/
+
 /* Devices Models */
 .model-image {
 	width: 100px;
 	height: 80px;
 }
 
 /* Yealink */
-.model-image.yealink-t18 {
-	background: url('images/models/yealinkt18.jpg') center no-repeat;
-}
-.model-image.yealink-t20 {
-	background: url('images/models/yealinkt20.jpg') center no-repeat;
-}
-.model-image.yealink-t21 {
-	background: url('images/models/yealinkt21.jpg') center no-repeat;
-}
-.model-image.yealink-t22 {
-	background: url('images/models/yealinkt22.jpg') center no-repeat;
-}
-.model-image.yealink-t23,
-.model-image.yealink-t23g {
-	background: url('images/models/yealinkt23.jpg') center no-repeat;
-}
-.model-image.yealink-t26 {
-	background: url('images/models/yealinkt26.jpg') center no-repeat;
-}
-.model-image.yealink-t28 {
-	background: url('images/models/yealinkt28.jpg') center no-repeat;
-}
-.model-image.yealink-t32 {
-	background: url('images/models/yealinkt32.jpg') center no-repeat;
-}
-.model-image.yealink-t38 {
-	background: url('images/models/yealinkt38.jpg') center no-repeat;
-}
-.model-image.yealink-t41 {
-	background: url('images/models/yealinkt41.jpg') center no-repeat;
-}
-.model-image.yealink-t42 {
-	background: url('images/models/yealinkt42.jpg') center no-repeat;
-}
-.model-image.yealink-t46 {
-	background: url('images/models/yealinkt46.jpg') center no-repeat;
-}
-.model-image.yealink-t48 {
-	background: url('images/models/yealinkt48.jpg') center no-repeat;
-}
+/*.model-image.yealink-t1x-t18p { background-image: url('images/models/yealink_t1x_t18p.jpg'); }*/
+.model-image.yealink-t1x-t19p { background-image: url('images/models/yealink_t1x_t19p.jpg'); }
+.model-image.yealink-t2x-t20p { background-image: url('images/models/yealink_t2x_t20p.jpg'); }
+.model-image.yealink-t2x-t21p { background-image: url('images/models/yealink_t2x_t21p.jpg'); }
+.model-image.yealink-t2x-t22p { background-image: url('images/models/yealink_t2x_t22p.jpg'); }
+.model-image.yealink-2tx-t23p { background-image: url('images/models/yealink_t2x_t23p.jpg'); }
+.model-image.yealink-t2x-t26p { background-image: url('images/models/yealink_t2x_t26p.jpg'); }
+.model-image.yealink-t2x-t28p { background-image: url('images/models/yealink_t2x_t28p.jpg'); }
+.model-image.yealink-t3x-t32g { background-image: url('images/models/yealink_t3x_t32g.jpg'); }
+.model-image.yealink-t3x-t38g { background-image: url('images/models/yealink_t3x_t38g.jpg'); }
+.model-image.yealink-t4x-t41p { background-image: url('images/models/yealink_t4x_t41p.jpg'); }
+.model-image.yealink-t4x-t42g { background-image: url('images/models/yealink_t4x_t42g.jpg'); }
+.model-image.yealink-t4x-t46g { background-image: url('images/models/yealink_t4x_t46g.jpg'); }
+.model-image.yealink-t4x-t48g { background-image: url('images/models/yealink_t4x_t48g.jpg'); }
 
 /* Cisco */
-.model-image.cisco-901 {
-	background: url('images/models/cisco901.jpg') center no-repeat;
-}
-.model-image.cisco-921 {
-	background: url('images/models/cisco921.jpg') center no-repeat;
-}
-.model-image.cisco-922 {
-	background: url('images/models/cisco922.jpg') center no-repeat;
-}
-.model-image.cisco-941 {
-	background: url('images/models/cisco941.jpg') center no-repeat;
-}
-.model-image.cisco-942 {
-	background: url('images/models/cisco942.jpg') center no-repeat;
-}
-.model-image.cisco-962 {
-	background: url('images/models/cisco962.jpg') center no-repeat;
-}
-.model-image.cisco-301g {
-	background: url('images/models/cisco301g.jpg') center no-repeat;
-}
-.model-image.cisco-303g {
-	background: url('images/models/cisco303g.jpg') center no-repeat;
-}
-.model-image.cisco-501g {
-	background: url('images/models/cisco501g.jpg') center no-repeat;
-}
-.model-image.cisco-502g {
-	background: url('images/models/cisco502g.jpg') center no-repeat;
-}
-.model-image.cisco-504g {
-	background: url('images/models/cisco504g.jpg') center no-repeat;
-}
-.model-image.cisco-508g {
-	background: url('images/models/cisco508g.jpg') center no-repeat;
-}
-.model-image.cisco-509g {
-	background: url('images/models/cisco509g.jpg') center no-repeat;
-}
-.model-image.cisco-512g {
-	background: url('images/models/cisco512g.jpg') center no-repeat;
-}
-.model-image.cisco-514g {
-	background: url('images/models/cisco514g.jpg') center no-repeat;
-}
-.model-image.cisco-525g {
-	background: url('images/models/cisco525g.jpg') center no-repeat;
-}
-.model-image.cisco-525g2 {
-	background: url('images/models/cisco525g2.jpg') center no-repeat;
-}
+/*.model-image.cisco-901 { background-image: url('images/models/cisco901.jpg'); }
+.model-image.cisco-921 { background-image: url('images/models/cisco921.jpg'); }
+.model-image.cisco-922 { background-image: url('images/models/cisco922.jpg'); }
+.model-image.cisco-941 { background-image: url('images/models/cisco941.jpg'); }
+.model-image.cisco-942 { background-image: url('images/models/cisco942.jpg'); }
+.model-image.cisco-962 { background-image: url('images/models/cisco962.jpg'); }*/
+.model-image.cisco-spa3xx-301g { background-image: url('images/models/cisco_spa3xx_301g.jpg'); }
+.model-image.cisco-spa3xx-303g { background-image: url('images/models/cisco_spa3xx_303g.jpg'); }
+.model-image.cisco-spa5xx-501g { background-image: url('images/models/cisco_spa5xx_501g.jpg'); }
+.model-image.cisco-spa5xx-502g { background-image: url('images/models/cisco_spa5xx_502g.jpg'); }
+.model-image.cisco-spa5xx-504g { background-image: url('images/models/cisco_spa5xx_504g.jpg'); }
+.model-image.cisco-spa5xx-508g { background-image: url('images/models/cisco_spa5xx_508g.jpg'); }
+.model-image.cisco-spa5xx-509g { background-image: url('images/models/cisco_spa5xx_509g.jpg'); }
+.model-image.cisco-spa5xx-512g { background-image: url('images/models/cisco_spa5xx_512g.jpg'); }
+.model-image.cisco-spa5xx-514g { background-image: url('images/models/cisco_spa5xx_514g.jpg'); }
+.model-image.cisco-spa5xx-525g { background-image: url('images/models/cisco_spa5xx_525g.jpg'); }
+.model-image.cisco-spa5xx-525g2 { background-image: url('images/models/cisco_spa5xx_525g2.jpg'); }
 
 /* Polycom */
-.model-image.polycom-1500 {
-	background: url('images/models/polycom1500.jpg') center no-repeat;
-}
-.model-image.polycom-301 {
-	background: url('images/models/polycom301.jpg') center no-repeat;
-}
-.model-image.polycom-320 {
-	background: url('images/models/polycom320.jpg') center no-repeat;
-}
-.model-image.polycom-321 {
-	background: url('images/models/polycom321.jpg') center no-repeat;
-}
-.model-image.polycom-330 {
-	background: url('images/models/polycom330.jpg') center no-repeat;
-}
-.model-image.polycom-331 {
-	background: url('images/models/polycom331.jpg') center no-repeat;
-}
-.model-image.polycom-335 {
-	background: url('images/models/polycom335.jpg') center no-repeat;
-}
-.model-image.polycom-4000 {
-	background: url('images/models/polycom4000.jpg') center no-repeat;
-}
-.model-image.polycom-430 {
-	background: url('images/models/polycom430.jpg') center no-repeat;
-}
-.model-image.polycom-450 {
-	background: url('images/models/polycom450.jpg') center no-repeat;
-}
-.model-image.polycom-5000 {
-	background: url('images/models/polycom5000.jpg') center no-repeat;
-}
-.model-image.polycom-501 {
-	background: url('images/models/polycom501.jpg') center no-repeat;
-}
-.model-image.polycom-550 {
-	background: url('images/models/polycom550.jpg') center no-repeat;
-}
-.model-image.polycom-560 {
-	background: url('images/models/polycom560.jpg') center no-repeat;
-}
-.model-image.polycom-6000 {
-	background: url('images/models/polycom6000.jpg') center no-repeat;
-}
-.model-image.polycom-600 {
-	background: url('images/models/polycom600.jpg') center no-repeat;
-}
-.model-image.polycom-601 {
-	background: url('images/models/polycom601.jpg') center no-repeat;
-}
-.model-image.polycom-650 {
-	background: url('images/models/polycom650.jpg') center no-repeat;
-}
-.model-image.polycom-670 {
-	background: url('images/models/polycom670.jpg') center no-repeat;
-}
-.model-image.polycom-7000 {
-	background: url('images/models/polycom7000.jpg') center no-repeat;
-}
-.model-image.polycom-vvx300,
-.model-image.polycom-vvx310 {
-	background: url('images/models/polycomvvx300.jpg') center no-repeat;
-}
-.model-image.polycom-vvx400,
-.model-image.polycom-vvx410 {
-	background: url('images/models/polycomvvx400.jpg') center no-repeat;
-}
-.model-image.polycom-vvx500 {
-	background: url('images/models/polycomvvx500.jpg') center no-repeat;
-}
-.model-image.polycom-vvx600 {
-	background: url('images/models/polycomvvx600.jpg') center no-repeat;
-}
+.model-image.polycom-spip-301 { background-image: url('images/models/polycom_spip_301.jpg'); }
+.model-image.polycom-spip-320 { background-image: url('images/models/polycom_spip_320.jpg'); }
+.model-image.polycom-spip-321 { background-image: url('images/models/polycom_spip_321.jpg'); }
+.model-image.polycom-spip-330 { background-image: url('images/models/polycom_spip_330.jpg'); }
+/*.model-image.polycom-spip-331 { background-image: url('images/models/polycom_spip_331.jpg'); }*/
+.model-image.polycom-spip-335 { background-image: url('images/models/polycom_spip_335.jpg'); }
+.model-image.polycom-spip-430 { background-image: url('images/models/polycom_spip_430.jpg'); }
+.model-image.polycom-spip-450 { background-image: url('images/models/polycom_spip_450.jpg'); }
+.model-image.polycom-spip-501 { background-image: url('images/models/polycom_spip_501.jpg'); }
+.model-image.polycom-spip-550 { background-image: url('images/models/polycom_spip_550.jpg'); }
+.model-image.polycom-spip-560 { background-image: url('images/models/polycom_spip_560.jpg'); }
+.model-image.polycom-spip-600 { background-image: url('images/models/polycom_spip_600.jpg'); }
+.model-image.polycom-spip-601 { background-image: url('images/models/polycom_spip_601.jpg'); }
+.model-image.polycom-spip-650 { background-image: url('images/models/polycom_spip_650.jpg'); }
+.model-image.polycom-spip-670 { background-image: url('images/models/polycom_spip_670.jpg'); }
+/*.model-image.polycom-spip-1500 { background-image: url('images/models/polycom_spip_1500.jpg'); }*/
+.model-image.polycom-spip-4000 { background-image: url('images/models/polycom_spip_4000.jpg'); }
+.model-image.polycom-spip-5000 { background-image: url('images/models/polycom_spip_5000.jpg'); }
+.model-image.polycom-spip-6000 { background-image: url('images/models/polycom_spip_6000.jpg'); }
+.model-image.polycom-spip-7000 { background-image: url('images/models/polycom_spip_7000.jpg'); }
+.model-image.polycom-vvx-300,
+.model-image.polycom-vvx-310 { background-image: url('images/models/polycom_vvx_300.jpg'); }
+.model-image.polycom-vvx-400,
+.model-image.polycom-vvx-410 { background-image: url('images/models/polycom_vvx_400.jpg'); }
+.model-image.polycom-vvx-500 { background-image: url('images/models/polycom_vvx_500.jpg'); }
+.model-image.polycom-vvx-600 { background-image: url('images/models/polycom_vvx_600.jpg'); }
 
 /* Audiocodes */
-.model-image.audiocodes-420 {
-	background: url('images/models/audiocodes420.jpg') center no-repeat;
-}
+/*.model-image.audiocodes-420 { background-image: url('images/models/audiocodes420.jpg'); }*/
 
 /* Grandstream */
-.model-image.grandstream-ht502 {
-	background: url('images/models/grandstreamht502.jpg') center no-repeat;
-}
+/*.model-image.grandstream-ht502 { background-image: url('images/models/grandstreamht502.jpg'); }*/